:root,body[data-theme="mint"]{
  --bg:#eaf7f4; --bg2:#f6fbfa; --card:#ffffff; --ink:#13212b; --ink2:#22333f; --sub:#667985; --line:#dcebe8;
  --pri:#10a596; --pri2:#38b2e6; --priS:#e1f5f1; --ng:#ee6464; --mid:#f0ac2e; --ok:#1bb37a; --maskc:207,233,230; --chip:#f0f6f5;
  --mask:#cfe9e6; --font: -apple-system, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
  --en: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safeB: env(safe-area-inset-bottom, 0px);
}
body[data-theme="sky"]{--bg:#e9f4fc;--bg2:#f7fbfe;--line:#dbe9f3;--priS:#e2f1fb;--maskc:208,229,244;--chip:#eff5fa}
body[data-theme="white"]{--bg:#f7f8f9;--bg2:#ffffff;--line:#e6eaec;--maskc:222,232,234;--chip:#f2f5f6}
body[data-theme="cream"]{--bg:#fbf6ea;--bg2:#fffdf7;--line:#efe6d2;--priS:#eaf5ef;--maskc:236,228,206;--chip:#f7f2e6}
body[data-theme="sakura"]{--bg:#fcf0f2;--bg2:#fffafb;--line:#f3dfe3;--priS:#e9f5f2;--maskc:244,222,227;--chip:#f9eff1}
body[data-theme="lavender"]{--bg:#f1effb;--bg2:#fbfaff;--line:#e2def3;--priS:#e7f3f4;--maskc:224,220,243;--chip:#f3f1fa}
body[data-theme="night"]{--bg:#16202a;--bg2:#1b2732;--card:#212f3b;--ink:#edf3f6;--ink2:#d9e3e8;--sub:#93a6b2;--line:#2f404d;--priS:#1d3d3d;--maskc:47,66,78;--chip:#2a3946}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 70%) fixed;color:var(--ink);font-family:var(--font);overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:640px;margin:0 auto}
.screen{display:none;flex:1;flex-direction:column;min-height:0}
.screen.active{display:flex}
.scroll{flex:1;overflow-y:auto;padding:12px 14px 24px}
.hbar{padding:14px 16px 6px;font-size:18px}
.brand{display:flex;align-items:center;gap:10px}
.brand b{font-size:20px;display:block;letter-spacing:.02em}
.brand small{color:var(--sub);font-size:12px}
.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-weight:800;display:grid;place-items:center;font-size:15px;box-shadow:0 4px 12px #12a99a40}
.card{background:var(--card);border-radius:20px;padding:16px;margin:0 0 14px;border:1px solid var(--line);box-shadow:0 8px 24px -14px #0b4b4530}
.card h3{font-size:13px;color:var(--sub);margin:4px 0 8px;font-weight:600}
.hero{display:flex;align-items:center;gap:14px}
.ring{position:relative;width:118px;height:118px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11}
.rbg{stroke:var(--priS)} .rfg{stroke:url(#g);stroke:var(--pri);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset .8s}
.rtxt{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.rtxt b{font-size:24px} .rtxt small{font-size:10px;color:var(--sub)}
.herostats{flex:1;display:grid;gap:8px}
.herostats div{display:flex;align-items:baseline;gap:8px;border-bottom:1px dashed var(--line);padding-bottom:4px}
.herostats b{font-size:22px;color:var(--pri);min-width:44px;text-align:right}
.herostats small{color:var(--sub);font-size:12px}
.big{display:block;width:100%;padding:14px;border-radius:14px;background:var(--priS);color:#0b6f66;font-weight:700;font-size:16px;margin:10px 0 0}
.big.primary{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;margin:0 0 12px;box-shadow:0 6px 16px #12a99a40}
.big small{display:block;font-weight:400;font-size:12px;opacity:.9;margin-top:2px}
.seg.grid3{display:grid;grid-template-columns:repeat(3,1fr)}
.seg{display:flex;background:var(--chip);border-radius:12px;padding:3px;gap:3px;margin-bottom:6px}
.seg button{flex:1;padding:9px 2px;border-radius:9px;font-size:12.5px;color:var(--sub);white-space:nowrap}
.seg button.on{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 4px #0002}
.hint{color:var(--sub);font-size:12px;margin:4px 2px 10px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:7px 12px;border-radius:999px;background:var(--chip);font-size:13px;border:1px solid var(--line)}
.chips button small{color:var(--sub);margin-left:4px}
.foot{font-size:10px;color:#9aabb5;text-align:center;margin:18px 6px}

/* タブ */
.tabbar{display:flex;border-top:1px solid var(--line);background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(10px);padding-bottom:var(--safeB)}
.tabbar button{flex:1;padding:7px 0 8px;font-size:11px;color:var(--sub);display:flex;flex-direction:column;align-items:center;gap:1px}
.tabbar i{font-style:normal;font-size:19px;line-height:1.1}
.tabbar button.on{color:var(--pri);font-weight:700}
body.studying .tabbar{display:none}

/* 学習画面 */
.sbar{display:flex;align-items:center;padding:8px 8px 4px;gap:4px}
.ib{width:42px;height:42px;border-radius:12px;font-size:22px;color:var(--sub)}
.ib.on{color:#f2a900}
#btnBack{font-size:32px;line-height:1}
.pno{flex:1;text-align:center;line-height:1.1}
.pno b{font-size:20px} .pno span{color:var(--sub);font-size:13px}
.pno small{display:block;font-size:11px;color:var(--pri);margin-top:2px}
.page{flex:1;overflow-y:auto;padding:4px 14px 10px;perspective:1400px;touch-action:pan-y}
.sheet{background:var(--card);border-radius:24px;padding:20px 18px 16px;min-height:100%;border:1px solid var(--line);box-shadow:0 14px 30px -18px #0b4b4540;transform-origin:left center;position:relative;overflow:hidden}
.sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--pri),var(--pri2))}
.sheet.turnN{animation:turnN .38s ease-out}
.sheet.turnP{animation:turnP .38s ease-out}
@keyframes turnN{0%{transform:rotateY(28deg) translateX(30px);opacity:.2}100%{transform:none;opacity:1}}
@keyframes turnP{0%{transform:rotateY(-28deg) translateX(-30px);opacity:.2}100%{transform:none;opacity:1}}
.lvl{font-size:11px;color:var(--sub);display:flex;gap:8px;align-items:center;margin-bottom:8px}
.lvl .st{color:#f2b33d;letter-spacing:1px}
.lvl .tag{background:var(--priS);color:#0b6f66;border-radius:6px;padding:2px 7px}
.line{position:relative;border-radius:12px;padding:8px 10px;margin:0 -4px;transition:background .2s}
.line.playing{background:var(--priS)}
.line .en{font-family:var(--en);font-size:22px;line-height:1.55;letter-spacing:.005em;font-weight:600;color:var(--ink)}
.line .ja{font-size:17px;line-height:1.8;color:var(--ink2);font-weight:600}
.line.first .ja{font-size:18px}
.en .w{border-radius:4px;padding:0 1px;transition:background .15s}
.en .w.key{border-bottom:2px solid #9fe0d8}
.en .w.press{background:#fde68a}
.en .w.ok{color:var(--ok)} .en .w.part{color:#d38a00} .en .w.ng{color:var(--ng);text-decoration:underline wavy}
.think{height:4px;background:transparent;border-radius:3px;margin:6px 6px;overflow:hidden}
.think.on{background:#eef5f5}
.think i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pri),var(--pri2))}
.mask{position:absolute;inset:0;border-radius:12px;background:rgba(var(--maskc),calc(1 - var(--peek,.03)));display:none;place-items:center;color:rgba(70,130,124,calc(1 - var(--peek,.03)*6));font-size:12px;cursor:pointer;transition:opacity .25s;z-index:2}
.line.second.hidden .mask{display:grid}
.line.second.revealed .mask{display:grid;opacity:0;pointer-events:none}
.sheet{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.rec{display:none;margin:10px 0 4px;padding:10px;border-radius:12px;background:var(--chip);border:1px dashed var(--line)}
.rec.show{display:block}
.rectxt{font-family:var(--en);font-size:15px;line-height:1.5;color:var(--sub)}
.rectxt .hit{color:var(--ok)} .rectxt .miss{color:var(--ng)}
.score{display:none;align-items:baseline;gap:4px;margin-top:6px}
.score.show{display:flex}
.score b{font-size:28px;color:var(--pri)} .score span{margin-left:8px;font-size:13px}
.words{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.wd{padding:12px 10px;margin:0 -10px;border-bottom:1px solid var(--line);border-radius:14px;cursor:pointer;transition:background .15s}
.wd:active{background:var(--priS)}
.wd.tap{animation:tap .45s}
@keyframes tap{30%{background:var(--priS)}}
.wd .hd{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
.wd .hl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.wd .hw{font-family:var(--en);font-weight:800;font-size:19px;color:var(--ink)}
.wd .ps{font-size:11px;border:1px solid var(--line);border-radius:5px;padding:0 5px;color:var(--sub)}
.wd .say{font-size:15px;padding:2px 4px 2px 0;flex:none}
.wd .mn{font-size:16px;margin:4px 0 6px;line-height:1.6;font-weight:700;color:var(--ink)}
.nt{display:flex;gap:6px;margin:4px 0;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.nt>b{flex:none;font-size:10px;border-radius:6px;padding:2px 6px;height:19px;margin-top:2px;font-weight:700;background:#e5f3ff;color:#2a7bbd}
.nt.pa>b{background:#e0f6ee;color:#13875d} .nt.cf>b{background:#fff1dc;color:#b06b00} .nt.op>b{background:#fde8ea;color:#c0414f} .nt.vs>b{background:#fff1dc;color:#b06b00}
.ni{display:flex;flex-wrap:wrap;gap:4px 5px;align-items:center}
.ni i{font-style:normal;font-family:var(--en);font-weight:600;background:var(--chip);border:1px solid var(--line);border-radius:7px;padding:0 7px;line-height:1.7}
.wd .rl,.wd .vs{font-size:13px;color:#4a5b66;line-height:1.65;margin:2px 0;display:flex;gap:6px}
.wd .rl b,.wd .vs b{flex:none;font-size:10px;border-radius:5px;padding:1px 5px;height:18px;margin-top:2px;font-weight:600}
.wd .rl b{background:#e5f3ff;color:#2a7bbd} .wd .vs b{background:#fff1dc;color:#b06b00}
.und{display:flex;gap:4px}
.und button{width:34px;height:30px;border-radius:9px;background:var(--chip);font-size:15px;color:#9aabb5;font-weight:700}
.und button.on[data-v="1"]{background:var(--ng);color:#fff}
.und button.on[data-v="2"]{background:var(--mid);color:#fff}
.und button.on[data-v="3"]{background:var(--ok);color:#fff}
.lphint{font-size:11px;color:#a5b4bd;text-align:center;margin:12px 0 0}

/* コントロール */
.ctrl{background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 10px calc(4px + var(--safeB))}
.crow{display:flex;align-items:center;justify-content:space-between;gap:4px}
.cb{width:48px;height:48px;border-radius:14px;font-size:22px;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.cb small{font-size:9px;color:var(--sub);margin-top:2px}
.cb.sp{font-size:14px;font-weight:700;background:var(--chip);width:56px}
.cb.play{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-size:24px;box-shadow:0 6px 16px #12a99a50}
.cb.on{background:var(--priS);color:var(--pri)}
.cb.mic.on{background:#ffe3e3;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px #ef6b6b22}}
/* パラパラ進度 */
.flip{position:relative;height:38px;margin:6px 4px 2px;touch-action:none}
.stack{position:absolute;bottom:4px;height:16px;border-radius:2px}
.stack.left{left:0;background:repeating-linear-gradient(90deg,#9fdcd4 0 1px,#e6f6f3 1px 3px);border-right:2px solid var(--pri);box-shadow:inset 0 -3px 0 #12a99a22;transform:skewX(-12deg);transform-origin:bottom}
.stack.right{right:0;background:repeating-linear-gradient(90deg,#dfe7ea 0 1px,#fafcfc 1px 3px);box-shadow:inset 0 -3px 0 #0001;transform:skewX(12deg);transform-origin:bottom}
.leaf{position:absolute;bottom:4px;width:30px;height:16px;background:linear-gradient(90deg,#fff,#dff3f0);border:1px solid #bfe6e0;border-radius:2px;opacity:0;pointer-events:none}
.leaf.fly{animation:fly .45s ease-in-out}
.leaf.flyB{animation:flyB .45s ease-in-out}
@keyframes fly{0%{opacity:1;transform:translate(var(--x0),0) rotateZ(0)}50%{opacity:1;transform:translate(calc((var(--x0) + var(--x1))/2),-14px) rotateZ(-14deg) scaleX(.4)}100%{opacity:0;transform:translate(var(--x1),0)}}
@keyframes flyB{0%{opacity:1;transform:translate(var(--x1),0)}50%{opacity:1;transform:translate(calc((var(--x0) + var(--x1))/2),-14px) rotateZ(14deg) scaleX(.4)}100%{opacity:0;transform:translate(var(--x0),0)}}
.riffle{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);background:#1d2b36ee;color:#fff;border-radius:12px;padding:8px 12px;width:min(90vw,420px);display:none;font-size:12px;line-height:1.4;box-shadow:0 8px 20px #0004}
.riffle.show{display:block}
.riffle b{display:block;font-size:20px;color:#7ff0e2}
.riffle span{font-family:var(--en);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 長押しポップアップ */
.pop{position:fixed;z-index:50;background:#1d2b36;color:#fff;border-radius:14px;padding:10px 12px;max-width:min(88vw,360px);font-size:14px;line-height:1.55;box-shadow:0 10px 30px #0005;display:none}
.pop.show{display:block;animation:popin .15s ease-out}
@keyframes popin{from{transform:scale(.9);opacity:0}}
.pop .ph{font-family:var(--en);font-size:18px;font-weight:700;color:#7ff0e2;display:flex;align-items:center;gap:8px}
.pop .ph button{color:#7ff0e2;font-size:15px}
.pop .pp{font-size:11px;color:#a9c2c9}
.pop .pr{font-size:12px;color:#c8d6db;margin-top:4px}

/* 記録 */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.kpis b{display:block;font-size:22px;color:var(--pri)} .kpis small{font-size:10px;color:var(--sub)}
.heat{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:3px;justify-content:start}
.heat i,.heatlg i{width:16px;height:16px;border-radius:4px;display:block}
.h0{background:#eef3f4}.h1{background:#c6efe9}.h2{background:#86dccf}.h3{background:#3fc2b0}.h4{background:#12988a}
.heat i.today{outline:2px solid var(--pri2)}
.heatlg{display:flex;gap:3px;align-items:center;font-size:10px;color:var(--sub);margin-top:8px;justify-content:flex-end}
.heatlg i{width:11px;height:11px}
.bars .br{margin:6px 0}
.bars .bl{display:flex;justify-content:space-between;font-size:12px;color:var(--sub)}
.bars .bt{height:10px;border-radius:6px;background:var(--chip);overflow:hidden;display:flex}
.bars .bt i{display:block;height:100%}

/* 設定 */
.set{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;padding:4px 14px;box-shadow:0 1px 0 var(--line)}
.set h3{font-size:12px;color:var(--sub);margin:12px 0 4px}
.row{padding:10px 0;border-bottom:1px solid var(--line)}
.row:last-child{border:0}
.row>label{display:block;font-size:14px;margin-bottom:6px}
.row small{color:var(--sub);font-size:11px;display:block;margin-top:4px;line-height:1.5}
.opts{display:flex;flex-wrap:wrap;gap:5px}
.opts button{padding:7px 10px;border-radius:9px;background:var(--chip);font-size:13px}
.opts button.on{background:var(--pri);color:#fff;font-weight:700}
input[type=range]{width:100%;accent-color:var(--pri)}
.sw{display:flex;align-items:center;justify-content:space-between}
.sw input{appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:14px;background:#d9e3e5;position:relative;transition:background .2s;flex:none;margin:0}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:left .2s}
.sw input:checked{background:var(--pri)} .sw input:checked::after{left:21px}
textarea{width:100%;min-height:80px;border:1px solid var(--line);border-radius:10px;padding:8px;font-size:12px}
.btn{padding:10px 14px;border-radius:10px;background:var(--priS);color:#0b6f66;font-weight:700;margin:4px 4px 4px 0}
.btn.warn{background:#ffecec;color:#c24242}

.sheetdlg{position:fixed;inset:0;background:#0006;display:none;align-items:flex-end;z-index:60}
.sheetdlg.show{display:flex}
.dlgin{background:var(--bg2);width:100%;max-width:640px;margin:0 auto;border-radius:20px 20px 0 0;padding:10px 14px calc(16px + var(--safeB));max-height:80vh;overflow-y:auto}
.dlgin .grab{width:40px;height:5px;border-radius:3px;background:#cfdcdc;margin:0 auto 8px}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:#1d2b36;color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:70}
.toast.show{opacity:.95}
.flab{position:absolute;top:0;font-size:10px;color:var(--sub);pointer-events:none}
.flab.l{left:0} .flab.r{right:0} .flab.c{left:50%;transform:translateX(-50%);color:var(--pri);font-weight:700}

.chart{position:relative;height:196px;padding-left:26px}
.gwrap{position:absolute;inset:0}
.gl{position:absolute;left:26px;right:0;border-top:1px dashed var(--line)}
.gl span{position:absolute;left:-26px;top:-7px;font-size:9px;color:var(--sub);width:22px;text-align:right}
.cscroll{position:relative;overflow-x:auto;overflow-y:hidden;height:100%;scrollbar-width:thin}
.cin{display:flex;align-items:flex-end;height:100%}
.col{flex:none;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.bars2{position:relative;width:70%;display:flex;align-items:flex-end;justify-content:center}
.bars2 .seen{position:absolute;bottom:0;left:0;right:0;background:color-mix(in srgb,var(--pri2) 22%,transparent);border-radius:4px 4px 0 0}
.bars2 .stk{position:relative;width:62%;display:flex;flex-direction:column-reverse}
.stk i{display:block;width:100%}
.stk .ok{background:var(--ok);border-radius:0 0 1px 1px} .stk .mid{background:var(--mid)} .stk .ng{background:var(--ng);border-radius:3px 3px 0 0}
.bars2 .sn{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 1px);font-size:9px;color:var(--sub);font-weight:600}
.bars2 .sn{bottom:auto;top:-13px}
.col small{font-size:9px;color:var(--sub);height:18px;line-height:18px;margin-top:4px;white-space:nowrap}
.col.today small{color:var(--pri);font-weight:700}
.col.sel .bars2{outline:2px solid var(--pri2);outline-offset:2px;border-radius:4px}
.col.pre{opacity:.35}
.cinfo{font-size:13px;margin:10px 2px 4px;color:var(--ink2)}
.okc{color:var(--ok);font-weight:700}.midc{color:#c98600;font-weight:700}.ngc{color:var(--ng);font-weight:700}
.clg{display:flex;gap:12px;font-size:11px;color:var(--sub);flex-wrap:wrap}
.clg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.lseen{background:color-mix(in srgb,var(--pri2) 30%,transparent)}.lok{background:var(--ok)}.lmid{background:var(--mid)}.lng{background:var(--ng)}
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.themes button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;padding:6px 0;border-radius:12px;color:var(--sub)}
.themes button i{width:38px;height:38px;border-radius:12px;background:var(--c);border:1px solid #0001;box-shadow:inset 0 0 0 3px #fff8}
.themes button.on{color:var(--pri);font-weight:700}
.themes button.on i{outline:2.5px solid var(--pri);outline-offset:2px}
body[data-theme="night"] .wd .ps,body[data-theme="night"] .lvl .tag{color:var(--ink2)}