:root{ --bg:#0b0f14; --panel:#10161d; --text:#e8eef6; --muted:#9fb3c8; --bar-bg:#1a222c; --bar-fill:linear-gradient(90deg,#6ee7ff,#72f0a7); --card:#0f141a; }
*{ box-sizing:border-box; } 
body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:radial-gradient(1000px 600px at 50% -10%,#11223344,transparent),var(--bg); color:var(--text); }
.app-header{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid #0e1520; background:linear-gradient(180deg,#0b0f14,#0d1218); }
.brand{ display:flex; gap:12px; align-items:center; } 
.brand .logo{ width:40px;height:40px;display:grid;place-items:center;background:#0e1520;border:1px solid #192231;border-radius:10px; }
.subtitle{ color:var(--muted); font-size:12px; margin:0; }
.header-actions button{ background:#0e1520; color:var(--text); border:1px solid #192231; border-radius:10px; padding:8px 12px; cursor:pointer; }
.header-actions .danger{ background:#1a0f12; border-color:#2a1216; }
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:12px 18px; }
.stat{ background:var(--panel); border:1px solid #15202b; border-radius:12px; padding:12px; } 
.stat .label{ color:var(--muted); font-size:12px; margin-bottom:6px; } 
.stat .value{ font-weight:800; font-size:20px; }
.stat.xp .bar{ height:10px; background:var(--bar-bg); border-radius:999px; overflow:hidden; margin-bottom:6px; } 
.bar-fill{ height:100%; background:var(--bar-fill); }
.tabs{ display:flex; gap:8px; padding:8px 18px 0; } 
.tabs button{ background:#0e1520; color:var(--text); border:1px solid #192231; border-radius:20px; padding:8px 12px; cursor:pointer; font-weight:600; }
.tabs button.active{ outline:2px solid #2a3b52; color:#b7d4ff; }
.view{ padding:10px 18px 120px; display:grid; gap:12px; }
.card{ background:var(--card); border:1px solid #15202b; border-radius:14px; padding:14px; }
.muted{ color:var(--muted); font-size:13px; }
.item-row{ display:flex; justify-content:space-between; align-items:center; padding:10px; border:1px solid #182230; border-radius:10px; margin:8px 0; background:#0b1016; }
.kbd{ padding:2px 6px; border-radius:6px; background:#0b1522; border:1px solid #132235; color:#b7d4ff; font-size:12px; }
.btn{ background:#0e1520; color:var(--text); border:1px solid #192231; border-radius:10px; padding:8px 12px; cursor:pointer; }
.btn.primary{ background:#0a1f27; } 
.btn.good{ background:#0b2415; } 
.btn.bad{ background:#1b0f12; }
.toast{ position:fixed; bottom:20px; right:20px; padding:10px 14px; background:#0e1520; border:1px solid #1a2a3d; border-radius:10px; opacity:0; transform:translateY(8px); transition:.2s; }
.toast.show{ opacity:1; transform:none; }
.modal[hidden]{ display:none; } 
.modal{ position:fixed; inset:0; } 
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.modal-frame{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(900px,92vw); background:var(--panel); border:1px solid #182230; border-radius:16px; padding:12px; }
.modal-aspect{ position:relative; width:100%; padding-bottom:56.25%; border-radius:10px; overflow:hidden; background:#000; } 
.modal-aspect iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lesson .scene{ background:#0b1016; border:1px solid #182230; border-radius:10px; padding:12px; margin:10px 0; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
/* Light mode */
body.light{ --bg:#f7fbff; --panel:#fff; --text:#0c141d; --muted:#4a6a87; --card:#fff; --bar-bg:#eaf2fb; }
body.light .brand .logo, body.light .header-actions button, body.light .tabs button{ background:#f1f6ff; border-color:#e0ecff; }
body.light .item-row{ background:#f5f9ff; border-color:#e6eff9; }