/* ─── RESET & BASE ─── */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Inter',sans-serif;
  background:var(--navy);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition:background 0.4s, color 0.4s;
}

/* ─── ANIMATED BACKGROUND ─── */
.bg-grid {
  position:fixed; inset:0; z-index:0;
  background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);
  background-size:48px 48px;
  animation:gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
.bg-orb { position:fixed; border-radius:50%; filter:blur(80px); z-index:0; pointer-events:none; opacity:var(--orb-opacity); }
.orb1 { width:500px; height:500px; background:rgba(0,201,177,0.12); top:-120px; right:-100px; animation:drift 12s ease-in-out infinite; }
.orb2 { width:400px; height:400px; background:rgba(245,166,35,0.08); bottom:-80px; left:-80px; animation:drift 15s ease-in-out infinite reverse; }
.orb3 { width:300px; height:300px; background:rgba(155,93,229,0.08); top:40%; left:30%; animation:drift 18s ease-in-out infinite 3s; }
@keyframes drift { 0%,100%{transform:translate(0,0)} 33%{transform:translate(30px,-20px)} 66%{transform:translate(-20px,30px)} }

#app { position:relative; z-index:1; }

/* ─── NAV ─── */
nav { position:sticky; top:0; z-index:100; background:rgba(7,21,43,0.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:0 40px; display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-brand { display:flex; align-items:center; gap:12px; font-family:'Syne',sans-serif; font-weight:800; font-size:20px; letter-spacing:-0.5px; }
.brand-icon { width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,var(--teal),var(--violet)); display:flex; align-items:center; justify-content:center; font-size:18px; }
.brand-sub { font-size:10px; font-weight:300; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-top:-4px; }
.nav-tabs { display:flex; gap:4px; }
.nav-tab { padding:8px 20px; border-radius:8px; cursor:pointer; font-family:'Syne',sans-serif; font-size:13px; font-weight:600; border:1px solid transparent; transition:all 0.25s; color:var(--muted); background:transparent; }
.nav-tab:hover { color:var(--text); background:rgba(255,255,255,0.04); }
.nav-tab.active { color:var(--navy); background:var(--teal); border-color:var(--teal); }
.nav-right { display:flex; align-items:center; gap:12px; }
.xp-badge { display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; background:rgba(245,166,35,0.1); border:1px solid rgba(245,166,35,0.3); font-family:'Space Mono',monospace; font-size:12px; color:var(--gold); }
.level-ring { width:32px; height:32px; border-radius:50%; background:conic-gradient(var(--teal) 240deg,rgba(255,255,255,0.1) 0); display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:10px; font-weight:700; }

/* ─── AUTH UI ─── */
.user-menu { position:relative; cursor:pointer; }
.user-avatar { width:32px; height:32px; border-radius:50%; border:2px solid var(--teal); object-fit:cover; }
.user-avatar-placeholder { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--violet)); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--navy); border:2px solid var(--teal); }
.user-dropdown { position:absolute; top:44px; right:0; min-width:200px; background:var(--navy2); border:1px solid var(--border); border-radius:12px; padding:8px; display:none; z-index:200; backdrop-filter:var(--card-blur); }
.user-dropdown.open { display:block; }
.user-dropdown-item { display:block; width:100%; padding:10px 14px; border-radius:8px; font-size:13px; color:var(--text); background:transparent; border:none; cursor:pointer; text-align:left; font-family:'Inter',sans-serif; }
.user-dropdown-item:hover { background:rgba(255,255,255,0.06); }
.login-btn { padding:6px 16px; border-radius:8px; border:1px solid var(--teal); background:transparent; color:var(--teal); cursor:pointer; font-family:'Syne',sans-serif; font-size:12px; font-weight:600; transition:all 0.2s; }
.login-btn:hover { background:var(--teal); color:var(--navy); }

