/* ============================================================
   30天 · 十二句  |  样式
   暖纸底 + 墨色 + 朱砂红，英文用衬线体，中文用系统黑体
   ============================================================ */

:root{
  --paper:#FAF7F2;
  --paper-2:#F3EDE3;
  --card:#FFFFFF;
  --ink:#17150F;
  --ink-2:#3F3A32;
  --muted:#8B8274;
  --line:#E9E1D3;
  --line-2:#F0E9DE;
  --accent:#D4502E;
  --accent-ink:#A83A1E;
  --accent-soft:#FBEBE5;
  --teal:#0F6B5C;
  --teal-soft:#E6F2EF;
  --gold:#B98A2E;
  --gold-soft:#F8F0DD;
  --font-en:"Georgia","Iowan Old Style","Times New Roman",serif;
  --font-cn:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --shadow-sm:0 1px 2px rgba(30,24,14,.05), 0 2px 8px rgba(30,24,14,.04);
  --shadow-md:0 2px 6px rgba(30,24,14,.06), 0 12px 32px rgba(30,24,14,.08);
  --r-lg:22px;
  --r-md:16px;
  --r-sm:11px;
  --tab-h:66px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-cn);
  font-size:16px;
  line-height:1.6;
  letter-spacing:.01em;
  overscroll-behavior-y:none;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(212,80,46,.07), transparent 62%),
    radial-gradient(700px 380px at -10% 12%, rgba(15,107,92,.06), transparent 60%);
}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;font-size:inherit}
input,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ---------- 框架 ---------- */
.app{position:relative;z-index:1;display:flex;min-height:100vh}
.rail{display:none}

main{
  flex:1;min-width:0;
  padding:0 18px calc(var(--tab-h) + 34px);
  margin:0 auto;width:100%;max-width:760px;
}

/* 顶部品牌条 */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 2px 10px;
}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{
  width:30px;height:30px;border-radius:9px;background:var(--ink);color:#F7F2E8;
  display:grid;place-items:center;font-family:var(--font-en);font-size:15px;
  box-shadow:var(--shadow-sm);
}
.brand-name{font-size:14.5px;font-weight:600;letter-spacing:.04em}
.brand-sub{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.streak{
  display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px 5px 8px;box-shadow:var(--shadow-sm);
}
.streak b{font-variant-numeric:tabular-nums;font-size:13px}
.flame{width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- 文字 ---------- */
.en{font-family:var(--font-en);letter-spacing:.005em;line-height:1.32}
h1,h2,h3{margin:0;font-weight:600;line-height:1.3}
.eyebrow{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--line)}
.muted{color:var(--muted)}
.tiny{font-size:12.5px;line-height:1.55}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:20px;
}
.card.pad-lg{padding:24px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wrap{flex-wrap:wrap}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:999px;font-size:14.5px;font-weight:600;
  border:1px solid transparent;transition:transform .12s ease, background .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--ink);color:#FBF7EF;box-shadow:0 6px 18px rgba(23,21,15,.16)}
