/* 分注打法產生器 — 樣式
 * ─────────────────────────────────────────────
 * 🔴 這支只在工具台（/tools/storm-of-seth-session/）裡用，不再有獨立頁。
 *    所以配色一律吃 seth-session.css 的深色設計語彙，不要再寫淺色卡片：
 *      無圓角（整站都是直角）· 面板深色漸層 · 金色描邊
 *      大數字用 Georgia 襯線體 · 字級走 rem 且偏小（.55–.85rem）
 *      強調區塊用「左側 2px 色條」，不是圓角色塊
 *    變數來自 seth-session.css 的 :root：
 *      --gold #d9aa4f · --bright #f4cf78 · --sand #f2eadc
 *      --muted #a8a198 · --cyan #43d8d3 · --green #74d3a4 · --red #ff6174
 */

.tp{max-width:760px;margin:0 auto}

/* ── 輸入區 ───────────────────────────────── */
.tp-in{padding:14px;border:1px solid var(--line);
       background:linear-gradient(145deg,rgba(16,12,20,.96),rgba(7,6,10,.89))}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-f{min-width:0;display:grid;gap:6px}
.tp-f label{display:block;color:#bcb5ac;font-size:.66rem}
.tp-f .box{height:46px;min-width:0;display:flex;align-items:center;padding:0 11px;
           border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.025)}
.tp-f .box:focus-within{border-color:var(--gold);box-shadow:0 0 0 1px rgba(217,170,79,.18)}
.tp-f input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:transparent;
            color:#fff;font:500 1.35rem/1 Georgia,"Noto Serif TC",serif;
            font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.tp-f input::-webkit-outer-spin-button,.tp-f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tp-f .u{padding-left:7px;color:var(--muted);font-size:.62rem}

.tp-mult{display:flex;gap:5px;margin-top:11px}
.tp-mult button{flex:1;min-height:32px;border:1px solid rgba(255,255,255,.13);
                background:rgba(255,255,255,.025);color:var(--muted);font-size:.66rem;cursor:pointer}
.tp-mult button:hover{border-color:var(--gold);color:var(--bright)}
.tp-mult button.on{border-color:var(--bright);background:rgba(217,170,79,.14);
                   color:var(--bright);font-weight:900}

/* ── 打法卡 ───────────────────────────────── */
.tp-card{margin-top:11px;border:1px solid var(--line);
         background:radial-gradient(circle at 50% 0,rgba(217,170,79,.12),transparent 42%),
                    linear-gradient(145deg,rgba(16,12,20,.96),rgba(7,6,10,.9))}
.tp-card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
            padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.tp-card-hd span:first-child{color:var(--bright);font-size:.72rem;font-weight:900;letter-spacing:.06em}
.tp-card-hd span:last-child{color:var(--muted);font-size:.6rem}
.tp-body{padding:16px 14px}

.tp-hero{padding-bottom:13px;margin-bottom:13px;text-align:center;
         border-bottom:1px solid rgba(255,255,255,.07)}
.tp-hero .k{color:var(--muted);font-size:.62rem;letter-spacing:.14em}
.tp-hero .v{margin:5px 0 0;color:var(--sand);font:500 clamp(2.6rem,9vw,3.6rem)/1 Georgia,serif;
            font-variant-numeric:tabular-nums}
.tp-hero .v small{font:500 .32em/1 "Noto Sans TC",sans-serif;color:var(--muted)}
.tp-rate{display:inline-block;margin-top:9px;padding:5px 14px;border:1px solid rgba(116,211,164,.4);
         background:rgba(116,211,164,.08);color:var(--green);font-size:.78rem;font-weight:900}

.tp-rows{display:grid}
.tp-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
        padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.7rem}
.tp-row:last-child{border-bottom:0}
.tp-row .k{color:var(--muted);flex:0 0 auto}
.tp-row .v{color:var(--sand);font:500 1.05rem/1.3 Georgia,serif;
           font-variant-numeric:tabular-nums;text-align:right}
.tp-row.take .v{color:var(--green)}
.tp-row.stop .v{color:var(--red)}

/* ── 滑桿 ─────────────────────────────────── */
.tp-slider{margin-top:11px;padding:13px 14px;border:1px solid rgba(255,255,255,.09);
           background:rgba(255,255,255,.025)}