/* ─── BUTTONS ─── */
.btn-primary { padding:14px 32px; border-radius:12px; border:none; cursor:pointer; font-family:'Syne',sans-serif; font-size:15px; font-weight:700; background:linear-gradient(135deg,var(--teal),var(--teal2)); color:var(--navy); transition:all 0.2s; box-shadow:0 8px 24px rgba(0,201,177,0.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,201,177,0.4); }
.btn-primary:disabled { opacity:0.5; cursor:default; transform:none; }
.btn-ghost { padding:14px 32px; border-radius:12px; cursor:pointer; font-family:'Syne',sans-serif; font-size:15px; font-weight:700; background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.15); transition:all 0.2s; }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }

/* ─── SECTIONS ─── */
.section { padding:0 40px 80px; display:none; }
.section.active { display:block; animation:fadeUp 0.4s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.section-header { margin-bottom:40px; }
.section-tag { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--teal); margin-bottom:12px; }
.section-title { font-family:'Syne',sans-serif; font-size:36px; font-weight:800; letter-spacing:-1px; }
.section-desc { color:var(--muted); font-size:15px; margin-top:8px; max-width:600px; }

/* ─── HERO ─── */
.hero { padding:80px 40px 60px; text-align:center; }
.hero-tag { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:20px; background:rgba(0,201,177,0.1); border:1px solid rgba(0,201,177,0.3); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--teal); margin-bottom:24px; font-family:'Space Mono',monospace; }
.hero h1 { font-family:'Syne',sans-serif; font-size:clamp(40px,6vw,76px); font-weight:800; line-height:1.05; letter-spacing:-2px; margin-bottom:20px; }
.hero h1 em { font-style:normal; color:var(--teal); }
.hero h1 strong { font-style:normal; color:var(--gold); }
.hero-sub { font-size:18px; color:var(--muted); max-width:640px; margin:0 auto 40px; line-height:1.6; font-weight:300; }
.hero-stats { display:flex; justify-content:center; gap:40px; flex-wrap:wrap; margin-bottom:48px; }
.hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ─── CARDS ─── */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.stat-card { text-align:center; padding:20px 32px; background:var(--card); border:1px solid var(--border); border-radius:16px; backdrop-filter:var(--card-blur); transition:transform 0.2s, border-color 0.2s; box-shadow:var(--glass); }
.stat-card:hover { transform:translateY(-3px); border-color:var(--teal); }
.stat-num { font-family:'Space Mono',monospace; font-size:32px; font-weight:700; color:var(--teal); display:block; }
.stat-lbl { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.module-card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:28px; cursor:pointer; transition:all 0.25s; position:relative; overflow:hidden; backdrop-filter:var(--card-blur); box-shadow:var(--glass); }
.module-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent-color,var(--teal)); transform:scaleX(0); transform-origin:left; transition:transform 0.3s; }
.module-card:hover { transform:translateY(-4px); border-color:var(--accent-color,var(--teal)); }
.module-card:hover::before { transform:scaleX(1); }
.card-icon { font-size:36px; margin-bottom:16px; }
.card-tier { display:inline-block; padding:3px 10px; border-radius:6px; font-size:10px; font-family:'Space Mono',monospace; letter-spacing:1px; text-transform:uppercase; background:rgba(0,201,177,0.1); color:var(--teal); margin-bottom:12px; }
.card-tier.t2 { background:rgba(245,166,35,0.1); color:var(--gold); }
.card-tier.t3 { background:rgba(155,93,229,0.1); color:var(--violet); }
.card-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; margin-bottom:8px; }
.card-desc { font-size:13px; color:var(--muted); line-height:1.6; }
.card-meta { display:flex; align-items:center; gap:8px; margin-top:16px; font-size:12px; color:var(--muted); }
.progress-bar { height:4px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; margin-top:14px; }
.progress-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--teal),var(--gold)); transition:width 0.6s ease; }
.card-xp { position:absolute; top:16px; right:16px; font-family:'Space Mono',monospace; font-size:11px; color:var(--gold); background:rgba(245,166,35,0.1); padding:3px 8px; border-radius:6px; }

