/* ====================================================================
 * STRATOS TECH — DESIGN SYSTEM v1.0
 * Production-grade SaaS aesthetic. Dark, accessible, mobile-responsive.
 * ==================================================================== */

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

:root {
 /* Surface palette */
 --bg: #0a0e14;
 --bg-2: #10151c;
 --surface: #131922;
 --surface-2: #1a212a;
 --surface-3: #21283280;
 --border: #2a3340;
 --border-light: #3a4452;

 /* Text */
 --text: #e6edf3;
 --text-2: #b1bac4;
 --muted: #8b949e;
 --dim: #6e7681;

 /* Brand */
 --stratos: #00ffd1;
 --stratos-dim: #00b894;
 --accent: #1f6feb;
 --accent-2: #388bfd;

 /* Status */
 --good: #2ea043;
 --good-dim: rgba(46, 160, 67, 0.15);
 --bad: #da3633;
 --bad-dim: rgba(218, 54, 51, 0.15);
 --warn: #d29922;
 --warn-dim: rgba(210, 153, 34, 0.15);
 --gold: #ffd700;
 --elite: #f78166;
 --mark: #a371f7;

 /* Shadows */
 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
 --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
 --glow-stratos: 0 0 40px rgba(0, 255, 209, 0.25);

 /* Spacing */
 --gap-xs: 6px;
 --gap-sm: 10px;
 --gap-md: 14px;
 --gap-lg: 20px;
 --gap-xl: 28px;

 /* Radius */
 --r-sm: 6px;
 --r-md: 10px;
 --r-lg: 14px;
 --r-xl: 18px;
 --r-pill: 999px;

 /* Typography */
 --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
 "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
 --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo,
 Consolas, monospace;
}

html, body {
 background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
 color: var(--text);
 font-family: var(--font-sans);
 line-height: 1.5;
 font-size: 16px;
 min-height: 100vh;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}

body { padding-bottom: 80px; }

a { color: var(--accent-2); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--stratos); }

code {
 font-family: var(--font-mono);
 font-size: 0.9em;
 background: var(--surface-2);
 padding: 2px 6px;
 border-radius: var(--r-sm);
 border: 1px solid var(--border);
}

::selection { background: var(--stratos); color: var(--bg); }

/* ============== LAYOUT ============== */

.container {
 max-width: 1140px;
 margin: 0 auto;
 padding: 24px 20px;
}

.section { display: none; animation: fadeIn 0.25s; }
.section.active { display: block; }

@keyframes fadeIn {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}

.hide { display: none !important; }

/* ============== TYPOGRAPHY ============== */

h1, h2, h3, h4 {
 font-weight: 700;
 letter-spacing: -0.01em;
 line-height: 1.25;
}

h1 { font-size: 42px; margin-bottom: 8px; font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: 26px; margin: 28px 0 14px; }
h3 { font-size: 18px; margin: 14px 0 8px; }

.title-gradient {
 background: linear-gradient(135deg, var(--stratos) 0%, var(--accent-2) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 color: transparent;
}

.muted { color: var(--muted); }
.dim { color: var(--dim); }

/* ============== BUTTONS ============== */

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 12px 24px;
 background: var(--accent);
 color: #fff;
 border: none;
 border-radius: var(--r-md);
 font-size: 15px;
 font-weight: 600;
 font-family: inherit;
 cursor: pointer;
 transition: all 0.15s;
 text-decoration: none;
 user-select: none;
 line-height: 1;
}

.btn:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
 background: transparent;
 border: 1px solid var(--border);
 color: var(--text);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent-2); }

.btn-stratos {
 background: linear-gradient(135deg, var(--stratos), var(--stratos-dim));
 color: #000;
 font-weight: 700;
}
.btn-stratos:hover { filter: brightness(1.1); background: linear-gradient(135deg, var(--stratos), var(--stratos-dim)); }

