:root{
  --bg:#faf8f5; --surface:#ffffff; --surface-2:#f3f0eb; --surface-3:#ebe7e0;
  --text:#1f1d1a; --muted:#6b665e; --border:#e7e2d9;
  --accent:#0f8b7d; --accent-ink:#ffffff; --accent-soft:#e0f2ef;
  --study:#3767d6; --study-soft:#e6edfb;
  --build:#7b52c9; --build-soft:#efe8fa;
  --review:#a86a00; --review-soft:#fbf0db;
  --mock:#c0456a; --mock-soft:#fbe6ec;
  --rest:#2f8a4e; --rest-soft:#e3f3e8;
  --again:#c4422f; --again-soft:#fbe7e3;
  --shaky:#b07400; --shaky-soft:#fcf1d9;
  --good:#23864a; --good-soft:#e2f3e8;
  --code:#f3f0eb;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(30,25,15,.05), 0 2px 10px rgba(30,25,15,.04);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141413; --surface:#1d1c1a; --surface-2:#262522; --surface-3:#302e2a;
    --text:#eceae4; --muted:#a29e95; --border:#34322e;
    --accent:#3cc4b3; --accent-ink:#0b1715; --accent-soft:#16302c;
    --study:#86a8ff; --study-soft:#1d2741; --build:#b59af0; --build-soft:#2a2140;
    --review:#f0b553; --review-soft:#352813; --mock:#f08aa8; --mock-soft:#3a1d27;
    --rest:#6fd08f; --rest-soft:#18301f;
    --again:#ff8f7d; --again-soft:#3a1e1a; --shaky:#f3bd5b; --shaky-soft:#352813; --good:#69d18f; --good-soft:#18301f;
    --code:#262522; --shadow:none;
  }
}
:root[data-theme="dark"]{
  --bg:#141413; --surface:#1d1c1a; --surface-2:#262522; --surface-3:#302e2a;
  --text:#eceae4; --muted:#a29e95; --border:#34322e;
  --accent:#3cc4b3; --accent-ink:#0b1715; --accent-soft:#16302c;
  --study:#86a8ff; --study-soft:#1d2741; --build:#b59af0; --build-soft:#2a2140;
  --review:#f0b553; --review-soft:#352813; --mock:#f08aa8; --mock-soft:#3a1d27;
  --rest:#6fd08f; --rest-soft:#18301f;
  --again:#ff8f7d; --again-soft:#3a1e1a; --shaky:#f3bd5b; --shaky-soft:#352813; --good:#69d18f; --good-soft:#18301f;
  --code:#262522; --shadow:none;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent)}
h1,h2,h3,h4{line-height:1.25; text-wrap:balance}
code,pre,textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px}
code{background:var(--code); padding:1px 5px; border-radius:4px}
pre{background:var(--code); padding:12px 14px; border-radius:8px; overflow-x:auto; border:1px solid var(--border)}
pre code{background:none; padding:0}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:13px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}

/* ---------- buttons, chips ---------- */
button,.btn{font:inherit; font-size:14px; padding:8px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; line-height:1.2}
button:hover,.btn:hover{background:var(--surface-2)}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
button.primary,.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
button.primary:hover,.btn.primary:hover{filter:brightness(1.06); background:var(--accent)}
button.ghost,.btn.ghost{background:transparent; border-color:transparent}
button.ghost:hover,.btn.ghost:hover{background:var(--surface-2)}
button.small,.btn.small{font-size:13px; padding:5px 10px; border-radius:8px}
button:disabled{opacity:.5; cursor:default}
.chip{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:99px;
  background:var(--surface-2); color:var(--muted); white-space:nowrap}
