/* ============================================================================
 * srs-styles-v2.css — Spaced Repetition module · "SUMI & PAPER" v2
 * ----------------------------------------------------------------------------
 * Design language (shared with Japanese Essentials v5):
 *   - Washi-paper ground with faint grain, sumi-ink typography
 *   - Kaki-iro (柿色) primary accent · shu-iro (朱) vermilion action
 *   - Matcha (抹茶) for due/grade-good · ai-iro (藍) slate for easy/info
 *   - Night-ink dark theme · kanji monograms, hanko stamps, enso — no emoji
 *   - Motion: quiet entrances, springy touches, honest hover states
 * ==========================================================================*/

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  color-scheme:light;
  /* ground & surfaces */
  --bg:#f4efe5;
  --card:#fffdf8;
  --card-hover:#fbf6ec;
  --inset:#f1ebdd;
  /* ink */
  --text:#26211a;
  --text-bright:#1d1913;
  --text-dim:#6f6552;
  /* lines */
  --border:#ddd2bd;
  --border-strong:#c6b896;
  /* palette */
  --accent:#a67c3a;            /* kaki */
  --accent-deep:#7d5c26;
  --action:#b23c2a;            /* shu vermilion */
  --action-deep:#8f2d1e;
  --info:#56687a;              /* ai slate */
  --accent-blue:#56687a;       /* alias */
  --accent-purple:#56687a;     /* alias */
  --accent-pink:#b23c2a;       /* alias */
  --accent-green:#3e7d52;      /* matcha */
  --accent-amber:#a67c3a;      /* alias */
  --again:#b23c2a;
  --hard:#a67c3a;
  --good:#3e7d52;
  --easy:#51749b;
  /* geometry */
  --radius-sm:9px;
  --radius:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(38,30,18,.06),0 1px 6px rgba(38,30,18,.04);
  --shadow-md:0 2px 6px rgba(38,30,18,.06),0 8px 22px rgba(38,30,18,.07);
  --shadow-lg:0 4px 12px rgba(38,30,18,.08),0 18px 44px rgba(38,30,18,.12);
  /* motion & type */
  --ease-spring:cubic-bezier(.34,1.45,.5,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --transition:190ms var(--ease-out);
  --font-sans:"Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Noto Serif JP",Georgia,serif;
}

/* Night-ink dark theme — manual choice */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#161310;
  --card:#211c16;
  --card-hover:#282218;
  --inset:#2b241b;
  --text:#e9e0cf;
  --text-bright:#f7efe0;
  --text-dim:#a2937a;
  --border:#3b3325;
  --border-strong:#544832;
  --accent:#c9974a;
  --accent-deep:#e0b269;
  --accent-amber:#c9974a;
  --action:#d05a41;
  --action-deep:#e0705a;
  --info:#8ba3b8;
  --accent-blue:#8ba3b8;
  --accent-purple:#8ba3b8;
  --accent-pink:#d05a41;
  --accent-green:#6fae85;
  --again:#d05a41;
  --hard:#c9974a;
  --good:#6fae85;
  --easy:#7f9fc4;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 6px rgba(0,0,0,.25);
  --shadow-md:0 2px 6px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.35);
  --shadow-lg:0 6px 16px rgba(0,0,0,.4),0 22px 52px rgba(0,0,0,.5);
}
/* Night-ink dark theme — system default (no explicit choice) */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#161310;
    --card:#211c16;
    --card-hover:#282218;
    --inset:#2b241b;
    --text:#e9e0cf;
    --text-bright:#f7efe0;
    --text-dim:#a2937a;
    --border:#3b3325;
    --border-strong:#544832;
    --accent:#c9974a;
    --accent-deep:#e0b269;
    --accent-amber:#c9974a;
    --action:#d05a41;
    --action-deep:#e0705a;
    --info:#8ba3b8;
    --accent-blue:#8ba3b8;
    --accent-purple:#8ba3b8;
    --accent-pink:#d05a41;
    --accent-green:#6fae85;
    --again:#d05a41;
    --hard:#c9974a;
    --good:#6fae85;
    --easy:#7f9fc4;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 6px rgba(0,0,0,.25);
    --shadow-md:0 2px 6px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.35);
    --shadow-lg:0 6px 16px rgba(0,0,0,.4),0 22px 52px rgba(0,0,0,.5);
  }
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
html{height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;}
body{
  min-height:100%;
  font-family:var(--font-sans);
  line-height:1.65;
  color:var(--text);
  background-color:var(--bg);
  /* washi grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  overflow-x:hidden;
  transition:background-color .35s var(--ease-out),color .35s var(--ease-out);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}
:focus:not(:focus-visible){outline:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent;}
a{color:var(--accent-deep);}
img,svg{vertical-align:middle;}

/* scrollbars */
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 55%,var(--border)) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:999px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* giant vertical brand on wide screens — quiet editorial flourish */
@media (min-width:1360px){
  body::before{
    content:"復習反復";
    position:fixed;right:calc(50% - 640px);top:50%;
    transform:translateY(-50%);
    writing-mode:vertical-rl;
    font-family:var(--font-serif);font-weight:900;
    font-size:clamp(4rem,7vw,6.5rem);letter-spacing:.35em;
    color:transparent;-webkit-text-stroke:1px var(--border-strong);
    opacity:.22;pointer-events:none;user-select:none;z-index:0;
  }
}

.app{max-width:1180px;margin:0 auto;padding:clamp(16px,3vw,32px) clamp(14px,3vw,28px) 56px;position:relative;z-index:1;}

