:root {
  --bg:#f5f6f8; --fg:#16181d; --muted:#6b7280; --card:#fff; --line:#e4e6ea; --hover:#eef0f4;
  --accent:#2f6fdb; --up:#d3403a; --down:#1f9d55; --shadow:0 1px 2px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#0f1115; --fg:#e8eaee; --muted:#8b919c; --card:#181b21; --line:#2a2e36; --hover:#20242c;
          --accent:#6b9cff; --up:#f0625c; --down:#3ac47d; --shadow:none; }
}
:root[data-theme="dark"] { --bg:#0f1115; --fg:#e8eaee; --muted:#8b919c; --card:#181b21; --line:#2a2e36; --hover:#20242c;
  --accent:#6b9cff; --up:#f0625c; --down:#3ac47d; --shadow:none; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); }
body { font:15px/1.6 "Noto Sans TC", system-ui, -apple-system, "PingFang TC", sans-serif; }
.muted { color:var(--muted); }

/* 頂欄 */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:17px; white-space:nowrap; }
.meta { margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; }

/* 搜尋 */
.search { position:relative; flex:1 1 280px; max-width:520px; }
.search .icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.search input { width:100%; padding:9px 12px 9px 38px; font:inherit; font-size:15px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--fg); outline:none; transition:border-color .15s, box-shadow .15s; }
.search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.search .results { position:absolute; left:0; right:0; top:calc(100% + 6px); margin:0; padding:6px; list-style:none;
  background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.18); max-height:360px; overflow:auto; }
.search .results li { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.search .results li:hover, .search .results li.hi { background:var(--hover); }
.search .results .rid { font-weight:700; min-width:64px; font-variant-numeric:tabular-nums; }
.search .results .rname { flex:1; }
.search .results .rind { font-size:12px; color:var(--muted); }
.search .results .added { font-size:12px; color:var(--accent); }

/* 版面 */
.layout { display:grid; grid-template-columns:300px 1fr; gap:20px; padding:20px; max-width:1400px; margin:0 auto; }
@media (max-width: 860px) { .layout { grid-template-columns:1fr; padding:16px; } }

/* 側欄清單 */
.side-head { display:flex; justify-content:space-between; font-weight:500; padding:4px 4px 10px; }
.cards { display:flex; flex-direction:column; gap:8px; }
@media (max-width: 860px) { .cards { flex-direction:row; overflow-x:auto; padding-bottom:6px; } .cards .card { min-width:180px; } }
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer;
  box-shadow:var(--shadow); transition:border-color .15s, transform .1s; }
.card:hover { border-color:color-mix(in srgb, var(--accent) 50%, var(--line)); }
.card.active { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.card .row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.card .id { font-weight:700; font-variant-numeric:tabular-nums; }
.card .name { font-size:14px; } .card .name b { font-weight:600; }
.card .px { font-size:20px; font-weight:500; font-variant-numeric:tabular-nums; }
.card .chg { font-size:13px; margin-left:6px; font-variant-numeric:tabular-nums; }
.card .date { font-size:11px; color:var(--muted); }
.card .rm { position:absolute; top:6px; right:6px; width:22px; height:22px; border:0; border-radius:6px; background:none; color:var(--muted);
  font-size:16px; line-height:22px; cursor:pointer; opacity:0; transition:opacity .15s; }
.card:hover .rm { opacity:1; }
.card .rm:hover { background:var(--hover); color:var(--up); }
.up { color:var(--up); } .down { color:var(--down); }
.empty { padding:24px 12px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; }
.skeleton { display:inline-block; width:56px; height:14px; border-radius:4px; background:linear-gradient(90deg, var(--line), var(--hover), var(--line)); background-size:200% 100%; animation:sk 1.2s infinite; }
@keyframes sk { from { background-position:200% 0 } to { background-position:-200% 0 } }

/* 主圖 */
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow); min-width:0; }
.panel-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.title .tid { font-size:22px; font-weight:700; margin-right:8px; }
.title .tname { font-size:15px; color:var(--muted); }
.stats { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.stats b { display:block; font-size:14px; color:var(--fg); font-weight:500; font-variant-numeric:tabular-nums; }
.range { margin-left:auto; display:flex; gap:4px; background:var(--bg); border-radius:8px; padding:3px; }
.range button { border:0; background:none; color:var(--muted); font:inherit; font-size:13px; padding:4px 10px; border-radius:6px; cursor:pointer; }
.range button.on { background:var(--card); color:var(--fg); box-shadow:var(--shadow); }
.chart-wrap { position:relative; height:360px; }
.chart-wrap.vol { height:100px; margin-top:6px; }
@media (max-width: 860px) { .chart-wrap { height:260px; } }

/* 手機修正：grid 子項不得撐寬、搜尋整行、資訊列可換行 */
.sidebar, .panel, .chart-wrap { min-width:0; }
@media (max-width: 600px) {
  .topbar { padding:10px 14px; gap:10px; }
  .search { flex-basis:100%; max-width:none; order:3; }
  .meta { font-size:11px; }
  .panel { padding:12px; }
  .title .tid { font-size:18px; }
  .stats { gap:12px; }
  .range { margin-left:0; }
}

/* 排序選單 */
.side-head { align-items:center; }
.sort { font:inherit; font-size:12px; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:4px 8px; cursor:pointer; }
.sort:focus { outline:none; border-color:var(--accent); }

/* 主題鈕 */
.theme-btn { font:inherit; font-size:12px; color:var(--muted); background:none; border:1px solid var(--line); border-radius:8px; padding:4px 10px; cursor:pointer; }
.theme-btn:hover { color:var(--fg); background:var(--hover); }
@media (max-width: 600px) { .theme-btn { order:2; } .meta { order:4; flex-basis:100%; } }

/* 卡片迷你走勢 */
.card .row.bottom { align-items:flex-end; }
.card .spark { flex:none; }
.card .spark-line { stroke:currentColor; stroke-width:1.4; }
.card .spark-area { fill:currentColor; opacity:.12; }
.card .flat { color:var(--muted); }

/* 產業標籤 */
.tag { display:inline-block; margin-left:8px; padding:1px 8px; font-size:11px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:999px; vertical-align:middle; }

/* 主圖載入 */
.loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--muted);
  background:color-mix(in srgb, var(--card) 70%, transparent); border-radius:8px; }
