/* Base Styling with Compact Layout (90% zoom effect) */
html {
    font-size: 14px; /* Reduced from default 16px for compact feel */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    padding-bottom: 40px; /* Reduced from 50px */
    font-size: var(--base-font-size);
    line-height: 1.3; /* Reduced from 1.5 for compactness */
}

/* Compact Typography */
h1 { font-size: 1.8rem; margin-bottom: 0.75rem; }
h2 { font-size: 1.6rem; margin-bottom: 0.7rem; }
h3 { font-size: 1.4rem; margin-bottom: 0.65rem; }
h4 { font-size: 1.2rem; margin-bottom: 0.6rem; }
h5 { font-size: 1.1rem; margin-bottom: 0.55rem; }
h6 { font-size: 1rem; margin-bottom: 0.5rem; }

p { margin-bottom: 0.75rem; }
small { font-size: 0.8rem; }

/* Compact Container */
.container {
    padding-left: 12px;
    padding-right: 12px;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}

@media (min-width: 768px) {
    .container { max-width: 720px; }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

/* Dark mode text colors */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--text-color);
}

[data-theme="dark"] .text-muted {
    color: var(--console-muted) !important;
}