.btn-good { background: var(--good); }
.btn-good:hover { background: #3ab250; }

.btn-bad { background: var(--bad); }
.btn-bad:hover { background: #ee4040; }

.btn-warn { background: var(--warn); color: #000; }
.btn-warn:hover { background: #e6ab2e; }

/* ============== LOGIN SCREEN ============== */

.login-wrap {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
 background: radial-gradient(ellipse at top, rgba(0, 255, 209, 0.05), transparent 50%);
}

.login-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-xl);
 padding: 44px 36px;
 max-width: 440px;
 width: 100%;
 text-align: center;
 position: relative;
 overflow: hidden;
 box-shadow: var(--shadow-lg);
}

.login-card::before {
 content: "";
 position: absolute;
 top: -2px; left: -2px; right: -2px;
 height: 3px;
 background: linear-gradient(90deg, var(--stratos), var(--accent-2), var(--stratos));
 background-size: 200% 100%;
 animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
 from { background-position: 0% 0%; }
 to { background-position: 200% 0%; }
}

.brand-logo {
 width: 72px;
 height: 72px;
 margin: 0 auto 18px;
 border-radius: 18px;
 background: linear-gradient(135deg, var(--stratos), var(--accent-2));
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 36px;
 box-shadow: var(--glow-stratos);
}

.tag {
 display: inline-block;
 padding: 3px 12px;
 background: rgba(0, 255, 209, 0.1);
 border: 1px solid var(--stratos);
 color: var(--stratos);
 border-radius: var(--r-pill);
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 font-weight: 700;
 margin-bottom: 16px;
}

.login-input {
 width: 100%;
 padding: 14px 16px;
 background: var(--bg);
 border: 1.5px solid var(--border);
 color: var(--text);
 border-radius: var(--r-md);
 font-size: 16px;
 margin: 6px 0 16px;
 font-family: inherit;
 transition: border-color 0.15s;
}

.login-input:focus {
 outline: none;
 border-color: var(--stratos);
 box-shadow: 0 0 0 3px rgba(0, 255, 209, 0.1);
}

.login-status {
 font-size: 13px;
 color: var(--muted);
 min-height: 20px;
 margin-top: 8px;
}

.login-status.bad { color: var(--bad); }
.login-status.good { color: var(--good); }

/* ============== TOPBAR ============== */

.topbar {
 background: rgba(19, 25, 34, 0.85);
 border-bottom: 1px solid var(--border);
 padding: 14px 20px;
 position: sticky;
 top: 0;
 z-index: 50;
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}

.topbar-inner {
 max-width: 1140px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 flex-wrap: wrap;
}

.topbar-brand {
 display: flex;
 align-items: center;
 gap: 12px;
}

.logo-mini {
 width: 36px;
 height: 36px;
 border-radius: var(--r-md);
 background: linear-gradient(135deg, var(--stratos), var(--accent-2));
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 font-weight: 800;
 color: #000;
}

.brand-text { display: flex; flex-direction: column; }
.brand-text .name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.brand-text .sub { font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 1px; }

.topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.user-chip {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 6px 12px;
 background: var(--surface-2);
 border: 1px solid var(--border);
 border-radius: var(--r-pill);
 font-size: 13px;
}

.user-chip .dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--good);
 box-shadow: 0 0 8px rgba(46, 160, 67, 0.6);
}

/* ============== HERO ============== */

.hero {
 padding: 32px 0 16px;
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 20px;
}

.hero-left .greeting {
 color: var(--muted);
 font-size: 14px;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 margin-bottom: 6px;
 font-weight: 600;
}

.hero-left .name-display {
 font-size: 32px;
 font-weight: 800;
 letter-spacing: -0.02em;
 margin-bottom: 6px;
}

.hero-left .tagline {
 color: var(--muted);
 font-size: 15px;
 max-width: 540px;
 line-height: 1.5;
}

.hero-stats {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
}