.loading[hidden], .results[hidden], .tag[hidden] { display:none; }

/* 價值體檢 */
.value { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:10px 12px; margin:4px 0 10px; background:var(--bg); border-radius:10px; font-size:12px; color:var(--muted); }
.value b { color:var(--fg); font-weight:500; font-variant-numeric:tabular-nums; margin-left:4px; }
.value .note { flex-basis:100%; font-size:11px; }
.value[hidden] { display:none; }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:500; border:1px solid transparent; }
.badge.cheap { color:var(--down); background:color-mix(in srgb, var(--down) 12%, transparent); border-color:color-mix(in srgb, var(--down) 30%, transparent); }
.badge.fair { color:var(--muted); background:var(--hover); border-color:var(--line); }
.badge.dear { color:var(--up); background:color-mix(in srgb, var(--up) 12%, transparent); border-color:color-mix(in srgb, var(--up) 30%, transparent); }
.badge.na { color:var(--muted); border-color:var(--line); }
.card .val { display:flex; gap:8px; align-items:center; font-size:11px; color:var(--muted); margin-top:2px; }
.toggle { font:inherit; font-size:13px; color:var(--muted); background:var(--bg); border:1px solid transparent; border-radius:8px; padding:5px 10px; cursor:pointer; }
.toggle[aria-pressed="true"] { color:var(--fg); border-color:var(--accent); }

/* 一句話摘要 */
.summary { margin:6px 0 14px; font-size:15px; line-height:1.7; color:var(--fg); }
.summary b { font-weight:600; }
.card .row .badge { margin-left:auto; }

.card .cur { font-size:11px; color:var(--muted); margin-left:4px; vertical-align:top; }

.card .row { min-width:0; }
.card .name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .badge { white-space:nowrap; flex:none; }

.badge.loss { color:var(--muted); background:var(--hover); border-color:var(--line); text-decoration:line-through; text-decoration-color:var(--up); }