.btn-primary:hover{background:#2A261D}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(212,80,46,.26)}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:var(--paper-2)}
.btn-soft{background:var(--paper-2);color:var(--ink-2)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;font-size:13px;font-weight:500}
.btn[disabled]{opacity:.45;pointer-events:none}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;font-size:12px;
  background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line-2);
}
.chip.accent{background:var(--accent-soft);color:var(--accent-ink);border-color:#F5D9CF}
.chip.teal{background:var(--teal-soft);color:var(--teal);border-color:#D5E8E3}
.chip.gold{background:var(--gold-soft);color:#8A6516;border-color:#F0E4C8}

/* ---------- 今日大卡 ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(560px 260px at 88% -20%, rgba(212,80,46,.30), transparent 65%),
    linear-gradient(158deg,#1D1A14 0%,#14120D 62%,#16130E 100%);
  color:#F7F1E5;border-radius:26px;padding:26px 24px 24px;
  box-shadow:0 18px 44px rgba(24,20,13,.22);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:4px 4px;opacity:.5;
}
.hero > *{position:relative;z-index:1}
.hero .eyebrow{color:rgba(247,241,229,.55)}
.hero .eyebrow::after{background:rgba(247,241,229,.16)}
.hero-day{font-family:var(--font-en);font-size:13px;letter-spacing:.2em;color:rgba(247,241,229,.6)}
.hero h1{font-size:27px;letter-spacing:.01em;margin:8px 0 4px}
.hero-pattern{
  display:inline-block;margin-top:14px;padding:9px 14px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  font-family:var(--font-en);font-size:15.5px;color:#F2D9C6;letter-spacing:.02em;
}
.hero-en{
  font-family:var(--font-en);font-size:clamp(20px,6.2vw,26px);line-height:1.3;
  margin:16px 0 2px;color:#FFF9EE;
}
.hero-zh{font-size:13.5px;color:rgba(247,241,229,.62)}
.hero-actions{display:flex;gap:10px;margin-top:22px;align-items:center}
.hero .btn-primary{background:#F7F1E5;color:#17150F}
.hero .btn-primary:hover{background:#fff}
.hero .btn-ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#F2EADB}

/* 三个能力 */
.abilities{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}
.ability{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 11px;box-shadow:var(--shadow-sm);
}
.ability .k{font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.ability .v{font-size:14px;font-weight:600;margin-top:3px}
.ability .d{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:2px}

/* ---------- 训练流程 ---------- */
.taskbar{display:flex;align-items:center;gap:12px;padding:16px 0 12px}
.taskbar .step{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.progress{flex:1;height:5px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#E58B5F);border-radius:99px;transition:width .35s ease}
.iconbtn{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:15px;
}

.task{animation:rise .28s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.task-label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.task-q{font-size:22px;line-height:1.35;font-weight:600;margin-bottom:6px}
.task-hint{font-size:13.5px;color:var(--muted);line-height:1.6}

.speaker{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:18px;border-radius:18px;background:var(--paper-2);
  border:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink-2);
  transition:background .2s ease;
}
.speaker:hover{background:#EDE5D8}
.speaker .tri{font-size:12px;color:var(--accent)}

.opts{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.opt{
  display:flex;align-items:center;gap:11px;text-align:left;
  padding:14px 15px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  font-size:15px;transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.opt:hover{border-color:#D9CDBB;background:#FFFDF9}
.opt .idx{
  width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:11px;color:var(--muted);flex:none;
  font-family:var(--font-en);
}
.opt.correct{border-color:var(--teal);background:var(--teal-soft);color:#0A4F44}
.opt.correct .idx{border-color:var(--teal);background:var(--teal);color:#fff}
.opt.wrong{border-color:#E7C3B8;background:#FDF1ED;color:#8E3B22}
.opt.wrong .idx{border-color:#DFA695;background:#DFA695;color:#fff}
.opt[disabled]{pointer-events:none}

textarea.answer-input{
  width:100%;min-height:96px;resize:vertical;padding:15px 16px;
  border-radius:14px;border:1px solid var(--line);background:#FFFDF9;
  font-family:var(--font-en);font-size:17px;line-height:1.5;
  outline:none;transition:border-color .15s ease, box-shadow .15s ease;
}
textarea.answer-input:focus{border-color:#C9B79C;box-shadow:0 0 0 4px rgba(201,183,156,.18)}

.reveal{
  margin-top:16px;border-radius:16px;padding:16px 17px;
  background:var(--paper-2);border:1px solid var(--line-2);
  animation:rise .25s ease both;
}
.reveal .en{font-size:21px;color:var(--ink)}
.reveal .zh{font-size:13.5px;color:var(--muted);margin-top:5px}
.reveal .btn-soft{background:#fff;border:1px solid var(--line)}
.reveal .note{
  font-size:12.5px;color:var(--ink-2);margin-top:10px;padding-top:10px;
  border-top:1px dashed #DED3C1;line-height:1.6;
}

.diff{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;font-family:var(--font-en);font-size:16px}
.diff .w{padding:2px 6px;border-radius:6px}
.diff .ok{background:var(--teal-soft);color:#0A4F44}
.diff .miss{background:var(--accent-soft);color:var(--accent-ink);text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:1px}
.diff .extra{background:#F1EFEA;color:var(--muted);text-decoration:line-through}

.verdict{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  font-size:13.5px;margin-top:14px;line-height:1.5;
}
.verdict.good{background:var(--teal-soft);color:#0A4F44}
.verdict.mid{background:var(--gold-soft);color:#7A5A12}
.verdict.bad{background:var(--accent-soft);color:var(--accent-ink)}

/* 录音按钮 */
.micwrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin:22px 0 6px}
.mic{
  width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#FBF7EF;position:relative;
  box-shadow:0 10px 26px rgba(23,21,15,.22);transition:transform .15s ease, background .2s ease;
}
.mic:active{transform:scale(.96)}
.mic.rec{background:var(--accent);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(212,80,46,.34)}
  70%{box-shadow:0 0 0 22px rgba(212,80,46,0)}
  100%{box-shadow:0 0 0 0 rgba(212,80,46,0)}
}
.mic .glyph{font-size:13px;font-family:var(--font-cn);font-weight:600;letter-spacing:.08em}
.mic-label{font-size:12.5px;color:var(--muted)}
.asr{
  font-family:var(--font-en);font-size:16px;line-height:1.5;
  background:var(--paper-2);border-radius:12px;padding:12px 14px;color:var(--ink-2);
}

.selfrate{display:flex;gap:8px;margin-top:14px}
.selfrate .btn{flex:1;padding:11px 8px;font-size:13px}

/* ---------- 十二句解构 ---------- */
.core-card{
  border:1px solid var(--line);border-radius:18px;background:var(--card);
  box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .2s ease;
}
.core-card[data-open="1"]{border-color:#DCCDB6;box-shadow:var(--shadow-md)}
.core-head{display:flex;gap:14px;align-items:flex-start;padding:16px 17px;width:100%;text-align:left}
.core-no{
  font-family:var(--font-en);font-size:12px;color:var(--muted);flex:none;
  width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;margin-top:2px;
}
.core-en{display:block;font-family:var(--font-en);font-size:18.5px;line-height:1.35;color:var(--ink)}
.core-zh{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.core-body{padding:0 17px 18px;display:none}
.core-card[data-open="1"] .core-body{display:block;animation:rise .22s ease both}

.tokens{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.tok{padding:5px 10px;border-radius:8px;font-family:var(--font-en);font-size:15px;position:relative}
.tok small{display:block;font-family:var(--font-cn);font-size:9.5px;letter-spacing:.06em;opacity:.72;margin-top:1px}
.r-s{background:#EAF0FF;color:#1D4ED8}
.r-v{background:#FFEDE2;color:#B33F14}
.r-o{background:#E6F6EE;color:#0B6B4A}
.r-io{background:#F1EAFE;color:#6D28D9}
.r-c{background:#FDF3E0;color:#9A5B0B}
.r-d{background:#E4F4F8;color:#0E6A80}
.r-m{background:#FDE8EE;color:#A81541}
.r-p{background:#EFEFF3;color:#4B5563}
.r-q{background:#FFF1D6;color:#8A5A00}
.r-t{background:#EEF6E8;color:#4A6B23}

.formula{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 13px;border-radius:11px;background:var(--paper-2);
  font-family:var(--font-en);font-size:14px;color:var(--ink-2);
}
.formula b{font-weight:600;color:var(--ink)}
.why{font-size:13.8px;line-height:1.75;color:var(--ink-2);margin-top:14px}
.tipline{
  display:flex;gap:9px;margin-top:12px;padding:11px 13px;border-radius:11px;
  background:var(--gold-soft);color:#6F5210;font-size:12.8px;line-height:1.6;
}
.tipline b{flex:none;font-weight:600}
.variants{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.variant{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  border:1px dashed var(--line);background:#FFFDF8;
}
.variant .en{font-size:14.5px;flex:1}
.variant .zh{font-size:11.5px;color:var(--muted)}
.playdot{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;flex:none;font-size:9px;color:var(--accent);background:#fff;
}
.playdot:hover{background:var(--accent-soft)}

/* ---------- 30 天计划 ---------- */
.week-head{display:flex;align-items:baseline;gap:10px;margin:26px 2px 11px}
.week-head h2{font-size:16px}
.week-head span{font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.week-desc{font-size:12.5px;color:var(--muted);margin:-4px 2px 12px;line-height:1.6}
.daygrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.daycell{
  text-align:left;padding:13px 14px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);position:relative;
  transition:transform .12s ease,border-color .18s ease;
}
.daycell:active{transform:scale(.985)}
.daycell:hover{border-color:#DCCDB6}
.daycell .no{font-family:var(--font-en);font-size:11px;color:var(--muted);letter-spacing:.08em}
.daycell .tt{font-size:13.5px;font-weight:600;margin-top:3px;line-height:1.35;padding-right:16px}
.daycell .lv{font-size:10.5px;color:var(--muted);margin-top:6px;letter-spacing:.06em}
.daycell.done{background:linear-gradient(180deg,#F6FBF9,#FFFFFF);border-color:#D7E9E3}
.daycell.done .tt{color:#0A4F44}
.daycell .tick{
  position:absolute;top:11px;right:11px;width:16px;height:16px;border-radius:50%;
  background:var(--teal);color:#fff;display:grid;place-items:center;font-size:9px;
}
.daycell.next{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.daycell .pbar{height:3px;border-radius:9px;background:var(--paper-2);margin-top:9px;overflow:hidden}
.daycell .pbar i{display:block;height:100%;background:var(--accent);opacity:.7}

/* ---------- 我的 ---------- */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:14px 12px;text-align:center;box-shadow:var(--shadow-sm)}
.stat .n{font-family:var(--font-en);font-size:24px;line-height:1.1}
.stat .l{font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.05em}

.calendar{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:14px}
.cal{aspect-ratio:1;border-radius:6px;background:var(--paper-2);display:grid;place-items:center;font-size:9px;color:#B9AE9D;font-family:var(--font-en)}
.cal.done{background:var(--teal);color:#fff}
.cal.today{outline:2px solid var(--accent);outline-offset:1px}

.wrongrow{
  display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line-2);
}
.wrongrow:last-child{border-bottom:0}
.wrongrow .en{font-size:15px;flex:1;line-height:1.4}
.wrongrow .zh{font-size:11.5px;color:var(--muted)}

.setrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.setrow:last-child{border-bottom:0}
.seg{display:flex;gap:4px;background:var(--paper-2);padding:3px;border-radius:10px}
.seg button{padding:6px 11px;border-radius:8px;font-size:12.5px;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);font-weight:600}

/* ---------- 底部导航 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(250,247,242,.9);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--line);
  display:flex;
}
.tabbar button{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11.5px;color:var(--muted);letter-spacing:.04em;position:relative;
}
.tabbar button .dot{width:4px;height:4px;border-radius:50%;background:transparent;transition:background .2s,transform .2s}
.tabbar button.on{color:var(--ink);font-weight:600}
.tabbar button.on .dot{background:var(--accent);transform:scale(1.2)}
.tabbar button.on::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2px;border-radius:0 0 3px 3px;background:var(--accent);
}

/* ---------- 杂项 ---------- */
.divider{height:1px;background:var(--line);margin:18px 0}
.center{text-align:center}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:26px 2px 12px}
.section-title h2{font-size:15.5px}
.section-title .more{font-size:12px;color:var(--muted)}
.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + 22px);transform:translate(-50%,10px);
  background:var(--ink);color:#FBF7EF;padding:11px 18px;border-radius:999px;font-size:13px;
  box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:all .25s ease;z-index:80;
  max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.ring{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--teal) calc(var(--p)*1%), var(--paper-2) 0);
  position:relative;
}
.ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--card)}
.ring span{position:relative;z-index:1;font-family:var(--font-en);font-size:12px}
.note-box{background:var(--paper-2);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.65}
.httpnote{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:var(--gold-soft);border:1px solid #F0E4C8;color:#6F5210;
  border-radius:11px;padding:7px 11px;font-size:11.5px;line-height:1.5;margin:0 0 12px;
}
.httpnote a{flex:none;font-weight:600;white-space:nowrap;color:#8A6516;text-decoration:underline}
.httpnote span{flex:1;min-width:0}
.httpnote.warn{background:var(--accent-soft);border-color:#F5D9CF;color:var(--accent-ink)}

/* ---------- 桌面 ---------- */
@media (min-width:980px){
  :root{--tab-h:0px}
  .tabbar{display:none}
  .topbar{display:none}
  .app{max-width:1180px;margin:0 auto;gap:0}
  .rail{
    display:flex;flex-direction:column;gap:26px;width:250px;flex:none;
    padding:30px 18px 30px 26px;position:sticky;top:0;height:100vh;
  }
  .rail-nav{display:flex;flex-direction:column;gap:3px}
  .rail-nav button{
    display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;
    font-size:14px;color:var(--ink-2);text-align:left;transition:background .16s ease;
  }
  .rail-nav button:hover{background:rgba(0,0,0,.035)}
  .rail-nav button.on{background:var(--card);box-shadow:var(--shadow-sm);font-weight:600;color:var(--ink)}
  .rail-nav button .k{font-family:var(--font-en);font-size:10.5px;color:var(--muted);margin-left:auto;letter-spacing:.08em}
  main{max-width:720px;padding:34px 30px 80px}
  .topbar{padding-top:0}
  .hero{padding:34px 32px 30px;border-radius:30px}
  .hero h1{font-size:32px}
  .daygrid{grid-template-columns:repeat(3,1fr)}
  .rail-foot{margin-top:auto;font-size:11.5px;color:var(--muted);line-height:1.7}
  .rail-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:var(--shadow-sm)}
  .rail-k{font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;line-height:1.5}
  .rail-t{font-size:14px;font-weight:600;margin-top:4px;line-height:1.4}
  .rail-m{font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:.02em}
  .rail-streak{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-sm)}
  .rail-streak .n{font-family:var(--font-en);font-size:26px;line-height:1.1}
  .rail-streak .l{font-size:11px;color:var(--muted);margin-top:2px;letter-spacing:.08em}
}
@media (max-width:420px){
  .hero h1{font-size:24px}
  .task-q{font-size:19.5px}
  .daygrid{gap:8px}
  .daycell{padding:11px 12px}
  .daycell .tt{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}