/* ==========================================================================
   A股波段監控 — 設計系統
   團隊 UI 標準（0.AI流程架構師/UI_STANDARD.md）：奶油底 + 咖啡棕 + 陶土橘 #c15f3c，
   Noto Sans TC + IBM Plex Mono。

   ⚠️ 漲跌配色用**中國市場慣例：紅漲綠跌**，與歐美相反。
      在 A 股面板上用綠色表示上漲，會讓使用者第一眼就讀反，這不是風格問題。
   ========================================================================== */

:root{
  --bg:#faf7f2; --card:#fffdf9; --ink:#2e2823; --muted:#6f635a;
  --line:#e6ddd1; --line-soft:#f0e9df;
  --accent:#c15f3c; --accent-soft:#f5e4dc; --accent-ink:#fff;
  --up:#c0392b;   --up-soft:#fae8e5;      /* 紅＝漲（中國慣例） */
  --down:#1e7a5a; --down-soft:#dff0e8;    /* 綠＝跌 */
  --warn:#b8860b; --warn-soft:#fbf0d4;
  --ok:#1e7a5a;
  --bar:#ece4d8; --row:#fbf8f3;
  --console-bg:#2e2823; --console-ink:#f0e9e0;
  --radius:12px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(46,40,35,.05), 0 4px 14px rgba(46,40,35,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1c1815; --card:#241f1b; --ink:#f0e9e0; --muted:#a8998c;
    --line:#3a322b; --line-soft:#302a24;
    --accent:#e08055; --accent-soft:#3a2820; --accent-ink:#1c1815;
    --up:#e57468; --up-soft:#3d2320; --down:#5fbf9a; --down-soft:#1d3229;
    --warn:#d4a94a; --warn-soft:#3a2f18; --ok:#5fbf9a;
    --bar:#3a322b; --row:#2b2521;
    --console-bg:#151210; --console-ink:#e6ddd1;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); line-height:1.55;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
      font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)}
[hidden]{display:none !important}

/* ── 頂部品牌列 ───────────────────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.logo{
  width:34px; height:34px; border-radius:9px; background:var(--accent);
  color:var(--accent-ink); display:grid; place-items:center;
  font-weight:700; font-size:1.05rem; flex:none;
}
.brand{display:flex; flex-direction:column; line-height:1.2; margin-right:auto}
.brand .zh{font-weight:600; font-size:.98rem}
.brand .en{font-size:.62rem; letter-spacing:.16em; color:var(--muted)}
.mode-badge{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:5px 12px; border-radius:999px; font-size:.76rem;
  background:var(--accent-soft); color:var(--accent); font-weight:600;
}
.mode-badge .dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.mode-badge.readonly{background:var(--bar); color:var(--muted)}

/* ── 動線：步驟列 ─────────────────────────────────────────────────────── */
.stepper{
  display:flex; gap:6px; padding:12px 18px 0; overflow-x:auto;
  background:var(--bg); position:sticky; top:59px; z-index:19;
  border-bottom:1px solid var(--line);
}
.step{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:9px 16px 11px; border:none; background:none; cursor:pointer;
  color:var(--muted); font-size:.9rem; font-family:inherit;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.step .num{
  width:20px; height:20px; border-radius:50%; background:var(--bar); color:var(--muted);
  display:grid; place-items:center; font-size:.72rem; font-weight:700; flex:none;
}
.step[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
.step[aria-selected="true"] .num{background:var(--accent); color:var(--accent-ink)}
.step:disabled{opacity:.4; cursor:not-allowed}

.wrap{max-width:1180px; margin:0 auto; padding:22px 16px 80px}
.stage{display:none} .stage.active{display:block}
.stage-head{margin-bottom:16px}
.kicker{font-size:.72rem; letter-spacing:.12em; color:var(--accent); font-weight:600}
.stage-head h2{margin:2px 0 4px; font-size:1.3rem}
.stage-head p{margin:0; color:var(--muted); font-size:.87rem}

/* ── 卡片與版塊 ───────────────────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin:14px 0; box-shadow:var(--shadow);
}
.card h3{margin:0 0 4px; font-size:1rem}
.card .sub{color:var(--muted); font-size:.82rem; margin:0 0 12px}
.grid2{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.spacer{flex:1}

/* ── 按鈕與表單 ───────────────────────────────────────────────────────── */
button, .btn{
  font-family:inherit; font-size:.88rem; padding:9px 18px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  cursor:pointer; transition:background .12s, border-color .12s;
}
button:hover:not(:disabled){background:var(--row); border-color:var(--muted)}
button:disabled{opacity:.45; cursor:not-allowed}
button.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
button.primary:hover:not(:disabled){filter:brightness(1.07); background:var(--accent)}
button.danger{color:var(--up); border-color:var(--up-soft)}
button.small{padding:5px 11px; font-size:.78rem}
input[type=text], input[type=search], input[type=number], select{
  font-family:inherit; font-size:.88rem; padding:8px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--card); color:var(--ink); min-width:0;
}
input:focus, select:focus, button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
label.field{display:flex; flex-direction:column; gap:5px; font-size:.8rem; color:var(--muted)}
label.check{display:flex; align-items:center; gap:8px; font-size:.86rem; cursor:pointer}

/* ── 標的池 ───────────────────────────────────────────────────────────── */
.pool-cat{border:1px solid var(--line); border-radius:var(--radius); margin:12px 0; overflow:hidden}
.pool-head{
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  background:var(--card); border-bottom:1px solid var(--line-soft);
}
.pool-head .name{font-weight:600}
.pool-head .count{color:var(--muted); font-size:.8rem}
.pool-head .note{color:var(--muted); font-size:.74rem}
.pool-body{padding:6px 10px 12px; max-height:320px; overflow-y:auto}
.chip-list{display:flex; flex-wrap:wrap; gap:6px; padding:6px}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 8px 5px 11px;
  border-radius:999px; background:var(--bar); font-size:.8rem;
}
.chip code{font-family:"IBM Plex Mono",monospace; font-size:.9em; color:var(--muted)}
.chip .x{
  border:none; background:none; color:var(--muted); cursor:pointer; padding:0 3px;
  font-size:1rem; line-height:1; border-radius:50%;
}
.chip .x:hover{color:var(--up); background:none}

/* ── 執行主控台 ───────────────────────────────────────────────────────── */
.console{
  background:var(--console-bg); color:var(--console-ink); border-radius:var(--radius);
  padding:14px 16px; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:.79rem; line-height:1.65; height:340px; overflow-y:auto; white-space:pre-wrap;
  word-break:break-all;
}
.console:empty::before{content:"（尚未執行）"; opacity:.5}
.runstat{display:flex; align-items:center; gap:9px; font-size:.83rem; color:var(--muted)}
.spin{
  width:13px; height:13px; border:2px solid var(--bar); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite; flex:none;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 結果表 ───────────────────────────────────────────────────────────── */
.filters{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  position:sticky; top:105px; background:var(--bg); padding:10px 0; z-index:9;
  border-bottom:1px solid var(--line);
}
.tab-chip{
  padding:6px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-size:.83rem; cursor:pointer;
}
.tab-chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tab-chip .n{opacity:.75; font-size:.85em; margin-left:4px}
.hint{color:var(--muted); font-size:.78rem; margin:10px 0 6px}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.85rem; min-width:660px}
thead th{
  text-align:right; font-size:.71rem; letter-spacing:.06em; color:var(--muted);
  font-weight:600; padding:8px 9px; border-bottom:1px solid var(--line); white-space:nowrap;
}
thead th:first-child, tbody td:first-child{text-align:left}
tbody td{padding:9px; border-bottom:1px solid var(--line-soft); text-align:right; white-space:nowrap}
tbody tr[data-code]{cursor:pointer}
tbody tr[data-code]:hover{background:var(--row)}
tbody tr.warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.nm{font-weight:600}
.cd{color:var(--muted); font-size:.75rem; margin-left:5px}
.pill{display:inline-block; padding:1px 9px; border-radius:999px; font-size:.74rem}
.pill.up{background:var(--up-soft); color:var(--up)}
.pill.down{background:var(--down-soft); color:var(--down)}
.tagline{color:var(--muted); font-size:.71rem; margin-top:2px}
.spark{display:inline-flex; gap:2px; align-items:flex-end; height:20px}
.spark i{width:6px; background:var(--bar); border-radius:1px; display:block}
.spark i.u{background:var(--up)} .spark i.d{background:var(--down)}

.detail td{background:var(--card); text-align:left; padding:16px 18px; white-space:normal}
.dgrid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.dgrid h4{margin:0 0 8px; font-size:.73rem; letter-spacing:.09em; color:var(--muted)}
.drow{display:grid; grid-template-columns:58px 1fr 50px 42px; gap:8px; align-items:center;
      font-size:.8rem; margin:3px 0}
.track{height:7px; border-radius:4px; background:var(--bar); overflow:hidden}
.fill{height:100%; border-radius:4px}
.fill.u{background:var(--up)} .fill.d{background:var(--down)}
.n{color:var(--muted); font-size:.71rem; text-align:right}
.ex{margin-top:9px; padding-top:8px; border-top:1px solid var(--line-soft);
    font-size:.77rem; color:var(--muted)}

/* ── 狀態訊息 ─────────────────────────────────────────────────────────── */
.notice{padding:11px 15px; border-radius:var(--radius-sm); font-size:.85rem; margin:12px 0}
.notice.ok{background:var(--down-soft); color:var(--down)}
.notice.bad{background:var(--up-soft); color:var(--up)}
.notice.warn{background:var(--warn-soft); color:var(--warn)}
.empty{text-align:center; color:var(--muted); padding:48px 20px}
footer{margin-top:34px; padding-top:14px; border-top:1px solid var(--line);
       color:var(--muted); font-size:.74rem; line-height:1.7}

@media (max-width:640px){
  .stepper{top:57px}
  .filters{top:100px}
  .step{padding:8px 11px 10px; font-size:.83rem}
  .wrap{padding:16px 11px 70px}
  .card{padding:15px 14px}
}