:root{
  --paper:#F6F7F9; --card:#FFFFFF; --ink:#16181D; --ink-soft:#5B616E;
  --hairline:#E6E7EA; --accent:#3B5BDB; --accent-ink:#2A43AC;
  --hl:#FCE588; --tab:#F2825C;
  --display:"Fraunces",Georgia,serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sp:clamp(16px,4vw,28px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--body); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
button{font-family:inherit}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:10px var(--sp); padding-top:max(10px,env(safe-area-inset-top));
  background:rgba(246,247,249,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.wordmark{
  font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; margin-right:auto;
}
.wordmark span{color:var(--ink-soft)}
.icon-btn{
  border:1px solid var(--hairline); background:var(--card); border-radius:10px;
  width:38px; height:38px; font-size:16px; color:var(--ink); cursor:pointer;
}
.today-btn{
  position:relative; border:1px solid var(--ink); background:var(--ink); color:#fff;
  border-radius:999px; padding:9px 16px; font-weight:500; font-size:14px; cursor:pointer;
}
.due-tab{
  position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; background:var(--tab); color:#3a1402;
  font:600 11px/1 var(--mono); border-radius:6px; transform:rotate(4deg);
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}

/* ---------- layout ---------- */
.layout{display:block}
.spine{
  background:var(--card); border-right:1px solid var(--hairline);
}
.spine-head{
  font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); padding:18px var(--sp) 10px;
}
.reader{min-height:60vh}

/* desktop two-pane */
@media (min-width:900px){
  .layout{display:grid; grid-template-columns:320px 1fr; align-items:start}
  .spine{
    position:sticky; top:59px; height:calc(100vh - 59px); overflow-y:auto;
  }
}

/* mobile: spine as drawer */
@media (max-width:899px){
  .spine{
    position:fixed; z-index:40; top:0; left:0; bottom:0; width:min(84vw,340px);
    transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto;
    padding-top:max(8px,env(safe-area-inset-top));
  }
  body.nav-open .spine{transform:none}
  .scrim{position:fixed; inset:0; z-index:35; background:rgba(20,22,28,.4)}
}

/* ---------- spine nav (taxonomy) ---------- */
#spineNav{padding:0 8px 40px}
.mat-group{margin:2px 0 10px}
.mat-row{
  display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; padding:10px 12px; border-radius:10px;
  color:var(--ink);
}
.mat-row:hover{background:var(--paper)}
.mat-row .mat-name{font-family:var(--display); font-weight:600; font-size:16px}
.mat-row .mat-meta{margin-left:auto; font:500 11px/1 var(--mono); color:var(--ink-soft)}

.tree{list-style:none; margin:0; padding:0 0 0 6px}
.tree .tree{padding-left:14px; border-left:1px solid var(--hairline); margin-left:10px}
.node{margin:1px 0}
.node-row{
  display:flex; align-items:center; gap:6px; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; padding:7px 10px; border-radius:8px;
  color:var(--ink); font-size:14px; line-height:1.3;
}
.node-row:hover{background:var(--paper)}
.node-row .tw{width:14px; color:var(--ink-soft); font-size:10px; flex:none; transition:transform .2s}
.node.open > .node-row .tw{transform:rotate(90deg)}
.node-row.leaf{color:var(--ink)}
.node-row.empty{color:var(--ink-soft); cursor:default}
.node-row.has::after{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);
  margin-left:auto; flex:none; opacity:.55;
}
.node-row.active{background:linear-gradient(transparent 62%, var(--hl) 62%)}
.node > .tree{display:none}
.node.open > .tree{display:block}

/* ---------- home ---------- */
.home{padding:var(--sp); display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); max-width:1100px}
.intro{grid-column:1/-1; margin:6px 0 2px}
.intro h1{
  font-family:var(--display); font-weight:600; font-size:clamp(28px,6vw,44px);
  letter-spacing:-.02em; margin:0 0 6px; line-height:1.05;
}
.intro h1 mark{background:linear-gradient(transparent 58%, var(--hl) 58%); color:inherit; padding:0 .1em}
.intro p{color:var(--ink-soft); margin:0; max-width:52ch}
.mat-card{
  display:block; text-align:left; background:var(--card); border:1px solid var(--hairline);
  border-radius:16px; padding:18px; cursor:pointer; color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.mat-card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(22,24,29,.07)}
.mat-card h3{font-family:var(--display); font-weight:600; font-size:20px; margin:0 0 4px}
.mat-card .tom{color:var(--ink-soft); font-size:13px; margin:0 0 14px; min-height:2.6em}
.mat-card .stats{display:flex; gap:14px; font:500 12px/1 var(--mono); color:var(--ink-soft)}
.mat-card .stats b{color:var(--accent-ink); font-weight:600}

/* ---------- lesson ---------- */
.lesson{padding:var(--sp); max-width:720px; margin:0 auto}
.lesson.enter{animation:rise .32s ease both}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.crumb{font:500 12px/1.6 var(--mono); color:var(--ink-soft); margin-bottom:14px; word-break:break-word}
.crumb i{color:var(--hairline); font-style:normal; padding:0 4px}
.kind{
  display:inline-block; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  padding:5px 9px; border-radius:6px; margin-bottom:14px;
}
.kind.review{background:#eef1ff; color:var(--accent-ink)}
.kind.new{background:#fff6d6; color:#7a5b00}
.kind.fallback{background:var(--paper); color:var(--ink-soft)}
.lesson h2:first-of-type{
  font-family:var(--display); font-weight:600; font-size:clamp(26px,5vw,38px);
  letter-spacing:-.02em; line-height:1.1; margin:0 0 18px; position:relative; display:inline;
}
.lesson h2:first-of-type .swipe{
  position:absolute; left:-.06em; right:-.06em; bottom:.06em; height:.42em; z-index:-1;
  background:var(--hl); transform-origin:left; transform:scaleX(0); animation:swipe .5s .15s ease forwards;
}
@keyframes swipe{to{transform:scaleX(1)}}
.lesson-body{font-size:17px; line-height:1.72}
.lesson-body h2{font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--accent-ink); margin:30px 0 6px}
.lesson-body strong{font-weight:600}
.lesson-body p{margin:0 0 14px}
.lesson-body ul,.lesson-body ol{margin:0 0 14px; padding-left:1.2em}
.lesson-body li{margin:4px 0}
.lesson-body code{font-family:var(--mono); font-size:.9em; background:var(--card);
  border:1px solid var(--hairline); border-radius:5px; padding:1px 5px}
.due-rest{margin-top:36px; padding-top:18px; border-top:1px solid var(--hairline)}
.due-rest h4{font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 10px}
.due-rest button{display:flex; gap:10px; width:100%; text-align:left; border:0; background:none;
  cursor:pointer; padding:8px 0; color:var(--ink); font-size:14px}
.due-rest .n{font:600 12px/1.5 var(--mono); color:var(--tab)}
.empty-state{padding:var(--sp); color:var(--ink-soft); max-width:48ch}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .lesson h2:first-of-type .swipe{transform:scaleX(1)}
}

/* ---------- login ---------- */
.login{position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--paper); padding:24px}
.login-card{background:var(--card); border:1px solid var(--hairline); border-radius:18px;
  padding:32px; width:min(380px,92vw); display:flex; flex-direction:column; gap:12px;
  box-shadow:0 20px 60px rgba(22,24,29,.08)}
.login-mark{font-family:var(--display); font-weight:600; font-size:26px; letter-spacing:-.01em}
.login-mark span{color:var(--ink-soft)}
.login-sub{margin:0 0 6px; color:var(--ink-soft); font-size:14px}
.login-card input{border:1px solid var(--hairline); border-radius:10px; padding:12px 14px; font-size:16px; background:var(--paper)}
.login-card input:focus{outline:2px solid var(--accent); border-color:transparent}
.login-card button{border:0; background:var(--ink); color:#fff; border-radius:999px; padding:12px; font-weight:500; font-size:15px; cursor:pointer}
.login-err{margin:0; color:#b4232a; font-size:13px}

/* ---------- topbar extras ---------- */
.ghost-btn{border:1px solid var(--hairline); background:var(--card); color:var(--ink);
  border-radius:999px; padding:9px 14px; font-size:14px; font-weight:500; cursor:pointer}
.ghost-btn:hover{background:var(--paper)}

/* ---------- manage ---------- */
.manage{padding:var(--sp); max-width:860px; margin:0 auto}
.manage h1{font-family:var(--display); font-weight:600; font-size:clamp(26px,5vw,38px);
  letter-spacing:-.02em; margin:0 0 4px}
.manage .lead{color:var(--ink-soft); margin:0 0 26px; max-width:56ch}
.panel{background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:20px; margin-bottom:18px}
.panel h2{font-family:var(--display); font-weight:600; font-size:19px; margin:0 0 14px}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px}
.field label{font:500 12px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft)}
.field input,.field textarea,.field select{border:1px solid var(--hairline); border-radius:10px;
  padding:10px 12px; font-size:15px; background:var(--paper); font-family:inherit}
.field textarea{font-family:var(--mono); font-size:13px; line-height:1.6; min-height:200px; white-space:pre; tab-size:4}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent); border-color:transparent}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.btn{border:0; background:var(--ink); color:#fff; border-radius:999px; padding:10px 16px; font-weight:500; font-size:14px; cursor:pointer}
.btn.alt{background:var(--accent)}
.btn.line{background:var(--card); color:var(--ink); border:1px solid var(--hairline)}
.btn.danger{background:#fff; color:#b4232a; border:1px solid #f0c9cb}
.btn:disabled{opacity:.5; cursor:default}
.check{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft)}

.mat-admin{border:1px solid var(--hairline); border-radius:14px; margin-bottom:14px; overflow:hidden}
.mat-admin > summary{list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:10px; background:var(--card)}
.mat-admin > summary::-webkit-details-marker{display:none}
.mat-admin > summary h3{font-family:var(--display); font-weight:600; font-size:18px; margin:0}
.mat-admin > summary .meta{margin-left:auto; font:500 12px/1 var(--mono); color:var(--ink-soft)}
.mat-admin[open] > summary{border-bottom:1px solid var(--hairline)}
.mat-body{padding:18px}
.mat-body h4{font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin:20px 0 8px}
.mat-body h4:first-child{margin-top:0}

/* tree editor */
.edit-tree{list-style:none; margin:0 0 10px; padding:0}
.edit-tree .edit-tree{padding-left:16px; border-left:1px solid var(--hairline); margin-left:8px}
.edit-row{display:flex; align-items:center; gap:8px; padding:4px 0}
.edit-row .nm{font-size:14px}
.edit-row .mini{border:1px solid var(--hairline); background:var(--card); border-radius:7px;
  width:24px; height:24px; font-size:13px; cursor:pointer; color:var(--ink-soft); line-height:1}
.edit-row .mini:hover{background:var(--paper); color:var(--ink)}

/* ---------- job panel ---------- */
.job-panel{position:fixed; z-index:90; right:16px; bottom:16px; width:min(460px,92vw);
  background:#14161c; color:#e7e9ee; border-radius:14px; box-shadow:0 16px 50px rgba(0,0,0,.35); overflow:hidden}
.job-head{display:flex; align-items:center; gap:10px; padding:10px 14px; background:#1c1f27;
  font:500 13px/1.3 var(--mono)}
.job-head .icon-btn{background:transparent; border:0; color:#9aa0ad; width:auto; height:auto}
.job-log{margin:0; padding:12px 14px; max-height:38vh; overflow:auto; font:400 12px/1.55 var(--mono);
  white-space:pre-wrap; word-break:break-word; color:#cdd2db}