:root{
  --bg:#FFF4EA; --bg2:#FDEBDD; --card:#FFFFFF; --ink:#4B4458; --ink-soft:#8C8398;
  --coral:#FF8E7F; --coral-deep:#F2705F; --peach:#FFD3BA; --mint:#BDEBD6; --mint-deep:#5DBB93;
  --sky:#CFE8F7; --sky-deep:#5A9FCB; --lav:#E4D8F4; --butter:#FFEFB8; --pink-line:#F4A3A8; --red-line:#E9777F;
  --shadow:0 6px 18px rgba(170,120,100,.14); --shadow-sm:0 3px 8px rgba(170,120,100,.12);
  --r-lg:28px; --r-md:20px; --tap:64px;
  --cell:140px; --py:40px;
  --kai:'LXGW WenKai','KaiTi','STKaiti','Kaiti SC',serif;
  --ui:'LXGW WenKai',system-ui,-apple-system,'PingFang SC','Noto Sans CJK SC',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--ui);overscroll-behavior:none}
body{background:radial-gradient(1200px 500px at 10% -10%,#FFE6D6 0,transparent 60%),radial-gradient(900px 500px at 110% 110%,#E3F1FA 0,transparent 60%),var(--bg);}
button{font-family:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button:focus-visible{outline:4px solid var(--sky-deep);outline-offset:2px}
[hidden]{display:none!important}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:16px;padding:12px 20px 6px}
.brand{display:flex;flex-direction:column;gap:6px;min-width:170px}
.brand-title{font-size:30px;font-weight:700;letter-spacing:2px;color:var(--coral-deep)}
.date-chip{align-self:flex-start;background:var(--butter);border-radius:999px;padding:6px 14px;font-size:17px;box-shadow:var(--shadow-sm)}
.mic-wrap{display:flex;flex-direction:column;align-items:center;margin:0 6px}
.mic{position:relative;width:96px;height:96px;border-radius:50%;background:linear-gradient(145deg,#FFA596,#FF7A6B);box-shadow:0 8px 20px rgba(255,122,107,.45),inset 0 -4px 0 rgba(0,0,0,.08);display:grid;place-items:center;transition:transform .15s}
.mic:active{transform:scale(.94)}
.mic-icon{width:48px;height:48px;fill:#fff}
.mic-ring{position:absolute;inset:-8px;border-radius:50%;border:4px solid rgba(255,142,127,.0);pointer-events:none}
.mic.listening{background:linear-gradient(145deg,#7ED3B2,#4FB68C);box-shadow:0 8px 20px rgba(79,182,140,.45)}
.mic.listening .mic-ring{animation:ring 1.4s ease-out infinite;border-color:rgba(79,182,140,.6)}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.mic-label{font-size:16px;margin-top:4px;color:var(--ink-soft)}
.top-actions{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.pill{min-height:var(--tap);min-width:var(--tap);padding:0 16px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:6px;font-size:19px}
.pill .ico{font-size:22px}
.pill.icon-only{padding:0;justify-content:center}
.pill:active,.tool:active,.cbtn:active,.size-btn:active{transform:scale(.96)}
.toggle[aria-pressed="true"]{background:var(--mint);}
.pill.toggle .ico{font-family:Roboto,Arial,sans-serif;font-weight:700}
.size-group{display:flex;background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:4px;gap:4px}
.size-btn{width:56px;height:56px;border-radius:16px;background:transparent;font-size:20px}
.size-btn[data-size="1"]{font-size:24px}.size-btn[data-size="2"]{font-size:29px}
.size-btn.on{background:var(--sky);font-weight:700}

.listen-bubble{position:fixed;top:118px;left:50%;transform:translateX(-50%);z-index:30;background:#fff;border-radius:999px;padding:14px 26px;box-shadow:var(--shadow);font-size:24px;display:flex;align-items:center;gap:14px;max-width:80vw}
.listen-bubble #interimText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:flex;gap:5px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--mint-deep);animation:bounce 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:1}}

/* ---------- stage / paper ---------- */
.stage{flex:1;min-height:0;padding:6px 20px 8px;display:flex}
.paper{position:relative;flex:1;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px 24px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.grid{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:14px 10px;max-width:100%}
.cellbox{display:flex;flex-direction:column;align-items:center;position:relative}
.py{height:var(--py);font-size:calc(var(--cell)*.2);line-height:var(--py);font-family:'LXGW WenKai',Roboto,'Noto Sans',Arial,sans-serif;color:#6C6A8A;white-space:nowrap;letter-spacing:.5px}
.hide-py .py{display:none}
.cell{width:var(--cell);height:var(--cell);border:2.5px solid var(--red-line);border-radius:6px;position:relative;display:grid;place-items:center;background:
  linear-gradient(to right,transparent calc(50% - 1px),transparent calc(50% + 1px)),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M50 0V100M0 50H100' stroke='%23F4A3A8' stroke-width='1.2' stroke-dasharray='4 3' vector-effect='non-scaling-stroke' fill='none'/></svg>") center/100% 100% no-repeat,#FFFCFA}
.cell .ch{font-family:var(--kai);font-size:calc(var(--cell)*.8);line-height:1;color:#2E2A36;transform:translateY(2%);font-weight:400;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}
.cellbox.zh{cursor:pointer}
.cellbox.zh:active .cell{transform:scale(.96)}
.cellbox.punct .cell{border-color:#F3C3C6;background:#FFFDFC}
.cellbox.punct .cell .ch{color:#9A8FA6}
.cellbox.done .cell{background:#F1F1F1;border-color:#CFCFCF}
.cellbox.done .cell .ch{color:#BDBDBD}
.cellbox.done .py{color:#C4C4C4}
.cellbox.done::after{content:'✓';position:absolute;right:-6px;bottom:-6px;width:40px;height:40px;border-radius:50%;background:var(--mint-deep);color:#fff;font-size:26px;display:grid;place-items:center;box-shadow:var(--shadow-sm);font-family:Arial,sans-serif;font-weight:700}
.cellbox.starred .cell::before{content:'★';position:absolute;top:2px;right:6px;color:#F5B942;font-size:calc(var(--cell)*.16)}
.cellbox.active .cell{box-shadow:0 0 0 5px var(--sky),0 0 0 7px var(--sky-deep)}
.cellbox.reading .cell{background:#FFF3C4}
.check-mode .cellbox.zh .cell{border-style:dashed}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.empty-emoji{font-size:84px}
.empty-title{font-size:38px;color:var(--coral-deep)}
.empty-sub{font-size:22px;color:var(--ink-soft)}

/* ---------- toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:12px;padding:6px 20px 14px}
.tool{min-height:72px;min-width:96px;padding:0 20px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;gap:8px;font-size:22px}
.tool .ico{font-size:22px}
.tool:disabled{opacity:.4}
.tool.soft-red{background:#FFE3DF}
.tool.accent{background:var(--peach)}
.tool.toggle[aria-pressed="true"]{background:var(--mint)}
.page-ind{font-size:24px;min-width:84px;text-align:center;color:var(--ink-soft)}
.tool-sep{flex:1}

/* ---------- drawers ---------- */
.scrim{position:fixed;inset:0;background:rgba(75,68,88,.25);z-index:40;backdrop-filter:blur(2px)}
.drawer{position:fixed;top:0;bottom:0;right:0;width:min(470px,44vw);background:#FFFBF7;z-index:50;box-shadow:-10px 0 30px rgba(120,90,80,.2);border-radius:var(--r-lg) 0 0 var(--r-lg);padding:22px 24px 18px;overflow-y:auto;transform:translateX(105%);transition:transform .28s cubic-bezier(.3,.8,.3,1);visibility:hidden}
.drawer.left{right:auto;left:0;border-radius:0 var(--r-lg) var(--r-lg) 0;transform:translateX(-105%);width:min(520px,48vw)}
.drawer.open{transform:none;visibility:visible}
.drawer-close{position:absolute;top:14px;right:14px;width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);font-size:26px}
.cd-head{display:flex;align-items:baseline;gap:16px;padding-right:70px;min-height:56px}
.cd-pinyin{font-size:40px;color:var(--coral-deep);font-family:'LXGW WenKai',Roboto,Arial,sans-serif}
.cd-meta{font-size:17px;color:var(--ink-soft)}
.cd-writer-wrap{display:flex;flex-direction:column;align-items:center;margin:8px 0 6px}
.cd-writer{width:260px;height:260px;border:3px solid var(--red-line);border-radius:10px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0V100M0 50H100' stroke='%23F4A3A8' stroke-width='.8' stroke-dasharray='3 2' fill='none'/></svg>") center/100% 100%,#FFFCFA}
.cd-stepinfo{font-size:18px;color:var(--ink-soft);height:26px;margin-top:6px}
.cd-controls,.cd-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.cbtn{min-height:var(--tap);padding:0 18px;border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-sm);font-size:20px}
.cbtn.primary{background:var(--coral);color:#fff}
.cbtn.round{width:var(--tap);padding:0;border-radius:50%;font-size:26px}
.cbtn.soft{background:var(--lav);font-size:18px}
.cbtn.soft.on{background:var(--butter)}
.cbtn.toggle[aria-pressed="true"]{background:var(--mint)}
.cd-sec{background:#fff;border-radius:var(--r-md);padding:12px 16px;margin-top:12px;box-shadow:var(--shadow-sm)}
.cd-sec h3{margin:0 0 8px;font-size:19px;color:var(--mint-deep);font-weight:700}
.words{display:flex;flex-wrap:wrap;gap:10px}
.word{min-height:var(--tap);padding:6px 16px;border-radius:18px;background:var(--sky);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.word .wp{font-size:15px;color:#5E6E86;font-family:'LXGW WenKai',Roboto,Arial,sans-serif}
.word .wz{font-size:30px;font-family:var(--kai);line-height:1.1}
.word .wz b{color:var(--coral-deep);font-weight:400}
.sentence{display:flex;align-items:center;gap:12px;background:var(--butter);border-radius:18px;padding:10px 14px;min-height:var(--tap);font-family:var(--kai);font-size:28px;line-height:1.4;cursor:pointer}
.sentence b{color:var(--coral-deep);font-weight:400}
.sentence .spk{font-size:24px;flex:none}
.muted{color:var(--ink-soft);font-size:18px}
.cd-source{margin-top:10px;font-size:13px;color:#A99FB3;line-height:1.5}

.ld-title{margin:6px 0 16px;font-size:30px;color:var(--coral-deep)}
.day{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--r-md);padding:12px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm);min-height:80px;width:100%;text-align:left}
.day.current{outline:3px solid var(--mint)}
.day-date{flex:none;width:92px;height:64px;border-radius:16px;background:var(--peach);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px}
.day-date b{font-size:24px}
.day-text{flex:1;font-family:var(--kai);font-size:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.day-prog{font-size:15px;color:var(--ink-soft);flex:none}
.stars{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.star-card{position:relative;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-sm);height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.star-card .sp{font-size:15px;color:#6C6A8A}
.star-card .sc{font-family:var(--kai);font-size:56px;line-height:1.1}
.ld-empty{font-size:22px;color:var(--ink-soft);text-align:center;margin-top:60px;line-height:1.8}
.ld-btn{margin:0 0 16px;width:100%}

/* ---------- modal & toast ---------- */
.modal-wrap{position:fixed;inset:0;z-index:70;background:rgba(75,68,88,.3);display:grid;place-items:center;backdrop-filter:blur(3px)}
.modal{background:#FFFBF7;border-radius:var(--r-lg);padding:26px 30px;width:min(640px,86vw);box-shadow:var(--shadow);text-align:center}
.modal-emoji{font-size:56px}
.modal h2{margin:6px 0;font-size:28px}
.modal p{margin:6px 0 14px;font-size:20px;color:var(--ink-soft)}
.modal textarea,.modal input{width:100%;font-family:var(--kai);font-size:30px;border:3px solid var(--peach);border-radius:18px;padding:12px 16px;background:#fff;color:var(--ink);outline:none;resize:none}
.modal input{text-align:center;font-size:56px;width:200px}
.modal textarea:focus,.modal input:focus{border-color:var(--coral)}
.modal-btns{display:flex;gap:16px;justify-content:center;margin-top:18px}
.modal-btns .cbtn{min-width:140px;font-size:22px}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:80;background:#4B4458;color:#fff;border-radius:999px;padding:14px 26px;font-size:20px;box-shadow:var(--shadow);max-width:80vw;text-align:center}

/* ---------- responsive: small landscape / portrait ---------- */
@media (max-width:1100px){.pill span:not(.ico){display:none}.pill{padding:0}.brand{min-width:auto}.brand-title{font-size:24px}}
@media (max-height:640px){.mic{width:76px;height:76px}.mic-icon{width:38px;height:38px}.mic-label{display:none}.tool{min-height:64px}.topbar{padding-top:6px}}
@media (orientation:portrait){.drawer,.drawer.left{width:88vw}.tool span:not(.ico){display:none}}
.grid{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:14px}
.row{display:flex;gap:10px}

/* drawer v2 layout */
.drawer{width:min(560px,46vw)}
.cd-head{align-items:center;gap:14px;flex-wrap:wrap}
.cd-head .cbtn.round{width:56px;min-height:56px;height:56px;font-size:24px}
.cd-meta{flex-basis:100%;margin-top:-2px}
.cd-main{display:flex;gap:18px;align-items:flex-start;justify-content:center;margin-top:8px}
.cd-writer-wrap{margin:0}
.cd-writer{width:240px;height:240px}
.cd-controls{flex-direction:column;justify-content:flex-start;margin:0;flex:1;max-width:200px}
.cd-controls .cbtn{width:100%}
.cd-actions{margin:6px 0 4px}
@media (max-width:1100px){.cd-main{flex-direction:column;align-items:center}.cd-controls{flex-direction:row;max-width:none}}