.chip.subtle{font-weight:500}
.chip.study{background:var(--study-soft); color:var(--study)}
.chip.build{background:var(--build-soft); color:var(--build)}
.chip.review{background:var(--review-soft); color:var(--review)}
.chip.mock{background:var(--mock-soft); color:var(--mock)}
.chip.rest{background:var(--rest-soft); color:var(--rest)}
.chip.accent{background:var(--accent-soft); color:var(--accent)}
.chip.again{background:var(--again-soft); color:var(--again)}
.chip.shaky{background:var(--shaky-soft); color:var(--shaky)}
.chip.good{background:var(--good-soft); color:var(--good)}
.pill{display:inline-block; font-size:11.5px; font-weight:600; padding:1px 8px; border-radius:99px; margin-right:4px; vertical-align:1px}
.p-basic{background:var(--good-soft); color:var(--good)}
.p-core{background:var(--study-soft); color:var(--study)}
.p-deep{background:var(--review-soft); color:var(--review)}
.p-probe{background:var(--again-soft); color:var(--again)}
.filter-chips{display:flex; gap:6px; flex-wrap:wrap}
.filter-chips button{border-radius:99px; padding:5px 12px; font-size:13px}
.filter-chips button.on{background:var(--text); color:var(--bg); border-color:var(--text)}
.seg{display:inline-flex; background:var(--surface-2); border-radius:10px; padding:3px; gap:2px}
.seg button{border:none; background:transparent; padding:6px 12px; border-radius:8px; font-size:13px}
.seg button.on{background:var(--surface); box-shadow:var(--shadow); font-weight:600}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1160px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:10px 20px}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; color:var(--text); text-decoration:none; white-space:nowrap}
.logo{width:24px; height:24px; border-radius:7px; background:var(--accent); position:relative}
.logo::after{content:""; position:absolute; left:7px; top:5px; width:6px; height:11px; border:solid var(--accent-ink); border-width:0 2.6px 2.6px 0; transform:rotate(40deg)}
.tabs{display:flex; gap:2px}
.tabs a{padding:7px 12px; border-radius:9px; color:var(--muted); text-decoration:none; font-weight:500; font-size:14.5px}
.tabs a:hover{color:var(--text); background:var(--surface-2)}
.tabs a.on{color:var(--text); background:var(--surface-3)}
.top-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.icon-btn{display:inline-flex; padding:7px; border-radius:9px; color:var(--muted)}
.icon-btn:hover,.icon-btn.on{background:var(--surface-2); color:var(--text)}
.save-state{font-size:12.5px; color:var(--muted); min-width:52px; text-align:right}
.save-state.err{color:var(--again); font-weight:600}