.stat-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 padding: 14px 18px;
 min-width: 130px;
 transition: border-color 0.15s;
}

.stat-card:hover { border-color: var(--accent-2); }

.stat-card .lbl {
 font-size: 11px;
 color: var(--muted);
 text-transform: uppercase;
 letter-spacing: 0.06em;
 margin-bottom: 4px;
 font-weight: 600;
}

.stat-card .val {
 font-size: 26px;
 font-weight: 800;
 letter-spacing: -0.02em;
 font-variant-numeric: tabular-nums;
}

.stat-card .val.good { color: var(--good); }
.stat-card .val.warn { color: var(--warn); }
.stat-card .val.bad { color: var(--bad); }

/* ============== SECTION HEADERS ============== */

.section-header {
 margin: 32px 0 14px;
}

.section-header h2 {
 margin: 0 0 4px;
}

/* ============== EXAM GRID ============== */

.exams-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
 gap: 18px;
}

.exam-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-lg);
 padding: 22px;
 transition: all 0.15s;
 position: relative;
 overflow: hidden;
 display: flex;
 flex-direction: column;
}

.exam-card:hover {
 border-color: var(--accent-2);
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}

.exam-card.active::before {
 content: "";
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--good), var(--stratos));
}

.exam-card.coming::before {
 content: "";
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 3px;
 background: var(--warn);
 opacity: 0.5;
}

.exam-card.add-new {
 border-style: dashed;
 cursor: pointer;
 background: var(--surface-3);
}

.exam-card.add-new:hover {
 border-color: var(--stratos);
 background: rgba(0, 255, 209, 0.05);
}

.exam-card .header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 14px;
}

.exam-card .icon {
 font-size: 32px;
 line-height: 1;
}

.exam-card .status {
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 font-weight: 700;
 padding: 3px 10px;
 border-radius: var(--r-pill);
}

.exam-card .status.active {
 background: var(--good-dim);
 color: #7ee787;
}

.exam-card .status.coming {
 background: var(--warn-dim);
 color: #e3b341;
}

.exam-card .title {
 font-size: 18px;
 font-weight: 700;
 margin-bottom: 4px;
}

.exam-card .meta {
 font-size: 13px;
 color: var(--muted);
 margin-bottom: 14px;
 line-height: 1.5;
}

.exam-card .meta-detail {
 display: block;
 font-size: 12px;
 color: var(--dim);
 margin-top: 3px;
}

.exam-card .versions {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-top: 6px;
}

.exam-card.coming .versions { opacity: 0.5; }

.version-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 12px;
 background: var(--surface-2);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 font-size: 13px;
 text-decoration: none;
 color: var(--text);
 transition: all 0.1s;
}

.version-row:hover {
 border-color: var(--stratos);
 color: var(--stratos);
 transform: translateX(2px);
}

.version-row.disabled {
 cursor: not-allowed;
 opacity: 0.5;
}

.version-row.disabled:hover {
 border-color: var(--border);
 color: var(--text);
 transform: none;
}

.version-row .arrow {
 color: var(--muted);
 font-size: 13px;
}

.exam-card .footer-cta {
 margin-top: auto;
 padding-top: 14px;
 font-size: 12px;
 color: var(--muted);
 text-align: center;
 line-height: 1.4;
}

/* ============== HISTORY ============== */

.history-section, .trajectory-section { margin-top: 36px; }

.history-list { display: flex; flex-direction: column; gap: 8px; }

.history-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 16px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 font-size: 14px;
 transition: border-color 0.15s;
 gap: 12px;
 flex-wrap: wrap;
}

.history-row:hover { border-color: var(--accent-2); }

.history-row .left {
 display: flex;
 gap: 12px;
 align-items: center;
 flex-wrap: wrap;
}

.history-row .right {
 display: flex;
 gap: 12px;
 align-items: center;
}

