/* 券商分點籌碼 — 淡藍底樣式 */
:root{
  --bg:#e8f1fb; --panel:#ffffff; --line:#c3d7ee; --line2:#e0ebf7;
  --ink:#12283f; --ink2:#4a6480; --muted:#7b93ac;
  --up:#d1373b; --dn:#118a54; --flat:#5a6b7c;
  --buy:#c62828; --sell:#00695c;
  --head:#1f5fa8; --head2:#2e7cd6;
  --accent:#0b57a4; --warn:#b26a00;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:13px/1.5 "Microsoft JhengHei","Segoe UI",system-ui,sans-serif;}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- 頂列 ---------- */
header{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,#1f5fa8,#2e7cd6);
  color:#fff;padding:8px 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  box-shadow:0 2px 8px rgba(20,60,110,.25)}
header .brand{font-weight:700;font-size:15px;letter-spacing:.5px;white-space:nowrap}
header .brand span{opacity:.75;font-weight:400;font-size:12px;margin-left:6px}
header nav{display:flex;gap:12px;font-size:13px}
header nav a{color:#dbeaff}
header nav a.on{color:#fff;font-weight:700;border-bottom:2px solid #fff}
header .spacer{flex:1}
header .asof{font-size:12px;opacity:.9;white-space:nowrap}

/* ---------- 搜尋 ---------- */
.search{position:relative}
.search input{width:230px;padding:5px 9px;border:1px solid #bcd6f2;border-radius:4px;
  font:13px/1.4 inherit;color:var(--ink);background:#fff}
.search input:focus{outline:2px solid #9ec8f7;outline-offset:0}
.sugg{position:absolute;top:32px;left:0;width:290px;background:#fff;border:1px solid var(--line);
  border-radius:5px;box-shadow:0 6px 18px rgba(20,60,110,.22);max-height:320px;overflow:auto;display:none}
.sugg.open{display:block}
.sugg div{padding:6px 10px;cursor:pointer;color:var(--ink);display:flex;gap:8px;font-size:13px}
.sugg div:hover,.sugg div.sel{background:#e8f1fb}
.sugg .code{color:var(--accent);font-weight:700;min-width:52px}
.sugg .tag{margin-left:auto;color:var(--muted);font-size:11px}

/* ---------- 版面 ---------- */
.wrap{padding:12px;display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:12px;align-items:start}
@media (max-width:1180px){.wrap{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 1px 3px rgba(20,60,110,.08)}
.panel h2{margin:0;padding:6px 10px;font-size:13px;background:linear-gradient(180deg,#2e7cd6,#1f5fa8);
  color:#fff;border-radius:5px 5px 0 0;display:flex;align-items:center;gap:8px}
.panel h2 .sub{font-weight:400;opacity:.85;font-size:12px;margin-left:auto}

/* ---------- 個股標頭 ---------- */
.stockhead{display:flex;align-items:baseline;gap:10px;padding:8px 12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line2)}
.stockhead .code{font-size:20px;font-weight:700}
.stockhead .nm{font-size:17px;font-weight:700}
.stockhead .px{font-size:20px;font-weight:700}
.stockhead .meta{color:var(--muted);font-size:12px}
.up{color:var(--up)} .dn{color:var(--dn)} .flat{color:var(--flat)}

/* ---------- 圖 ---------- */
.chartbox{padding:6px 8px 10px}
canvas{width:100%;display:block;cursor:crosshair}
.chartbar{display:flex;gap:8px;align-items:center;padding:4px 10px;flex-wrap:wrap;
  border-bottom:1px solid var(--line2);font-size:12px;color:var(--ink2)}
.chartbar b{color:var(--ink)}
.pill{border:1px solid var(--line);background:#f3f8ff;border-radius:12px;padding:2px 10px;
  cursor:pointer;user-select:none}
.pill.on{background:var(--head);border-color:var(--head);color:#fff;font-weight:700}
.tip{position:absolute;pointer-events:none;background:rgba(255,255,255,.97);border:1px solid var(--line);
  border-radius:5px;padding:6px 9px;font-size:12px;box-shadow:0 4px 14px rgba(20,60,110,.2);
  white-space:nowrap;display:none;z-index:15;line-height:1.55}
.chartwrap{position:relative}

/* ---------- 統計卡 ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line2);
  border-bottom:1px solid var(--line)}
.stats div{background:#fff;padding:5px 10px;display:flex;justify-content:space-between;gap:8px}
.stats span{color:var(--ink2)}
.stats b{font-variant-numeric:tabular-nums}
.verdict{padding:8px 10px;text-align:center;font-size:20px;font-weight:700;letter-spacing:2px}
.verdict small{display:block;font-size:12px;font-weight:400;letter-spacing:0;color:var(--ink2)}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
th,td{padding:3px 6px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap}
th{background:#f0f6fd;color:var(--ink2);font-weight:600;position:sticky;top:0}
td.nm,th.nm{text-align:left}
tbody tr{cursor:pointer}
tbody tr:hover{background:#eaf3ff}
tbody tr.sel{background:#dcebff;box-shadow:inset 3px 0 0 var(--head)}
.tbl-buy th{background:#fdeceb;color:#8c2b28}
.tbl-sell th{background:#e7f5ef;color:#0b5c40}
.sect{padding:4px 10px;font-weight:700;font-size:12px;color:#fff}
.sect.buy{background:linear-gradient(180deg,#d9534f,#b03a37)}
.sect.sell{background:linear-gradient(180deg,#2fa37a,#1d7d5c)}
.scroll{max-height:none;overflow:auto}

/* ---------- 首頁 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;padding:12px}
.note{padding:8px 12px;color:var(--ink2);font-size:12px;background:#fffaf0;border:1px solid #f0dfc0;
  border-radius:6px;margin:12px 12px 0}
.note b{color:var(--warn)}
.foot{padding:14px;color:var(--muted);font-size:12px;text-align:center}
.loading{padding:40px;text-align:center;color:var(--muted)}