/* ── 3. Boot splash — enso ─────────────────────────────────────────────── */
.boot{display:flex;flex-direction:column;align-items:center;justify-content:center;height:82vh;gap:16px;color:var(--text-dim);text-align:center;}
.boot-enso{position:relative;width:112px;height:112px;display:flex;align-items:center;justify-content:center;}
.boot-enso svg{position:absolute;inset:0;width:100%;height:100%;color:var(--accent);}
.boot-enso .enso-ring{
  stroke-dasharray:327;stroke-dashoffset:327;
  transform-origin:60px 60px;
  animation:draw-enso 1.9s var(--ease-out) infinite;
}
.boot-mark{
  font-family:var(--font-serif);font-size:2.6rem;font-weight:900;color:var(--text-bright);
  animation:boot-mark-in 1.2s var(--ease-out) both;
}
.boot-title{font-family:var(--font-serif);font-size:1.7rem;font-weight:900;color:var(--text-bright);letter-spacing:.12em;animation:rise .6s .15s var(--ease-out) both;}
.boot-sub{font-size:.78rem;opacity:.65;max-width:340px;animation:rise .6s .25s var(--ease-out) both;}
.boot-bar{width:170px;height:3px;border-radius:999px;background:var(--inset);overflow:hidden;margin-top:8px;animation:rise .6s .35s var(--ease-out) both;}
.boot-bar i{display:block;height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--action));animation:boot-slide 1.15s ease-in-out infinite;}
@keyframes draw-enso{0%{stroke-dashoffset:327;transform:rotate(-90deg) scale(.92);opacity:0}12%{opacity:1}55%{stroke-dashoffset:26;transform:rotate(-90deg) scale(1)}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;transform:rotate(-90deg) scale(1.02);opacity:0}}
@keyframes boot-mark-in{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes boot-slide{0%{transform:translateX(-110%)}100%{transform:translateX(410%)}}

/* ── 4. Topbar — sticky, blurred ───────────────────────────────────────── */
.topbar{
  position:sticky;top:10px;z-index:40;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(20px,3vw,30px);padding:12px 18px;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  animation:rise .45s var(--ease-out) both;
}
.brand{
  font-family:var(--font-serif);font-size:1.32rem;font-weight:900;color:var(--text-bright);
  border-left:3px solid var(--accent);padding-left:14px;line-height:1.25;
  transition:border-color var(--transition);
}
.brand:hover{border-color:var(--action);}
.brand small{display:block;font-family:var(--font-sans);font-size:.62rem;color:var(--text-dim);font-weight:500;letter-spacing:.09em;text-transform:uppercase;}
.nav{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap;align-items:center;}
.nav button{
  padding:8px 14px;border-radius:var(--radius-sm);font-size:.8rem;color:var(--text-dim);
  border:1px solid transparent;background:transparent;transition:all var(--transition);font-weight:500;
  white-space:nowrap;
}
.nav button:hover{border-color:var(--border);background:var(--card-hover);color:var(--text);transform:translateY(-1px);}
.nav button.active{
  color:var(--text-bright);font-weight:700;
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  background:color-mix(in srgb,var(--accent) 10%,var(--card));
  box-shadow:inset 0 -2px 0 var(--accent);
}
.home-link{
  color:var(--text-dim);text-decoration:none;font-size:.8rem;padding:8px 12px;
  border-radius:var(--radius-sm);transition:all var(--transition);white-space:nowrap;
}
.home-link:hover{color:var(--text);background:var(--card-hover);transform:translateY(-1px);}

/* theme toggle (injected by srs-ui.js) */
.theme-toggle{
  width:36px;height:36px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border)!important;border-radius:50%!important;
  color:var(--text-dim)!important;background:var(--card)!important;
  transition:all var(--transition)!important;
}
.theme-toggle:hover{border-color:var(--accent)!important;color:var(--accent-deep)!important;transform:rotate(15deg) scale(1.06)!important;}
.theme-toggle svg{width:17px;height:17px;}
.theme-toggle .ico-moon{display:none;}
html[data-theme="dark"] .theme-toggle .ico-sun{display:none;}
html[data-theme="dark"] .theme-toggle .ico-moon{display:block;}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .theme-toggle .ico-sun{display:none;}
  html:not([data-theme="light"]) .theme-toggle .ico-moon{display:block;}
}

/* ── 5. Generic panel / titles ─────────────────────────────────────────── */
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(18px,2.6vw,26px);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition),border-color var(--transition);
}
.section-title{
  font-size:.86rem;font-weight:800;color:var(--text-bright);margin-bottom:18px;
  display:flex;align-items:center;gap:9px;letter-spacing:.05em;
}
.section-title::before{
  content:"";width:4px;height:15px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--accent),var(--action));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent);
}
.muted{color:var(--text-dim);}

/* ── 6. Home layout ────────────────────────────────────────────────────── */
.home-shell{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px);}
.grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:clamp(18px,2.4vw,26px);align-items:start;}
.grid2 > .panel:first-child{animation:rise .5s .05s var(--ease-out) both;}
.start-panel{position:sticky;top:86px;animation:rise .5s .12s var(--ease-out) both;}
@media (max-width:980px){
  .grid2{grid-template-columns:1fr;}
  .start-panel{position:static;}
}

.panel-head,.preset-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.panel-head .section-title,.preset-head .section-title{margin-bottom:6px;}
.deck-copy{font-size:.78rem;line-height:1.6;max-width:56ch;}
.deck-foot{font-size:.76rem;margin-top:14px;line-height:1.55;}
.panel-chip{
  align-self:flex-start;font-size:.64rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--accent-deep);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}

/* ── deck tools bar (filter + selection count + quick actions) ── */
.deck-tools{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:10px 14px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  animation:rise .45s var(--ease-out) both;
}
.seg{display:inline-flex;padding:3px;background:var(--inset);border:1px solid var(--border);border-radius:999px;gap:2px;}
.seg-btn{
  padding:7px 15px;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--text-dim);
  transition:all var(--transition);white-space:nowrap;
}
.seg-btn:hover{color:var(--text-bright);}
.seg-btn.on{background:var(--card);color:var(--text-bright);box-shadow:var(--shadow-sm);}
.deck-tools-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sel-count{font-size:.74rem;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.sel-count b{color:var(--text-bright);}
.btn-ghost.sm{padding:7px 13px;font-size:.74rem;}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed;transform:none;}