/* ---------- layout ---------- */
.view{max-width:1160px; margin:0 auto; padding:28px 20px 80px; outline:none}
.page-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.page-head h1{margin:0; font-size:26px}
.page-head p{margin:4px 0 0; color:var(--muted)}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow)}
.card + .card{margin-top:14px}
.weeks > .card + .card{margin-top:0}
.card h3{margin:0 0 10px; font-size:16px}
.card-title{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.two-col{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:16px; align-items:start}
.stack > * + *{margin-top:16px}
.bar{height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.bar > span{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .35s}

/* ---------- today ---------- */
.hero{background:linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); border:1px solid var(--border); border-radius:18px; padding:22px 24px; margin-bottom:16px}
.hero .eyebrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--muted); font-weight:600}
.hero h1{font-size:28px; margin:10px 0 6px}
.hero p{margin:0; font-size:16px; color:var(--muted); max-width:62ch}
.day-nav{display:flex; gap:6px; margin-top:16px; flex-wrap:wrap}
.tasks{list-style:none; margin:0; padding:0}
.tasks li{display:flex; gap:12px; align-items:flex-start; padding:11px 4px; border-bottom:1px dashed var(--border)}
.tasks li:last-child{border-bottom:none}
.tasks input[type=checkbox]{width:20px; height:20px; margin-top:1px; accent-color:var(--accent); flex:none; cursor:pointer}
.tasks label{flex:1; cursor:pointer}
.tasks li.done label{color:var(--muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--muted) 50%, transparent)}
.tasks .file-link{display:inline-flex; margin-top:6px; font-size:12.5px; padding:3px 9px}
.tasks .opt{margin-left:6px}
.rhythm{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.rhythm.wide{grid-template-columns:repeat(4,minmax(0,1fr))}
.rhythm button{flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; text-align:left; border-radius:12px}
.rhythm button b{font-size:18px}
.rhythm button span{font-size:12.5px; color:var(--muted)}
.rhythm button.running{border-color:var(--accent); background:var(--accent-soft)}
.timer{display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border-radius:12px; background:var(--surface-2)}
.timer .t{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums}
.drill-box{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.drill-box .big{font-size:30px; font-weight:800; line-height:1}
.notes textarea{width:100%; min-height:160px; resize:vertical; border:1px solid var(--border); border-radius:10px; background:var(--surface);
  color:var(--text); padding:10px 12px; font:inherit; font-size:14px; line-height:1.55}
.gate{border:1px dashed var(--review); background:var(--review-soft); border-radius:12px; padding:12px 14px; font-size:14px}
.gate b{color:var(--review)}

/* ---------- setup ---------- */
.setup{max-width:640px; margin:30px auto}
.setup h1{font-size:30px; margin:0 0 6px}
.field{display:flex; flex-direction:column; gap:6px; margin:16px 0}
.field label{font-weight:600; font-size:14px}
.field .hint{font-size:13px; color:var(--muted)}
input[type=date],input[type=text],input[type=search],select{font:inherit; font-size:14.5px; padding:9px 12px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface); color:var(--text)}
.mode-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mode-pick label{border:2px solid var(--border); border-radius:14px; padding:14px; cursor:pointer; display:block; background:var(--surface)}
.mode-pick input{position:absolute; opacity:0; pointer-events:none}
.mode-pick label:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.mode-pick b{display:block; font-size:17px}
.mode-pick span{font-size:13px; color:var(--muted)}
.warn-box{background:var(--again-soft); color:var(--text); border-left:4px solid var(--again); padding:10px 14px; border-radius:0 10px 10px 0; font-size:14px; margin:12px 0}
.info-box{background:var(--accent-soft); border-left:4px solid var(--accent); padding:10px 14px; border-radius:0 10px 10px 0; font-size:14px; margin:12px 0}

/* ---------- plan ---------- */
.weeks{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px}
.week{display:flex; flex-direction:column}
.week .wk{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.week h3{margin:4px 0 4px; font-size:18px}
.week .goal{font-size:13.5px; color:var(--muted); margin:0 0 10px}
.days{list-style:none; padding:0; margin:0 0 12px}
.days a{display:grid; grid-template-columns:44px 1fr auto; gap:8px; align-items:center; padding:8px 8px; border-radius:10px; color:var(--text); text-decoration:none}
.days a:hover{background:var(--surface-2)}
.days a.today{background:var(--accent-soft); outline:1px solid var(--accent)}
.days a.past:not(.complete) .dt{color:var(--review)}
.days .dt{font-size:11.5px; color:var(--muted); line-height:1.2; text-align:center}
.days .dt b{display:block; font-size:15px; color:var(--text)}
.days .ttl{font-size:14px; line-height:1.3}
.days .ring{width:26px; height:26px}
.week .gate{margin-top:auto}

/* ---------- practice ---------- */
.practice-top{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.stats{display:flex; gap:8px; flex-wrap:wrap}
.flash{max-width:820px; margin:0 auto}
.flash .meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.flash .q{font-size:22px; font-weight:650; line-height:1.35; margin:14px 0 6px}
.flash .hint{color:var(--muted); font-size:14px}
.flash .answer{margin-top:16px; padding-top:14px; border-top:1px dashed var(--border)}
.flash .answer ul{padding-left:20px}
.flash .answer li{margin:4px 0}
.rate{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px}
.rate button{justify-content:center; padding:12px; font-weight:600; border-width:2px}
.rate .again{border-color:color-mix(in srgb, var(--again) 35%, transparent); color:var(--again)}
.rate .again:hover,.rate .again.on{background:var(--again-soft)}
.rate .shaky{border-color:color-mix(in srgb, var(--shaky) 35%, transparent); color:var(--shaky)}
.rate .shaky:hover,.rate .shaky.on{background:var(--shaky-soft)}
.rate .good{border-color:color-mix(in srgb, var(--good) 35%, transparent); color:var(--good)}
.rate .good:hover,.rate .good.on{background:var(--good-soft)}
.kbd-hint{font-size:12px; color:var(--muted); text-align:center; margin-top:10px}
kbd{font:600 11px ui-monospace,monospace; padding:1px 5px; border:1px solid var(--border); border-bottom-width:2px; border-radius:4px; background:var(--surface)}
.myanswer{margin-top:14px}
.myanswer summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--accent)}
.myanswer textarea{width:100%; min-height:130px; margin-top:8px; border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  background:var(--surface); color:var(--text); font:inherit; font-size:14px; resize:vertical}
.flash-nav{display:flex; justify-content:space-between; align-items:center; margin-top:12px}
.qlist details{background:var(--surface); border:1px solid var(--border); border-radius:10px; margin:6px 0}
.qlist summary{cursor:pointer; padding:11px 14px; display:flex; gap:8px; align-items:flex-start; list-style:none}
.qlist summary::-webkit-details-marker{display:none}
.qlist summary .qt{flex:1}
.qlist details > div{padding:0 16px 12px 16px; border-top:1px dashed var(--border)}
.qlist details > div ul{padding-left:20px}
.empty{padding:40px 20px; text-align:center; color:var(--muted)}
.empty b{display:block; color:var(--text); font-size:17px; margin-bottom:6px}

/* ---------- library ---------- */
.lib{display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:start}
.lib-nav{position:sticky; top:70px; display:flex; flex-direction:column; gap:2px}
.lib-nav a{padding:7px 10px; border-radius:9px; color:var(--text); text-decoration:none; font-size:14px}
.lib-nav a:hover{background:var(--surface-2)}
.lib-nav a.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
.lib-body h3{font-size:18px; margin:26px 0 8px}
.lib-body h4{font-size:15px; margin:16px 0 6px}
.lib-body p.lead{font-size:16px; margin:0 0 14px}
.lib-body .grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lib-body .grid .card{margin:0}
.lib-body .card + .card{margin-top:0}
.tbl{overflow-x:auto; margin:12px 0; border:1px solid var(--border); border-radius:12px; background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{text-align:left; vertical-align:top; padding:9px 12px; border-bottom:1px solid var(--border)}
th{background:var(--surface-2); font-weight:600; white-space:nowrap}
tr:last-child td{border-bottom:none}
.callout{border-left:4px solid var(--accent); background:var(--accent-soft); padding:10px 14px; border-radius:0 10px 10px 0; margin:12px 0; font-size:14.5px}
.callout.warn{border-color:var(--review); background:var(--review-soft)}
.flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; margin:12px 0}
.flow .node{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-size:13px; min-width:120px; flex:1 1 120px}
.flow .node b{display:block; font-size:13.5px}
.flow .node.hl{border:2px solid var(--accent); background:var(--accent-soft)}
.flow .arr{align-self:center; color:var(--muted); font-weight:700}

/* ---------- files ---------- */
.files-bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.crumbs{display:flex; gap:4px; align-items:center; flex-wrap:wrap; font-size:14px; margin-bottom:10px}
.crumbs a{color:var(--text); text-decoration:none; padding:3px 6px; border-radius:6px}
.crumbs a:hover{background:var(--surface-2)}
.crumbs .sep{color:var(--muted)}
.ftable td{vertical-align:middle}
.ftable td.name{width:100%}
.ftable a.fname{color:var(--text); text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-weight:500}
.ftable a.fname:hover{color:var(--accent)}
.ftable .ico{width:18px; text-align:center}
.ftable td.act{white-space:nowrap; text-align:right}
.ftable td.num{white-space:nowrap; color:var(--muted); font-size:13px}
.drop{border:2px dashed var(--border); border-radius:14px; padding:14px; text-align:center; color:var(--muted); font-size:14px; margin-top:12px}
.drop.over{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.hits{list-style:none; padding:0; margin:0}
.hits li{padding:8px 4px; border-bottom:1px solid var(--border); font-size:14px}
.hits a{font-weight:600; text-decoration:none}
.hits code{font-size:12.5px}

/* ---------- drawer ---------- */
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(720px,100vw); background:var(--surface); border-left:1px solid var(--border);
  z-index:40; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s ease, visibility .22s; visibility:hidden}
.drawer.open{transform:none; visibility:visible; box-shadow:-8px 0 30px rgba(0,0,0,.12)}
.drawer-head{display:flex; flex-direction:column; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border)}
.drawer-title{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-weight:600; word-break:break-all}
.drawer-actions{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.drawer textarea{flex:1; border:none; resize:none; padding:16px 18px; background:var(--surface); color:var(--text);
  font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; outline:none}
.drawer .md{flex:1; overflow:auto; padding:6px 22px 30px}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:35}
.md table{margin:10px 0}
.md h1{font-size:22px} .md h2{font-size:18px} .md h3{font-size:16px}
.md blockquote{margin:10px 0; padding:4px 14px; border-left:3px solid var(--border); color:var(--muted)}

