/* ===== Professional layer: refined tokens, icons, 3D, new components ===== */
:root{ --bg:#f7f5f2; --card:#ffffff; --ink:#1d1a27; --muted:#77718a; --line:#ebe6e0; --brand:#f2643f; --r:18px;
  --shadow:0 1px 2px rgba(29,26,39,.06),0 6px 20px -8px rgba(29,26,39,.12); --lift:0 2px 4px rgba(29,26,39,.08),0 18px 40px -16px rgba(29,26,39,.28); }
:root[data-theme="dark"]{ --bg:#111019; --card:#1b1926; --ink:#f1eef8; --muted:#9c96b0; --line:#2b2839; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -10px rgba(0,0,0,.6); --lift:0 2px 4px rgba(0,0,0,.4),0 20px 40px -14px rgba(0,0,0,.7); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#111019; --card:#1b1926; --ink:#f1eef8; --muted:#9c96b0; --line:#2b2839; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -10px rgba(0,0,0,.6); --lift:0 2px 4px rgba(0,0,0,.4),0 20px 40px -14px rgba(0,0,0,.7);} }
body{ letter-spacing:-.01em; -webkit-font-smoothing:antialiased }
h1,h2,h3,b{ font-weight:800; letter-spacing:-.02em }
.ic{ display:inline-block; vertical-align:-.18em; flex:none }
.emo{ vertical-align:-.15em }
.card{ border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s }
.card:hover{ box-shadow:var(--lift) }
.chip{ border:1px solid var(--line); box-shadow:var(--shadow); font-weight:700; gap:6px }
.chip .ic{ color:var(--brand) }
.btn{ border-radius:14px; font-weight:800; box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px -6px color-mix(in srgb,var(--brand) 70%,transparent); background:linear-gradient(180deg,#ff7a59,#f2643f); display:flex; align-items:center; justify-content:center; gap:8px }
.btn:active{ transform:translateY(1px) scale(.99); box-shadow:none }
.btn.ghost{ background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink) }
.btn.good{ background:linear-gradient(180deg,#3ad89a,#22b879); box-shadow:0 6px 16px -6px #22b87988 }
.btn.blue{ background:linear-gradient(180deg,#58aaff,#2f86f0); box-shadow:0 6px 16px -6px #2f86f088 }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-weight:700; font-size:14px; box-shadow:var(--shadow) }
.pill.primary{ background:var(--ink); color:var(--bg); border-color:var(--ink) }
.iconbtn{ width:40px; height:40px; border-radius:12px; display:inline-grid; place-items:center; border:1px solid var(--line); background:var(--card) }
.ico-badge{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--brand); flex:none; box-shadow:0 6px 14px -6px currentColor }
.nav{ border-top:1px solid var(--line); backdrop-filter:saturate(1.4) blur(14px); background:color-mix(in srgb,var(--card) 82%,transparent) }
.nav button b{ display:grid; place-items:center; height:28px }
.nav button.on b{ transform:translateY(-1px) }
.top{ background:color-mix(in srgb,var(--bg) 85%,transparent); backdrop-filter:blur(12px) }
.unit{ border-radius:20px; box-shadow:var(--lift); position:relative; overflow:hidden }
.unit::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.25),transparent 60%); pointer-events:none }
/* 3D path nodes */
.node{ box-shadow:0 7px 0 rgba(0,0,0,.18),0 14px 24px -10px rgba(0,0,0,.35); background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%) !important; transform-style:preserve-3d; transition:transform .15s }
.node:hover{ transform:translateY(-2px) rotateX(10deg) }
.node:active{ transform:translateY(5px) }
/* Hero */
.hero{ position:relative; height:200px; margin:6px -16px 4px; overflow:hidden; border-radius:0 0 28px 28px; background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--brand) 22%,var(--bg)),var(--bg) 70%) }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:pointer; touch-action:pan-y }
.hero-text{ position:absolute; left:20px; bottom:14px; pointer-events:none; display:flex; flex-direction:column }
.hero-text small{ color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:11px }
.hero-text b{ font-size:24px; font-family:"M PLUS Rounded 1c",sans-serif }
.hero-text span{ color:var(--muted); font-size:12px }
/* Tiles & mix */
.tile{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; margin:6px 0; text-align:left; transform-style:preserve-3d; will-change:transform }
.tile .ic{ color:var(--tc,var(--brand)) }
.tile small{ color:var(--muted); font-size:12px; font-weight:600 }
.mixsteps{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px }
.mixsteps button{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 4px; border-radius:14px; border:1px solid var(--line); background:var(--bg); font-size:12px }
.mixsteps button span{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--card); border:1px solid var(--line) }
.mixsteps button.done span{ background:var(--good); color:#fff; border-color:var(--good) }
.mixsteps small{ color:var(--muted); font-size:10.5px; text-align:center }
/* Sheet */
.sheet{ animation:sheetIn .28s cubic-bezier(.2,.8,.2,1) }
@keyframes sheetIn{ from{ transform:translateY(24px); opacity:0 } }
.txt.small{ font-size:15px; padding:12px; margin-top:8px }
.code{ background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:11px; white-space:pre-wrap; overflow:auto }
.timein{ font:inherit; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:4px 8px }
/* Tracing */
.tracer{ position:relative; width:min(78vw,320px); aspect-ratio:1; margin:8px auto 0; border-radius:22px; background:var(--card); border:1px solid var(--line); box-shadow:var(--lift); touch-action:none }
.tracer .tr-guide,.tracer .tr-pad{ position:absolute; inset:0; width:100%; height:100% }
.tracer .grid line{ stroke:var(--line); stroke-dasharray:3 3; stroke-width:.6 }
#trGhost path{ fill:none; stroke:color-mix(in srgb,var(--muted) 30%,transparent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round }
#trDone path{ fill:none; stroke:var(--ink); stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round }
#trHint path{ fill:none; stroke:var(--brand); stroke-width:3; stroke-linecap:round; stroke-dasharray:200; stroke-dashoffset:200; animation:draw 1.2s ease-in-out infinite }
#trHint circle{ fill:var(--brand) }
@keyframes draw{ 60%,100%{ stroke-dashoffset:0 } }
.tr-ghostch{ position:absolute; inset:0; display:grid; place-items:center; font-size:220px; color:color-mix(in srgb,var(--muted) 18%,transparent); pointer-events:none }
.shake{ animation:shake .35s }
.kgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px }
.kgrid button{ aspect-ratio:1; border-radius:14px; border:1px solid var(--line); background:var(--card); font-size:24px; box-shadow:var(--shadow) }
.kgrid button.done{ border-color:var(--good); color:var(--good) }
.mnemo{ background:color-mix(in srgb,var(--gold) 9%,var(--card)) }
.mnemo-img{ width:120px; height:120px; border-radius:14px; display:block; margin:10px auto 0; border:1px solid var(--line) }
#mcol button{ border-radius:50% }
/* Review 3D flip */
.flash{ transform-style:preserve-3d; perspective:900px }
.flash.flipped{ animation:flip3d .5s cubic-bezier(.2,.8,.2,1) }
@keyframes flip3d{ from{ transform:perspective(900px) rotateY(-100deg) scale(.96) } }
.grades button{ border-radius:14px; box-shadow:0 6px 14px -8px rgba(0,0,0,.5) }
/* League */
.league-hero{ position:relative; height:220px; border-radius:20px; overflow:hidden; background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 35%,var(--card)),var(--card)) }
.league-hero canvas{ width:100%; height:100%; display:block }
.lh-text{ position:absolute; left:16px; top:12px; display:flex; flex-direction:column }
.lh-text small{ color:var(--muted) }
.board{ display:flex; flex-direction:column; gap:6px }
.brow{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--card); border:1px solid var(--line) }
.brow.me{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,var(--card)) }
.brow.cut{ border-bottom:2px dashed var(--good); }
.rk{ width:24px; font-weight:800; color:var(--muted); text-align:center }
.rk.top0{ color:#f5b400 } .rk.top1{ color:#9aa6b2 } .rk.top2{ color:#c07a46 }
.av{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800 }
/* Den & shop */
.den{ position:relative; height:240px; border-radius:22px; overflow:hidden; background:radial-gradient(100% 80% at 50% 100%,#3a2246,#140f1f) }
.den canvas{ position:absolute; inset:0; width:100%; height:100% }
.den-fox{ position:absolute; left:50%; bottom:6px; transform:translateX(-50%); animation:float 3s ease-in-out infinite; filter:drop-shadow(0 14px 18px rgba(0,0,0,.5)) }
@keyframes float{ 50%{ transform:translate(-50%,-8px) } }
.shop{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px }
.shopitem{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:16px; border:1px solid var(--line); background:var(--bg); font-size:12px }
.shopitem.on{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 10%,var(--card)) }
.shopitem small{ color:var(--muted) }
.kitsu .tails{ animation:wag 2.4s ease-in-out infinite; transform-origin:50px 78px }
@keyframes wag{ 50%{ transform:rotate(6deg) } }
/* Stories */
.storypage{ display:flex; flex-direction:column; gap:10px }
.sline{ margin:0; padding:12px 14px; border-radius:14px; background:var(--card); border:1px solid var(--line); font-size:20px; cursor:pointer; transition:background .2s }
.sline.now{ border-color:var(--blue); background:color-mix(in srgb,var(--blue) 10%,var(--card)) }
.sline.heard{ border-left:4px solid var(--good) }
.sen{ display:none; font-size:13px; color:var(--muted); margin-top:4px }
.show-en .sen{ display:block }
/* Planner & garden */
.weekstrip{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:10px }
.wd{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0; border-radius:12px; border:1px solid var(--line); font-size:11px; color:var(--muted) }
.wd span{ height:20px; display:grid; place-items:center }
.wd.did{ background:var(--good); color:#fff; border-color:var(--good) }
.wd.miss{ color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%,var(--line)) }
.wd.today{ border:2px solid var(--brand); color:var(--brand) }
.wd.off{ opacity:.45 }
.garden3d{ position:relative; height:240px; margin:10px -6px; border-radius:16px; overflow:hidden; background:linear-gradient(180deg,#bfe6ff,#eaf7ff 70%) }
:root[data-theme="dark"] .garden3d{ background:linear-gradient(180deg,#1d2c4f,#2b2048) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .garden3d{ background:linear-gradient(180deg,#1d2c4f,#2b2048) } }
.garden3d canvas{ width:100%; height:100%; display:block; cursor:grab }
.garden-empty{ position:absolute; left:0; right:0; bottom:12px; text-align:center; font-size:13px; color:#355; font-weight:700 }
.big-num{ font-size:44px; font-weight:800; letter-spacing:-.03em }
/* Report */
.report-hero{ display:flex; align-items:center; gap:16px; padding:8px 0 }
.grade{ width:84px; height:84px; border-radius:24px; display:grid; place-items:center; font-size:30px; font-weight:800; color:#fff; background:linear-gradient(135deg,#ff7a59,#9b6bff); box-shadow:var(--lift) }
.stat small.up{ color:var(--good); display:block } .stat small.down{ color:var(--bad); display:block }
.hours{ display:flex; align-items:flex-end; gap:2px; height:64px; margin:10px 0 6px }
.hours i{ flex:1; border-radius:3px 3px 0 0; background:color-mix(in srgb,var(--brand) 35%,var(--line)) }
.hours i.best{ background:var(--brand) }
.big2{ font-size:44px; font-weight:800 }
.confetti{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:60 }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition:none !important } }
.q > *{ flex-shrink:0 }
/* ===== Login page ===== */
.auth-gate{ min-height:100vh; display:flex; justify-content:center; padding:12px 0 40px }
.auth{ width:100%; max-width:420px; display:flex; flex-direction:column; align-items:stretch; text-align:center; animation:sheetIn .4s cubic-bezier(.2,.8,.2,1) }
.auth-sheet .q{ padding-top:0 }
.auth-hero{ position:relative; height:190px; margin:0 -16px 6px; border-radius:0 0 32px 32px; overflow:hidden;
  background:radial-gradient(90% 120% at 50% 0%, color-mix(in srgb,var(--brand) 38%,transparent), transparent 70%), linear-gradient(180deg,color-mix(in srgb,var(--violet) 18%,var(--bg)),var(--bg)) }
.auth-fox{ position:absolute; left:50%; bottom:6px; transform:translateX(-50%); animation:float 3.2s ease-in-out infinite; filter:drop-shadow(0 16px 20px rgba(0,0,0,.28)) }
.auth-kana{ position:absolute; font-size:22px; font-weight:800; color:var(--ink); opacity:.16; font-size:26px; animation:drift 6s ease-in-out infinite; animation-delay:calc(var(--i) * -.7s) }
@keyframes drift{ 50%{ transform:translateY(-10px) rotate(8deg) } }
.auth-title{ font-size:28px; margin-top:6px }
.auth-sub{ color:var(--muted); margin:6px 8px 20px; font-size:15px; line-height:1.45 }
.gbtn{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:52px; border-radius:14px; background:#fff; color:#1f1f1f; border:1px solid #dadce0;
  font-family:Roboto,"Plus Jakarta Sans",system-ui,sans-serif; font-size:16px; font-weight:600; box-shadow:0 1px 2px rgba(60,64,67,.15),0 4px 14px -6px rgba(60,64,67,.25); transition:background .15s, box-shadow .15s, transform .1s }
.gbtn:hover{ background:#f8fafd; box-shadow:0 2px 4px rgba(60,64,67,.2),0 8px 20px -8px rgba(60,64,67,.35) }
.gbtn:active{ transform:scale(.99) }
.gbtn.loading{ opacity:.7; pointer-events:none }
.gbtn.loading svg{ animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.auth-or{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:20px 0 14px }
.auth-or::before,.auth-or::after{ content:""; flex:1; height:1px; background:var(--line) }
.auth-form{ display:flex; flex-direction:column; gap:10px }
.field{ display:flex; align-items:center; gap:10px; height:52px; padding:0 14px; border-radius:14px; border:1px solid var(--line); background:var(--card); transition:border-color .15s, box-shadow .15s }
.field:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent) }
.field > span{ color:var(--muted); display:grid }
.field input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:16px }
.eye-btn{ color:var(--muted); display:grid; padding:6px }
.auth-msg{ min-height:20px; font-size:14px; color:var(--muted); text-align:left; padding:0 4px }
.auth-msg.bad{ color:var(--bad) } .auth-msg.good{ color:var(--good) }
.auth-form .btn{ height:52px }
.auth-links{ margin-top:18px; font-size:14px; color:var(--muted) }
.auth-links a{ color:var(--brand); font-weight:700; text-decoration:none }
.auth-fine{ color:var(--muted); font-size:12px; margin:18px 12px 0; line-height:1.4 }
.splash{ min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px }
.splash .kitsu{ animation:float 2s ease-in-out infinite }