/* deck matrix — level rows, vocab/grammar columns (columns collapse with filter) */
.deck-matrix{display:grid;grid-template-columns:44px repeat(2,minmax(0,1fr));gap:11px;align-items:stretch;}
.deck-matrix.f-vocab{grid-template-columns:44px minmax(0,1fr);}
.deck-matrix.f-grammar{grid-template-columns:44px minmax(0,1fr);}
.deck-head{
  font-size:.72rem;color:var(--text-dim);text-align:center;padding:4px 0 2px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
}
.deck-rowhead{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:900;font-size:1.02rem;
  color:var(--card);background:var(--text-bright);border-radius:10px;
  width:44px;transition:transform var(--transition);
}
.deck-matrix:hover .deck-rowhead{transform:none;}

/* deck cell — big number reads first, dots break it down, bar shows progress */
.deck-cell{
  border:1px solid var(--border);border-radius:var(--radius);padding:15px 15px 17px;cursor:pointer;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition),background var(--transition);
  background:var(--card);text-align:left;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);will-change:transform;
  animation:cell-pop .4s var(--ease-out) both;
  display:flex;flex-direction:column;align-items:flex-start;min-height:138px;
}
.deck-cell:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,var(--border));box-shadow:var(--shadow-md);}
.deck-cell:active{transform:translateY(-1px) scale(.985);transition-duration:80ms;}
.deck-cell.sel{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,var(--card));
  box-shadow:0 0 0 1px var(--accent),var(--shadow-sm);
}
/* grammar decks get the ai-slate identity so the two columns read differently */
.deck-cell.grammar:hover{border-color:color-mix(in srgb,var(--info) 50%,var(--border));}
.deck-cell.grammar.sel{
  border-color:var(--info);background:color-mix(in srgb,var(--info) 6%,var(--card));
  box-shadow:0 0 0 1px var(--info),var(--shadow-sm);
}
.deck-cell.grammar.sel .check{background:var(--info);box-shadow:0 2px 6px color-mix(in srgb,var(--info) 45%,transparent);}
.deck-cell .preset-name{font-family:var(--font-serif);font-size:.95rem;font-weight:800;color:var(--text-bright);line-height:1.3;}
.deck-cell .preset-desc{font-size:.7rem;color:var(--text-dim);line-height:1.5;margin-top:2px;}
.dc-big{
  font-family:var(--font-serif);font-weight:900;font-variant-numeric:tabular-nums;
  font-size:clamp(1.9rem,4.4vw,2.5rem);line-height:1;color:var(--text-bright);
  margin-top:10px;letter-spacing:-.01em;
}
.deck-cell.has-due .dc-big{color:var(--action);}
.dc-label{font-size:.66rem;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-dim);margin-top:5px;}
.deck-cell.has-due .dc-label{color:var(--action);}
.dc-dots{display:flex;gap:5px;margin-top:auto;padding-top:11px;flex-wrap:wrap;}
.dc-dot{
  font-style:normal;font-size:.64rem;font-weight:700;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 6px;border-radius:999px;
  border:1px solid var(--border);background:var(--card);color:var(--text-dim);
}
.dc-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.dc-dot.d-new{color:var(--info);}
.dc-dot.d-learn{color:var(--hard);}
.dc-dot.d-due{color:var(--good);}
.dc-dot.zero{opacity:.34;}
.deck-cell .check{
  position:absolute;top:10px;right:11px;width:21px;height:21px;border-radius:50%;
  background:var(--action);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:800;opacity:0;transform:scale(.3) rotate(-30deg);
  transition:all .25s var(--ease-spring);
  box-shadow:0 2px 6px color-mix(in srgb,var(--action) 45%,transparent);
}
.deck-cell.sel .check{opacity:1;transform:scale(1) rotate(0);}
.deck-cell .cat-progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--action));transition:width .5s var(--ease-out);}
.deck-cell.grammar .cat-progress{background:linear-gradient(90deg,var(--info),var(--accent));}
.deck-cell.empty{opacity:.45;cursor:default;border-style:dashed;background:transparent;box-shadow:none;animation:none;min-height:138px;}
.deck-cell.empty:hover{transform:none;border-color:var(--border);box-shadow:none;}
.deck-cell.empty .dc-big{font-size:1.6rem;}

/* selection tray — live list of decks feeding the Start button */
.sel-tray{display:flex;flex-wrap:wrap;gap:6px;}
.sel-tray.empty-tray{
  font-size:.74rem;color:var(--text-dim);font-style:italic;
  border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:11px 12px;line-height:1.5;
}
.tray-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
  padding:5px 7px 5px 11px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));
  background:color-mix(in srgb,var(--accent) 9%,var(--card));color:var(--accent-deep);
  transition:all var(--transition);
}
.tray-chip .x{
  width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 18%,transparent);font-size:.72rem;line-height:1;font-weight:800;
}
.tray-chip:hover{border-color:var(--action);background:color-mix(in srgb,var(--action) 8%,var(--card));color:var(--action);}
.tray-chip:hover .x{background:color-mix(in srgb,var(--action) 22%,transparent);}

/* preset / mined deck cards */
.preset-panel{padding:clamp(18px,2.6vw,26px);}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
.deck-cell.preset{background:var(--inset);}
.deck-cell.preset.sel{background:color-mix(in srgb,var(--accent) 6%,var(--card));}

/* coming-soon teaser */
.coming-soon{
  position:relative;border:1px dashed var(--border-strong);border-radius:var(--radius);
  padding:18px 20px;background:var(--inset);
}
.coming-soon .cs-top{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.coming-soon .cs-icon{
  width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:1.05rem;font-weight:900;color:var(--text-dim);
  background:var(--card);border:1px solid var(--border);
}
.coming-soon .cs-badge{
  font-size:.62rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--info);border:1px solid color-mix(in srgb,var(--info) 40%,transparent);
  background:color-mix(in srgb,var(--info) 8%,transparent);
  padding:4px 10px;border-radius:999px;
}
.coming-soon p{font-size:.78rem;color:var(--text-dim);line-height:1.6;margin:0;}

