@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

    /* --- 1. GLOBAL VARIABLES (ARCHIVIST THEME DEFAULT) --- */
    :root {
      --bg: #050505;
      
      /* ARCHIVIST: High-Contrast Neon Green */
      --term-green: #00ff88;           /* Main Text */
      --term-dim: #00ff88;             /* History: Same color, handled via Opacity now */
      --term-alert: #ff3b2f;           /* Error: Red */
      --term-remote: #fbbf24;          /* Remote: Amber/Gold */
      --term-edit: #22d3ee;            /* Sys: Cyan */
      --term-chat: #e879f9;            /* Chat: Light Purple */
      --ok-badge: #00ff88;             
      
      /* Global UI Colors */
      --ui-border: #333;
      --ui-panel: #111;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--term-green);
      font-family: 'Share Tech Mono', monospace;
      font-size: 16px;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 20px;
    }

    /* Scanline Overlay */
    body::before {
      content: " "; display: block; position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                  linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
      z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none;
    }

    /* --- 2. THEME OVERRIDES --- */

    /* SASM: Electric Blue & Cyber Cyan */
    body.theme-sasm {
        --bg: #010205;                 
        --term-green: #60a5fa;         /* Main: Bright Sky Blue */
        --term-dim: #94a3b8;           /* Dim: Blue-Grey */
        --term-alert: #f87171;         /* Error: Soft Red */
        --term-remote: #c084fc;        /* Remote: Bright Purple */
        --term-edit: #38bdf8;          /* Edit: Cyan */
        --term-chat: #818cf8;          /* Chat: Indigo */
        --ok-badge: #60a5fa;           
    }
    
    /* ZENITH: Sharp Monochrome */
    body.theme-zenith {
        --bg: #000000;                 
        --term-green: #ffffff;         
        --term-dim: #e5e5e5;           /* Dim: Bright Silver (Was #a3a3a3) */
        --term-alert: #ff0000;         
        --term-remote: #ff0000;        
        --term-edit: #e5e5e5;          
        --term-chat: #e5e5e5;          
        --ok-badge: #ffffff;
    }

    /* ZENITH SPECIAL: No opacity fade, use colors instead */
    body.theme-zenith .dim, 
    body.theme-zenith .command-echo {
        opacity: 1 !important;
        color: var(--term-dim) !important;
    }
    
    /* ZENITH SPECIAL: Remove Glow but keep Bold */
    body.theme-zenith #output,
    body.theme-zenith .sys,
    body.theme-zenith .error,
    body.theme-zenith .prompt { 
        text-shadow: none !important;
        /* Removed font-weight: 500 restriction so it stays BOLD */
    }
    
    body.theme-zenith::before {
        background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.2)); 
    }

    body.theme-zenith #cmd-input,
    body.theme-zenith .prompt {
        color: #ffffff !important;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        opacity: 1 !important;
    }

    /* --- 3. LAYOUT & UTILITIES --- */

    #output {
      flex: 1; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
      margin-bottom: 10px; 
      text-shadow: 0 0 4px var(--term-dim); 
    }

    /* Remote Session Overrides */
    body.remote-session {
        color: var(--term-remote);
    }
    body.remote-session #output {
        color: var(--term-remote);
        text-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
    }
    body.remote-session #cmd-input {
        color: var(--term-remote);
    }
    body.remote-session .dim, 
    body.remote-session .command-echo {
        color: var(--term-remote) !important;
    }

    /* Utility Classes */
    .error { color: var(--term-alert); text-shadow: 0 0 5px var(--term-alert); }
    .sys { color: var(--term-edit); font-weight:bold; }
    .remote-out { color: var(--term-remote); }
    .ok-badge { color: var(--ok-badge); font-weight: bold; }
    
    /* Dimmed Text (Ghostly Fade for Archivists/SASM) */
    .dim { 
        color: var(--term-green) !important; /* Inherit main color */
        opacity: 0.5 !important;             /* Fade it out */
    }

    /* Command Echo (The user input line in history) */
    .command-echo {
        color: var(--term-green) !important;
        font-weight: bold;
        opacity: 0.5;                        /* Matches the .dim fade */
        margin-bottom: 2px;
        border-left: 2px solid var(--term-dim);
        padding-left: 8px;
    }

    /* Target Display */
    #target-display {
        color: var(--term-remote);
        margin-bottom: 5px;
        font-weight: bold;
        display: none; 
        padding-left: 2px;
    }

    #input-line {
      display: flex; gap: 10px; align-items: center; position: relative; z-index: 5;
    }

    .prompt { color: var(--term-green); font-weight: bold; }

    #cmd-input {
      flex: 1; background: transparent; border: none; outline: none;
      color: var(--term-green); font-family: inherit; font-size: 16px;
      padding: 0; margin: 0;
    }

    /* Overlays */
    .overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.9);
        display: none; flex-direction: column; 
        padding: 40px; z-index: 50;
    }
    .overlay-header {
        background: #222; color: #fff; padding: 5px 15px; font-size: 0.8em;
        border: 1px solid #444; border-bottom: none;
    }
    #editor-area {
        flex: 1; background: #000; color: #0f0; font-family: 'Share Tech Mono', monospace;
        font-size: 1.1em; padding: 20px; border: 1px solid #444; outline: none; resize: none;
    }
    #image-content {
        max-width: 90vw; 
        max-height: 80vh; 
        object-fit: contain;
        border: 4px solid #333;
        box-shadow: 0 0 50px rgba(0,0,0,0.8);
        background: #000;
    }
    #video-content {
        width: 80%; aspect-ratio: 16/9; border: 4px solid #333;
    }
    #text-viewer-content {
        flex: 1; background: #050505; color: #e5e5e5; padding: 30px;
        overflow-y: auto; font-size: 1.1em; border: 1px solid #333;
        line-height: 1.5; white-space: pre-wrap;
    }

    /* Linkification */
    .term-link { 
        color: var(--term-edit); 
        text-decoration: underline; 
        cursor: pointer; 
    }
    .term-link:hover { 
        background: rgba(255, 255, 255, 0.15); 
        color: inherit;
    }

    .click-copy {
        cursor: pointer;
        text-decoration: underline dotted rgba(255,255,255,0.3);
        transition: all 0.1s;
    }
    .click-copy:hover {
        background: rgba(255, 255, 255, 0.1);
        text-decoration: underline solid;
    }
    .click-copy:active {
        transform: scale(0.98);
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* Minigame Text */
    .status-denied { color: var(--term-alert); text-shadow: 0 0 15px var(--term-alert); }
    .status-accepted { color: var(--term-green); text-shadow: 0 0 15px var(--term-green); }
    
    /* Hard Message Box */
    #hard-msg-box {
        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
        background: var(--term-alert); color: #000; padding: 40px;
        font-weight: bold; font-size: 2em; text-align: center;
        border: 4px solid #fff; z-index: 100; display: none;
    }
    
    /* Memory Game Specifics */
    .mg-grid.memory-mode {
        display: grid; gap: 10px; padding: 20px; max-width: 90vw; 
    }

    /* Buffer Clash (PvP) */
    .mg-grid {
        display: grid;
        justify-content: center;
        align-content: center;
    }
    .mg-grid.clash-grid {
        grid-template-columns: repeat(7, 60px);
        grid-template-rows: repeat(5, 60px);
        gap: 15px;
    }
    .clash-tile {
        width: 60px;
        height: 60px;
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid var(--term-dim);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1em;
        font-weight: bold;
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: default;
        position: relative;
        overflow: hidden;
        color: var(--term-dim);
    }
    .clash-tile.captured.local {
        background: var(--term-green) !important;
        color: #000 !important;
        box-shadow: 0 0 15px var(--term-green);
        border-color: #fff;
    }
    .clash-tile.captured.opponent {
        background: var(--term-alert) !important;
        color: #000 !important;
        box-shadow: 0 0 15px var(--term-alert);
        border-color: #fff;
    }

    .clash-action-locked {
        font-size: 0.8em;
        color: #fff;
        text-shadow: 0 0 10px #fff;
        margin-top: 5px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
        animation: pulse-white 0.5s infinite alternate;
    }

    .mem-cell {
        background: rgba(0, 20, 0, 0.5);
        border: 1px solid var(--term-dim);
        color: var(--term-green);
        padding: 10px 10px; /* Reduced horizontal padding */
        min-width: 60px;    /* Fixed minimum width for square-ish look */
        height: 60px;       /* Matching height to make it more square */
        text-align: center;
        cursor: pointer;
        user-select: none;
        transition: all 0.1s;
        text-shadow: 0 0 2px var(--term-dim);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mem-cell.active { background: var(--term-green); color: #000; box-shadow: 0 0 15px var(--term-green); font-weight: bold; }
    .mem-cell.selected { background: var(--term-remote); color: #000; border-color: var(--term-remote); box-shadow: 0 0 10px var(--term-remote); }
    .mem-cell.matched { opacity: 0.2; border-color: #333; color: #555; background: #000; }
    .mem-cell.key-fragment { background: #fff !important; color: #000 !important; border-color: #fff !important; box-shadow: 0 0 20px #fff !important; animation: pulse-white 0.5s infinite alternate; }
    .mem-cell.corrupted { background: var(--term-alert) !important; color: #fff !important; text-decoration: line-through; transform: skewX(-10deg); animation: glitch 0.1s infinite; }
    .mem-cell.matched.active { opacity: 1 !important; background: var(--term-dim); color: #000; box-shadow: 0 0 10px var(--term-dim); }

    /* Ghost Fragments & Timers */
    .ghost-fragment { position: fixed; background: #fff; color: #000; padding: 10px 5px; font-weight: bold; z-index: 100; pointer-events: none; box-shadow: 0 0 20px #fff; transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1); }
    @keyframes pulse-white { from { box-shadow: 0 0 10px #fff; } to { box-shadow: 0 0 25px #fff; } }
    
    .mg-timer-wrapper { width: 300px; margin-bottom: 20px; }
    .mg-timer-label { color: var(--term-alert); font-size: 0.8em; margin-bottom: 5px; display: flex; justify-content: space-between; }
    .mg-timer-bar { width: 100%; height: 12px; border: 1px solid var(--term-alert); background: rgba(50, 0, 0, 0.3); }
    .mg-timer-fill { height: 100%; background: var(--term-alert); width: 0%; transition: width 0.1s linear; box-shadow: 0 0 10px var(--term-alert); }
    
    #mg-result-bar { margin-top: 20px; font-size: 2.5em; font-weight: bold; text-align: center; letter-spacing: 2px; opacity: 0; transition: opacity 0.2s; height: 50px; display: flex; gap: 15px; justify-content: center; align-items: center; }
    .mg-lbl { color: #fff; text-shadow: 0 0 5px #fff; }
    .mg-target-info { margin-bottom: 30px; font-size: 1.5em; color: #fff; display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; max-width: 800px; }
    .mg-target-badge { padding: 4px 12px; border: 2px solid var(--term-green); border-radius: 4px; color: var(--term-green); font-size: 1.3em; font-weight: bold; }
    .mg-target-badge.found { background: var(--term-dim); color: #000; text-decoration: line-through; opacity: 0.6; }

    /* Alert Animations */
    .sys-msg { border-left: 3px solid; padding-left: 10px; margin: 10px 0; }
    .success-highlight { color: #ccffcc; text-shadow: 0 0 10px #00ff88; font-weight: bold; }
    .glitch-text { animation: glitch 0.1s infinite; }
    @keyframes glitch { 0% { transform: translate(0) } 25% { transform: translate(-2px, 1px) } 50% { transform: translate(1px, -1px) } 75% { transform: translate(-1px, 2px) } 100% { transform: translate(0) } }
    .corrupted { color: var(--term-alert); opacity: 0.8; font-family: 'Courier New', monospace; }

    /* Hex Grid Minigame Specifics */
    .mg-cell {
        color: var(--term-green);
        padding: 10px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        transition: all 0.1s;
        font-weight: bold;
        font-size: 1.4em;
        letter-spacing: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 4px rgba(0, 255, 136, 0.15); /* Subtle shadow border */
        border: 1px solid rgba(0, 255, 136, 0.05); /* Very faint edge */
    }
    .mg-cell.active {
        background: transparent;
        color: #fff;
        outline: 2px solid var(--term-green);
        box-shadow: 0 0 20px var(--term-green), inset 0 0 10px var(--term-green);
        transform: scale(1.1);
        z-index: 10;
    }

    /* --- 5. KEYPAD OVERRIDE STYLES --- */
    .keypad-grid {
        display: grid;
        grid-template-columns: repeat(3, 70px);
        gap: 15px;
    }
    .kp-btn {
        height: 70px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--term-dim);
        color: var(--term-green);
        font-family: inherit;
        font-size: 1.5em;
        cursor: pointer;
        transition: all 0.1s;
    }
    .kp-btn:hover { background: var(--term-green); color: #000; box-shadow: 0 0 15px var(--term-green); }
    .kp-btn:active { transform: scale(0.95); }
    .kp-util { color: var(--term-alert); border-color: var(--term-alert); }
    .kp-util:hover { background: var(--term-alert); box-shadow: 0 0 15px var(--term-alert); }

    .digit-box {
        width: 40px;
        height: 50px;
        border: 2px solid var(--term-dim);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5em;
        font-weight: bold;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .digit-box.correct { 
        background: #00ff88 !important; 
        color: #000 !important; 
        border-color: #00ff88 !important; 
        box-shadow: 0 0 10px #00ff88 !important; 
    }
    .digit-box.present { 
        background: #fbbf24 !important; 
        color: #000 !important; 
        border-color: #fbbf24 !important; 
        box-shadow: 0 0 10px #fbbf24 !important; 
    }
    .digit-box.absent { opacity: 0.3; border-color: #444; }
    .digit-box.active { border-color: #fff; box-shadow: 0 0 10px #fff; }

    /* Zenith Keypad Overrides (Keep button glow but allow universal feedback) */
    body.theme-zenith .kp-btn:hover {
        background: #00f2ff;
        color: #000;
        box-shadow: 0 0 15px #00f2ff;
    }

    /* Buffer Clash (PvP) Reworked States */
    .mg-cell.shielded {
        border-color: #fff !important;
        background: rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 0 15px #fff;
    }
    .mg-cell.shielded::after {
        content: "\f3ed"; /* fa-shield-alt things */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        font-size: 1.2em;
        opacity: 0.8;
    }

    .mg-cell.glitched {
        border-color: var(--term-alert) !important;
        background: repeating-linear-gradient(45deg, #000, #000 2px, #300 2px, #300 4px) !important;
        animation: cell-glitch 0.2s infinite;
    }
    @keyframes cell-glitch {
        0% { transform: translate(0); opacity: 1; }
        50% { transform: translate(1px, -1px); opacity: 0.8; }
        100% { transform: translate(-1px, 1px); opacity: 1; }
    }

    .mg-cell.queued {
        border-style: dashed;
        border-width: 3px;
        animation: cell-pulse 1s infinite;
    }
    @keyframes cell-pulse {
        0% { opacity: 0.5; }
        50% { opacity: 1; border-color: #fff; }
        100% { opacity: 0.5; }
    }

    /* --- 4. ANIMATIONS --- */
    @keyframes pulse-glow {
        0% { box-shadow: 0 0 5px currentColor; }
        50% { box-shadow: 0 0 20px currentColor; }
        100% { box-shadow: 0 0 5px currentColor; }
    }
    .list-item.active {
        background: rgba(255, 255, 255, 0.1);
        border-left: 4px solid var(--accent);
    }
    .origin-badge {
        font-size: 0.7em;
        font-weight: bold;
        padding: 1px 4px;
        border-radius: 3px;
        border: 1px solid;
        margin-right: 5px;
    }
    .origin-arch { background: rgba(0, 255, 136, 0.1); color: var(--term-green); border-color: var(--term-green); }
    .origin-sasm { background: rgba(96, 165, 250, 0.1); color: #60a5fa; border-color: #60a5fa; }
    .origin-zenith { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: #a3a3a3; }

    /* --- 6. EMAIL CLIENT OVERLAY STYLES --- */
    .modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.85);
        display: flex; align-items: center; justify-content: center;
        z-index: 1000;
    }
    .modal-box {
        background: #050505;
        border: 1px solid var(--ui-border);
        box-shadow: 0 0 50px rgba(0,0,0,0.8);
        border-radius: 4px;
        position: relative;
        overflow: hidden;
    }
    .email-card {
        border-left: 3px solid transparent;
    }
    .email-card:hover {
        background: rgba(255, 255, 255, 0.05);
    }
    .email-card.active {
        background: rgba(0, 255, 136, 0.1);
        border-left-color: var(--term-green);
    }
    #email-list::-webkit-scrollbar { width: 4px; }
    #email-list::-webkit-scrollbar-thumb { background: #222; }
    
    .btn {
        font-family: inherit;
        font-size: 0.9em;
        font-weight: bold;
        padding: 8px 16px;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .btn-ghost { background: transparent; color: #888; border-color: #333; }
    .btn-ghost:hover { background: rgba(255,255,255,0.05); color: #fff; border-color: #666; }
    .btn-ghost.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    
    .btn-success { background: var(--term-green); color: #000; border-color: var(--term-green); }
    .btn-success:hover { background: #fff; box-shadow: 0 0 15px var(--term-green); }
    
    .btn-warning { background: var(--term-remote); color: #000; border-color: var(--term-remote); }
    .btn-warning:hover { background: #fff; box-shadow: 0 0 15px var(--term-remote); }

    .btn-danger { background: var(--term-alert); color: #000; border-color: var(--term-alert); }
    .btn-danger:hover { background: #fff; box-shadow: 0 0 15px var(--term-alert); }

    .form-grid label {
        display: block;
        margin-bottom: 5px;
        font-size: 0.8em;
        font-weight: bold;
        color: #666;
    }
    .form-grid input, .form-grid select, .form-grid textarea {
        width: 100%;
        padding: 10px;
        background: #111;
        border: 1px solid #333;
        color: #fff;
        font-family: inherit;
        outline: none;
    }
    .form-grid input:focus, .form-grid textarea:focus {
        border-color: var(--accent);
        background: #151515;
    }