.history-row .badge {
 padding: 3px 10px;
 background: var(--surface-2);
 border-radius: var(--r-pill);
 font-size: 11px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.04em;
}

.history-row .badge.hic { background: rgba(31, 111, 235, 0.18); color: #79b8ff; }
.history-row .badge.cic { background: rgba(247, 129, 102, 0.18); color: #ffb3a0; }
.history-row .badge.s3 { background: rgba(46, 160, 67, 0.18); color: #7ee787; }
.history-row .badge.s30 { background: rgba(163, 113, 247, 0.18); color: #d2b8ff; }
.history-row .badge.re { background: rgba(255, 215, 0, 0.18); color: var(--gold); }

.history-row .score {
 font-weight: 700;
 font-variant-numeric: tabular-nums;
 font-size: 15px;
}

.history-row .score.good { color: var(--good); }
.history-row .score.bad { color: var(--bad); }
.history-row .score.warn { color: var(--warn); }

.history-row .date {
 font-size: 12px;
 color: var(--muted);
 font-variant-numeric: tabular-nums;
}

/* ============== TRAJECTORY GRAPH ============== */

.trajectory-graph {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 padding: 24px;
 min-height: 200px;
}

.trajectory-graph svg { width: 100%; height: 200px; display: block; }

/* ============== CALLOUTS ============== */

.callout {
 padding: 14px 18px;
 border-left: 4px solid var(--accent);
 background: var(--surface-2);
 border-radius: var(--r-sm);
 margin: 16px 0;
 font-size: 14px;
}

.callout.warn { border-color: var(--warn); }
.callout.bad { border-color: var(--bad); }
.callout.good { border-color: var(--good); }
.callout.elite { border-color: var(--elite); background: linear-gradient(90deg, rgba(247, 129, 102, 0.1), transparent); }

/* ============== MODAL ============== */

.modal {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.75);
 backdrop-filter: blur(4px);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 100;
 padding: 20px;
 animation: fadeIn 0.15s;
}

.modal.show { display: flex; }

.modal-card {
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: var(--r-lg);
 padding: 28px;
 max-width: 480px;
 width: 100%;
 box-shadow: var(--shadow-lg);
}

.modal-card h2 { margin-top: 0; font-size: 22px; }

.toolbar {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 margin: 16px 0;
}

/* ============== FOOTER ============== */

footer {
 margin-top: 60px;
 padding: 24px 0;
 text-align: left;
 color: var(--muted);
 font-size: 12px;
 border-top: 1px solid var(--border);
 line-height: 1.7;
}

/* ============== RESPONSIVE ============== */

@media (max-width: 720px) {
 .container { padding: 16px 14px; }
 .hero { flex-direction: column; }
 .hero-stats { width: 100%; }
 .stat-card { flex: 1 1 calc(50% - 6px); min-width: 130px; }
 h1 { font-size: 32px; }
 .hero-left .name-display { font-size: 24px; }
 .login-card { padding: 32px 24px; }
 .topbar-inner { gap: 8px; }
 .topbar-brand .brand-text .name { font-size: 14px; }
 .topbar-actions { flex: 1; justify-content: flex-end; }
 .user-chip { display: none; }
}

@media (max-width: 480px) {
 .stat-card { flex: 1 1 100%; }
 .exam-card { padding: 18px; }
 .topbar-actions .btn { padding: 6px 10px; font-size: 12px; }
}

/* ============== UTILITIES ============== */

.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.right { text-align: right; }
.flex { display: flex; gap: var(--gap-md); align-items: center; }
.flex-col { display: flex; flex-direction: column; gap: var(--gap-md); }
.gap-sm { gap: var(--gap-sm); }
.gap-lg { gap: var(--gap-lg); }
.mt-sm { margin-top: var(--gap-sm); }
.mt-md { margin-top: var(--gap-md); }
.mt-lg { margin-top: var(--gap-lg); }
.mt-xl { margin-top: var(--gap-xl); }