/* ── 7. Start panel ────────────────────────────────────────────────────── */
.start-panel .totals{display:flex;gap:10px;margin-bottom:20px;}
.totbox{
  flex:1;min-width:76px;background:var(--inset);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px 10px;text-align:center;transition:all var(--transition);position:relative;overflow:hidden;
}
.totbox::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:currentColor;opacity:0;transition:opacity var(--transition);
}
.totbox:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.totbox:hover::after{opacity:.5;}
.totbox b{display:block;font-size:1.75rem;line-height:1.2;font-variant-numeric:tabular-nums;font-weight:800;}
.totbox span{font-size:.68rem;color:var(--text-dim);font-weight:600;letter-spacing:.03em;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:.76rem;color:var(--text-dim);margin-bottom:9px;font-weight:600;letter-spacing:.02em;}
.modes{display:flex;gap:8px;flex-wrap:wrap;}
.mode-btn{
  padding:10px 13px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);
  font-size:.8rem;color:var(--text-dim);transition:all var(--transition);
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-weight:600;min-width:96px;flex:1;
}
.mode-btn small{font-size:.58rem;opacity:.75;font-weight:400;}
.mode-btn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.mode-btn.on{
  border-color:var(--accent);color:var(--text-bright);font-weight:700;
  background:color-mix(in srgb,var(--accent) 9%,var(--card));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 -2px 0 var(--accent);
}
.btn-primary{
  width:100%;padding:16px;border-radius:var(--radius);font-size:.95rem;font-weight:800;
  color:var(--card);background:var(--text-bright);
  border:1px solid transparent;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition),color var(--transition);
  letter-spacing:.02em;position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:left .5s var(--ease-out);
}
.btn-primary:hover:not(:disabled){background:var(--action);color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px color-mix(in srgb,var(--action) 38%,transparent);}
.btn-primary:hover:not(:disabled)::after{left:130%;}
.btn-primary:active:not(:disabled){transform:translateY(0) scale(.985);}
.btn-primary:disabled{opacity:.38;cursor:not-allowed;}
.btn-primary svg{width:14px;height:14px;flex:0 0 auto;}
.select{width:100%;}
select.select{
  padding:11px 34px 11px 12px;border-radius:var(--radius-sm);
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f6552' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--border);color:var(--text);font-size:.85rem;font-weight:500;
  transition:border-color var(--transition),box-shadow var(--transition);
  appearance:none;cursor:pointer;
}
select.select:hover{border-color:var(--accent);}
select.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}

/* ── 8. Study view ─────────────────────────────────────────────────────── */
.study-wrap{max-width:720px;margin:0 auto;}
.study-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;animation:rise .4s var(--ease-out) both;}
.progress-wrap{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;}
.progress{
  flex:1;height:8px;border-radius:999px;background:var(--inset);
  overflow:hidden;border:1px solid var(--border);position:relative;
}
.progress > i{
  display:block;height:100%;border-radius:999px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--accent),var(--action));
  transition:width .5s var(--ease-out);
}
.progress > i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  animation:sheen 2.6s ease-in-out infinite;
}
@keyframes sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(220%)}}
.study-breakdown{display:flex;gap:8px;flex-wrap:wrap;}
.state-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--border);background:var(--card);font-size:.68rem;color:var(--text-dim);font-weight:600;
}
.state-chip b{color:var(--text-bright);font-size:.85rem;font-variant-numeric:tabular-nums;}
.state-chip.new{border-color:color-mix(in srgb,var(--info) 32%,transparent);color:var(--info);}
.state-chip.learn{border-color:color-mix(in srgb,var(--hard) 32%,transparent);color:var(--hard);}
.state-chip.review{border-color:color-mix(in srgb,var(--good) 32%,transparent);color:var(--good);}
.state-chip.extra-chip{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent-deep);font-style:italic;}
.extra-note{margin-top:14px;font-size:.84rem;}
.extra-note b{color:var(--accent-deep);font-variant-numeric:tabular-nums;}
.study-counts{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:.76rem;color:var(--text-dim);white-space:nowrap;}
.study-counts span b{color:var(--text-bright);font-variant-numeric:tabular-nums;}
.study-timer{
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent-deep);
  background:var(--inset);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:.72rem;
}
.study-counts > span:last-child{font-size:.85rem;}

.flashcard{
  background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(30px,4.5vw,48px) clamp(20px,3.5vw,36px);min-height:340px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  position:relative;overflow:hidden;box-shadow:var(--shadow-md);
  animation:rise .45s var(--ease-out) both;
}
.flashcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--action) 50%,var(--accent));
  background-size:200% 100%;
  animation:bar-drift 7s linear infinite;
}
@keyframes bar-drift{0%{background-position:0 0}100%{background-position:200% 0}}
.fc-badge{
  position:absolute;top:16px;left:18px;font-size:.64rem;color:var(--text-dim);font-weight:600;
  border:1px solid var(--border);padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--card) 80%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:inline-flex;gap:6px;align-items:center;max-width:calc(100% - 76px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fc-tts{
  position:absolute;top:12px;right:16px;z-index:2;
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--text-dim);
  transition:all var(--transition);
}
.fc-tts:hover{color:var(--accent-deep);background:var(--inset);transform:scale(1.1);}
.fc-tts svg{width:19px;height:19px;}
.fc-prompt-label{
  font-size:.68rem;color:var(--text-dim);letter-spacing:2.2px;text-transform:uppercase;
  margin-bottom:18px;font-weight:800;
}
.fc-main{font-family:var(--font-serif);font-weight:900;font-size:clamp(2.2rem,7vw,3.4rem);color:var(--text-bright);line-height:1.35;}
.fc-sub{font-size:1.1rem;color:var(--info);margin-top:10px;}
.fc-struct{font-size:.95rem;color:var(--text-dim);margin-top:10px;letter-spacing:.1em;}
.fc-divider{width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent);margin:22px auto;}
.fc-answer{width:100%;text-align:left;animation:stage-swap .3s var(--ease-out) both;}
.fc-answer .ans-reading{font-size:1.35rem;color:var(--accent-deep);margin-bottom:6px;font-weight:700;}
.fc-answer .ans-mean{font-size:1.12rem;color:var(--text-bright);margin-bottom:12px;}
.fc-answer .ans-meta{font-size:.76rem;color:var(--text-dim);margin-bottom:12px;}
.ex{
  background:var(--inset);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 14px;margin-top:10px;text-align:left;
  transition:border-color var(--transition),transform var(--transition);
}
.ex:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));transform:translateX(3px);}
.ex .jp{font-size:.98rem;color:var(--text-bright);}
.ex .en{font-size:.8rem;color:var(--text-dim);margin-top:4px;}
.ex .bd{font-size:.76rem;color:var(--info);margin-top:6px;border-top:1px dashed var(--border);padding-top:6px;}
.fc-hint{
  font-size:.83rem;color:var(--text);line-height:1.65;margin-top:12px;text-align:left;
  background:color-mix(in srgb,var(--hard) 7%,var(--card));
  border:1px solid color-mix(in srgb,var(--hard) 30%,var(--border));
  border-radius:var(--radius);padding:12px 14px 12px 40px;position:relative;
}
.fc-hint::before{
  content:"鍵";position:absolute;left:12px;top:11px;
  width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:.7rem;font-weight:900;color:#fff;background:var(--hard);
}
.nuance{
  font-size:.85rem;color:var(--text);line-height:1.65;margin-top:12px;text-align:left;
  background:color-mix(in srgb,var(--info) 6%,var(--card));
  border:1px solid color-mix(in srgb,var(--info) 26%,var(--border));
  border-radius:var(--radius);padding:12px 14px;
}
.nuance b{color:var(--info);font-size:.75rem;letter-spacing:.04em;}

