:root {
    /* SYS_DARK (Default) */
    --bg: #050914; --panel: #0a1128; --text-main: #e2e8f0; --accent: #00f0ff; 
    --accent-dim: rgba(0, 240, 255, 0.2); --alert: #ff003c; --warn: #fcee0a; --safe: #00ff66;
    --font-heading: 'Rajdhani', sans-serif; --font-data: 'Share Tech Mono', monospace;
}

[data-theme="matrix"] {
    --bg: #000500; --panel: #001100; --text-main: #00ff41; --accent: #00ff41; 
    --accent-dim: rgba(0, 255, 65, 0.2); --alert: #ff0000; --warn: #ffff00; --safe: #00ff41;
}

[data-theme="synthwave"] {
    --bg: #120422; --panel: #240a43; --text-main: #ff71ce; --accent: #01cdfe; 
    --accent-dim: rgba(1, 205, 254, 0.2); --alert: #ff0055; --warn: #fffb96; --safe: #05ffa1;
}

[data-theme="dracula"] {
    --bg: #282a36; --panel: #44475a; --text-main: #f8f8f2; --accent: #bd93f9; 
    --accent-dim: rgba(189, 147, 249, 0.2); --alert: #ff5555; --warn: #f1fa8c; --safe: #50fa7b;
}

[data-theme="light"] {
    --bg: #f0f4f8; --panel: #ffffff; --text-main: #102a43; --accent: #003ebd; 
    --accent-dim: rgba(0, 62, 189, 0.1); --alert: #d50000; --warn: #f57f17; --safe: #00c853;
}

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

body {
    background-color: var(--bg); color: var(--text-main);
    font-family: var(--font-data); overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Sci-Fi Scanlines */
.scanlines {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 4px, 3px 100%;
    z-index: 9999; pointer-events: none; opacity: 0.6;
}

.hud-container { max-width: 1000px; margin: 0 auto; padding: 15px; position: relative; z-index: 10; }

/* HEADER */
.cyber-header {
    border-bottom: 2px solid var(--accent); margin-bottom: 20px; padding-bottom: 10px;
    background: linear-gradient(180deg, var(--panel) 0%, transparent 100%);
}

.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }

.brand { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--text-main); }
.brand .glitch { color: var(--accent); text-shadow: 0 0 10px var(--accent); }

.cyber-select {
    background: var(--bg); color: var(--accent); border: 1px solid var(--accent);
    padding: 5px 10px; font-family: var(--font-data); outline: none; cursor: pointer;
    box-shadow: 0 0 5px var(--accent-dim);
}

/* SEARCH */
.search-module { position: relative; display: flex; align-items: center; margin-bottom: 15px; }
.prompt-icon { position: absolute; left: 15px; color: var(--accent); font-weight: bold; }
#search-input {
    width: 100%; background: rgba(0,0,0,0.5); border: 1px solid var(--accent);
    color: var(--text-main); padding: 15px 15px 15px 35px; font-family: var(--font-data);
    font-size: 1.1rem; box-shadow: inset 0 0 10px var(--accent-dim); outline: none;
    transition: all 0.3s;
}
#search-input:focus { box-shadow: 0 0 15px var(--accent-dim), inset 0 0 10px var(--accent-dim); }

.db-stats { position: absolute; right: 15px; font-size: 0.8rem; color: var(--accent); opacity: 0.7; }

/* NAVIGATION */
.cyber-nav { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 5px; }
.cyber-nav::-webkit-scrollbar { display: none; }
.nav-btn {
    background: transparent; color: var(--text-main); border: 1px solid var(--text-main);
    padding: 8px 15px; font-family: var(--font-data); cursor: pointer;
    white-space: nowrap; transition: 0.2s;
}
.nav-btn.active, .nav-btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* GRID */
.data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }

.data-card {
    background: var(--panel); border-left: 4px solid var(--accent);
    padding: 15px; position: relative; cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: 0.2s;
}
.data-card:hover { transform: translateY(-2px); border-color: var(--text-main); box-shadow: 0 0 15px var(--accent-dim); }

.card-cat { font-size: 0.7rem; color: var(--accent); margin-bottom: 5px; }
.card-title { font-family: var(--font-heading); font-size: 1.4rem; margin-bottom: 5px; text-transform: uppercase; }
.card-chem { font-size: 0.75rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* TERMINAL MODAL */
.terminal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}

.terminal-window {
    width: 95%; max-width: 600px; max-height: 90vh;
    background: var(--panel); border: 1px solid var(--accent);
    box-shadow: 0 0 30px var(--accent-dim); display: flex; flex-direction: column;
}

.terminal-header {
    background: var(--accent); color: var(--bg); padding: 10px 15px;
    display: flex; justify-content: space-between; font-weight: bold;
}

.close-terminal { background: transparent; border: none; color: var(--bg); font-family: inherit; font-weight: bold; cursor: pointer; }

.terminal-body { padding: 20px; overflow-y: auto; }

.t-title { font-family: var(--font-heading); font-size: 2.2rem; color: var(--accent); border-bottom: 1px solid var(--accent-dim); margin-bottom: 10px; }
.t-chem { color: var(--text-main); opacity: 0.8; margin-bottom: 20px; font-size: 0.9rem; }

.t-section { margin-bottom: 20px; border-left: 2px dashed var(--accent-dim); padding-left: 10px; }
.t-section-title { color: var(--accent); margin-bottom: 10px; font-size: 0.85rem; }

.dose-display { display: flex; gap: 10px; margin-bottom: 20px; }
.dose-box { flex: 1; border: 1px solid var(--accent-dim); padding: 10px; text-align: center; background: rgba(0,0,0,0.3); }
.dose-box span { display: block; font-size: 0.7rem; margin-bottom: 5px; color: var(--accent); }
.d-low { border-bottom: 2px solid var(--safe); }
.d-med { border-bottom: 2px solid var(--warn); }
.d-high { border-bottom: 2px solid var(--alert); }

.t-text { font-size: 0.9rem; line-height: 1.5; color: var(--text-main); }