:root {
    /* Default theme (4.4.1): a softer night palette. The background is lifted
       off pure black and cards sit a step above it, text is off-white and the
       blue is calmer, so long sessions are easier on the eyes. */
    --background: #13161c;
    /* --surface: translucent, for decorative/background panels that may
       intentionally let the wallpaper or app content show through.
       --surface-color: the OPAQUE equivalent (same hue, alpha 1) - every
       theme block in themes.css defines both. Foreground surfaces that must
       fully cover whatever is behind them (popups, dropdowns, modals,
       floating windows) use --surface-color, never --surface. */
    --surface: rgba(25, 29, 37, 0.92);
    --surface-color: #191d25;
    --input-bg: #1e232c;
    --outline: transparent;
    --glow: rgba(0, 0, 0, 0.5);
    --on-surface: #d2d7df;
    --accent-primary: #6aa4f5;
    --accent-secondary: #8a93a0;
    --error: #ef6461;
    --success: #45b36b;
    --font-main: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* UI Blur intensity, independent of Wallpaper Blur & Interface Themes.
       Only consumed by rules gated behind html.ui-blur-enabled - see components.css. */
    --ui-blur-strength: 0px;
}

/* Output Text and Labels */

/* High-Contrast Text Color & Selection Rules */

.os-container { width: 100%; height: 100%; padding: 40px 0 0 0; display: flex; justify-content: center; align-items: flex-start; }
.terminal {
    width: 100%; max-width: none; height: calc(100vh - 40px);
    background-color: var(--surface);
    border-radius: 0;
    box-shadow: none;
    border: none; font-family: var(--font-mono);
    display: flex; flex-direction: column; opacity: 0; transform: translateY(20px);
    animation: fadeIn 0.3s 0.2s ease-out forwards;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
    overflow: hidden;
    position: relative;
}

.terminal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    background-image: var(--wallpaper-image);
    z-index: 0;
}

.terminal.has-wallpaper {
    --surface: rgba(0, 0, 0, 0);
}

.terminal.has-wallpaper .command {
    background-color: rgba(0, 0, 0, 0.6);
}

.terminal.has-wallpaper .terminal-header {
    background-color: rgba(0, 0, 0, 0.6);
}

.terminal.has-wallpaper .output p,
.terminal.has-wallpaper .output div,
.terminal.has-wallpaper .output pre {
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.terminal-header {
    background-color: var(--surface);
    padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0;
    transition: background-color 0.2s ease;
    position: relative; z-index: 2;
    min-height: 40px;
}

.terminal-title { color: var(--on-surface); font-size: var(--terminal-font-size, 0.9rem); font-weight: 500; opacity: 0.9; }

.output { padding: 1.5rem; flex-grow: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; line-height: 1.7; font-size: var(--terminal-font-size, 0.9rem); user-select: none; position: relative; z-index: 2; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.output > * { animation: textFadeIn 0.2s cubic-bezier(0.2, 0, 0, 1) forwards; }
.output p, .output div { margin-bottom: 0.5rem; color: var(--on-surface); word-break: break-word; white-space: normal; }
.output pre { margin-bottom: 0.5rem; color: var(--on-surface); word-break: break-word; white-space: pre-wrap; }
.highlight { color: var(--accent-primary); }
.highlight-secondary { color: var(--accent-secondary); }







.output::-webkit-scrollbar { width: 8px; }
.output::-webkit-scrollbar-track { background: transparent; }
.output::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.os-container { width: 100%; height: 100%; padding: 40px 0 0 0; display: flex; justify-content: center; align-items: flex-start; }
.terminal {
    width: 100%; max-width: none; height: calc(100vh - 40px);
    background-color: var(--surface);
    border-radius: 0;
    box-shadow: none;
    border: none; font-family: var(--font-mono);
    display: flex; flex-direction: column; opacity: 0; transform: translateY(20px);
    animation: fadeIn 0.3s 0.2s ease-out forwards;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
    overflow: hidden;
    position: relative;
}

.terminal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    background-image: var(--wallpaper-image);
    filter: blur(var(--wallpaper-blur));
    z-index: 0;
    transition: filter 0.2s ease;
}

.terminal.has-wallpaper {
    --surface: rgba(22, 27, 34, 0.7);
}

.terminal.has-wallpaper .output p,
.terminal.has-wallpaper .output div,
.terminal.has-wallpaper .output pre {
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.terminal-header {
    background-color: var(--surface);
    padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: flex-start;
    border-bottom: none; flex-shrink: 0;
    transition: background-color 0.2s ease;
    position: relative; z-index: 2;
    min-height: 40px;
}

.terminal-title { color: var(--on-surface); font-size: var(--terminal-font-size, 0.9rem); font-weight: 500; opacity: 0.9; }

/* Keep the original gray header only for the default theme. Named themes
   inherit their surface color below so the header follows the selected palette. */
html:not(.theme-amoled):not(.theme-solar-flare):not(.theme-nebula):not(.theme-matrix):not(.theme-cyberpunk):not(.theme-oceanic):not(.theme-forest):not(.theme-sunset):not(.theme-monokai):not(.theme-dracula):not(.theme-nord):not(.theme-gruvbox):not(.theme-crimson):not(.theme-gold):not(.theme-arctic):not(.theme-glassmorphism):not(.theme-glass):not(.theme-glass-static):not(.theme-glowmorphism):not(.theme-fluent-ui) .terminal-header {
    background-color: rgba(30, 35, 42, 0.7);
}

.output { padding: 1.5rem; flex-grow: 1; overflow-y: auto; line-height: 1.7; font-size: var(--terminal-font-size, 0.9rem); user-select: none; position: relative; z-index: 2; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.output > * { animation: textFadeIn 0.2s ease; }
.output p, .output div, .output pre { margin-bottom: 0.5rem; color: var(--on-surface); }
.highlight { color: var(--accent-primary); }
.highlight-secondary { color: var(--accent-secondary); }








.output::-webkit-scrollbar { width: 8px; }
.output::-webkit-scrollbar-track { background: transparent; }
.output::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
/* Taps register at once: no double-tap-to-zoom wait on buttons and rows. */
html {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Cookie choice, shown once until you pick. Sits above Setup and the boot screen. */
#cookie-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 30500;
    max-width: 520px;
    margin: 0 auto;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--surface-color, #191d25);
    color: var(--on-surface, #d2d7df);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    font-family: var(--font-main, 'Inter', sans-serif);
    font-size: 0.84rem;
    line-height: 1.45;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#cookie-banner.is-leaving { opacity: 0; transform: translateY(8px); }
#cookie-banner .cookie-banner-text { margin: 0 0 12px; }
#cookie-banner .cookie-banner-text strong { display: block; margin-bottom: 2px; font-size: 0.95rem; }
#cookie-banner .cookie-banner-actions { display: flex; gap: 8px; }
#cookie-banner button {
    flex: 1;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: inherit;
    font: 600 0.88rem var(--font-main, 'Inter', sans-serif);
    cursor: pointer;
}
#cookie-banner button[data-consent="granted"] {
    background: var(--on-surface, #d2d7df);
    color: var(--background, #13161c);
    border-color: transparent;
}