.reveal-btn{
  width:100%;margin-top:20px;padding:16px;border-radius:var(--radius);font-size:.92rem;font-weight:700;
  color:var(--text);background:var(--inset);border:1px solid var(--border);transition:all var(--transition);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.reveal-btn:hover{border-color:var(--accent);color:var(--text-bright);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.reveal-btn:active{transform:translateY(0) scale(.985);}
.grade-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px;animation:stage-swap .28s var(--ease-out) both;}
.grade-btn{
  padding:15px 8px;border-radius:var(--radius);font-weight:800;font-size:.9rem;transition:all var(--transition);
  display:flex;flex-direction:column;gap:3px;align-items:center;
}
.grade-btn small{font-size:.68rem;font-weight:600;opacity:.8;font-variant-numeric:tabular-nums;}
.grade-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.grade-btn:active{transform:translateY(0) scale(.97);}
.grade-btn.g1{background:color-mix(in srgb,var(--again) 9%,var(--card));border:1px solid color-mix(in srgb,var(--again) 55%,transparent);color:var(--again);}
.grade-btn.g2{background:color-mix(in srgb,var(--hard) 9%,var(--card));border:1px solid color-mix(in srgb,var(--hard) 55%,transparent);color:var(--hard);}
.grade-btn.g3{background:color-mix(in srgb,var(--good) 9%,var(--card));border:1px solid color-mix(in srgb,var(--good) 55%,transparent);color:var(--good);}
.grade-btn.g4{background:color-mix(in srgb,var(--easy) 9%,var(--card));border:1px solid color-mix(in srgb,var(--easy) 55%,transparent);color:var(--easy);}
.kbd-hint{text-align:center;font-size:.68rem;color:var(--text-dim);margin-top:16px;}
.kbd-hint kbd{
  background:var(--inset);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;
  padding:2px 7px;font-size:.66rem;font-family:var(--font-sans);font-weight:700;color:var(--text);
}
.undo-btn{
  margin-top:10px;font-size:.76rem;color:var(--text-dim);text-decoration:underline;
  text-underline-offset:3px;transition:color var(--transition);
}
.undo-btn:hover{color:var(--action);}

.session-done{text-align:center;padding:clamp(40px,6vw,64px) 20px;}
.session-done .big{margin-bottom:16px;color:var(--good);display:flex;align-items:center;justify-content:center;animation:pop-correct .5s var(--ease-spring) both;}
.session-done .big svg{filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--good) 35%,transparent));}
@keyframes pop-correct{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}
.session-done .section-title{justify-content:center;}
.session-done .section-title::before{display:none;}

/* ── 9. Stats ──────────────────────────────────────────────────────────── */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:22px;
  animation:rise .45s var(--ease-out) both;
}
.stat-grid + .stat-grid{animation-delay:.08s;}
.stat-box{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 14px;text-align:center;box-shadow:var(--shadow-sm);
  transition:all var(--transition);position:relative;overflow:hidden;
}
.stat-box::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--action));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);
}
.stat-box:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));}
.stat-box:hover::after{transform:scaleX(1);}
.stat-box b{display:block;font-size:1.85rem;color:var(--text-bright);font-variant-numeric:tabular-nums;line-height:1.25;font-weight:800;}
.stat-box span{font-size:.72rem;color:var(--text-dim);font-weight:600;letter-spacing:.03em;}
.heatmap{display:flex;gap:3px;flex-wrap:wrap;margin-top:12px;}
.heatmap i{
  width:12px;height:12px;border-radius:3.5px;background:var(--inset);
  border:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  transition:transform .15s var(--ease-out),box-shadow .15s;
}
.heatmap i:hover{transform:scale(1.35);box-shadow:var(--shadow-sm);position:relative;z-index:2;}
.heatmap i.l1{background:color-mix(in srgb,var(--good) 30%,var(--card));}
.heatmap i.l2{background:color-mix(in srgb,var(--good) 55%,var(--card));}
.heatmap i.l3{background:color-mix(in srgb,var(--good) 80%,var(--card));}
.heatmap i.l4{background:var(--good);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 15%,transparent);}
.forecast{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:26px;}
.forecast .bar{
  flex:1;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 85%,var(--card)),var(--accent));
  border-radius:5px 5px 0 0;min-height:2px;position:relative;
  animation:bar-grow .6s var(--ease-out) both;transform-origin:bottom;
  transition:filter var(--transition);
}
.forecast .bar:hover{filter:brightness(1.15);}
@keyframes bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.forecast .bar span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:.62rem;color:var(--text-dim);}
.forecast .bar b{position:absolute;top:-17px;left:0;right:0;text-align:center;font-size:.62rem;color:var(--text);font-variant-numeric:tabular-nums;}