/* ---------- viewer ---------- */
.viewer{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.75); display:flex; flex-direction:column}
.viewer-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; background:var(--surface); color:var(--text)}
.viewer-head .btn,.viewer-head button{margin-left:6px}
.viewer-body{flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; padding:10px}
.viewer-body img{max-width:100%; max-height:100%; object-fit:contain; background:#fff}
.viewer-body iframe{width:100%; height:100%; border:none; background:#fff; border-radius:6px}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 16px;
  border-radius:12px; font-size:14px; z-index:60; box-shadow:0 6px 24px rgba(0,0,0,.2); max-width:calc(100vw - 32px)}
.toast.err{background:var(--again); color:#fff}

/* ---------- settings ---------- */
.settings{max-width:680px}
.settings .card{margin-bottom:14px}
.kv{display:grid; grid-template-columns:160px 1fr; gap:10px 14px; align-items:center}
.kv code{word-break:break-all}

/* ---------- AI assistant, modals, my cards ---------- */
.ask-btn{font-size:13px; padding:6px 12px; border-radius:99px; background:var(--accent-soft); border-color:transparent; color:var(--accent); font-weight:650}
.ask-btn:hover{background:var(--accent-soft); filter:brightness(.97)}
.p-custom{background:var(--build-soft); color:var(--build)}
.practice-tools{margin:-4px 0 14px}
.assist{position:fixed; top:0; right:0; bottom:0; width:min(480px,100vw); background:var(--surface); border-left:1px solid var(--border);
  z-index:45; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s ease, visibility .22s; visibility:hidden}
.assist.open{transform:none; visibility:visible; box-shadow:-8px 0 30px rgba(0,0,0,.14)}
.assist-head{display:flex; flex-direction:column; gap:6px; padding:12px 14px 8px; border-bottom:1px solid var(--border)}
.assist-title{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.assist-actions{display:flex; gap:4px; flex-wrap:wrap; align-items:center}
.assist-actions #asClose{margin-left:auto}
.assist-ctx{display:flex; gap:6px; align-items:center; font-size:12.5px; padding:6px 14px; border-bottom:1px solid var(--border); color:var(--muted)}
.assist-log{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px}
.assist-empty{color:var(--muted); font-size:14px}
.assist-empty ul{padding-left:18px}
.assist-foot{border-top:1px solid var(--border); padding:10px 14px 12px; display:flex; flex-direction:column; gap:8px}
.assist-foot textarea{width:100%; resize:vertical; min-height:64px; border:1px solid var(--border); border-radius:10px; padding:9px 11px;
  background:var(--bg); color:var(--text); font:inherit; font-size:14px}
.msg{padding:9px 12px; border-radius:12px; font-size:14px; line-height:1.55; max-width:100%; overflow-wrap:anywhere}
.msg.me{align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:4px; max-width:88%}
.msg.ai{align-self:flex-start; background:var(--surface-2); border-bottom-left-radius:4px}
.msg.ai > :first-child{margin-top:0} .msg.ai > :last-child{margin-bottom:0}
.msg.ai h1,.msg.ai h2,.msg.ai h3{font-size:15px; margin:10px 0 4px}
.msg.ai ul,.msg.ai ol{padding-left:20px; margin:6px 0}
.msg.note{align-self:center; font-size:12.5px; color:var(--muted); background:none; text-align:center}
.msg.err{background:var(--again-soft); border-left:3px solid var(--again)}
.msg.thinking{display:flex; gap:4px; padding:12px 14px}
.msg.thinking span{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite ease-in-out}
.msg.thinking span:nth-child(2){animation-delay:.2s} .msg.thinking span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25} 40%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .msg.thinking span{animation:none; opacity:.6} .assist{transition:none} }
.ai-bar{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:14px; padding:10px 12px; border-radius:10px; background:var(--surface-2)}
.ai-label{font-size:12.5px; font-weight:700; color:var(--accent); margin-right:4px}
.ai-out{margin-top:10px; border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--surface)}
.ai-out-head{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.ai-out .md > :first-child{margin-top:0}
.ai-out .md h3{font-size:15px; margin:12px 0 4px}
.ai-out .md ul{padding-left:20px}
.modal-wrap{position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.35); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; overflow-y:auto}
.modal{background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); width:min(560px,100%); box-shadow:0 12px 40px rgba(0,0,0,.2)}
.modal.wide{width:min(760px,100%)}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border)}
.modal-head h2{margin:0; font-size:18px}
.modal-body{padding:4px 18px 18px}
.modal-body textarea,.modal-body select,.modal-body input[type=text]{width:100%; border:1px solid var(--border); border-radius:10px; padding:9px 11px; background:var(--bg); color:var(--text); font:inherit; font-size:14px}
.gen-list{display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow-y:auto}
.gen-card{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border); border-radius:10px; cursor:pointer}
.gen-card input{margin-top:5px}
.gen-card .md ul{padding-left:18px; margin:4px 0 0}
.settings input[type=password],.settings input[type=text]{border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:var(--bg); color:var(--text); font:inherit; font-size:14px; min-width:0}
.settings select{max-width:100%}

