/* === Reset & Base === */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #0a0e14;
    color: #c9d1d9;
    font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
    padding: 20px;
    min-height: 100vh;
}

/* === Logo === */
.logo-header { text-align: center; margin-bottom: 20px; padding: 10px 0; }
.logo-header img { max-width: 360px; width: 100%; height: auto; }

/* === Cards === */
.card {
    background: linear-gradient(145deg, #141922, #0f1319);
    border: 1px solid #1e2736;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: border-color 0.3s;
}
.card:hover { border-color: #2a3a4a; }
.card h2 {
    color: #f7931a;
    font-size: 11px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

/* === Links === */
a { color: #f7931a; text-decoration: none; transition: color 0.2s; }
a:hover { color: #ffb74d; }

/* === Utility colors === */
.green  { color: #00e676 !important; }
.red    { color: #ff1744 !important; }
.orange { color: #ff7043 !important; }
.yellow { color: #ffc107 !important; }
.na     { color: #3a4454 !important; font-style: italic; }

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0e14; }
::-webkit-scrollbar-thumb { background: #2a3444; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a4454; }

/* === Theme toggle button === */
.theme-toggle {
    position: fixed; top: 16px; right: 16px; z-index: 1000;
    background: #1e2736; border: 1px solid #2a3a4a; border-radius: 8px;
    color: #6e7a8a; cursor: pointer; font-size: 18px;
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.theme-toggle:hover { border-color: #f7931a; color: #f7931a; }

/* === Light mode overrides === */
body.light { background: #f5f5f5; color: #1a1a2e; }
body.light .card { background: linear-gradient(145deg, #ffffff, #f0f0f0); border-color: #d0d0d0; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
body.light .card:hover { border-color: #b0b0b0; }
body.light .card h2 { color: #c77a0a; }
body.light .na { color: #bbb !important; }
body.light .theme-toggle { background: #fff; border-color: #d0d0d0; color: #888; }
body.light .theme-toggle:hover { border-color: #f7931a; color: #f7931a; }
body.light ::-webkit-scrollbar-track { background: #f5f5f5; }
body.light ::-webkit-scrollbar-thumb { background: #ccc; }
body.light ::-webkit-scrollbar-thumb:hover { background: #aaa; }