/* 台股／美股切換（頂欄，切整個畫面） */
.market-switch { display:flex; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:3px; }
.market-switch button { border:0; background:none; color:var(--muted); font:inherit; font-size:14px; padding:6px 14px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.market-switch button.on { background:var(--accent); color:#fff; font-weight:500; }
.market-switch button.on .n { color:rgba(255,255,255,.8); }
.market-switch .n { font-size:12px; color:var(--muted); }
@media (max-width: 600px) { .market-switch { order:1; } .market-switch button { flex:1; } }
body[data-market="us"] { --accent:#7c5cff; }
:root[data-theme="dark"] body[data-market="us"], body[data-market="us"] { }

/* 三維度列：一條卡片分三格，數字顏色＋小標籤表示好壞 */
.dims { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:0 0 14px; }
.dims[hidden] { display:none; }
.dims .strip { display:flex; align-items:stretch; flex:1 1 100%; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.dim { flex:1 1 0; display:flex; flex-direction:column; gap:6px; min-width:0; padding:12px 16px; }
.dim + .dim { border-left:1px solid var(--line); }
.dim .k { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.dim .v { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dim b { font-size:20px; font-weight:650; letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1.3; }
.dim small { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.dim .tag { font-size:11px; padding:1px 7px; border-radius:999px; font-weight:500; white-space:nowrap; }
.dim.good b { color:var(--down); } .dim.good .tag { color:var(--down); background:color-mix(in srgb, var(--down) 12%, transparent); }
.dim.mid b { color:#b98600; } .dim.mid .tag { color:#8a6400; background:color-mix(in srgb, #d9a300 16%, transparent); }
.dim.bad b { color:var(--up); } .dim.bad .tag { color:var(--up); background:color-mix(in srgb, var(--up) 12%, transparent); }
:root:not([data-theme="light"]) .dim.mid b { color:#e0b52a; } :root:not([data-theme="light"]) .dim.mid .tag { color:#e0b52a; }
:root[data-theme="light"] .dim.mid b { color:#b98600; } :root[data-theme="light"] .dim.mid .tag { color:#8a6400; }
.dim.na b { color:var(--muted); font-weight:400; }
.dims .note { flex-basis:100%; font-size:11px; }

/* 浮動小窗 */
.dim { cursor:help; outline:none; }
.dim:focus-visible, .dim:hover { background:var(--hover); }
.dim .q { font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:999px; width:14px; height:14px; line-height:12px; text-align:center; margin-left:auto; }
.popover { position:fixed; z-index:50; width:min(440px, calc(100vw - 24px)); background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; box-shadow:0 16px 40px rgba(0,0,0,.28); font-size:13px; line-height:1.55; }
.popover[hidden] { display:none; }
.popover h4 { margin:0 0 6px; font-size:15px; }
.popover p { margin:6px 0; }
.popover .f { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; background:var(--bg); padding:6px 8px; border-radius:6px; }
.popover .s { color:var(--fg); }
.popover .t { color:var(--muted); font-size:12px; border-top:1px solid var(--line); padding-top:6px; }
.pop-table { width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; margin:6px 0; }
.pop-table th { text-align:right; color:var(--muted); font-weight:500; padding:2px 4px; border-bottom:1px solid var(--line); }
.pop-table td { text-align:right; padding:2px 4px; }
.pop-table th:first-child, .pop-table td:first-child { text-align:left; }

/* 卡片底列：三維度圓點＋日期 */
.card .row.foot { margin-top:6px; align-items:center; }
.dots { display:inline-flex; gap:5px; min-height:8px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--line); display:inline-block; }
.dot.good { background:var(--down); } .dot.mid { background:#d9a300; } .dot.bad { background:var(--up); } .dot.na { background:var(--line); }
/* 版面微調 */
.summary { margin:8px 0 12px; }
.dims { margin-bottom:16px; }
.panel-head { margin-bottom:4px; }
.card { transition:border-color .15s, box-shadow .15s; }
.card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }

@media (max-width: 600px) {
  .dims { gap:6px; }
  .dims .strip { flex-direction:column; }
  .dim + .dim { border-left:0; border-top:1px solid var(--line); }
  .dims .note { flex-basis:100%; margin-left:0; }
}

/* 一句話結論 */
.verdict { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; border:1px solid transparent; }
.verdict.good { color:#fff; background:var(--down); }
.verdict.mid { color:var(--fg); background:var(--hover); border-color:var(--line); }
.verdict.dear { color:#fff; background:var(--up); }
.verdict.bad { color:var(--up); background:color-mix(in srgb, var(--up) 12%, transparent); border-color:color-mix(in srgb, var(--up) 35%, transparent); }
.verdict.na { color:var(--muted); background:var(--bg); border-color:var(--line); font-weight:400; }
.card .row .verdict { margin-left:auto; }
.summary .verdict { font-size:13px; vertical-align:middle; margin-right:4px; }
.card .row.foot .badge { margin-left:8px; }
/* 五年小圖 */
.dim .trend { display:flex; align-items:flex-end; gap:6px; margin-top:4px; }
.dim .trend small { font-size:10px; color:var(--muted); }
.bars .pos { fill:color-mix(in srgb, var(--down) 70%, transparent); }
.bars .neg { fill:color-mix(in srgb, var(--up) 70%, transparent); }
/* 側欄工具與提示 */
.side-tools { display:flex; gap:6px; align-items:center; }
.icon-btn { font:inherit; font-size:12px; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:4px 10px; cursor:pointer; }
.icon-btn:hover { color:var(--fg); background:var(--hover); }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; background:var(--fg); color:var(--bg); padding:8px 14px; border-radius:10px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:calc(100vw - 32px); }
.toast[hidden] { display:none; }

/* 門檻設定視窗 */
.th-dialog { border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--fg); padding:0; width:min(520px, calc(100vw - 32px)); }
.th-dialog::backdrop { background:rgba(0,0,0,.45); }
.th-form { padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.th-form h3 { margin:0; font-size:17px; }
.th-form label { display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:13px; }
.th-form label small { grid-column:1 / -1; color:var(--muted); font-size:11px; }
.th-form input { width:80px; font:inherit; padding:4px 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); text-align:right; }
.th-actions { display:flex; gap:8px; align-items:center; margin-top:6px; }
.th-actions .sp { flex:1; }
.icon-btn.primary { color:#fff; background:var(--accent); border-color:var(--accent); }
/* 頁尾免責 */
.foot { max-width:1400px; margin:8px auto 24px; padding:0 20px; font-size:11px; color:var(--muted); line-height:1.6; }
/* 摘要標籤配色：事實描述，顏色只表示位置 */
.verdict.good { color:#fff; background:var(--down); }
.verdict.dear { color:#fff; background:var(--up); }