/* ---------- extendable topics ---------- */
.p-pack{background:var(--rest-soft); color:var(--rest)}
.chip-add{display:inline-flex; align-items:center; font-size:13px; padding:4px 11px; border-radius:99px; border:1px dashed var(--border); color:var(--accent); text-decoration:none}
.chip-add:hover{background:var(--accent-soft)}
.lib-nav-h{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:14px 10px 4px}
.lib-add{margin-top:10px; width:100%; justify-content:center; font-size:13px; padding:7px 10px; border-style:dashed; color:var(--accent)}
.lib-add.ghost{margin-top:4px; border-color:transparent; color:var(--muted)}
.topic-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.topic-head h2{margin:0}
.topic-actions{margin:12px 0 6px; padding-bottom:12px; border-bottom:1px solid var(--border)}
button.danger{color:var(--again)}
.topic-md h2{font-size:18px; margin-top:22px} .topic-md h3{font-size:15px}
.tw-subs{list-style:none; padding:0; margin:6px 0 10px; display:flex; flex-direction:column; gap:6px}
.tw-subs li{display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border:1px solid var(--border); border-radius:10px}
.tw-subs li > div{flex:1}
.tw-subs input[type=checkbox]{margin-top:10px}
.tw-prog{padding-left:0; list-style:none; margin:12px 0 0; display:flex; flex-direction:column; gap:4px; font-size:14px}
.tw-prog .st{display:inline-block; width:18px; text-align:center}
.tw-prog .ok .st{color:var(--good)} .tw-prog .bad .st{color:var(--again)} .tw-prog .run{font-weight:600}
.tw-prog .bad .muted{color:var(--again)}
details.field > summary{cursor:pointer; color:var(--accent)}
details.field textarea{margin-top:8px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .lib{grid-template-columns:1fr}
  .lib-nav{position:static; flex-direction:row; flex-wrap:wrap}
  .lib-nav a{background:var(--surface-2); font-size:13px; padding:5px 10px}
}
@media (max-width:720px){
  .topbar-inner{flex-wrap:wrap; gap:8px 12px; padding:8px 16px}
  .tabs{order:3; width:100%; overflow-x:auto}
  .tabs a{padding:6px 10px; font-size:14px}
  #countdown{display:none}
  .view{padding:18px 16px 70px}
  .hero{padding:18px}
  .hero h1{font-size:23px}
  .rhythm.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flash .q{font-size:19px}
  .mode-pick{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .ftable td.num.mt{display:none}
  .ask-btn{padding:5px 10px}
}
@media print{
  .topbar,.drawer,.scrim,.assist,.ai-bar{display:none}
}