/* Formosa Alpha — 紙本 × 行情終端。
   全站唯一的彩度是台股自己的紅漲綠跌；品牌色就是市場的顏色語言。 */

:root {
  --ground:#F2F2EF; --surface:#FFF; --surface2:#E9EAE5;
  --ink:#15171A; --ink2:#575D63; --ink3:#8B9096;
  --rule:#D5D7D1; --rule2:#BFC2BA;
  --up:#C4302B; --down:#1A7F5A; --amber:#9A6B0F;
  --band:#1B2026; --bandink:#F0F1ED; --bandink2:#9AA1A8; --bandrule:#333B44;
  --shadow:0 1px 2px rgba(20,23,26,.05), 0 8px 28px -14px rgba(20,23,26,.18);
  --serif:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",Georgia,serif;
  --sans:"PingFang TC","Noto Sans TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Roboto Mono",Menlo,Consolas,monospace;
  --page:70rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#101316; --surface:#171B1F; --surface2:#1F2429;
    --ink:#ECEDE9; --ink2:#9FA5AB; --ink3:#6C7278;
    --rule:#282E34; --rule2:#39414A;
    --up:#E4574F; --down:#35A87B; --amber:#D9A93F;
    --band:#080A0C; --bandrule:#22282E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px -14px rgba(0,0,0,.7);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; text-wrap:balance}
p{margin:0 0 .85em}
p:last-child{margin-bottom:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--up); outline-offset:3px}

.wrap{max-width:var(--page); margin-inline:auto; padding:0 clamp(1rem,4vw,2rem)}
.wrap.narrow{max-width:44rem}
.view{display:none; padding:clamp(2rem,5vw,3.5rem) 0 4rem}
.view.active{display:block}

/* ── top bar ─────────────────────────────────────────────── */
.topbar{border-bottom:1px solid var(--rule); background:var(--surface); position:sticky; top:0; z-index:20}
.bar{display:flex; align-items:center; justify-content:space-between; height:56px}
.brand{font-family:var(--serif); font-weight:600; font-size:1.15rem; text-decoration:none}
.brand span{color:var(--up)}
.navlinks{display:flex; gap:1.1rem}
.linkbtn{
  background:none; border:0; padding:0; cursor:pointer; color:var(--ink2);
  font:inherit; font-size:.88rem; text-decoration:underline; text-underline-offset:3px;
}
.linkbtn:hover{color:var(--up)}
.back{margin-bottom:1.2rem; display:inline-block}

/* ── hero ────────────────────────────────────────────────── */
.hero{max-width:44rem; margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.hero h1{font-size:clamp(1.7rem,4.4vw,2.7rem); line-height:1.3; margin-bottom:.8rem}
.hero h1 em{font-style:normal; color:var(--up)}
.lede{color:var(--ink2); font-size:1.02rem}

/* ── panels ──────────────────────────────────────────────── */
.panel{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:6px; padding:clamp(1.1rem,3vw,1.7rem); box-shadow:var(--shadow);
}
.secttitle{font-size:1.4rem; margin-bottom:.4rem}

/* ── chat ────────────────────────────────────────────────── */
.chatlog{display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.1rem}
.msg{max-width:88%}
.msg.me{margin-left:auto}
.msg .who{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; color:var(--ink3); margin-bottom:.25rem}
.msg.me .who{text-align:right}
.bubble{border:1px solid var(--rule); border-radius:6px; padding:.7rem .9rem; font-size:.95rem; background:var(--ground)}
.msg.me .bubble{background:var(--band); color:var(--bandink); border-color:var(--band)}

.inputrow{display:flex; gap:.6rem}
.inputrow input{
  flex:1; font:inherit; font-size:.95rem; padding:.65rem .85rem; color:var(--ink);
  background:var(--ground); border:1px solid var(--rule2); border-radius:6px;
}
.inputrow input::placeholder{color:var(--ink3)}
.send{
  font:inherit; font-size:.92rem; font-weight:600; padding:.65rem 1.15rem; cursor:pointer;
  background:var(--band); color:var(--bandink); border:1px solid var(--band); border-radius:6px;
}
.send:hover{opacity:.9}

/* ── chips ───────────────────────────────────────────────── */
.picker{margin-top:1.4rem; border-top:1px solid var(--rule); padding-top:1.1rem}
.pickerhead{display:flex; justify-content:space-between; align-items:baseline; font-size:.85rem; color:var(--ink3); margin-bottom:.7rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  font:inherit; font-size:.88rem; padding:.32rem .85rem; cursor:pointer;
  background:var(--surface); color:var(--ink2);
  border:1px solid var(--rule2); border-radius:2rem;
}
.chip:hover{border-color:var(--ink3)}
.chip.on{background:var(--band); color:var(--bandink); border-color:var(--band)}
.chip.on::before{content:"✓ "; font-size:.8em}

.gorow{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.3rem; flex-wrap:wrap}
.scopeinfo{font-size:.85rem; color:var(--ink3)}
.cta{
  font:inherit; font-size:1rem; font-weight:700; padding:.7rem 1.6rem; cursor:pointer;
  background:var(--up); color:#fff; border:0; border-radius:6px;
}
.cta:disabled{background:var(--rule2); color:var(--ink3); cursor:not-allowed}
.cta:not(:disabled):hover{filter:brightness(.94)}

/* ── facts ───────────────────────────────────────────────── */
.factstrip{display:flex; flex-wrap:wrap; gap:2rem; margin-top:1.8rem; font-size:.85rem; color:var(--ink3)}
.factstrip b{display:block; font-family:var(--mono); font-size:1.15rem; color:var(--ink); line-height:1.3}

/* ── progress ────────────────────────────────────────────── */
.pbar{height:8px; background:var(--surface2); border-radius:4px; overflow:hidden; margin:1rem 0}
.pbar i{display:block; height:100%; width:0; background:var(--down); transition:width .35s ease}
.fineprint{font-size:.84rem; color:var(--ink3)}

/* ── result cards ────────────────────────────────────────── */
.resulthead{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:1.1rem}
.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:6px;
  padding:1.1rem 1.2rem; cursor:pointer; display:flex; flex-direction:column; gap:.6rem;
  box-shadow:var(--shadow); text-align:left; font:inherit; color:inherit;
}
.card:hover{border-color:var(--ink3)}
.cardhead{display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem}
.cardname{font-family:var(--serif); font-weight:600; font-size:1.08rem; line-height:1.35}
.cardfam{font-family:var(--mono); font-size:.63rem; letter-spacing:.1em; color:var(--ink3); margin-top:.2rem}
.carddesc{font-size:.86rem; color:var(--ink2); line-height:1.6; min-height:4.1em}
.metrics{display:flex; gap:.6rem}
.metrics div{flex:1}
.mv{display:block; font-family:var(--mono); font-size:1.02rem; line-height:1.25}
.mk{font-size:.66rem; color:var(--ink3)}
.up{color:var(--up)} .down{color:var(--down)}