/* ─── MODAL ─── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; backdrop-filter:blur(8px); }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:var(--navy2); border:1px solid var(--border); border-radius:24px; width:min(760px,95vw); max-height:85vh; overflow-y:auto; padding:48px; position:relative; transform:translateY(20px); transition:transform 0.3s; backdrop-filter:var(--card-blur); box-shadow:var(--glass); }
.modal-overlay.open .modal { transform:translateY(0); }
.modal-close { position:absolute; top:20px; right:20px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:var(--text); width:36px; height:36px; border-radius:8px; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; }
.modal h2 { font-family:'Syne',sans-serif; font-size:28px; font-weight:800; margin-bottom:8px; }
.modal-subtitle { color:var(--muted); font-size:14px; margin-bottom:32px; }

/* ─── LESSON CONTENT ─── */
.lesson-block { margin-bottom:28px; }
.lesson-block h3 { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; color:var(--teal); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.lesson-block p { font-size:14px; line-height:1.8; color:var(--text); }
.lesson-block ul { padding-left:20px; }
.lesson-block ul li { font-size:14px; line-height:1.8; color:var(--text); margin-bottom:4px; }
.lesson-block ul li::marker { color:var(--teal); }
.framework-table { width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; }
.framework-table th { background:rgba(0,201,177,0.1); color:var(--teal); padding:10px 14px; text-align:left; font-weight:700; border-bottom:1px solid var(--border); }
.framework-table td { padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.05); vertical-align:top; line-height:1.6; }
.tag-pill { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-family:'Space Mono',monospace; background:rgba(0,201,177,0.12); color:var(--teal); margin:2px; }
.tag-pill.gold { background:rgba(245,166,35,0.12); color:var(--gold); }
.tag-pill.violet { background:rgba(155,93,229,0.12); color:var(--violet); }

