:root {
    --bg: #030303;
    --gold: #D4AF37;
    --red: #FF3E3E;
    --border: #1a1a1a;
    --text: #e0e0e0;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'Space Grotesk', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    overflow: hidden; /* Main app behavior */
}

/* --- THEMES --- */
body.theme-escalated {
    --gold: var(--red);
    --bg: #0a0000;
}

/* --- OVERLAYS --- */
.noise {
    position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0.04;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scanline {
    position: fixed; inset: 0; z-index: 1001; pointer-events: none;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.2) 51%);
    background-size: 100% 4px;
}

/* --- CURSOR --- */
#cursor {
    position: fixed; width: 15px; height: 15px; border: 1px solid var(--gold);
    border-radius: 50%; z-index: 9999; pointer-events: none;
    transition: transform 0.1s ease, background 0.3s;
}

/* --- LAYOUT --- */
main { display: grid; grid-template-columns: 350px 1fr; height: 100vh; border: 1px solid var(--border); }

/* Sidebar */
.sidebar {
    border-right: 1px solid var(--border);
    padding: 40px; display: flex; flex-direction: column; gap: 50px;
    background: rgba(5,5,5,0.8);
}

.terminal-container {
    background: #000; border: 1px solid #222; height: 200px; padding: 15px;
    font-size: 0.75rem; overflow-y: hidden; position: relative;
}
.terminal-header { color: #444; margin-bottom: 10px; border-bottom: 1px solid #111; }

/* Hero */
.hero { padding: 80px 60px 40px 60px; position: relative; }
h1 { font-size: 12vw; font-weight: 700; line-height: 0.8; letter-spacing: -5px; }
.hero-tagline { color: var(--gold); margin-top: 20px; font-size: 1rem; }

/* Artifact Grid */
.artifact-grid {
    padding: 0 60px 60px 60px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px;
}

.artifact-card {
    background: #080808; border: 1px solid var(--border); padding: 40px;
    position: relative; overflow: hidden; transition: 0.4s;
}

.artifact-card:hover { border-color: var(--gold); transform: translateY(-5px); }

/* The Scanner Feature */
.scanner-line {
    position: absolute; top: -10%; left: 0; width: 100%; height: 2px;
    background: var(--gold); box-shadow: 0 0 15px var(--gold);
    opacity: 0; pointer-events: none;
}
.artifact-card:hover .scanner-line {
    animation: scan 2s linear infinite; opacity: 0.5;
}

@keyframes scan {
    0% { top: -10%; }
    100% { top: 110%; }
}

/* UI Elements */
.mono { font-family: var(--mono); }
.gold { color: var(--gold); }
.dim { color: #555; }
.tech-row { display: flex; gap: 10px; margin-top: 20px; font-size: 0.7rem; }
.tech-row span { border: 1px solid #222; padding: 3px 8px; }

/* Escalation Module */
.escalation-module {
    position: fixed; top: 30px; right: 30px; z-index: 2000;
    display: flex; align-items: center; gap: 15px; background: #000;
    padding: 10px 20px; border: 1px solid var(--border); border-radius: 50px;
    cursor: pointer;
}
.toggle-switch { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }