/* ============================================================
   Mandarin Path — base: tokens, reset, layout
   Ink & Scroll: rice paper, wet brush, seal vermillion.
   ============================================================ */

:root{
  /* paper and ink */
  --bg:#f2ece0;
  --bg-elev:#fbf7ef;
  --bg-sunk:#e8e0d0;
  --panel:#fbf7ef;
  --border:#ddd2bd;
  --border-strong:#c3b69c;
  --text:#191814;
  --text-2:#4d4840;
  --text-3:#857e70;

  /* the seal */
  --seal:#c1372b;
  --seal-deep:#8d2318;
  --accent:#c1372b;
  --accent-2:#d9503f;
  --accent-soft:#f6e3dc;
  --accent-ink:#8d2318;

  /* semantic, mixed down to sit on paper */
  --ok:#2f7d4f;     --ok-soft:#e3efdf;
  --warn:#a8710f;   --warn-soft:#f6ead1;
  --bad:#b8332a;    --bad-soft:#f7e2de;
  --info:#31627f;   --info-soft:#e0ebf0;

  /* tones */
  --tone1:#b8332a;
  --tone2:#2f7d4f;
  --tone3:#31627f;
  --tone4:#6b4bab;
  --tone5:#857e70;

  /* levels */
  --lvl1:#2f7d4f;
  --lvl2:#31627f;
  --lvl3:#6b4bab;

  /* illustration palette */
  --art-ink:#2b2924;
  --art-ink-near:#241f1a;
  --art-paper:#f5f0e5;
  --art-sky-1:#efe7d6;
  --art-sky-2:#e4dcc8;
  --art-disc:#d9c08a;
  --art-lamp:#d99b2e;
  --art-seal:#c1372b;

  --radius:13px;
  --radius-sm:8px;
  --radius-lg:20px;
  --shadow-1:0 1px 2px rgba(60,48,28,.07), 0 1px 3px rgba(60,48,28,.05);
  --shadow-2:0 5px 16px rgba(60,48,28,.10), 0 1px 3px rgba(60,48,28,.06);
  --shadow-3:0 22px 52px rgba(50,40,24,.20), 0 5px 14px rgba(50,40,24,.10);

  --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --han:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun","Noto Sans SC","PingFang SC","Microsoft YaHei",serif;
  --han-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;

  --topbar-h:62px;
  --sidebar-w:248px;
  --maxw:1180px;

  --paper-grain:.035;
}

html[data-theme="dark"]{
  --bg:#12110f;
  --bg-elev:#1c1a17;
  --bg-sunk:#0a0908;
  --panel:#1c1a17;
  --border:#2f2b25;
  --border-strong:#4a443a;
  --text:#efe8da;
  --text-2:#aaa294;
  --text-3:#7e776a;

  --seal:#d8503d;
  --seal-deep:#f0947f;
  --accent:#d8503d;
  --accent-2:#e8705c;
  --accent-soft:#331914;
  --accent-ink:#f0947f;

  --ok:#59c283;     --ok-soft:#14291c;
  --warn:#e0a63c;   --warn-soft:#2c2211;
  --bad:#e8695c;    --bad-soft:#2e1613;
  --info:#6fa8c7;   --info-soft:#12222b;

  --tone1:#e8695c;
  --tone2:#59c283;
  --tone3:#6fa8c7;
  --tone4:#a98ae0;
  --tone5:#8d8679;

  --lvl1:#59c283;
  --lvl2:#6fa8c7;
  --lvl3:#a98ae0;

  /* at night the painting inverts: pale ink on near-black silk, with the
     haze sitting over the peaks rather than behind them */
  --art-ink:#d3ccbb;
  --art-ink-near:#080807;
  --art-paper:#131210;
  --art-sky-1:#100f0d;
  --art-sky-2:#070706;
  --art-disc:#f2e7c4;
  --art-lamp:#efb44c;
  --art-seal:#d8503d;

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 5px 18px rgba(0,0,0,.55);
  --shadow-3:0 22px 52px rgba(0,0,0,.7);

  --paper-grain:.05;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* the paper itself: fibre grain plus a faint warm bloom */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1200px 520px at 14% -8%, color-mix(in srgb, var(--seal) 7%, transparent), transparent 62%),
    radial-gradient(980px 460px at 92% 4%, color-mix(in srgb, var(--info) 7%, transparent), transparent 60%);
  opacity:.75;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--paper-grain);
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.shell,.topbar,.modal-root,.toast-root{position:relative;z-index:1}

h1,h2,h3,h4{margin:0 0 .4em;line-height:1.22;font-weight:600;letter-spacing:-.008em}
h1{font-family:var(--serif);font-size:1.92rem;font-weight:600;letter-spacing:-.018em}
h2{font-family:var(--serif);font-size:1.34rem}
h3{font-size:1.05rem;font-weight:650}
h4{font-size:.93rem;font-weight:650}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0 0 1em;padding-left:1.3em}
li{margin:.25em 0}
hr{border:0;border-top:1px solid var(--border);margin:1.5rem 0}
code,kbd{font-family:var(--mono);font-size:.85em}
:focus-visible{outline:2px solid var(--seal);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--accent-ink)}

.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;background:var(--bg);z-index:999}
.boot-mark{
  font-family:var(--han);font-size:64px;color:var(--seal);
  animation:inkbloom 1.8s ease-in-out infinite;
}
.boot-text{color:var(--text-3);font-size:.9rem;letter-spacing:.04em}
@keyframes inkbloom{
  0%,100%{opacity:.28;transform:scale(.94);filter:blur(1.2px)}
  50%{opacity:1;transform:scale(1);filter:blur(0)}
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:60;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  background:color-mix(in srgb, var(--bg-elev) 86%, transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--seal) 38%,transparent) 22%,color-mix(in srgb,var(--seal) 12%,transparent) 55%,transparent);
  opacity:.5;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{
  width:34px;height:34px;border-radius:7px;display:grid;place-items:center;
  background:var(--seal);color:#fdf7ec;font-family:var(--han);font-size:19px;font-weight:600;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,#fdf7ec 60%,transparent), var(--shadow-1);
  position:relative;
}
.brand-text{display:flex;flex-direction:column;line-height:1.14;font-weight:600;font-size:.98rem;font-family:var(--serif)}
.brand-text em{font-style:normal;font-size:.66rem;color:var(--text-3);font-weight:500;letter-spacing:.11em;text-transform:uppercase;font-family:var(--sans)}
.nav-toggle{display:none}

.topbar-search{position:relative;flex:1;max-width:460px;margin:0 auto;display:flex;align-items:center}
.topbar-search .ico{position:absolute;left:12px;width:17px;height:17px;color:var(--text-3);pointer-events:none}
.topbar-search input{
  width:100%;height:38px;padding:0 42px 0 36px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-sunk);
  font-size:.88rem;transition:border-color .15s,background .15s,box-shadow .15s;
}
.topbar-search input:focus{outline:none;border-color:var(--seal);background:var(--bg-elev);box-shadow:0 0 0 3px var(--accent-soft)}
.topbar-search kbd{
  position:absolute;right:11px;padding:1px 6px;border-radius:5px;border:1px solid var(--border-strong);
  color:var(--text-3);font-size:.7rem;background:var(--bg-elev);pointer-events:none
}
.topbar-right{display:flex;align-items:center;gap:6px;flex-shrink:0}

.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;border-radius:9px;
  border:1px solid transparent;background:transparent;cursor:pointer;color:var(--text-2);
  transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--bg-sunk);color:var(--text)}
.ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:none}
html[data-theme="dark"] .ico-moon{display:block}

.streak-chip{
  display:flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;
  background:var(--warn-soft);color:var(--warn);font-weight:650;font-size:.82rem;
  border:1px solid color-mix(in srgb,var(--warn) 24%,transparent);
}
.streak-chip .ico{width:15px;height:15px}

/* ---------- shell ---------- */
.shell{display:flex;padding-top:var(--topbar-h);min-height:100vh}

.sidebar{
  position:fixed;top:var(--topbar-h);bottom:0;left:0;width:var(--sidebar-w);z-index:50;
  background:color-mix(in srgb, var(--bg-elev) 70%, transparent);
  backdrop-filter:blur(10px);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
}
.nav-scroll{overflow-y:auto;padding:6px 10px 24px;flex:1}
.nav-level{padding:12px 14px;border-bottom:1px solid var(--border)}
.nav-group{margin-bottom:14px}
.nav-group-title{
  font-size:.64rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700;
  color:var(--text-3);padding:9px 10px 5px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  font-size:.885rem;font-weight:500;color:var(--text-2);
  transition:background .13s,color .13s,transform .13s;position:relative;
}
.nav-item:hover{background:var(--bg-sunk);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:640}
.nav-item.active::before{
  content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:var(--seal);
}
html[data-theme="dark"] .nav-item.active{color:var(--accent)}
.nav-ico{
  width:23px;height:23px;display:grid;place-items:center;flex-shrink:0;
  font-family:var(--han);font-size:13px;border-radius:5px;background:var(--bg-sunk);color:var(--text-3);
  transition:background .13s,color .13s;
}
.nav-item.active .nav-ico{background:var(--seal);color:#fdf7ec}
.nav-badge{
  margin-left:auto;background:var(--seal);color:#fdf7ec;font-size:.68rem;font-weight:700;
  padding:1px 7px;border-radius:999px;min-width:20px;text-align:center
}

.main{
  flex:1;margin-left:var(--sidebar-w);min-width:0;
  padding:26px 30px 96px;
}
.page{max-width:var(--maxw);margin:0 auto;animation:fadeUp .26s cubic-bezier(.2,.7,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.mobilebar{display:none}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .nav-toggle{display:grid}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-3);background:var(--bg-elev)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .shell::after{content:"";position:fixed;inset:var(--topbar-h) 0 0;background:rgba(0,0,0,.4);z-index:45}
  .main{margin-left:0;padding:20px 16px 96px}
  .brand-text{display:none}
}
@media (max-width:720px){
  .topbar{gap:6px;padding:0 10px}
  .topbar-search{max-width:none}
  .topbar-search kbd{display:none}
  .streak-chip{display:none}
  .mobilebar{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:55;
    background:color-mix(in srgb, var(--bg-elev) 94%, transparent);backdrop-filter:blur(12px);
    border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);
  }
  .mobilebar a{
    display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;
    font-size:.64rem;color:var(--text-3);font-weight:600
  }
  .mobilebar a span{font-size:15px;font-family:var(--han)}
  .mobilebar a.active{color:var(--seal)}
  h1{font-size:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* print */
@media print{.topbar,.sidebar,.mobilebar,body::before,body::after{display:none}.main{margin:0;padding:0}}