:root { --bg:#faf7ff; --fg:#241a3a; --muted:#6b5f85; --brand:#5b2da0; --gold:#c9962b; --card:#fff; --line:#e5dcf5; }
@media (prefers-color-scheme: dark) { :root { --bg:#17102a; --fg:#f1ecfb; --muted:#b2a5d0; --card:#221838; --line:#37294f; } }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--fg); padding-bottom:64px; }
header { padding:14px 16px; background:var(--brand); color:#fff; }
main { max-width:720px; margin:0 auto; padding:16px; }
h2 { margin:.2em 0 .6em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 10px; }
.muted { color:var(--muted); font-size:.9em; }
.phase { color:var(--gold); font-weight:600; margin:16px 0 6px; }
nav { position:fixed; bottom:0; left:0; right:0; display:flex; overflow-x:auto; background:var(--card); border-top:1px solid var(--line); }
nav a { flex:1 0 auto; padding:12px 14px; text-align:center; color:var(--muted); text-decoration:none; font-size:.85em; }
nav a.on { color:var(--brand); font-weight:700; }
#chat { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.msg { max-width:85%; padding:8px 12px; border-radius:12px; white-space:pre-wrap; }
.msg.bot { background:var(--card); border:1px solid var(--line); align-self:flex-start; }
.msg.me { background:var(--brand); color:#fff; align-self:flex-end; }
form.send { display:flex; gap:8px; }
form.send input { flex:1; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; }
form.send button { padding:10px 16px; border:0; border-radius:8px; background:var(--brand); color:#fff; font:inherit; }
form.login { display:flex; flex-direction:column; gap:10px; }
form.login input { padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; }
.btn { padding:10px 16px; border:0; border-radius:8px; background:var(--brand); color:#fff; font:inherit; cursor:pointer; }
.btn:disabled { opacity:.6; }
.bar { height:8px; border-radius:6px; background:var(--line); margin:0 0 12px; overflow:hidden; }
.bar span { display:block; height:100%; background:var(--gold); }
a.btn { display:inline-block; margin-top:8px; text-decoration:none; }
details.lesson summary { cursor:pointer; font-weight:600; }
details.lesson p { margin:8px 0; }
form.send.col { flex-direction:column; }
form.send textarea { padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; }
.card .body { margin:6px 0; white-space:pre-wrap; }
.card .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.card.reply { margin:8px 0 0 14px; background:transparent; }
.card.hidden-post { opacity:.55; }
button.link { background:none; border:0; padding:2px 0; color:var(--brand); font:inherit; font-size:.85em; cursor:pointer; text-decoration:underline; }