/* Blue Liquid 主题：只覆盖颜色和材质，不改功能布局 */
:root{
  --bg:#edf3fb; --bg-deep:#e2ebfa;
  --card:rgba(255,255,255,.78);
  --ink:#0c1424; --ink-2:#334155; --muted:#6b7c93;
  --line:rgba(15,23,42,.08); --line-strong:rgba(15,23,42,.13);
  --primary:#2563eb; --primary-deep:#1e40af; --primary-soft:#e8f0ff;
  --vowel:#df5b48; --vowel-soft:#fdecea;
  --consonant:#3f7bb6; --consonant-soft:#e9f2fb;
  --amber:#a66b18; --amber-soft:#fbf0d7;
  --green:#2f7a5c; --green-soft:#e2f1e7;
  --shadow-sm:0 6px 18px rgba(37,99,235,.08);
  --shadow:0 18px 44px rgba(37,99,235,.12);
}
body{
  background:
    radial-gradient(1000px 650px at 6% -8%, rgba(191,219,254,.75), transparent 58%),
    radial-gradient(900px 600px at 100% 0%, rgba(221,214,254,.62), transparent 58%),
    radial-gradient(700px 500px at 50% 100%, rgba(207,250,254,.35), transparent 60%),
    linear-gradient(180deg,#f7faff 0%,#eaf1fa 100%);
  background-attachment:fixed;
}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.topbar{background:rgba(247,250,255,.72);backdrop-filter:blur(20px);border-bottom-color:rgba(15,23,42,.06)}
.sidebar{background:rgba(255,255,255,.58);backdrop-filter:blur(22px);border-right-color:rgba(15,23,42,.06)}
.btn-primary{
  background:linear-gradient(110deg,#2563eb 0%,#4f46e5 38%,#06b6d4 72%,#7c3aed 100%);
  background-size:220% 100%;
  animation:pxFlow 8s ease-in-out infinite alternate;
  color:#fff;border:1px solid rgba(255,255,255,.2);
  box-shadow:0 10px 24px rgba(37,99,235,.24),inset 0 1px 0 rgba(255,255,255,.35);
  border-radius:14px;
}
.btn-soft{background:rgba(232,240,255,.8);color:var(--primary-deep);border-color:rgba(37,99,235,.1)}
.progress-line{height:7px;border-radius:999px;background:rgba(37,99,235,.12);overflow:hidden}
.study-segments{display:flex;gap:4px;margin:12px 0 10px}
.study-segments i{height:7px;flex:1;border-radius:999px;background:rgba(37,99,235,.12)}
.study-segments i.on{background:linear-gradient(90deg,#2563eb,#06b6d4 58%,#7c3aed);background-size:180% 100%;animation:pxFlow 7s ease-in-out infinite alternate}
.progress-line i{
  background:linear-gradient(90deg,#2563eb,#06b6d4 58%,#7c3aed);
  background-size:200% 100%;animation:pxFlow 7s ease-in-out infinite alternate;
  border-radius:999px;box-shadow:0 0 12px rgba(6,182,212,.26)
}
.study-scrubber{
  border-color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(14px);
  border-radius:18px;
  padding:7px 10px;
  margin:6px 0 10px;
}
.study-scrubber input[type="range"]{accent-color:var(--primary);height:20px}
.study-card,.word-hero,.phoneme-hero,.settings-card,.calendar-card,.log-card,.knowledge-card{
  border-radius:24px;
}
.study-top .eyebrow,.page-head .eyebrow{color:var(--primary)}
.counter strong{color:var(--primary)}
.action-btn{border-radius:14px;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.65)}
.action-known{background:rgba(232,240,255,.8)}
.bottom-nav,.tabbar{background:rgba(255,255,255,.72);backdrop-filter:blur(22px)}
.bottom-nav{border-top-color:rgba(15,23,42,.06)}
.bottom-nav a{color:#8493a8}
.bottom-nav a.is-active{color:var(--primary)}
.brand-mark{background:linear-gradient(135deg,#2563eb,#7c3aed)}
.px-card .px-tag{color:var(--primary);font-weight:750;font-size:10px;letter-spacing:.03em}
.px-stat b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;line-height:1}
.px-backup{text-align:center}
.px-backup .px-actions{justify-content:center}
.px-backup h3{margin-bottom:6px}
.sheet-title-link{border:0;background:transparent;padding:0;font:inherit;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);cursor:pointer}
.sheet-title-link span{font-size:12px}
.px-error-btn{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:12px;margin:8px 0}
.px-error-btn:hover{border-color:var(--primary)}
.px-redo-link{display:inline-block;margin-top:4px;color:var(--primary);font-weight:650}
.px-explain{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.px-explain p{font-size:11px;line-height:1.7;color:var(--ink2);margin:4px 0}
.px-explain b{color:var(--ink)}
html[data-theme="dark"] .px-error-btn{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .px-card .px-tag{color:#7db4ff}
@keyframes pxFlow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.btn-primary,.progress-line i{animation:none}}

/* ---------- Today home ---------- */
.home{max-width:760px;margin:0 auto;padding:10px 0 34px}
.home-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--muted);font-weight:600}
.home-title{font-size:36px;line-height:1.08;letter-spacing:-.05em;margin:12px 0 7px;font-weight:750;color:var(--ink)}
.home-title em{font-style:normal;background:linear-gradient(100deg,var(--primary),#06b6d4 62%,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-title{font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;font-weight:700;letter-spacing:-.035em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;font-synthesis:none}
.phoneme-section-head h2,.drill-head h2,.calendar-head h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC",sans-serif;font-weight:700}
.home-sub{font-size:14px;color:var(--muted);margin:0 0 16px}
.home-hero{border:1px solid rgba(255,255,255,.8);background:var(--card);backdrop-filter:blur(22px);border-radius:24px;padding:18px;box-shadow:var(--shadow);margin:0 0 18px}
.home-word-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.home-word{font-family:Georgia,"Songti SC",serif;font-size:54px;line-height:1;letter-spacing:-.05em;color:var(--ink)}
.home-ipa{font-size:14px;color:var(--muted);margin-top:5px}
.home-count{font-size:12px;color:var(--muted);white-space:nowrap;padding-top:4px}
.home-count b{font-size:24px;letter-spacing:-.04em;color:var(--ink)}
.home-cta{width:100%;border:0;border-radius:16px;margin-top:18px;padding:14px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;color:#fff;font:inherit;font-size:16px;font-weight:750;cursor:pointer;background:linear-gradient(110deg,#2563eb,#4f46e5 45%,#06b6d4);box-shadow:0 12px 26px rgba(37,99,235,.24)}
.home-cta small{display:block;font-size:11px;font-weight:500;opacity:.75;margin-top:3px}
.home-cta i{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;flex:none}
.home-section{margin:0 0 14px}
.home-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:12px;color:var(--muted)}
.home-section-head b{font-size:13px;color:var(--ink)}
.home-row{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:12px}
.home-row .home-dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none}
.home-row .home-dot.on{background:var(--primary)}
.home-row div{flex:1;min-width:0}
.home-row b{display:block;font-size:13px;margin-bottom:2px}
.home-row span:not(.home-dot):not(.home-pill){display:block;font-size:11px;color:var(--muted)}
.home-pill{font-size:10px;background:var(--primary-soft);color:var(--primary-deep);border-radius:999px;padding:5px 8px;white-space:nowrap}
.home-chips{display:flex;gap:6px;flex-wrap:wrap}
.home-chips span{font-size:11px;border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:999px;padding:6px 9px;color:var(--ink2)}
.home-review{border-bottom:0;margin-top:2px}
/* ---------- Smooth study rail ---------- */
.study-rail{position:relative;height:48px;display:flex;align-items:center;margin:4px 0 0;touch-action:none}
.study-rail-track{position:absolute;left:0;right:0;height:9px;border-radius:999px;background:rgba(37,99,235,.12);overflow:hidden}
.study-rail-fill{height:100%;width:100%;transform-origin:left center;transform:scaleX(.44);background:linear-gradient(90deg,#2563eb,#06b6d4 60%,#7c3aed);border-radius:999px;will-change:transform}
.study-rail-bubble{position:absolute;bottom:34px;left:44%;transform:translateX(-50%);background:rgba(8,15,28,.92);color:#fff;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .12s;pointer-events:none}
.study-rail.is-drag .study-rail-bubble{opacity:1}
.study-rail-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:7px 0 12px}
.study-rail-tools .step-btn{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC",sans-serif;font-size:11px;font-weight:650;line-height:1;padding:7px 10px;border-radius:10px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.study-rail-tools .step-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.study-rail-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:-7px}
/* ---------- Dark theme ---------- */
html[data-theme="dark"]{
  --bg:#0b121b;--bg-deep:#111a25;--ink:#e4eaf2;--ink-2:#c6d2df;--muted:#94a3b4;
  --line:rgba(226,235,246,.1);--line-strong:rgba(226,235,246,.17);
  --primary:#7fb1ff;--primary-deep:#d4e5ff;--primary-soft:rgba(127,177,255,.13);
  --card:rgba(22,31,43,.78);--shadow:0 18px 44px rgba(0,0,0,.24);
}
html[data-theme="dark"] body{background:radial-gradient(900px 600px at 0% 0%,#172a40,transparent 60%),radial-gradient(800px 500px at 100% 0%,#2a2638,transparent 58%),linear-gradient(180deg,#0b121b,#111a25)}
html[data-theme="dark"] .topbar,html[data-theme="dark"] .sidebar{background:rgba(9,18,32,.78);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .bottom-nav{background:rgba(8,17,31,.82);border-top-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .home-hero,html[data-theme="dark"] .card{background:var(--card);border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .home-chips span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--ink-2)}
html[data-theme="dark"] .home-row span:not(.home-dot):not(.home-pill){color:var(--muted)}
html[data-theme="dark"] .study-rail-track{background:rgba(255,255,255,.1)}
html[data-theme="dark"] .study-rail-bubble{background:#eaf6ff;color:#08111f}
html[data-theme="dark"] .study-rail-tools .step-btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--ink-2)}
html[data-theme="dark"] .home-cta{box-shadow:0 12px 28px rgba(56,189,248,.18)}
html[data-theme="dark"] .accent-switch,html[data-theme="dark"] .icon-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--ink)}
html[data-theme="dark"] .accent-switch button.is-active{background:var(--primary);color:#07101e}
@media(max-width:720px){
  .topbar .icon-btn[data-action="open-help"]{display:none}
  .topbar .accent-switch button{padding:5px 7px;font-size:10px}
  .theme-toggle{display:inline-flex!important}
  .bottom-nav a{flex:1;min-width:0;padding:5px 2px;font-size:8px}
  .bottom-nav{gap:0}
}
html[data-theme="dark"] .study-actions{background:rgba(8,17,31,.92);border-top-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .toast{background:#eaf6ff;color:#08111f}