/* ── 10. Settings ──────────────────────────────────────────────────────── */
.set-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 4px;border-bottom:1px solid var(--border);transition:background var(--transition);
}
.set-row:hover{background:var(--card-hover);}
.set-row:last-of-type{border-bottom:none;}
.set-row .lbl{font-size:.9rem;color:var(--text);font-weight:600;}
.set-row .lbl small{display:block;font-size:.74rem;color:var(--text-dim);margin-top:3px;font-weight:400;line-height:1.55;max-width:46ch;}
.set-row input[type=number]{
  width:90px;padding:9px 10px;border-radius:var(--radius-sm);background:var(--card);
  border:1px solid var(--border);color:var(--text);font-size:.85rem;font-variant-numeric:tabular-nums;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.set-row input[type=number]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}
.set-row input[type=text]{
  padding:9px 10px;border-radius:var(--radius-sm);background:var(--card);
  border:1px solid var(--border);color:var(--text);font-size:.85rem;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.set-row input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}
.set-row input[type=range]{width:200px;accent-color:var(--accent);cursor:pointer;}
.set-val{min-width:54px;text-align:right;color:var(--accent-deep);font-weight:800;font-variant-numeric:tabular-nums;}
.switch{
  flex:0 0 46px;width:46px;height:26px;border-radius:20px;background:var(--inset);
  border:1px solid var(--border);position:relative;transition:all var(--transition);cursor:pointer;
}
.switch i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text-dim);transition:all .25s var(--ease-spring);}
.switch:hover{border-color:var(--accent);}
.switch.on{background:color-mix(in srgb,var(--good) 22%,transparent);border-color:var(--good);}
.switch.on i{left:22px;background:var(--good);}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.btn-ghost{
  padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--card);font-size:.82rem;color:var(--text);font-weight:600;
  transition:all var(--transition);display:inline-flex;align-items:center;gap:7px;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--text-bright);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.btn-ghost:active{transform:translateY(0) scale(.98);}
.btn-ghost.danger{color:var(--again);}
.btn-ghost.danger:hover{border-color:var(--again);background:color-mix(in srgb,var(--again) 6%,var(--card));}
.linkbtn{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;font-size:inherit;padding:0;font-weight:600;}
.linkbtn:hover{color:var(--action);}

/* ── 11. FSRS optimizer / calibration ──────────────────────────────────── */
.opt-run{margin:10px 0 4px;}
.opt-prog{height:10px;border-radius:999px;background:var(--inset);border:1px solid var(--border);overflow:hidden;}
.opt-prog > i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--action));
  transition:width .15s;position:relative;overflow:hidden;
}
.opt-prog > i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  animation:sheen 1.6s ease-in-out infinite;
}
.opt-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:6px;}
.opt-stat{
  background:var(--inset);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px 12px;text-align:center;transition:all var(--transition);
}
.opt-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.opt-stat b{display:block;font-size:1.5rem;color:var(--text-bright);font-variant-numeric:tabular-nums;}
.opt-stat span{font-size:.68rem;color:var(--text-dim);font-weight:600;}
.calib{display:flex;align-items:flex-end;gap:6px;height:130px;margin-top:10px;}
.calib .col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;}
.calib .col .track{position:relative;width:100%;height:100%;background:var(--inset);border:1px solid var(--border);border-radius:5px 5px 0 0;overflow:hidden;}
.calib .col .act{position:absolute;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--good) 75%,var(--card));border-radius:5px 5px 0 0;}
.calib .col .pred{position:absolute;left:-2px;right:-2px;height:2px;background:var(--hard);}
.calib .col.empty .track{opacity:.4;}
.calib .col > span{font-size:.6rem;color:var(--text-dim);margin-top:5px;font-variant-numeric:tabular-nums;}
.calib-legend{display:flex;gap:16px;align-items:center;margin-top:18px;font-size:.72rem;color:var(--text-dim);flex-wrap:wrap;}
.calib-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:5px;}
.calib-legend .k-act{background:var(--good);}
.calib-legend .k-pred{background:var(--hard);height:3px;border-radius:2px;}

/* ── 12. Toast / empty / confetti ──────────────────────────────────────── */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:80;
  background:color-mix(in srgb,var(--text-bright) 94%,var(--bg));
  color:var(--bg);
  border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  padding:13px 24px;border-radius:999px;font-size:.84rem;font-weight:600;
  box-shadow:0 10px 34px rgba(0,0,0,.28);
  animation:toast-slide .38s cubic-bezier(.16,1,.3,1);
  max-width:min(92vw,420px);text-align:center;
}
.toast::before{content:"◆";color:var(--accent);margin-right:8px;font-size:.7em;vertical-align:1px;}
@keyframes toast-slide{from{opacity:0;transform:translateX(-50%) translateY(18px) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

.empty{text-align:center;padding:56px 20px;color:var(--text-dim);}
.empty::before{content:"空";display:block;font-family:var(--font-serif);font-size:3rem;font-weight:900;opacity:.18;margin-bottom:8px;}

.confetti-host{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden;}
.confetti-host span{
  position:absolute;top:-14px;display:block;border-radius:2px;
  animation:confetti-fall 1.35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes confetti-fall{
  0%{transform:translateY(-14px) rotate(0) scale(.9);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(108vh) rotate(380deg) scale(1);opacity:0}
}

/* ── 13. Footer ────────────────────────────────────────────────────────── */
.site-footer{
  margin-top:clamp(28px,5vw,48px);
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--inset) 55%,transparent));
  position:relative;z-index:1;
}
.site-footer::before{
  content:"";display:block;height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cg fill='none' stroke='%23a67c3a' stroke-opacity='0.28'%3E%3Ccircle cx='0' cy='14' r='11'/%3E%3Ccircle cx='0' cy='14' r='6'/%3E%3Ccircle cx='28' cy='14' r='11'/%3E%3Ccircle cx='28' cy='14' r='6'/%3E%3Ccircle cx='56' cy='14' r='11'/%3E%3Ccircle cx='56' cy='14' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center bottom;
  opacity:.8;margin-bottom:18px;
}
.foot-inner{
  max-width:1180px;margin:0 auto;padding:6px clamp(14px,3vw,28px) 30px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;
}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-weight:800;color:var(--text-bright);font-size:.95rem;}
.foot-brand .foot-mark{
  width:30px;height:30px;border-radius:8px;background:var(--text-bright);color:var(--card);
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:900;
}
.foot-brand small{font-family:var(--font-sans);font-weight:500;color:var(--text-dim);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;}
.foot-links{display:flex;gap:4px;flex-wrap:wrap;}
.foot-links a{
  color:var(--text-dim);text-decoration:none;font-size:.76rem;font-weight:600;
  padding:6px 10px;border-radius:var(--radius-sm);transition:all var(--transition);
}
.foot-links a:hover{color:var(--text-bright);background:var(--card-hover);}
.foot-note{font-size:.7rem;color:var(--text-dim);font-style:italic;}

