:root { --bg:#0d1526; --panel:#16233c; --panel2:#1c2c49; --ink:#eef2f8; --muted:#9db0cc; --acc:#ff8c42; --ok:#39d98a; --bad:#ff6b6b; --line:#2a3d5f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; }
a { color:var(--acc); }
button { background:var(--acc); color:#14100b; border:0; border-radius:8px; padding:.5rem .9rem; font-weight:600; cursor:pointer; }
button.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
button.danger { background:var(--bad); color:#fff; }
button:disabled { opacity:.45; cursor:default; }
input, select, textarea { background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:.5rem .6rem; width:100%; }
textarea.code { font-family:ui-monospace,Menlo,Consolas,monospace; min-height:300px; font-size:14px; }
header.top { display:flex; align-items:center; gap:1rem; padding:.7rem 1.1rem; background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; }
header.top .spacer { flex:1; }
nav.side { display:flex; gap:.4rem; flex-wrap:wrap; padding:.6rem 1.1rem; background:var(--panel); border-bottom:1px solid var(--line); }
nav.side button { background:transparent; color:var(--muted); border:1px solid transparent; }
nav.side button.active { color:var(--ink); border-color:var(--line); background:var(--panel2); }
main { padding:1.1rem; max-width:1100px; margin:0 auto; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1rem; margin-bottom:1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.chip { display:inline-block; padding:.1rem .5rem; border-radius:99px; border:1px solid var(--line); font-size:.78rem; margin:.1rem; }
.chip.ok { border-color:var(--ok); color:var(--ok); } .chip.bad { border-color:var(--bad); color:var(--bad); }
.chip.rec { border-color:var(--bad); color:#fff; background:var(--bad); }
.row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
pre.out { background:#0a101d; border:1px solid var(--line); border-radius:8px; padding:.7rem; white-space:pre-wrap; min-height:60px; }
table { width:100%; border-collapse:collapse; } td, th { border-bottom:1px solid var(--line); padding:.4rem; text-align:left; font-size:.9rem; }
.chat { max-height:320px; overflow:auto; display:flex; flex-direction:column; gap:.5rem; }
.msg { padding:.55rem .7rem; border-radius:10px; max-width:85%; }
.msg.child { background:var(--panel2); align-self:flex-end; }
.msg.tutor { background:#22385e; align-self:flex-start; }
.login-wrap { max-width:380px; margin:8vh auto; }
iframe.preview { width:100%; height:260px; border:1px solid var(--line); border-radius:8px; background:#10243e; }
.event-feed { max-height:300px; overflow:auto; font-family:ui-monospace,monospace; font-size:.8rem; }