.badge{
  display:inline-flex; align-items:center; gap:.35rem; flex-shrink:0; white-space:nowrap;
  font-family:var(--mono); font-size:.68rem; padding:.16rem .5rem;
  border:1px solid currentColor; border-radius:3px;
}
.badge::before{content:""; width:.4rem; height:.4rem; border-radius:50%; background:currentColor}
.badge.high{color:var(--down)} .badge.mid{color:var(--amber)} .badge.low{color:var(--up)}

.notebox{
  margin-top:1.8rem; border-left:3px solid var(--up); background:var(--surface);
  padding:1rem 1.2rem; font-size:.88rem; color:var(--ink2); border-radius:0 6px 6px 0;
}
.notebox strong{color:var(--ink)}

/* ── detail ──────────────────────────────────────────────── */
.dhead{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem}
.dhead h2{font-size:1.7rem}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.8rem; margin-bottom:1.4rem}
.tile{border:1px solid var(--rule); border-radius:6px; padding:.7rem .85rem; background:var(--surface)}
.tv{display:block; font-family:var(--mono); font-size:1.3rem; line-height:1.2}
.tk{font-size:.72rem; color:var(--ink3)}
.chartcard{background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:1.1rem 1.2rem; margin-bottom:1.2rem; box-shadow:var(--shadow)}
.chartlabel{font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; color:var(--ink3); margin-bottom:.6rem}
.legend{display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.78rem; color:var(--ink2); margin-top:.5rem}
.legend i{display:inline-block; width:14px; height:2px; margin-right:.35rem; position:relative; top:-4px}
.formula{font-family:var(--mono); font-size:.72rem; color:var(--ink3); border-top:1px dashed var(--rule2); padding-top:.7rem; margin-top:.8rem; overflow-x:auto}

table{width:100%; border-collapse:collapse; font-size:.88rem}
th,td{text-align:left; padding:.5rem .7rem .5rem 0; border-bottom:1px solid var(--rule)}
th{font-size:.72rem; color:var(--ink3); font-weight:600}
td.n,th.n{font-family:var(--mono); text-align:right; padding-right:.9rem; white-space:nowrap}
.tablewrap{overflow-x:auto}

.advanced{border-top:1px solid var(--rule); margin-top:1rem; padding-top:1rem}
.advanced summary{cursor:pointer; font-size:.9rem; color:var(--ink2)}
.advrow{display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; margin-top:.9rem; font-size:.88rem}
.advrow label{display:flex; align-items:center; gap:.4rem}
.advrow input[type=number]{width:5rem; font:inherit; padding:.25rem .4rem; border:1px solid var(--rule2); border-radius:4px; background:var(--ground); color:var(--ink)}
.warn{color:var(--up); font-size:.82rem}

/* ── modal ───────────────────────────────────────────────── */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:50}
.modal[hidden]{display:none}
.modalbox{
  background:var(--surface); border-radius:8px; padding:1.8rem; max-width:38rem;
  max-height:86vh; overflow-y:auto; position:relative; box-shadow:var(--shadow);
}
.modalbox h2{font-size:1.4rem; margin-bottom:.7rem}
.modalbox h3{font-size:1rem; margin:1.2rem 0 .4rem}
.modalbox ul{margin:0; padding-left:1.2rem; font-size:.92rem; color:var(--ink2)}
.modalbox li{margin-bottom:.35rem}
.modalbox p{font-size:.94rem; color:var(--ink2)}
.closebtn{position:absolute; top:.7rem; right:.9rem; background:none; border:0; font-size:1.5rem; cursor:pointer; color:var(--ink3); line-height:1}

/* ── footer ──────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule); padding:1.6rem 0 2.4rem; font-size:.82rem; color:var(--ink3)}
.tiny{font-size:.75rem}

.spinner{display:inline-block; width:.8rem; height:.8rem; border:2px solid var(--rule2); border-top-color:var(--up); border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important; transition-duration:.001ms!important}}

/* ── 自由組合 / 實驗室 ─────────────────────────────────────── */
.hidden{display:none}
.subtitle{font-size:1.1rem; margin-bottom:.5rem}
.colgroup{margin-bottom:1.1rem}
.colgroup h4{font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; color:var(--ink3); font-weight:400; margin:0 0 .5rem}
.colgroup .chips{gap:.4rem}
.chip .u{font-size:.7em; color:var(--ink3); margin-left:.3rem}
.chip.on .u{color:var(--bandink2)}

.enumgroup{background:var(--surface); border:1px solid var(--rule); border-radius:6px; margin-bottom:1rem; overflow:hidden}
.enumhead{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.8rem 1.1rem; background:var(--surface2); border-bottom:1px solid var(--rule); flex-wrap:wrap}
.enumhead .t{font-family:var(--serif); font-weight:600; font-size:1rem}
.enumhead .b{font-size:.8rem; color:var(--ink3)}
.enumlist{max-height:22rem; overflow-y:auto}
.enumrow{display:flex; gap:.7rem; align-items:flex-start; padding:.6rem 1.1rem; border-bottom:1px solid var(--rule); font-size:.86rem}
.enumrow:last-child{border-bottom:0}
.enumrow:hover{background:var(--ground)}
.enumrow input{margin-top:.28rem; flex-shrink:0}
.enumrow .d{color:var(--ink2)}
.enumrow .f{font-family:var(--mono); font-size:.72rem; color:var(--ink3); margin-top:.15rem; word-break:break-all}

.labgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.9rem 1.2rem; margin-bottom:1rem}
.labgrid label{display:flex; flex-direction:column; gap:.3rem; font-size:.84rem; color:var(--ink2)}
.labgrid label.chk{flex-direction:row; align-items:center; gap:.45rem}
.labgrid input[type=number],.labgrid input[type=date]{
  font:inherit; font-size:.9rem; padding:.42rem .6rem; color:var(--ink);
  background:var(--ground); border:1px solid var(--rule2); border-radius:4px}
.labfactors{display:flex; flex-direction:column; gap:.5rem; margin-bottom:.6rem}
.labfactor{display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; padding:.5rem .7rem; border:1px solid var(--rule); border-radius:5px; background:var(--ground)}
.labfactor input{margin-top:.25rem}
.labfactor .f{font-family:var(--mono); font-size:.7rem; color:var(--ink3); word-break:break-all}
.hidebadge{display:inline-block; font-family:var(--mono); font-size:.7rem; color:var(--amber);
  border:1px dashed currentColor; padding:.2rem .55rem; border-radius:3px}

/* ── 登入頁 ────────────────────────────────────────────────── */
.loginwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem}
.loginbox{width:100%; max-width:23rem}
.loginlabel{display:block; font-size:.85rem; color:var(--ink2); margin:1.2rem 0 .35rem}
.logininput{width:100%; font:inherit; font-size:1rem; padding:.6rem .8rem; color:var(--ink);
  background:var(--ground); border:1px solid var(--rule2); border-radius:6px}
.loginerr{background:var(--up); color:#fff; font-size:.86rem; padding:.5rem .8rem;
  border-radius:5px; margin:1rem 0 0}

/* ══════════════════ 公開頁面（首頁 / 教學 / 資料 / 實例 / 方案）══════════════════ */
.topbar .navlinks{align-items:center; gap:1.3rem}
.navlinks a{color:var(--ink2); text-decoration:none; font-size:.9rem}
.navlinks a:hover{color:var(--ink)}
.navlinks a.navcta{background:var(--up); color:#fff; padding:.35rem .9rem; border-radius:5px; font-weight:600}
.navlinks a.navcta:hover{filter:brightness(.94); color:#fff}

.eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--ink3);
  text-transform:uppercase; margin:0 0 .8rem}
.h2{font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:1.1rem}
.wrap.narrowish{max-width:50rem}
.sect{padding:clamp(2.6rem,6vw,4.4rem) 0}
.sect.alt{background:var(--surface); border-block:1px solid var(--rule)}
.sect.center{text-align:center}
.sect.dark{background:var(--band); color:var(--bandink)}
.sect.dark h3{color:var(--bandink)}
.sect.dark p{color:var(--bandink2)}

/* 首頁 */
.lander{padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,4vw,3rem)}
.lander-h1{font-size:clamp(1.9rem,5vw,3.1rem); line-height:1.28; margin-bottom:1.1rem; max-width:22ch}
.lander-h1 em{font-style:normal; color:var(--up)}
.lander-sub{font-size:clamp(1rem,1.7vw,1.15rem); color:var(--ink2); max-width:42rem; margin-bottom:2rem}
.lander-cta{display:flex; gap:.8rem; flex-wrap:wrap}
.lander-cta.center{justify-content:center}
a.cta{display:inline-block; text-decoration:none; text-align:center}
.cta.ghost{background:transparent; color:var(--ink); border:1px solid var(--rule2)}
.cta.ghost:hover{border-color:var(--ink3); filter:none}
.cta.full{width:100%}
.band{background:var(--band); color:var(--bandink); padding:1.8rem 0}
.numbers{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.6rem}
.numbers b{display:block; font-family:var(--mono); font-size:1.5rem; line-height:1.2}
.numbers span{font-size:.8rem; color:var(--bandink2); line-height:1.5}
.numbers.inline{background:var(--surface); color:var(--ink); border:1px solid var(--rule);
  border-radius:6px; padding:1.2rem; margin:1.4rem 0 2rem}
.numbers.inline span{color:var(--ink3)}
.cols3{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.1rem}
.cols3.tight{gap:2rem}
.cols2{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.1rem}
.card.warn{border-left:3px solid var(--up)}
.lead-out{margin-top:1.6rem; font-size:1.02rem; color:var(--ink2); max-width:46rem}
.steps{list-style:none; padding:0; margin:0; display:grid; gap:1.4rem}
.steps li{display:grid; grid-template-columns:3rem 1fr; gap:1rem; align-items:start}
.steps .n{font-family:var(--mono); color:var(--up); font-weight:700; border-top:2px solid var(--up); padding-top:.4rem}
.steps h3{font-size:1.08rem; margin-bottom:.3rem}
.steps p{color:var(--ink2); font-size:.94rem; margin:0}
.pull{font-family:var(--serif); font-size:clamp(1.3rem,3.2vw,2rem); line-height:1.5; margin:0 0 2rem}
.pull .hl{color:var(--up)}

/* 文件頁（教學 / 資料 / 實例） */
.doc{padding:clamp(2.2rem,5vw,3.4rem) 0 4rem}
.doc-h1{font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.3; margin-bottom:.9rem}
.doc section{margin-top:2.8rem}
.doc h2{font-size:clamp(1.25rem,2.6vw,1.6rem); margin-bottom:.9rem; scroll-margin-top:5rem}
.doc h2.warnh{color:var(--up)}
.doc h3{font-size:1.08rem; margin:1.6rem 0 .5rem}
.doc h4{font-size:.98rem; margin:0 0 .4rem}
.doc p{max-width:46rem; color:var(--ink2)}
.doc p strong,.doc li strong{color:var(--ink)}
.toc{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.6rem 0 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1rem 0}
.toc a{font-size:.86rem; color:var(--ink2); text-decoration:none; border:1px solid var(--rule2);
  padding:.25rem .7rem; border-radius:2rem}
.toc a:hover{border-color:var(--ink3); color:var(--ink)}
.keybox{background:var(--surface); border-left:3px solid var(--ink); padding:1rem 1.2rem;
  margin:1.2rem 0; border-radius:0 6px 6px 0}
.keybox b{display:block; margin-bottom:.4rem}
.keybox p{margin:0 0 .5em; font-size:.93rem}
.keybox.danger{border-left-color:var(--up)}
.keybox.danger b{color:var(--up)}
.keybox.good{border-left-color:var(--down)}
.keybox.good b{color:var(--down)}
.deftable{width:100%; border-collapse:collapse; font-size:.92rem; margin:1rem 0}
.deftable th{text-align:left; vertical-align:top; padding:.6rem 1rem .6rem 0; width:11rem;
  color:var(--ink); font-weight:600; border-bottom:1px solid var(--rule)}
.deftable td{padding:.6rem 0; color:var(--ink2); border-bottom:1px solid var(--rule)}
.deftable.slim th{width:7rem}
.plainlist{color:var(--ink2); font-size:.94rem; padding-left:1.3rem}
.plainlist li{margin-bottom:.3rem}
.mathbox{background:var(--surface2); border-radius:6px; padding:1rem 1.2rem; margin:1.1rem 0; font-size:.9rem}
.mathbox .row{display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0; flex-wrap:wrap}
.mathbox .note{margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--rule);
  color:var(--ink3); font-size:.84rem}
.mono{font-family:var(--mono)}
.fig{margin:1.4rem 0}
.fig figcaption{font-size:.85rem; color:var(--ink3); margin-top:.7rem; line-height:1.6}
.rankdemo{background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:1rem}
.rankrow{display:flex; align-items:center; gap:.8rem; margin-bottom:.45rem}
.rankrow .rk{font-family:var(--mono); font-size:.76rem; color:var(--ink3); width:4.5rem; flex-shrink:0}
.rankrow .bar{height:.7rem; background:var(--down); border-radius:2px}
.rankrow .bar.dim{background:var(--rule2)}
.rankrow .bar.dn{background:var(--up)}
.badgelegend{display:grid; gap:.6rem; margin:1rem 0; font-size:.92rem; color:var(--ink2)}
.badgelegend div{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.doc .colgroup h4{font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; color:var(--ink3)}
.unitchip{font-family:var(--mono); font-size:.7rem; color:var(--ink3);
  border:1px solid var(--rule2); border-radius:3px; padding:.05rem .4rem; margin-right:.5rem}
.cnote{font-size:.82rem; color:var(--amber)}
.endcta{margin-top:2rem; text-align:center}
.endcta h3{font-size:1.2rem; margin-bottom:.5rem}
.endcta .lander-cta{justify-content:center; margin-top:1rem}

/* 實例頁 */
.stepn{display:inline-flex; align-items:center; justify-content:center; width:1.7rem; height:1.7rem;
  border-radius:50%; background:var(--up); color:#fff; font-family:var(--mono); font-size:.85rem;
  margin-right:.6rem; vertical-align:.1rem}
.idea{font-family:var(--serif); font-size:1.4rem; color:var(--ink);
  border-left:3px solid var(--up); padding-left:1rem; margin:1rem 0 1.2rem}
.resulttable tbody tr.picked{background:var(--surface2)}
.resulttable .tag{font-family:var(--mono); font-size:.65rem; color:var(--up);
  border:1px solid currentColor; border-radius:3px; padding:.05rem .35rem; margin-left:.4rem}
.resulttable small{font-weight:400; color:var(--ink3); font-size:.75em}
.beforeafter{display:flex; align-items:center; gap:1.4rem; justify-content:center;
  background:var(--surface); border:1px solid var(--rule); border-radius:6px;
  padding:1.4rem; margin:1.2rem 0; flex-wrap:wrap}
.beforeafter>div{text-align:center}
.beforeafter .lab{display:block; font-size:.8rem; color:var(--ink3)}
.beforeafter .v{display:block; font-family:var(--mono); font-size:1.9rem; line-height:1.2}
.beforeafter .sub{display:block; font-size:.75rem; color:var(--ink3)}
.beforeafter .arrow{font-size:1.6rem; color:var(--ink3)}
.lessons{padding-left:1.3rem; color:var(--ink2); font-size:.95rem}
.lessons li{margin-bottom:.7rem}
.lessons b{color:var(--ink)}

/* 方案頁 */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.1rem; margin:1.8rem 0}
.plan{background:var(--surface); border:1px solid var(--rule); border-radius:8px;
  padding:1.5rem; position:relative; display:flex; flex-direction:column}
.plan.lead{border-color:var(--up); border-width:1.5px}
.plan.mine{background:var(--surface2)}
.planflag{position:absolute; top:-.7rem; left:1.4rem; background:var(--up); color:#fff;
  font-size:.7rem; padding:.15rem .6rem; border-radius:3px}
.planname{font-family:var(--serif); font-size:1.3rem; font-weight:600}
.planprice{font-family:var(--mono); color:var(--ink2); margin:.3rem 0 1rem}
.plan ul{list-style:none; padding:0; margin:0 0 1.2rem; font-size:.9rem; color:var(--ink2); flex:1}
.plan li{padding:.3rem 0 .3rem 1.3rem; position:relative}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--down)}
.plan li.off{color:var(--ink3)}
.plan li.off::before{content:"—"; color:var(--rule2)}
.planbtn{display:block; width:100%; text-align:center; text-decoration:none; font:inherit;
  font-size:.95rem; font-weight:600; padding:.6rem; border-radius:5px; cursor:pointer;
  background:var(--up); color:#fff; border:0}
.planbtn.ghost{background:transparent; color:var(--ink); border:1px solid var(--rule2)}
.planbtn.current{background:var(--surface2); color:var(--ink3); cursor:default}
.notebox.proto{border-left-color:var(--amber)}
.faq details{border-bottom:1px solid var(--rule); padding:.8rem 0}
.faq summary{cursor:pointer; font-weight:600; font-size:.96rem}
.faq p{margin:.6rem 0 0; font-size:.92rem; color:var(--ink2)}

/* 登入 / 註冊 */
.authwrap{min-height:calc(100vh - 56px); display:flex; align-items:center; justify-content:center; padding:2rem 1rem}
.authbox{width:100%; max-width:24rem; background:var(--surface); border:1px solid var(--rule);
  border-radius:8px; padding:2rem; box-shadow:var(--shadow)}
.authtitle{font-size:1.5rem; margin-bottom:.3rem}
.flabel{display:block; font-size:.85rem; color:var(--ink2); margin:1rem 0 .3rem}
.finput{width:100%; font:inherit; font-size:.98rem; padding:.6rem .8rem; color:var(--ink);
  background:var(--ground); border:1px solid var(--rule2); border-radius:6px}
.fhint{font-size:.78rem; color:var(--ink3); margin:.35rem 0 0}
.autherr{background:var(--up); color:#fff; font-size:.86rem; padding:.55rem .8rem; border-radius:5px; margin:.9rem 0 0}
.authdiv{text-align:center; margin:1.2rem 0; position:relative; color:var(--ink3); font-size:.8rem}
.authdiv::before{content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--rule)}
.authdiv span{position:relative; background:var(--surface); padding:0 .8rem}
.authalt{text-align:center; font-size:.88rem; color:var(--ink2); margin-top:1.2rem}
.cta.full{margin-top:1.2rem}

/* 帳號頁 */
.card .kv{border-bottom:1px solid var(--rule); font-size:.88rem}
.card .kv:last-of-type{border-bottom:0}

/* 工具頁分頁列 */
.subnav{background:var(--surface); border-bottom:1px solid var(--rule); position:sticky; top:56px; z-index:15}
.subnav .wrap{display:flex; align-items:center; gap:.4rem; height:46px}
.subnav-spacer{flex:1}
.tab{font:inherit; font-size:.9rem; padding:.35rem .9rem; cursor:pointer; border-radius:5px;
  background:transparent; color:var(--ink2); border:1px solid transparent}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--band); color:var(--bandink); border-color:var(--band)}
.toolpage .view{padding-top:1.6rem}

/* 頁尾 */
.footgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:1.6rem; margin-bottom:1.4rem}
.footgrid b{display:block; font-size:.85rem; color:var(--ink); margin-bottom:.5rem}
.footgrid a{display:block; font-size:.85rem; color:var(--ink3); text-decoration:none; padding:.15rem 0}
.footgrid a:hover{color:var(--ink)}

/* ══════════════════ 動態 ══════════════════ */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ══════════════════ 首頁改版 ══════════════════ */
.hero2{padding:clamp(3rem,9vw,6.5rem) 0 clamp(2rem,5vw,3.5rem)}
.hero2-h1{font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.14; letter-spacing:-.02em; margin-bottom:1.2rem}
.hero2-h1 .hl{color:var(--up)}
.hero2-sub{font-size:clamp(1.02rem,1.9vw,1.24rem); color:var(--ink2); max-width:34rem;
  line-height:1.75; margin-bottom:2rem}
.hero2-cta{display:flex; gap:.7rem; flex-wrap:wrap}
.hero2-cta.center{justify-content:center}
.herochart{margin:clamp(2rem,5vw,3.2rem) 0 0; padding:0}
.herochart svg{display:block; width:100%; height:clamp(150px,22vw,260px)}
.herochart figcaption{display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:.8rem;
  font-size:.82rem; color:var(--ink3)}
.herochart .sw{display:inline-block; width:1.1rem; height:2px; margin-right:.45rem;
  position:relative; top:-.25rem}
.herochart .sw.up{background:var(--up)}
.herochart .sw.dim{background:var(--ink3)}

.statband{border-block:1px solid var(--rule); background:var(--surface); padding:1.6rem 0}
.stat4{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.4rem 2rem}
.stat4 div{font-size:.86rem; color:var(--ink3); line-height:1.6}
.stat4 b{display:block; font-family:var(--mono); font-size:1.55rem; font-weight:400;
  color:var(--ink); letter-spacing:-.01em; line-height:1.25; margin-bottom:.15rem}