/* ─── QUIZ POPUP ─── */
.quiz-popup-modal { max-width:600px; padding:0; overflow:hidden; }
.quiz-popup-header { display:flex; justify-content:space-between; align-items:center; padding:24px 32px 16px; }
.quiz-popup-title { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; }
.quiz-popup-sub { font-size:12px; color:var(--muted); margin-top:4px; font-family:'Space Mono',monospace; }
.quiz-popup-score { font-family:'Space Mono',monospace; font-size:12px; color:var(--gold); background:rgba(245,166,35,0.1); padding:4px 12px; border-radius:8px; white-space:nowrap; }
.quiz-popup-progress { height:4px; background:rgba(255,255,255,0.06); margin:0 32px; border-radius:2px; overflow:hidden; }
.quiz-popup-progress-bar { height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); border-radius:2px; transition:width 0.4s ease; }
#quiz-popup-content { padding:24px 32px; }
.quiz-popup-question { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; line-height:1.5; margin-bottom:20px; }
.quiz-popup-options { display:flex; flex-direction:column; gap:10px; }
.quiz-opt-btn { display:flex; align-items:center; gap:12px; padding:14px 18px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.08); border-radius:12px; cursor:pointer; text-align:left; transition:all 0.2s; color:var(--text); font-size:14px; line-height:1.5; font-family:'Inter',sans-serif; }
.quiz-opt-btn:hover:not(:disabled) { border-color:var(--teal); background:rgba(0,201,177,0.06); }
.quiz-opt-btn.selected { border-color:var(--teal); background:rgba(0,201,177,0.1); }
.quiz-opt-btn.correct { border-color:#4CAF50; background:rgba(76,175,80,0.12); }
.quiz-opt-btn.wrong { border-color:var(--crimson); background:rgba(232,69,69,0.1); }
.quiz-opt-btn:disabled { cursor:default; }
.quiz-opt-letter { min-width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:12px; font-weight:700; color:var(--teal); flex-shrink:0; }
.quiz-opt-btn.selected .quiz-opt-letter { background:var(--teal); color:var(--navy); border-color:var(--teal); }
.quiz-opt-btn.correct .quiz-opt-letter { background:#4CAF50; color:var(--navy); border-color:#4CAF50; }
.quiz-opt-btn.wrong .quiz-opt-letter { background:var(--crimson); color:#fff; border-color:var(--crimson); }
.quiz-popup-feedback { display:none; padding:14px 18px; margin-top:16px; border-radius:10px; font-size:13px; line-height:1.7; }
.quiz-popup-feedback.show { display:block; animation:fadeUp 0.3s ease; }
.quiz-popup-feedback.correct { background:rgba(76,175,80,0.1); border:1px solid rgba(76,175,80,0.25); color:#A5D6A7; }
.quiz-popup-feedback.incorrect { background:rgba(232,69,69,0.08); border:1px solid rgba(232,69,69,0.2); color:#EF9A9A; }
.quiz-popup-footer { padding:16px 32px 24px; display:flex; justify-content:flex-end; gap:12px; }
.quiz-popup-result { text-align:center; padding:20px 0; }
.quiz-popup-result-icon { font-size:48px; margin-bottom:12px; }
.quiz-popup-result-score { font-family:'Space Mono',monospace; font-size:36px; font-weight:700; color:var(--teal); }
.quiz-popup-result-pct { font-family:'Syne',sans-serif; font-size:20px; font-weight:700; color:var(--gold); margin:4px 0 16px; }
.quiz-popup-result-msg { font-size:14px; color:var(--muted); line-height:1.7; max-width:400px; margin:0 auto; }
.quiz-popup-result.passed .quiz-popup-result-score { color:#4CAF50; }
.quiz-popup-result.failed .quiz-popup-result-score { color:var(--crimson); }

/* ─── FLOATING AI HINT WINDOW ─── */
.hint-toggle-btn { display:flex; align-items:center; gap:6px; font-size:13px !important; padding:10px 18px !important; }
.hint-window { position:fixed; z-index:2000; display:none; width:360px; height:420px; min-width:280px; min-height:260px; border-radius:16px; border:1px solid rgba(155,93,229,0.3); background:var(--navy2); box-shadow:0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(155,93,229,0.1); backdrop-filter:blur(20px); overflow:hidden; flex-direction:column; }
.hint-window.open { display:flex; animation:fadeUp 0.25s ease; }
.hint-window.minimized .hint-window-body,
.hint-window.minimized .hint-window-resize { display:none; }
.hint-window.minimized { height:auto !important; min-height:0; border-radius:12px; }
.hint-window-titlebar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:rgba(155,93,229,0.12); border-bottom:1px solid rgba(155,93,229,0.2); cursor:move; user-select:none; flex-shrink:0; }
.hint-window-title { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; color:var(--violet); display:flex; align-items:center; gap:6px; }
.hint-window-controls { display:flex; gap:4px; }
.hint-window-btn { width:24px; height:24px; border-radius:6px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); color:var(--muted); cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.hint-window-btn:hover { background:rgba(255,255,255,0.1); color:var(--text); }
.hint-window-body { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.hint-chat-messages { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.hint-chat-welcome { font-size:12px; color:var(--muted); text-align:center; padding:12px 8px; line-height:1.6; }
.hint-chat-msg { display:flex; gap:8px; align-items:flex-start; }
.hint-chat-user { justify-content:flex-end; }
.hint-chat-assistant { justify-content:flex-start; }
.hint-chat-avatar { min-width:24px; height:24px; border-radius:6px; background:linear-gradient(135deg,var(--violet),var(--teal)); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.hint-chat-bubble { padding:8px 12px; border-radius:10px; font-size:13px; line-height:1.6; max-width:85%; word-wrap:break-word; }
.hint-chat-user .hint-chat-bubble { background:rgba(0,201,177,0.12); border:1px solid rgba(0,201,177,0.2); color:var(--text); margin-left:auto; }
.hint-chat-assistant .hint-chat-bubble { background:rgba(155,93,229,0.1); border:1px solid rgba(155,93,229,0.2); color:var(--text); }
.hint-chat-input-row { display:flex; gap:0; border-top:1px solid rgba(155,93,229,0.15); flex-shrink:0; }
.hint-chat-input { flex:1; padding:10px 14px; border:none; background:transparent; color:var(--text); font-family:'Inter',sans-serif; font-size:13px; outline:none; }
.hint-chat-input::placeholder { color:var(--muted); }
.hint-chat-send { padding:10px 14px; border:none; background:rgba(155,93,229,0.15); color:var(--violet); cursor:pointer; font-size:14px; transition:background 0.2s; }
.hint-chat-send:hover { background:rgba(155,93,229,0.25); }
.hint-typing { color:var(--muted); font-style:italic; font-size:12px; }
.hint-window-resize { position:absolute; bottom:0; right:0; width:16px; height:16px; cursor:nwse-resize; }
.hint-window-resize::after { content:''; position:absolute; bottom:4px; right:4px; width:8px; height:8px; border-right:2px solid rgba(155,93,229,0.3); border-bottom:2px solid rgba(155,93,229,0.3); }

/* ─── ASSESSMENT ─── */
.assessment-panel { background:var(--card); border:1px solid var(--border); border-radius:24px; padding:40px; backdrop-filter:var(--card-blur); max-width:820px; margin:0 auto; box-shadow:var(--glass); }
.scenario-context { margin-bottom:28px; border-radius:16px; border:1px solid rgba(155,93,229,0.2); overflow:hidden; }
.scenario-context-header { display:flex; align-items:center; gap:12px; padding:14px 20px; background:rgba(155,93,229,0.08); border-bottom:1px solid rgba(155,93,229,0.15); }
.scenario-badge { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--violet); background:rgba(155,93,229,0.15); padding:3px 10px; border-radius:6px; white-space:nowrap; }
.scenario-title-text { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; color:var(--text); }
.scenario-context-body { padding:16px 20px; font-size:14px; line-height:1.8; color:var(--text); }
.q-difficulty-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.q-difficulty-badge { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:6px; border:1px solid; }
.q-difficulty-sub { font-size:12px; color:var(--muted); }
.score-breakdown { display:flex; justify-content:center; gap:24px; margin-bottom:24px; }
.score-breakdown-item { text-align:center; }
.score-breakdown-label { font-family:'Space Mono',monospace; font-size:12px; display:block; }
.score-breakdown-max { font-size:11px; color:var(--muted); }
.q-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; }
.q-progress-container { flex:1; margin:0 24px; }
.q-progress-track { height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; }
.q-progress-bar { height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); border-radius:4px; transition:width 0.5s ease; }
.q-num { font-family:'Space Mono',monospace; font-size:12px; color:var(--muted); white-space:nowrap; }
.q-stem { font-family:'Syne',sans-serif; font-size:20px; font-weight:700; line-height:1.4; margin-bottom:8px; }
.q-scenario { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:28px; padding:16px; background:rgba(0,201,177,0.06); border-radius:12px; border-left:3px solid var(--teal); }
.q-sata-hint { font-size:12px; color:var(--gold); font-family:'Space Mono',monospace; margin-bottom:20px; }
.options-grid { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.option-btn { display:flex; align-items:flex-start; gap:14px; padding:16px 20px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.08); border-radius:14px; cursor:pointer; text-align:left; transition:all 0.2s; color:var(--text); font-size:14px; line-height:1.5; }
.option-btn:hover { border-color:var(--teal); background:rgba(0,201,177,0.06); }
.option-btn.selected { border-color:var(--teal); background:rgba(0,201,177,0.1); }
.option-btn.correct { border-color:#4CAF50; background:rgba(76,175,80,0.1); }
.option-btn.wrong { border-color:var(--crimson); background:rgba(232,69,69,0.08); }
.opt-letter { min-width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:12px; font-weight:700; color:var(--teal); }
.option-btn.selected .opt-letter { background:var(--teal); color:var(--navy); border-color:var(--teal); }
.q-actions { display:flex; justify-content:space-between; align-items:center; }
.q-feedback { padding:16px 20px; border-radius:12px; font-size:14px; line-height:1.6; margin-bottom:20px; display:none; }
.q-feedback.show { display:block; }
.q-feedback.correct { background:rgba(76,175,80,0.1); border:1px solid rgba(76,175,80,0.3); color:#81C784; }
.q-feedback.incorrect { background:rgba(232,69,69,0.08); border:1px solid rgba(232,69,69,0.25); color:#EF9A9A; }

/* ─── SCORE CARD ─── */
.score-card { text-align:center; padding:60px 40px; background:var(--card); border:1px solid var(--border); border-radius:24px; max-width:640px; margin:0 auto; display:none; box-shadow:var(--glass); }
.score-card.show { display:block; animation:fadeUp 0.5s ease; }
.badge { padding:8px 16px; border-radius:20px; font-size:12px; font-family:'Space Mono',monospace; background:rgba(0,201,177,0.1); border:1px solid rgba(0,201,177,0.25); color:var(--teal); }

/* ─── GAME ─── */
.game-layout { display:grid; grid-template-columns:1fr 340px; gap:24px; max-width:1200px; }
.game-main { background:var(--card); border:1px solid var(--border); border-radius:24px; overflow:hidden; box-shadow:var(--glass); }
.game-header { background:linear-gradient(135deg,var(--navy3),rgba(0,201,177,0.1)); padding:24px 28px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.game-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; }
.game-chips { display:flex; gap:8px; }
.chip { padding:4px 12px; border-radius:20px; font-size:11px; font-family:'Space Mono',monospace; }
.chip-teal { background:rgba(0,201,177,0.15); color:var(--teal); border:1px solid rgba(0,201,177,0.3); }
.chip-gold { background:rgba(245,166,35,0.15); color:var(--gold); border:1px solid rgba(245,166,35,0.3); }
.game-scene { padding:36px 28px; min-height:360px; }
.scene-year { font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:3px; text-transform:uppercase; margin-bottom:12px; }
.scene-title { font-family:'Syne',sans-serif; font-size:26px; font-weight:800; margin-bottom:16px; }
.scene-narr { font-size:14px; line-height:1.8; color:var(--text); margin-bottom:28px; max-width:560px; }
.scene-ai-msg { padding:16px 20px; border-radius:14px; margin-bottom:24px; background:rgba(155,93,229,0.08); border:1px solid rgba(155,93,229,0.2); font-size:13px; line-height:1.7; color:#C4A6F0; display:flex; gap:12px; align-items:flex-start; }
.ai-avatar { min-width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--violet),var(--teal)); display:flex; align-items:center; justify-content:center; font-size:14px; }
.choices-label { font-size:11px; font-family:'Space Mono',monospace; color:var(--muted); letter-spacing:2px; text-transform:uppercase; }
.choices-label-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.game-choices { display:flex; flex-direction:column; gap:10px; }
.choice-btn { display:flex; align-items:center; gap:14px; padding:14px 18px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); border-radius:12px; cursor:pointer; text-align:left; transition:all 0.2s; color:var(--text); font-size:13px; line-height:1.5; }
.choice-btn:hover:not(:disabled) { border-color:var(--gold); background:rgba(245,166,35,0.06); }
.choice-btn:disabled { opacity:0.5; cursor:default; }
.choice-icon { font-size:20px; min-width:24px; }
.game-result { padding:20px; margin-top:16px; border-radius:14px; display:none; font-size:13px; line-height:1.7; }
.game-result.show { display:block; }
.game-result.good { background:rgba(76,175,80,0.08); border:1px solid rgba(76,175,80,0.25); color:#A5D6A7; }
.game-result.bad { background:rgba(232,69,69,0.08); border:1px solid rgba(232,69,69,0.2); color:#FFAB91; }
.game-result.neutral { background:rgba(245,166,35,0.06); border:1px solid rgba(245,166,35,0.2); color:#FFD54F; }
.game-result.mixed { background:rgba(245,166,35,0.06); border:1px solid rgba(245,166,35,0.2); color:#FFD54F; }
.game-result.risky { background:rgba(232,69,69,0.06); border:1px solid rgba(232,69,69,0.18); color:#FFAB91; }
.stat-changes { margin-top:10px; font-family:'Space Mono',monospace; font-size:11px; display:flex; flex-wrap:wrap; gap:4px; }
.game-next-btn { margin-top:16px; padding:10px 24px; border-radius:10px; border:none; font-family:'Syne',sans-serif; font-weight:700; font-size:13px; cursor:pointer; background:var(--teal); color:var(--navy); display:none; }
.game-next-btn.show { display:inline-block; }

/* ─── SIDEBAR ─── */
.sidebar { display:flex; flex-direction:column; gap:16px; }
.side-card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:24px; backdrop-filter:var(--card-blur); box-shadow:var(--glass); }
.side-card-title { font-family:'Syne',sans-serif; font-size:14px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.profile-row { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.avatar { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--teal),var(--violet)); display:flex; align-items:center; justify-content:center; font-size:24px; }
.player-name { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; }
.player-role { font-size:12px; color:var(--muted); }
.stat-row-label { display:flex; justify-content:space-between; margin-bottom:6px; font-size:12px; color:var(--muted); }
.stat-row-val { font-family:'Space Mono',monospace; font-size:11px; color:var(--teal); }
.mini-bar { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.mini-fill { height:100%; border-radius:3px; transition:width 0.8s ease; }
.skill-tags { display:flex; flex-wrap:wrap; gap:6px; }
.skill-tag { padding:4px 10px; border-radius:6px; font-size:11px; font-family:'Space Mono',monospace; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:var(--muted); }
.skill-tag.unlocked { border-color:rgba(0,201,177,0.3); color:var(--teal); background:rgba(0,201,177,0.08); }
.event-list { display:flex; flex-direction:column; gap:10px; }
.event-item { display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:10px; background:rgba(255,255,255,0.02); font-size:12px; line-height:1.5; }
.event-dot { min-width:8px; height:8px; border-radius:50%; background:var(--teal); margin-top:4px; }
.event-dot.gold { background:var(--gold); }

/* ─── TICKER ─── */
.ticker-wrap { background:rgba(0,201,177,0.06); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; white-space:nowrap; padding:10px 0; margin-bottom:40px; }
.ticker-inner { display:inline-block; animation:ticker 40s linear infinite; font-family:'Space Mono',monospace; font-size:12px; color:var(--muted); }
@keyframes ticker { 0%{transform:translateX(100vw)} 100%{transform:translateX(-100%)} }
.ticker-sep { margin:0 24px; color:var(--teal); }

/* ─── PROFILE FORM ─── */
.profile-form { display:flex; flex-direction:column; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:12px; color:var(--muted); font-family:'Space Mono',monospace; letter-spacing:1px; text-transform:uppercase; }
.form-group input, .form-group select, .form-group textarea { padding:12px 16px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.04); color:var(--text); font-family:'Inter',sans-serif; font-size:14px; transition:border-color 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--teal); }
.form-group textarea { resize:vertical; min-height:80px; }
.form-group select option { background:var(--navy2); color:var(--text); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ─── AUTH FORMS ─── */
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:12px; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-link { color:var(--teal); cursor:pointer; font-size:13px; background:none; border:none; font-family:'Inter',sans-serif; text-decoration:underline; }
.auth-link:hover { color:var(--gold); }
.auth-error { color:var(--crimson); font-size:13px; margin-top:8px; display:none; }
.auth-error.show { display:block; }
.auth-success { color:#4CAF50; font-size:13px; margin-top:8px; display:none; }
.auth-success.show { display:block; }
.google-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.04); color:var(--text); cursor:pointer; font-family:'Syne',sans-serif; font-size:14px; font-weight:600; transition:all 0.2s; }
.google-btn:hover { border-color:var(--teal); background:rgba(0,201,177,0.06); }
.google-btn svg { width:18px; height:18px; }

/* ─── AI SUGGESTIONS (combo box) ─── */
.input-with-suggest { position:relative; display:flex; gap:0; }
.input-with-suggest input, .input-with-suggest textarea { flex:1; border-top-right-radius:0; border-bottom-right-radius:0; }
.suggest-btn { padding:0 12px; border-radius:0 10px 10px 0; border:1px solid var(--border); border-left:none; background:rgba(0,201,177,0.06); color:var(--teal); cursor:pointer; font-size:11px; font-family:'Space Mono',monospace; transition:all 0.2s; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.suggest-btn:hover { background:rgba(0,201,177,0.15); }
.suggest-btn:disabled { opacity:0.5; cursor:default; }
.suggest-btn .spinner-sm { width:14px; height:14px; border:2px solid rgba(255,255,255,0.1); border-top-color:var(--teal); border-radius:50%; animation:spin 0.6s linear infinite; display:none; }
.suggest-btn.loading .spinner-sm { display:inline-block; }
.suggest-btn.loading .suggest-label { display:none; }
.suggest-dropdown { position:absolute; top:100%; left:0; right:0; z-index:50; background:var(--navy2); border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; max-height:200px; overflow-y:auto; display:none; backdrop-filter:var(--card-blur); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.suggest-dropdown.open { display:block; animation:fadeUp 0.2s ease; }
.suggest-dropdown-item { display:block; width:100%; padding:10px 16px; border:none; background:transparent; color:var(--text); cursor:pointer; font-size:13px; line-height:1.5; text-align:left; font-family:'Inter',sans-serif; border-bottom:1px solid rgba(255,255,255,0.04); }
.suggest-dropdown-item:last-child { border-bottom:none; }
.suggest-dropdown-item:hover { background:rgba(0,201,177,0.08); }

/* ─── THEME SELECTOR ─── */
.theme-btn { padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:14px; transition:all 0.2s; }
.theme-btn:hover { border-color:var(--teal); color:var(--teal); }
.theme-dropdown { position:absolute; top:44px; right:0; min-width:180px; background:var(--navy2); border:1px solid var(--border); border-radius:12px; padding:8px; display:none; z-index:200; backdrop-filter:var(--card-blur); }
.theme-dropdown.open { display:block; }
.theme-option { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; border-radius:8px; border:none; background:transparent; color:var(--text); cursor:pointer; font-size:13px; font-family:'Inter',sans-serif; text-align:left; }
.theme-option:hover { background:rgba(255,255,255,0.06); }
.theme-dot { width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,0.2); }

/* ─── LOADING ─── */
.loading-spinner { display:flex; align-items:center; justify-content:center; padding:60px; }
.spinner { width:40px; height:40px; border:3px solid rgba(255,255,255,0.1); border-top-color:var(--teal); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-text { margin-top:16px; color:var(--muted); font-size:14px; text-align:center; }

/* ─── RESPONSIVE ─── */
@media(max-width:900px) {
  nav { padding:0 20px; }
  .hero { padding:60px 20px 40px; }
  .section { padding:0 20px 60px; }
  .game-layout { grid-template-columns:1fr; }
  .hero-stats { gap:16px; }
  .form-row { grid-template-columns:1fr; }
}

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--navy); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }