:root { --ink:#0b0b0b; --muted:#74746f; --line:#d9d9d3; --soft:#f4f4f0; --paper:#fff; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); }
body { font-family:Arial,Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; line-height:1.45; }
html[lang="zh-TW"] body { font-family:Arial,Helvetica,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif; }
.topbar { position:sticky; top:0; z-index:20; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--ink); background:rgba(255,255,255,.95); }
.brand { font-size:14px; font-weight:800; letter-spacing:.16em; }
.topbar-meta { display:flex; align-items:center; gap:18px; color:var(--muted); font:10px "SFMono-Regular",Consolas,monospace; }
.live { color:var(--ink); font-weight:700; }
.live i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--ink); }
.live b { font:inherit; }
.live.stale { color:#8a5a00; }
.live.stale i { background:#8a5a00; }
.live.offline { color:#9b1c1c; }
.live.offline i { background:#9b1c1c; }
.language-switch { display:flex; border:1px solid var(--ink); }
.language-switch button { height:24px; min-width:38px; padding:0 7px; border:0; border-right:1px solid var(--ink); background:white; color:var(--muted); font:700 9px monospace; cursor:pointer; }
.language-switch button:last-child { border-right:0; }
.language-switch button.active { background:var(--ink); color:white; }
.shell { display:grid; grid-template-columns:290px minmax(520px,1fr) 320px; min-height:calc(100vh - 58px); }
.rail { border-right:1px solid var(--ink); }
.context { border-left:1px solid var(--ink); }
.workspace { min-width:0; background:var(--soft); }
.mobile-decision { display:none; }
.rail-head,.context-head { padding:28px 20px 24px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 12px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.rail h1,.context h2,.hero h2 { margin:0; font-weight:500; letter-spacing:-.045em; line-height:.98; }
.rail h1 { font-size:31px; }
.context h2 { font-size:31px; }
.epoch { margin:14px 0 0; color:var(--muted); font:9px monospace; }
.rail-stats { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--ink); }
.rail-stats>div { padding:14px; border-right:1px solid var(--line); }
.rail-stats>div:last-child { border-right:0; }
.rail-stats span { display:block; color:var(--muted); font-size:8px; text-transform:uppercase; }
.rail-stats strong { display:block; margin-top:4px; font-size:22px; font-weight:500; }
.cycle-list { padding:10px 10px 20px; }
.cycle-card { margin-bottom:8px; padding:13px; border:1px solid var(--line); background:white; }
.cycle-card.active { border-color:var(--ink); }
.cycle-card .cycle-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font:8px monospace; }
.cycle-card h3 { margin:14px 0 5px; font-size:15px; font-weight:600; }
.cycle-card p { margin:4px 0; color:var(--muted); font-size:10px; }
.cycle-card .cycle-path { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:5px; align-items:center; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font:8px monospace; }
.cycle-card .cycle-path b { text-align:center; }
.skeleton { height:120px; background:linear-gradient(90deg,#f0f0ec,#fafaf8,#f0f0ec); }
.hero { padding:38px 34px 32px; border-bottom:1px solid var(--ink); background:white; }
.hero h2 { font-size:clamp(38px,5vw,64px); }
.hero>p:not(.eyebrow) { max-width:720px; margin:14px 0 0; color:var(--muted); font-size:12px; }
.cycle-indicator { display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr; align-items:stretch; margin-top:30px; border:1px solid var(--ink); }
.cycle-step { min-height:118px; padding:16px; background:white; opacity:.25; }
.cycle-step span,.cycle-step small { display:block; color:var(--muted); font:8px monospace; }
.cycle-step strong { display:block; margin:18px 0 8px; font-size:28px; font-weight:600; }
.cycle-arrow { display:flex; align-items:center; justify-content:center; border-left:1px solid var(--line); border-right:1px solid var(--line); color:var(--muted); font-size:22px; }
.stage-buy [data-step="BUY"],.stage-hold [data-step="BUY"],.stage-hold [data-step="HOLD"],.stage-sold [data-step="BUY"],.stage-sold [data-step="HOLD"],.stage-sold [data-step="SELL"] { opacity:1; }
.stage-buy [data-step="BUY"],.stage-hold [data-step="HOLD"],.stage-sold [data-step="SELL"] { background:var(--ink); color:white; }
.stage-buy [data-step="BUY"] span,.stage-buy [data-step="BUY"] small,.stage-hold [data-step="HOLD"] span,.stage-hold [data-step="HOLD"] small,.stage-sold [data-step="SELL"] span,.stage-sold [data-step="SELL"] small { color:#bfbfba; }
.position-strip { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--ink); background:white; }
.position-strip>div { padding:16px 14px; border-right:1px solid var(--line); }
.position-strip>div:last-child { border-right:0; }
.position-strip span { display:block; min-height:24px; color:var(--muted); font-size:8px; letter-spacing:.06em; }
.position-strip strong { display:block; font-size:clamp(18px,2vw,26px); font-weight:500; }
.position-strip small { display:block; margin-top:4px; color:var(--muted); font-size:8px; }
.panel { margin:18px; border:1px solid var(--ink); background:white; }
.panel-head { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border-bottom:1px solid var(--ink); font:9px monospace; }
.panel-head>div { display:flex; align-items:center; gap:10px; }
.panel-head strong { font-family:Arial,Helvetica,sans-serif; font-size:12px; }
.review-meta { color:var(--muted); }
.factor-grid { display:grid; grid-template-columns:repeat(2,1fr); }
.factor { min-height:112px; padding:14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.factor:nth-child(2n) { border-right:0; }
.factor:nth-last-child(-n+2) { border-bottom:0; }
.factor span { color:var(--muted); font:8px monospace; }
.factor strong { display:block; margin:12px 0 5px; font-size:18px; font-weight:600; }
.factor small { color:var(--muted); font-size:9px; line-height:1.5; }
.factor.support { background:#f4f4f0; }
.rule-copy { margin:0; padding:12px 14px; border-top:1px solid var(--ink); color:var(--muted); font-size:10px; line-height:1.55; }
.chart-wrap { padding:18px 18px 12px; }
#price-chart { display:block; width:100%; height:260px; }
#price-chart .grid { stroke:#e2e2de; stroke-width:1; vector-effect:non-scaling-stroke; }
#price-chart .line { fill:none; stroke:var(--ink); stroke-width:2; vector-effect:non-scaling-stroke; }
#price-chart .area { fill:rgba(11,11,11,.045); }
#price-chart .point { fill:white; stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.chart-caption { display:grid; grid-template-columns:1fr auto 1fr; margin-top:8px; color:var(--muted); font:8px monospace; }
.chart-caption span:nth-child(2) { text-align:center; }
.chart-caption span:last-child { text-align:right; }
.context-card { margin:12px; padding:15px; border:1px solid var(--ink); }
.context-card>span { display:block; margin-bottom:18px; color:var(--muted); font:8px monospace; letter-spacing:.08em; }
.context-card>strong { display:block; font-size:17px; font-weight:600; overflow-wrap:anywhere; }
.context-card>p { margin:7px 0 0; color:var(--muted); font-size:10px; line-height:1.55; }
.context-card.dark { background:var(--ink); color:white; }
.context-card.dark>span,.context-card.dark>p { color:#bfbfba; }
.mini-grid { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.mini-grid>div { padding:10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.mini-grid>div:nth-child(2n) { border-right:0; }
.mini-grid>div:nth-last-child(-n+2) { border-bottom:0; }
.mini-grid small { display:block; color:var(--muted); font:8px monospace; }
.mini-grid strong { display:block; margin-top:4px; font-size:12px; }
.error-banner { position:fixed; right:16px; bottom:16px; padding:11px 14px; background:var(--ink); color:white; font-size:11px; }
@media(max-width:1180px){ .shell{grid-template-columns:250px 1fr}.context{grid-column:1/-1;border-left:0;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr)}.context-head{grid-column:1/-1}.context-card{margin:0;border-top:0;border-left:0}.context-card:last-child{border-right:0} }
@media(max-width:760px){ .topbar-meta>#last-updated{display:none}.shell{display:flex;flex-direction:column}.workspace{order:1;display:flex;flex-direction:column}.context{order:2;display:block;border:0;border-top:1px solid var(--ink)}.rail{order:3;border:0;border-top:1px solid var(--ink)}.context-head{display:none}.mobile-decision{display:block;order:0;padding:20px 18px 18px;border-bottom:1px solid var(--ink);background:white}.mobile-decision span{display:block;margin-bottom:6px;color:var(--muted);font:8px monospace;letter-spacing:.1em}.mobile-decision strong{display:block;font-size:28px;font-weight:500;letter-spacing:-.035em}.hero{order:1;padding:24px 18px}.explanation-panel{order:2}.position-strip{order:3}.chart-panel{order:4}.cycle-list{display:flex;overflow:auto;gap:8px}.cycle-card,.skeleton{flex:0 0 260px}.cycle-indicator{grid-template-columns:1fr 24px 1fr 24px 1fr}.cycle-step{min-height:100px;padding:12px}.cycle-step strong{font-size:21px}.position-strip{grid-template-columns:1fr 1fr}.position-strip>div:nth-child(2){border-right:0}.position-strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.factor-grid{display:block}.factor{border-right:0}.panel{margin:12px}.context-card{margin:10px 12px;border:1px solid var(--ink)} }