.stat4 .count{font-weight:700}

.flow{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1.6rem}
.flowstep .n{display:block; font-family:var(--mono); font-size:.78rem; color:var(--up);
  border-top:2px solid var(--up); padding-top:.5rem; margin-bottom:.6rem; letter-spacing:.1em}
.flowstep h3{font-size:1.02rem; margin-bottom:.35rem}
.flowstep p{font-size:.9rem; color:var(--ink2); margin:0}

/* ══════════════════ 資料頁欄位卡 ══════════════════ */
.colcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.9rem; margin:1.3rem 0}
.colcard{background:var(--surface); border:1px solid var(--rule); border-radius:7px; padding:.9rem 1rem}
.colcard-head{display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--rule); padding-bottom:.5rem; margin-bottom:.7rem}
.cc-name{font-family:var(--serif); font-weight:600; font-size:1rem}
.cc-n{font-family:var(--mono); font-size:.72rem; color:var(--ink3)}
.cc-items{display:flex; flex-wrap:wrap; gap:.35rem}
.cc-item{font-size:.82rem; color:var(--ink2); background:var(--ground);
  border:1px solid var(--rule); border-radius:4px; padding:.15rem .5rem}
.cc-item.has-note{border-style:dashed; border-color:var(--amber); color:var(--ink)}
.cc-note{font-size:.75rem; color:var(--amber); margin-top:.65rem; line-height:1.5}

/* ══════════════════ 教學頁互動元件 ══════════════════ */
.widget{background:var(--surface); border:1px solid var(--rule2); border-radius:8px;
  margin:1.5rem 0; overflow:hidden; box-shadow:var(--shadow)}
.widget-head{background:var(--surface2); border-bottom:1px solid var(--rule);
  padding:.8rem 1.1rem}
.widget-head b{display:block; font-size:.95rem}
.widget-head span{font-size:.82rem; color:var(--ink3)}
.widget-body{padding:1.1rem}
.widget-note{font-size:.86rem; color:var(--ink2); margin:.9rem 0 0; line-height:1.7; min-height:3.4em}

input[type=range]{width:100%; accent-color:var(--up); height:1.6rem; cursor:pointer}
.wnd-ticks{display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:.72rem; color:var(--ink3); margin:-.3rem 0 .9rem}
.wnd-ticks .on{color:var(--up); font-weight:700}
.wnd-out{display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:.9rem; padding:.9rem 0; border-top:1px solid var(--rule)}
.wnd-out .lab{display:block; font-size:.74rem; color:var(--ink3)}
.wnd-out .v{display:block; font-family:var(--mono); font-size:1.35rem; line-height:1.25}
.wnd-out .v.amber{color:var(--amber)}

.toggle{display:inline-flex; border:1px solid var(--rule2); border-radius:6px;
  overflow:hidden; margin-bottom:.9rem}
.tg{font:inherit; font-size:.86rem; padding:.4rem 1rem; cursor:pointer;
  background:transparent; color:var(--ink2); border:0}
.tg.active{background:var(--band); color:var(--bandink)}
.rankcalc{width:100%; border-collapse:collapse; font-size:.86rem}
.rankcalc th{font-size:.72rem; color:var(--ink3); font-weight:600; text-align:left;
  padding:.4rem .6rem .4rem 0; border-bottom:1px solid var(--rule); vertical-align:bottom}
.rankcalc th small{font-weight:400; opacity:.8}
.rankcalc td{padding:.45rem .6rem .45rem 0; border-bottom:1px solid var(--rule)}
.rankcalc td.n,.rankcalc th.n{font-family:var(--mono); text-align:right; white-space:nowrap}

.costbar{height:.5rem; background:var(--surface2); border-radius:3px; overflow:hidden; margin-top:.3rem}
.costbar i{display:block; height:100%; background:linear-gradient(90deg,var(--down),var(--amber),var(--up));
  transition:width .25s ease}

.rankdemo .bar{width:0; transition:width .6s cubic-bezier(.22,.8,.3,1)}
@media (prefers-reduced-motion: reduce){.rankdemo .bar{transition:none}}

/* ══════════════════ 工具頁：兩條路並行 ══════════════════ */
.picktwo{display:grid; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); gap:1.1rem}
.pickcol{display:flex; flex-direction:column}
.pickhead{display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem}
.pickhead h3{font-size:1.08rem; margin:0}
.pk{display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem;
  border-radius:50%; background:var(--band); color:var(--bandink);
  font-family:var(--mono); font-size:.78rem; flex-shrink:0}