.tp-slider .hd{display:flex;justify-content:space-between;gap:10px;margin-bottom:9px;
               color:#bcb5ac;font-size:.66rem}
.tp-slider .hd b{color:var(--bright);font:500 .95rem/1 Georgia,serif}
.tp-slider input[type=range]{width:100%;height:24px;accent-color:var(--gold)}
.tp-scale{display:flex;justify-content:space-between;margin-top:2px;color:#7f7974;font-size:.5rem}

/* ── 提示條：一律左側色條，不用圓角色塊 ──────── */
.tp-warn{margin-top:10px;padding:9px 12px;border-left:2px solid var(--gold);
         background:rgba(217,170,79,.07);color:#e2d6bd;font-size:.68rem;line-height:1.75}
.tp-warn b{color:var(--bright)}
.tp-warn.ok{border-left-color:var(--green);background:rgba(116,211,164,.06);color:#c3e5d3}
.tp-warn.ok b{color:var(--green)}

/* ── 對照表 ───────────────────────────────── */
.tp-cmp{margin-top:9px}
.tp-cmp table{width:100%;min-width:0;border-collapse:collapse;font-size:.68rem}
.tp-cmp th{padding:8px 10px;border-bottom:1px solid var(--line);
           color:var(--muted);font-size:.58rem;font-weight:700;text-align:left;letter-spacing:.08em}
.tp-cmp td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06);
           color:#cdc6bd;font-variant-numeric:tabular-nums}
.tp-cmp tr.me td{background:rgba(217,170,79,.09);color:var(--bright);font-weight:900}
.tp-cmp tr.no td{color:#6d6862}

.tp-cta{margin-top:11px}

/* ── 閘門 ─────────────────────────────────── */
.tp-locked .tp-hero .v,
.tp-locked .tp-rate,
.tp-locked .tp-rows,
.tp-locked #tp-alt,
.tp-locked .tp-cmp table,
.tp-locked .tp-slider{filter:blur(7px);pointer-events:none;user-select:none}
.tp-gate{margin:11px 0;padding:18px 16px;border:1px solid var(--line);
         background:linear-gradient(145deg,rgba(22,17,12,.96),rgba(7,6,10,.9));text-align:center}
.tp-gate h3{margin:0 0 8px;color:var(--bright);font-size:.95rem;font-weight:900}
.tp-gate p{max-width:34em;margin:0 auto 13px;color:#b9b2aa;font-size:.7rem;line-height:1.8}
.tp-gate .btns{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.tp-gate a.reg{min-height:42px;display:inline-flex;align-items:center;padding:0 20px;
               border:1px solid var(--bright);background:linear-gradient(135deg,#f4cf78,#a97b2c);
               color:#15100a;font-size:.72rem;font-weight:900;text-decoration:none}
.tp-gate a.line{min-height:42px;display:inline-flex;align-items:center;padding:0 20px;
                border:1px solid rgba(116,211,164,.5);background:rgba(116,211,164,.09);
                color:var(--green);font-size:.72rem;font-weight:900;text-decoration:none}
.tp-gate .row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.tp-gate input{min-width:170px;height:40px;padding:0 11px;border:1px solid rgba(255,255,255,.14);
               outline:none;background:#0b0910;color:#fff;font-size:.75rem}
.tp-gate input:focus{border-color:var(--gold)}
.tp-gate button{height:40px;padding:0 20px;border:1px solid var(--bright);
                background:linear-gradient(135deg,#f4cf78,#a97b2c);color:#15100a;
                font-size:.72rem;font-weight:900;cursor:pointer}
.tp-gate .note{min-height:1.2em;margin:9px 0 0;color:#ffb0bb;font-size:.64rem}

@media(max-width:640px){
  .tp-grid{grid-template-columns:1fr}
  .tp-cmp thead{display:none}
  .tp-cmp tr{display:block;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .tp-cmp tr.me td{background:none}
  .tp-cmp td{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border:0}
  .tp-cmp td:before{content:attr(data-l);color:var(--muted)}
  .tp-cmp td:first-child{margin-bottom:3px;color:var(--sand);font-weight:900}
  .tp-cmp td:first-child:before{display:none}
}

/* 分頁內的標題與說明文字（原本寫在 HTML 行內，改由這裡統一管） */
.tp-h2{margin:0 0 8px;color:var(--sand);font:500 clamp(1.25rem,4.5vw,1.7rem)/1.3 Georgia,"Noto Serif TC",serif}
.tp-lead{margin:0 0 13px;color:#b9b2aa;font-size:.72rem;line-height:1.85}
.tp-lead b{color:var(--bright)}
.tp-foot{margin-top:14px;color:var(--muted);font-size:.64rem;line-height:1.8}
.tp-foot a{color:var(--cyan)}