/* ── 14. Back-to-top (injected by srs-ui.js) ───────────────────────────── */
.to-top{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:44px;height:44px;border-radius:50%;
  background:var(--text-bright);color:var(--card);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(16px) scale(.85);pointer-events:none;
  transition:all .3s var(--ease-spring);
}
.to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.to-top:hover{background:var(--action);color:#fff;transform:translateY(-3px);}

/* ── 15. Scroll-reveal (applied by srs-ui.js) ──────────────────────────── */
.io-hide{opacity:0;transform:translateY(18px);}
.io-in{opacity:1;transform:none;transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);}

/* ── 16. Keyframes ─────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cell-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes stage-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes card-enter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* stagger deck cells */
.deck-matrix .deck-cell:nth-child(3n+1){animation-delay:.03s}
.deck-matrix .deck-cell:nth-child(3n+2){animation-delay:.08s}
.deck-matrix .deck-cell:nth-child(3n){animation-delay:.13s}
.preset-grid .deck-cell:nth-child(1){animation-delay:.05s}
.preset-grid .deck-cell:nth-child(2){animation-delay:.1s}

/* ── 16b. Today dashboard ──────────────────────────────────────────────── */
.today-shell{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px);}
.hero{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,36px);align-items:center;
  position:relative;overflow:hidden;
  background:
    radial-gradient(420px 200px at 88% -10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),
    var(--card);
  animation:rise .5s var(--ease-out) both;
}
.hero::before{
  content:"復";position:absolute;right:2px;bottom:-6px;pointer-events:none;z-index:0;
  font-family:var(--font-serif);font-weight:900;font-size:clamp(7rem,20vw,11rem);line-height:1;
  color:color-mix(in srgb,var(--accent) 6%,transparent);user-select:none;
}
.hero > *{position:relative;z-index:1;}
.hero-ring-wrap{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;}
.hero-ring-wrap svg{position:absolute;inset:0;width:100%;height:100%;}
.hero-ring-wrap svg circle:last-child{transition:stroke-dashoffset .9s var(--ease-out);}
.hero-ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.hero-ring-mid b{font-size:1.9rem;font-weight:900;color:var(--text-bright);font-family:var(--font-serif);line-height:1;font-variant-numeric:tabular-nums;}
.hero-ring-mid span{font-size:.62rem;color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-top:4px;}
.hero-info{min-width:0;}
.hero-greet{font-family:var(--font-serif);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:900;color:var(--text-bright);line-height:1.25;}
.hero-greet small{display:block;font-family:var(--font-sans);font-size:.76rem;font-weight:500;color:var(--text-dim);letter-spacing:.06em;margin-top:2px;}
.hero-due{font-size:1rem;color:var(--text);margin:10px 0 4px;}
.hero-due b{font-size:1.5rem;color:var(--action);font-variant-numeric:tabular-nums;font-weight:900;}
.hero-sub{font-size:.76rem;color:var(--text-dim);margin-bottom:16px;}
.hero-start{width:auto;padding:14px 30px;}
.hero-stats{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;
  border-top:1px dashed var(--border);padding-top:18px;margin-top:2px;
}
.stat-mini{
  background:var(--inset);border:1px solid var(--border);border-radius:var(--radius);
  padding:13px 10px;text-align:center;transition:all var(--transition);
}
.stat-mini:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));}
.stat-mini b{display:block;font-size:1.35rem;color:var(--text-bright);font-variant-numeric:tabular-nums;font-weight:800;line-height:1.2;}
.stat-mini span{font-size:.66rem;color:var(--text-dim);font-weight:600;}
.today-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(18px,2.4vw,26px);align-items:stretch;}
.today-cols > .panel{animation:rise .5s .08s var(--ease-out) both;}
@media (max-width:860px){.today-cols{grid-template-columns:1fr;}}
.budget-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.budget-row .bl{flex:0 0 84px;font-size:.78rem;color:var(--text);font-weight:600;}
.budget-row .bar-track{flex:1;height:9px;border-radius:999px;background:var(--inset);border:1px solid var(--border);overflow:hidden;}
.budget-row .bar-track > i{display:block;height:100%;border-radius:999px;transition:width .6s var(--ease-out);}
.budget-row .bv{flex:0 0 66px;text-align:right;font-size:.74rem;color:var(--text-dim);font-variant-numeric:tabular-nums;font-weight:600;}
.budget-next{margin-top:16px;padding-top:12px;border-top:1px dashed var(--border);font-size:.76rem;color:var(--text-dim);}
.budget-next b{color:var(--text-bright);font-variant-numeric:tabular-nums;}
.forecast.mini{height:96px;margin-top:18px;}
/* decks-with-due list */
.dd-list{display:flex;flex-direction:column;}
.dd-row{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:12px 10px;border-radius:var(--radius);border-bottom:1px solid var(--border);
  transition:all var(--transition);
}
.dd-row:last-child{border-bottom:none;}
.dd-row:hover{background:var(--card-hover);transform:translateX(4px);box-shadow:var(--shadow-sm);}
.dd-name{flex:0 0 170px;font-size:.85rem;font-weight:700;color:var(--text-bright);}
.dd-bar{flex:1;height:8px;border-radius:999px;background:var(--inset);border:1px solid var(--border);overflow:hidden;min-width:60px;}
.dd-bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--action));transition:width .6s var(--ease-out);}
.dd-num{flex:0 0 64px;text-align:right;font-size:.72rem;color:var(--text-dim);}
.dd-num b{display:block;font-size:1rem;color:var(--action);font-variant-numeric:tabular-nums;font-weight:800;}
@media (max-width:560px){
  .dd-name{flex:0 0 110px;font-size:.78rem;}
  .dd-num b{font-size:.9rem;}
}

