:root{
  --bg:#f7f1e6; --bg2:#f1e9da; --panel:#ffffff; --panel2:#f6f1e6; --line:#e4dac7;
  --txt:#33403a; --txt2:#69776f; --txt3:#9aa69d;
  --acc:#2e6b5a; --acc2:#4c8d78; --acc-soft:#e3efe9;
  --gir:#b07f22; --gir-soft:#f7ecd4; --wolf:#b65c4d; --wolf-soft:#f6e2dc;
  --calm:#54809c; --calm-soft:#e3edf3;
  --skin:#f2d3b3; --shadow:0 2px 10px rgba(90,75,50,.08);
}
[data-theme="dark"]{
  --bg:#161b1d; --bg2:#131719; --panel:#1f2629; --panel2:#242d30; --line:#333f42;
  --txt:#e9efec; --txt2:#a4b4ac; --txt3:#71807a;
  --acc:#82c7ab; --acc2:#5da88c; --acc-soft:#22352e;
  --gir:#dfb663; --gir-soft:#37301d;
  --wolf:#d98874; --wolf-soft:#3a2723;
  --calm:#82b3d2; --calm-soft:#20303b;
  --skin:#e8c4a4; --shadow:0 2px 10px rgba(0,0,0,.3);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;min-height:100vh;transition:background .3s,color .3s}
button{font-family:inherit}
/* ---------- header / nav ---------- */
header{padding:22px 28px 16px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;max-width:1200px;margin:0 auto}
header h1{font-size:23px;font-weight:800;letter-spacing:1px}
header h1 .en{display:block;color:var(--acc);font-size:12px;font-weight:500;letter-spacing:2.5px;margin-top:4px}
header p.sub{color:var(--txt2);font-size:13px;margin-top:7px;line-height:1.7}
.theme-btn{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:8px 16px;font-size:14px;cursor:pointer;color:var(--txt2);box-shadow:var(--shadow);transition:.2s;display:flex;align-items:center;gap:7px}
.theme-btn:hover{border-color:var(--acc2)}
nav{display:flex;gap:4px;padding:0 24px;border-bottom:1px solid var(--line);max-width:1200px;margin:0 auto;overflow-x:auto}
nav button{background:none;border:none;color:var(--txt2);font-size:14.5px;padding:11px 15px 13px;cursor:pointer;border-bottom:2.5px solid transparent;transition:.18s;white-space:nowrap}
nav button:hover{color:var(--txt)}
nav button.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:700}
main{padding:20px 24px 48px;max-width:1200px;margin:0 auto}
.tab{display:none}.tab.on{display:block;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
footer{text-align:center;color:var(--txt3);font-size:11.5px;padding:20px;border-top:1px solid var(--line);line-height:1.9}
/* ---------- generic ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.card h3{font-size:13.5px;color:var(--txt2);font-weight:700;letter-spacing:1px;margin-bottom:10px}
.chip{font-size:13px;padding:6px 13px;border-radius:18px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--txt2);transition:.15s;user-select:none}
.chip:hover{border-color:var(--acc2);color:var(--acc)}
.chip.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc);font-weight:600}
.tag{font-size:11px;padding:2px 9px;border-radius:10px;display:inline-block}
.tag.gir{background:var(--gir-soft);color:var(--gir)}
.tag.wolf{background:var(--wolf-soft);color:var(--wolf)}
.intro{color:var(--txt2);font-size:13.5px;line-height:1.9;margin-bottom:16px;max-width:820px}
.intro b{color:var(--acc)}
/* ---------- tab1 scenario picker ---------- */
.scn-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.scn-row button{background:var(--panel);border:1px solid var(--line);border-radius:11px;color:var(--txt2);font-size:13px;padding:9px 14px;cursor:pointer;transition:.15s;text-align:left;box-shadow:var(--shadow)}
.scn-row button small{display:block;font-size:10.5px;color:var(--txt3);margin-top:3px}
.scn-row button:hover{border-color:var(--acc2)}
.scn-row button.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.scn-row button.on small{color:var(--acc2)}
.scn-row button .done{color:var(--gir);font-size:11px}
/* ---------- comic ---------- */
.play-grid{display:grid;grid-template-columns:minmax(400px,1.25fr) 1fr;gap:18px;align-items:start}
@media(max-width:960px){.play-grid{grid-template-columns:1fr}}
.comic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.comic{grid-template-columns:1fr}}
.frame{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;overflow:hidden;min-height:238px;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow);transition:border-color .3s}
.frame.locked{border-style:dashed;opacity:.62}
.frame.live{border-color:var(--acc)}
.frame-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px dashed var(--line);font-size:12px;color:var(--txt2);font-weight:700}
.frame-head .no{width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.frame.locked .frame-head .no{background:var(--txt3)}
.frame-body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 10px 6px;gap:6px;position:relative}
.bubbles{display:flex;flex-direction:column;gap:7px;padding:2px 2px 8px;flex:1;justify-content:flex-start;overflow-y:auto;max-height:190px}
.bub{max-width:88%;font-size:12.5px;line-height:1.65;padding:8px 12px;border-radius:13px;position:relative;animation:bubin .3s ease;box-shadow:var(--shadow)}
@keyframes bubin{from{opacity:0;transform:scale(.85) translateY(5px)}to{opacity:1;transform:none}}
.bub .who{display:block;font-size:10px;font-weight:700;opacity:.75;margin-bottom:2px}
.bub.L{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:3px}
.bub.R{align-self:flex-end;background:var(--acc-soft);border:1px solid var(--acc-soft);border-bottom-right-radius:3px}
.bub.wolfy{background:var(--wolf-soft);border-color:var(--wolf-soft)}
.bub.giry{background:var(--gir-soft);border-color:var(--gir-soft)}
.bub.mind{align-self:center;background:var(--calm-soft);border:1px dashed var(--calm);color:var(--calm);text-align:center;font-size:12px}
.stagechars{display:flex;justify-content:space-between;align-items:flex-end;padding:0 12px;height:88px;flex-shrink:0}
.stagechars .ch{width:74px;height:86px;transition:.3s}
.stagechars .ch.shake{animation:shake .5s ease infinite}
.stagechars .ch.bob{animation:bob 2.6s ease-in-out infinite}
@keyframes shake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-2px) rotate(-2deg)}75%{transform:translateX(2px) rotate(2deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.breath-halo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.breath-halo i{width:64px;height:64px;border-radius:50%;background:var(--calm-soft);opacity:.85;animation:halo 5s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(.7)}45%{transform:scale(1.25)}}
.frame .hint-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:12.5px;flex-direction:column;gap:6px}
.end-tabs{display:flex;gap:6px;padding:0 10px 8px}
.end-tabs button{flex:1;font-size:11.5px;padding:5px 8px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--txt2);cursor:pointer}
.end-tabs button.on.g{background:var(--gir-soft);border-color:var(--gir);color:var(--gir);font-weight:700}
.end-tabs button.on.w{background:var(--wolf-soft);border-color:var(--wolf);color:var(--wolf);font-weight:700}
/* ---------- practice panel ---------- */
.prac{display:flex;flex-direction:column;gap:12px}
.scene-desc{font-size:13px;color:var(--txt2);line-height:1.8;background:var(--panel2);border-radius:10px;padding:10px 13px}
.rolepick{display:flex;flex-direction:column;gap:9px}
.rolepick button{display:flex;align-items:center;gap:12px;background:var(--panel);border:1.5px solid var(--line);border-radius:13px;padding:12px 15px;cursor:pointer;font-size:14px;color:var(--txt);transition:.15s;text-align:left;box-shadow:var(--shadow)}
.rolepick button:hover{border-color:var(--acc);transform:translateY(-1px)}
.rolepick button small{display:block;color:var(--txt2);font-size:11.5px;margin-top:3px;font-weight:400}
.rolepick button .rp-ic{font-size:22px}
.steps-bar{display:flex;gap:6px}
.steps-bar button{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:7px 4px;color:var(--txt3);font-size:11.5px;cursor:pointer;transition:.15s;text-align:center}
.steps-bar button .em{display:block;font-size:15px;margin-bottom:2px}
.steps-bar button.now{border-color:var(--acc);background:var(--acc-soft);color:var(--acc);font-weight:700}
.steps-bar button.ok{color:var(--acc2)}
.steps-bar button.ok .em::after{content:" ✓"}
.q-title{font-size:14.5px;font-weight:700;line-height:1.7}
.q-title .stp{color:var(--acc);font-size:12px;letter-spacing:1px;display:block;margin-bottom:4px}
.opts{display:flex;flex-direction:column;gap:8px}
.opts button{background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;font-size:13.5px;color:var(--txt);cursor:pointer;text-align:left;line-height:1.65;transition:.15s;box-shadow:var(--shadow)}
.opts button:hover{border-color:var(--acc2)}
.opts button.bad{border-color:var(--wolf);background:var(--wolf-soft);color:var(--wolf);animation:shake .35s ease 2}
.opts button.good{border-color:var(--acc);background:var(--acc-soft);color:var(--acc);font-weight:600}
.opts button:disabled{cursor:default}
.fb{border-radius:12px;padding:11px 14px;font-size:12.5px;line-height:1.75;animation:bubin .3s ease}
.fb.no{background:var(--wolf-soft);color:var(--wolf)}
.fb.yes{background:var(--acc-soft);color:var(--acc)}
.fb b{display:block;margin-bottom:3px}
.btn{background:var(--acc);color:#fff;border:none;border-radius:22px;font-size:13.5px;font-weight:700;padding:9px 22px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--acc2)}
.btn.ghost{background:var(--panel);color:var(--acc);border:1.5px solid var(--acc)}
.btn.small{font-size:12px;padding:6px 15px}
.btnrow{display:flex;gap:9px;flex-wrap:wrap}
.final-sent{background:var(--gir-soft);border:1px solid var(--gir);border-radius:13px;padding:13px 16px;font-size:13.5px;line-height:1.9;color:var(--txt)}
.final-sent h4{color:var(--gir);font-size:12.5px;margin-bottom:6px}
/* ---------- tab2 ---------- */
.fg-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start}
@media(max-width:900px){.fg-grid{grid-template-columns:1fr}}
.wordcloud{display:flex;flex-wrap:wrap;gap:8px}
.flipwrap{perspective:1100px;min-height:280px}
.flipcard{position:relative;width:100%;min-height:280px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,.1,.2,1)}
.flipcard.flipped{transform:rotateY(180deg)}
.flipface{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center}
.flipface.back{transform:rotateY(180deg);justify-content:flex-start;align-items:stretch;text-align:left}
.flipface .bigword{font-size:26px;font-weight:800;color:var(--wolf)}
.flipface .hintt{color:var(--txt3);font-size:12px}
.trans-block{border-radius:11px;padding:10px 13px;font-size:13px;line-height:1.8}
.trans-block.f{background:var(--calm-soft);color:var(--calm)}
.trans-block.n{background:var(--acc-soft);color:var(--acc)}
.trans-block b{display:block;font-size:11.5px;letter-spacing:1px;margin-bottom:3px}
.mode-toggle{display:flex;gap:8px;margin-bottom:16px}
.mode-toggle button{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:8px 18px;font-size:13.5px;color:var(--txt2);cursor:pointer}
.mode-toggle button.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc);font-weight:700}
.quizbox{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.quiz-q{font-size:21px;font-weight:700;text-align:center;padding:28px 18px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);line-height:1.7}
.quiz-btns{display:flex;gap:12px}
.quiz-btns button{flex:1;font-size:15.5px;font-weight:700;padding:15px;border-radius:14px;border:1.5px solid var(--line);cursor:pointer;transition:.15s;background:var(--panel);color:var(--txt)}
.quiz-btns button:hover{transform:translateY(-2px)}
.quiz-btns .bf:hover{border-color:var(--calm)}
.quiz-btns .bt:hover{border-color:var(--wolf)}
.quiz-meta{display:flex;justify-content:space-between;color:var(--txt2);font-size:12.5px}
.scorebar{height:7px;background:var(--panel2);border-radius:4px;overflow:hidden}
.scorebar i{display:block;height:100%;background:var(--acc);border-radius:4px;transition:width .3s}
/* ---------- tab3 timer ---------- */
.timer-grid{display:grid;grid-template-columns:minmax(300px,1fr) 1.2fr;gap:20px;align-items:start}
@media(max-width:860px){.timer-grid{grid-template-columns:1fr}}
.timer-stage{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:26px 18px;display:flex;flex-direction:column;align-items:center;gap:16px}
.ringwrap{position:relative;width:230px;height:230px}
.ringwrap svg{transform:rotate(-90deg)}
.breathcircle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.breathcircle .bc{width:104px;height:104px;border-radius:50%;background:radial-gradient(circle,var(--acc-soft),transparent 75%);display:flex;align-items:center;justify-content:center;transition:transform 4s ease-in-out}
.breathcircle .bc i{width:58px;height:58px;border-radius:50%;background:var(--acc);opacity:.28;display:block;transition:transform 4s ease-in-out}
.breathcircle .lbl{font-size:14px;color:var(--acc);font-weight:700;letter-spacing:2px}
.breathcircle .tm{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.phase-pills{display:flex;gap:6px;width:100%}
.phase-pills span{flex:1;text-align:center;font-size:11px;padding:6px 3px;border-radius:9px;background:var(--panel2);color:var(--txt3);border:1px solid var(--line)}
.phase-pills span.now{background:var(--acc-soft);color:var(--acc);border-color:var(--acc);font-weight:700}
.phase-pills span.past{color:var(--acc2)}
.guide-cards{display:flex;flex-direction:column;gap:12px}
.gcard{border-left:4px solid var(--acc);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 16px}
.gcard h4{font-size:13px;margin-bottom:7px;display:flex;gap:8px;align-items:center}
.gcard h4 .rl{font-size:10.5px;padding:2px 9px;border-radius:9px}
.gcard.spk{border-left-color:var(--gir)}
.gcard.spk h4 .rl{background:var(--gir-soft);color:var(--gir)}
.gcard.lsn h4 .rl{background:var(--acc-soft);color:var(--acc)}
.gcard.both{border-left-color:var(--calm)}
.gcard.both h4 .rl{background:var(--calm-soft);color:var(--calm)}
.gcard p{font-size:13px;color:var(--txt2);line-height:1.85}
/* ---------- tab4 builder ---------- */
.builder-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
@media(max-width:900px){.builder-grid{grid-template-columns:1fr}}
.bstep{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:13px}
.bstep h4{font-size:13.5px;margin-bottom:4px;color:var(--acc)}
.bstep p.tip{font-size:11.5px;color:var(--txt3);margin-bottom:9px;line-height:1.7}
.bstep textarea,.bstep input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:13.5px;color:var(--txt);resize:vertical;line-height:1.7}
.bstep textarea:focus,.bstep input:focus{outline:none;border-color:var(--acc2)}
.chipset{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chipset .chip{font-size:12px;padding:4px 11px}
.req-toggle{display:flex;gap:7px;margin-bottom:9px}
.req-toggle button{flex:1;font-size:12px;padding:6px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--txt2);cursor:pointer}
.req-toggle button.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc);font-weight:700}
.preview{position:sticky;top:14px}
.preview .sent{background:var(--gir-soft);border:1.5px solid var(--gir);border-radius:14px;padding:16px 18px;font-size:14.5px;line-height:2.1;min-height:120px}
.preview .sent .ph{color:var(--txt3)}
.preview .sent .seg-o{color:var(--calm);font-weight:600}
.preview .sent .seg-f{color:var(--wolf);font-weight:600}
.preview .sent .seg-n{color:var(--acc);font-weight:600}
.preview .sent .seg-r{color:var(--gir);font-weight:600}
.legend4{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--txt2);margin-top:10px}
.legend4 i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:4px;vertical-align:-1px}
@media(max-width:560px){header{padding:18px 16px 12px}main{padding:16px 14px 40px}nav{padding:0 12px}}