.chip.sm{font-size:.8rem; padding:.22rem .6rem}
.gorow.tight{margin-top:.9rem}
.cta.small{font-size:.86rem; padding:.45rem 1rem}
.gobar{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--rule)}
.gobar span{display:flex; gap:.6rem}
.enumbar{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-size:.84rem; color:var(--ink3); margin:1rem 0 .5rem; flex-wrap:wrap}
.enumbar .linkbtn{margin-left:.6rem}
.enumscroll{max-height:26rem; overflow-y:auto; border:1px solid var(--rule); border-radius:6px}
.enumscroll .enumgroup{border:0; border-bottom:1px solid var(--rule); border-radius:0; margin:0}
.enumscroll .enumlist{max-height:none}
.enumrow .d{color:var(--ink2)}

/* 挖掘動畫 */
.minestage{position:relative; background:var(--surface); border:1px solid var(--rule);
  border-radius:8px; overflow:hidden; box-shadow:var(--shadow)}
.minestage canvas{display:block; width:100%; height:auto; opacity:.85}
.minetext{position:absolute; inset:auto 0 0 0; padding:1.2rem 1.4rem;
  background:linear-gradient(to top, var(--surface) 62%, transparent)}
.minetitle{font-family:var(--serif); font-size:1.15rem; font-weight:600}
.minesub{font-size:.86rem; color:var(--ink2); margin:.2rem 0 .6rem}
.minemeta{font-size:.78rem; color:var(--ink3); margin-top:.5rem}

/* ══════════════════ 因子總覽 ══════════════════ */
.ovstats{display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:.8rem; margin:1.2rem 0}
.ovstat{background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:.7rem .85rem}
.ovstat b{display:block; font-family:var(--mono); font-size:1.3rem; line-height:1.2}
.ovstat.wide b{font-family:var(--serif); font-size:1rem; line-height:1.35}
.ovstat span{font-size:.72rem; color:var(--ink3)}
.ovstat .amber{color:var(--amber)}
.ovbar{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  flex-wrap:wrap; margin-bottom:1rem}
.filters{display:flex; gap:.4rem; flex-wrap:wrap}
.filt{font:inherit; font-size:.82rem; padding:.25rem .7rem; cursor:pointer; border-radius:2rem;
  background:var(--surface); color:var(--ink2); border:1px solid var(--rule2)}
.filt.on{background:var(--band); color:var(--bandink); border-color:var(--band)}
.sorter{font-size:.84rem; color:var(--ink3)}
.sorter select{font:inherit; font-size:.84rem; padding:.25rem .5rem; margin-left:.4rem;
  background:var(--surface); color:var(--ink); border:1px solid var(--rule2); border-radius:4px}
.fcardwrap{cursor:default; position:relative}
.fcardwrap.on{border-color:var(--up); box-shadow:0 0 0 1px var(--up), var(--shadow)}
.cpick{font-size:.78rem; color:var(--ink3); display:flex; align-items:center; gap:.35rem}
.card .detail{align-self:flex-start; margin-top:.2rem}

/* ══════════════════ 組合 ══════════════════ */
.weights{display:flex; flex-direction:column; gap:.7rem}
.wrow{display:grid; grid-template-columns:minmax(9rem,1.3fr) 2fr 2.5rem;
  align-items:center; gap:.9rem}
.wname strong{display:block; font-size:.92rem}
.wname span{font-size:.72rem; color:var(--ink3)}
.wval{font-family:var(--mono); font-size:.9rem; text-align:right; color:var(--ink2)}
.wbtns{display:flex; align-items:center; gap:1rem; margin-top:.9rem; flex-wrap:wrap}
.labgrid select{font:inherit; font-size:.9rem; padding:.42rem .6rem;
  background:var(--ground); color:var(--ink); border:1px solid var(--rule2); border-radius:4px}
table.corr{font-size:.76rem; border-collapse:collapse}
table.corr th{font-size:.7rem; color:var(--ink3); padding:.25rem .4rem; font-weight:600; white-space:nowrap}
table.corr td{font-family:var(--mono); text-align:center; padding:.3rem .45rem;
  border:1px solid var(--surface); color:var(--ink)}
.verdict{font-size:.86rem; color:var(--ink2); margin-top:.8rem; line-height:1.7}
.concbars{display:flex; flex-direction:column; gap:.4rem}
.cbrow{display:grid; grid-template-columns:7rem 1fr 2.6rem; align-items:center; gap:.6rem; font-size:.82rem}
.cbn{color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cbbar{background:var(--surface2); border-radius:3px; height:.65rem; overflow:hidden}
.cbbar i{display:block; height:100%; background:var(--band)}
.cbv{font-family:var(--mono); text-align:right; color:var(--ink3)}

/* 下載 */
.dlrow{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem}
.dlrow .cta{text-decoration:none; cursor:pointer}
.dlrow .off{opacity:.45; pointer-events:none}