/* ── 16c. Stats extras — donut & heatmap legend ────────────────────────── */
.stats-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(18px,2.4vw,26px);margin-bottom:22px;align-items:stretch;}
@media (max-width:860px){.stats-cols{grid-template-columns:1fr;}}
.donut-panel{margin-bottom:0;}
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;}
.donut-svg{flex:0 0 auto;}
.donut-legend{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.78rem;color:var(--text-dim);}
.donut-legend li{display:flex;align-items:center;gap:9px;}
.donut-legend i{width:12px;height:12px;border-radius:4px;flex:0 0 auto;border:1px solid var(--border);}
.donut-legend b{color:var(--text-bright);font-variant-numeric:tabular-nums;margin-left:2px;}
.hm-legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:12px;font-size:.64rem;color:var(--text-dim);}
.hm-legend i{width:11px;height:11px;border-radius:3px;background:var(--inset);border:1px solid color-mix(in srgb,var(--border) 60%,transparent);}
.hm-legend i.l1{background:color-mix(in srgb,var(--good) 30%,var(--card));}
.hm-legend i.l2{background:color-mix(in srgb,var(--good) 55%,var(--card));}
.hm-legend i.l3{background:color-mix(in srgb,var(--good) 80%,var(--card));}
.hm-legend i.l4{background:var(--good);}
.hm-legend span{margin:0 5px;}

/* ── 16d. Settings shell ───────────────────────────────────────────────── */
.settings-shell{display:flex;flex-direction:column;gap:20px;max-width:760px;margin:0 auto;}
.opt-panel{margin-top:0!important;}

/* ── 17. Responsive ────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .grid2{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);}
}
@media (max-width:980px){
  .grid2{grid-template-columns:1fr;}
  .start-panel{position:static;}
}
@media (max-width:640px){
  .app{padding:14px 12px 48px;}
  .topbar{top:8px;padding:10px 12px;gap:8px;border-radius:var(--radius);}
  .brand{font-size:1.1rem;padding-left:10px;}
  .brand small{font-size:.55rem;}
  .nav{gap:3px;width:100%;order:3;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
  .nav::-webkit-scrollbar{display:none;}
  .nav button{padding:7px 11px;font-size:.74rem;flex:0 0 auto;}
  .home-link{padding:7px 9px;font-size:.74rem;}
  .theme-toggle{width:32px;height:32px;flex:0 0 auto;}
  .deck-tools{flex-direction:column;align-items:stretch;gap:10px;}
  .deck-tools-right{justify-content:space-between;}
  .seg{width:100%;justify-content:center;}
  .seg-btn{flex:1;padding:7px 8px;font-size:.72rem;}
  .deck-matrix{grid-template-columns:34px repeat(2,minmax(0,1fr));gap:8px;}
  .deck-matrix.f-vocab,.deck-matrix.f-grammar{grid-template-columns:34px minmax(0,1fr);}
  .deck-rowhead{width:34px;font-size:.85rem;border-radius:8px;}
  .deck-cell{padding:12px 11px 14px;min-height:120px;}
  .dc-big{font-size:clamp(1.6rem,8vw,2rem);margin-top:7px;}
  .dc-dot{font-size:.58rem;padding:2px 6px 2px 5px;}
  .mode-btn{min-width:calc(50% - 4px);}
  .totbox b{font-size:1.35rem;}
  .study-top{gap:8px;flex-wrap:wrap;}
  .study-timer{font-size:.66rem;}
  .fc-main{font-size:clamp(1.9rem,9vw,2.6rem);}
  .fc-badge{max-width:calc(100% - 64px);font-size:.58rem;}
  .fc-tts{width:32px;height:32px;top:10px;right:10px;}
  .grade-row{gap:7px;}
  .grade-btn{padding:12px 5px;font-size:.8rem;}
  .grade-btn small{font-size:.6rem;}
  .kbd-hint{font-size:.6rem;}
  .kbd-hint kbd{font-size:.6rem;padding:1px 5px;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .stat-box b{font-size:1.5rem;}
  .set-row{flex-wrap:wrap;}
  .set-row input[type=range]{width:100%;}
  .session-done{padding:36px 14px;}
  .btn-row{gap:8px;}
  .btn-ghost{font-size:.78rem;padding:9px 12px;}
  .to-top{right:14px;bottom:14px;width:40px;height:40px;}
  .hero{grid-template-columns:1fr;text-align:center;padding:22px 16px;}
  .hero-ring-wrap{margin:0 auto;width:120px;height:120px;}
  .hero-ring-mid b{font-size:1.6rem;}
  .hero-start{width:100%;}
  .hero-stats{grid-template-columns:1fr 1fr;gap:9px;padding-top:14px;}
  .stat-mini{padding:11px 8px;}
  .stat-mini b{font-size:1.15rem;}
  .budget-row .bl{flex-basis:66px;font-size:.72rem;}
  .budget-row .bv{flex-basis:56px;font-size:.68rem;}
  .forecast.mini{height:78px;}
  .forecast .bar span{font-size:.55rem;}
  .donut-wrap{gap:16px;}
  .donut-legend{font-size:.72rem;}
}
@media (max-width:400px){
  .stat-grid{grid-template-columns:1fr 1fr;}
}

/* ── 18. Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto;}
}