:root{
  --bg:#FFF8EC; --bg-2:#FFF1D6; --surface:#FFFFFF; --surface-2:#FFFAF0; --line:#F0E2C4;
  --ink:#1D2633; --ink-2:#5A6576; --ink-3:#5A6577;
  --gold:#E9A91B; --gold-deep:#8A5A00; --gold-soft:#FFE6A3;
  --sky:#16659F; --sky-soft:#DCEFFF; --sea:#08705F; --sea-soft:#D3F4EF;
  --coral:#F0663A; --coral-soft:#FFE1D5;
  --up:#B32626; --down:#0B6E43; --flat:#687384;
  --ok:#0B6E43; --warn:#E29A00; --bad:#B32626; --warn-ink:#8A5A00; --coral-ink:#A8401A;
  --shadow:0 1px 2px rgba(120,80,0,.06),0 8px 24px rgba(120,80,0,.08);
  --r:18px; --r-sm:12px;
  --num:system-ui,-apple-system,'PingFang TC','Noto Sans TC',sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E141C; --bg-2:#141C27; --surface:#18222F; --surface-2:#1D2836; --line:#2A3646;
  --ink:#F2F4F7; --ink-2:#B4BDCB; --ink-3:#9AA4B4;
  --gold:#F5BC3A; --gold-deep:#F5BC3A; --gold-soft:#3A2F14;
  --sky:#4FB0F2; --sky-soft:#13304A; --sea:#2CC6B6; --sea-soft:#0F3632;
  --coral:#FF8159; --coral-soft:#3D2117;
  --up:#FF6B6B; --down:#3CC58A; --flat:#9AA4B4; --ok:#3CC58A; --bad:#FF6B6B; --warn-ink:#F5BC3A; --coral-ink:#FF8159; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}}
:root[data-theme="dark"]{
  --bg:#0E141C; --bg-2:#141C27; --surface:#18222F; --surface-2:#1D2836; --line:#2A3646;
  --ink:#F2F4F7; --ink-2:#B4BDCB; --ink-3:#9AA4B4;
  --gold:#F5BC3A; --gold-deep:#F5BC3A; --gold-soft:#3A2F14;
  --sky:#4FB0F2; --sky-soft:#13304A; --sea:#2CC6B6; --sea-soft:#0F3632;
  --coral:#FF8159; --coral-soft:#3D2117;
  --up:#FF6B6B; --down:#3CC58A; --flat:#9AA4B4; --ok:#3CC58A; --bad:#FF6B6B; --warn-ink:#F5BC3A; --coral-ink:#FF8159; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.6 system-ui,-apple-system,'PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;line-height:1.3}
h2{font-size:18px;font-weight:900}
h3{font-size:15px;font-weight:700}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:1fr;min-height:100vh}
.side{display:none}
.main{padding:0 16px 96px;max-width:1080px;width:100%;margin:0 auto;min-width:0}
.topbar{display:flex;align-items:center;gap:10px;padding:14px 0 10px;position:sticky;top:0;z-index:5;background:linear-gradient(var(--bg) 75%,transparent)}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.5px}
.brand img{width:38px;height:38px;object-fit:contain}
.brand b{font-family:var(--num);font-size:20px;background:linear-gradient(180deg,#F7C948,#B97A06);-webkit-background-clip:text;background-clip:text;color:transparent}
.grow{flex:1}
.rolepill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 4px;display:flex;gap:2px;font-size:12px}
.rolepill button{border:0;background:none;border-radius:999px;padding:4px 10px;color:var(--ink-2)}
.rolepill button.on{background:var(--gold);color:#3A2600;font-weight:700}
.iconbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);border-top:1px solid var(--line);display:flex;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--ink-3);padding:4px 0;border-radius:12px}
.tabbar a.on{color:var(--gold-deep);font-weight:700}
.tabbar a.on svg{stroke:var(--gold-deep)}
.tabbar svg,.side svg{width:22px;height:22px;fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:960px){
  .app{grid-template-columns:232px 1fr}
  .side{display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;padding:20px 14px;border-right:1px solid var(--line);background:var(--surface)}
  .side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--ink-2);font-weight:500}
  .side a.on{background:var(--gold-soft);color:var(--gold-deep);font-weight:700}
  .side a.on svg{stroke:var(--gold-deep)}
  .side .sep{margin:12px 12px 4px;font-size:12px;color:var(--ink-3)}
  .tabbar{display:none}
  .main{padding:0 32px 48px}
  .topbar .brand{display:none}
}

/* ---------- primitives ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.card + .card,.stack > * + *{margin-top:12px}
.ch{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.sub{color:var(--ink-3);font-size:12.5px}
.p{color:var(--ink-2);margin:0}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);white-space:nowrap}
.chip.gold{background:var(--gold-soft);color:var(--gold-deep)}
.chip.sky{background:var(--sky-soft);color:var(--sky)}
.chip.sea{background:var(--sea-soft);color:var(--sea)}
.chip.coral{background:var(--coral-soft);color:var(--coral)}
.chip.ok{background:var(--sea-soft);color:var(--ok)}
.chip.warn{background:var(--gold-soft);color:var(--warn-ink)}
.chip.bad{background:var(--coral-soft);color:var(--bad)}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 14px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.btn.pri{background:linear-gradient(180deg,#F7C948,#E9A91B);border-color:#D89A10;color:#3A2600}
.btn.sm{padding:4px 10px;font-size:12.5px;border-radius:10px}
.btn.ghost{background:transparent}
.row{display:flex;gap:12px;flex-wrap:wrap}
.grid2{display:grid;gap:12px;grid-template-columns:1fr}
.grid3{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.grid2>*,.grid3>*{min-width:0}
@media (min-width:720px){.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:repeat(3,1fr)}}
.up{color:var(--up)} .down{color:var(--down)}
.pagehead{display:flex;align-items:flex-end;gap:12px;margin:6px 0 14px;flex-wrap:wrap}
.pagehead h1{font-size:24px;font-weight:900}
.seg{display:flex;background:var(--bg-2);border-radius:14px;padding:4px;gap:4px;overflow-x:auto}
.seg a,.seg button{border:0;background:none;padding:7px 14px;border-radius:10px;color:var(--ink-2);font-weight:700;font-size:14px;white-space:nowrap}
.seg .on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
details.more{border-top:1px dashed var(--line);margin-top:12px;padding-top:8px}
details.more summary{cursor:pointer;color:var(--sky);font-weight:700;font-size:13.5px;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:' ▾'}
details.more[open] summary::after{content:' ▴'}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{color:var(--ink-3);font-weight:500;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line)}
.tw{overflow-x:auto;margin:0 -4px}
.tw td:first-child{white-space:nowrap}
.r{text-align:right}
.banner{display:flex;gap:12px;align-items:center;border-radius:var(--r);padding:12px 14px;background:var(--gold-soft);color:var(--gold-deep);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.banner b{color:var(--ink)}
.kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.kpi .k{font-size:12px;color:var(--ink-3)}
.kpi .v{font-family:var(--num);font-weight:800;font-size:20px}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}
.field input,.field textarea,.field select{font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.field textarea{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.6}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:#1D2633;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:50;opacity:0;transition:.2s;pointer-events:none}
.toast.show{opacity:1}
.readonly{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-3)}

/* ---------- hero ---------- */
.hero{position:relative;border-radius:22px;overflow:hidden;min-height:168px;background:#7CC7F2 url(assets/hero.webp) center/cover;display:flex;align-items:flex-end;margin-bottom:14px}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,30,50,0) 30%,rgba(10,25,40,.72))}
.hero .in{position:relative;z-index:1;padding:16px;color:#fff;width:100%}
.hero .in h1{font-size:22px;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.hero .in p{margin:2px 0 0;color:#FDEBC0;font-size:13px}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(1200px 600px at 50% -10%,#BDE6FF,transparent),var(--bg)}
.login .box{width:100%;max-width:420px}
.login .pic{aspect-ratio:16/10;border-radius:24px;background:url(assets/hero.webp) center/cover;box-shadow:var(--shadow)}
.line-btn{width:100%;justify-content:center;background:#06C755;border:0;color:#fff;font-size:16px;padding:14px;border-radius:14px;font-weight:700;display:flex;gap:10px;align-items:center}
.steps{display:flex;gap:6px;margin-top:14px}
.steps div{flex:1;font-size:12px;text-align:center;color:var(--ink-3)}
.steps i{display:block;height:4px;border-radius:4px;background:var(--line);margin-bottom:6px}
.steps .on i{background:var(--gold)}
.steps .on{color:var(--ink);font-weight:700}

/* ---------- brief ---------- */
.dir{display:flex;align-items:center;gap:14px}
.dir .big{font-size:34px;font-weight:900;letter-spacing:2px;white-space:nowrap;flex:none}
.dir.bull .big{color:var(--up)} .dir.bear .big{color:var(--down)} .dir.neu .big{color:var(--warn)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:720px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface-2)}
.tile .n{font-size:12px;color:var(--ink-3)}
.tile .v{font-family:var(--num);font-weight:700;font-size:16px}
.bars .b{display:grid;grid-template-columns:84px 1fr 60px;align-items:center;gap:8px;font-size:13px;margin:6px 0}
.bars .track{height:10px;border-radius:6px;background:var(--bg-2);position:relative;overflow:hidden}
.bars .fill{position:absolute;top:0;bottom:0;border-radius:6px}
.lights{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:720px){.lights{grid-template-columns:repeat(4,1fr)}}
.light{border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;gap:10px;align-items:center;background:var(--surface-2)}
.dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent)}
.dot.g{color:var(--ok);background:var(--ok)} .dot.y{color:var(--warn);background:var(--warn)} .dot.r{color:var(--bad);background:var(--bad)}
.timeline{display:flex;gap:0;overflow-x:auto;padding:6px 0}
.timeline .ev{flex:1 0 110px;border-top:3px solid var(--line);padding:8px 8px 0 0;position:relative;font-size:13px}
.timeline .ev::before{content:'';position:absolute;top:-8px;left:0;width:13px;height:13px;border-radius:50%;background:var(--surface);border:3px solid var(--line)}
.timeline .ev.past{border-color:var(--sea)} .timeline .ev.past::before{border-color:var(--sea);background:var(--sea)}
.timeline .ev.next::before{border-color:var(--gold);background:var(--gold)}
.pick{display:grid;grid-template-columns:1fr;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.pick:last-child{border-bottom:0}
.rng{position:relative;height:28px}
.rng .ln{position:absolute;left:0;right:0;top:12px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--sea),var(--gold),var(--coral))}
.rng .mk{position:absolute;top:2px;width:2px;height:24px;background:var(--ink)}
.rng .mk span{position:absolute;top:-2px;left:6px;font-size:11px;font-family:var(--num);font-weight:700;white-space:nowrap;background:var(--surface);padding:0 4px;border-radius:4px}
.rng .lb{position:absolute;top:20px;font-size:11px;color:var(--ink-3);font-family:var(--num);white-space:nowrap}

/* ---------- 12 grid ---------- */
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}

/* ---------- stock detail ---------- */
.price{font-family:var(--num);font-size:36px;font-weight:800;line-height:1}
.band{position:relative;height:56px;margin:22px 0 8px}
.band .seg3{position:absolute;top:18px;height:16px;border-radius:4px}
.band .pm{position:absolute;top:2px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.band .pm b{font-family:var(--num);font-size:12px;background:var(--ink);color:var(--bg);padding:1px 6px;border-radius:6px;white-space:nowrap}
.band .pm i{width:2px;height:36px;background:var(--ink)}
.band .tk{position:absolute;top:38px;transform:translateX(-50%);font-size:11px;color:var(--ink-3);font-family:var(--num);white-space:nowrap}
.gate{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.gate:last-child{border-bottom:0}
.meter{grid-column:1/-1;height:6px;border-radius:4px;background:var(--bg-2);position:relative}
.meter .f{position:absolute;inset:0 auto 0 0;border-radius:4px}
.meter .th{position:absolute;top:-3px;width:2px;height:12px;background:var(--ink)}
.coord{display:inline-flex;border-radius:12px;overflow:hidden;font-weight:900}
.coord span{padding:6px 12px;color:#fff}
.coord .st{background:var(--ink);color:var(--bg)}

/* ---------- admin ---------- */
.ring{--p:50;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--bg-2) 0);display:grid;place-items:center;flex:none}
.ring div{width:72px;height:72px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center;line-height:1.1}
.member{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.member:last-child{border-bottom:0}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;flex:none}
.ver{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ph{border:2px dashed var(--gold);border-radius:var(--r);background:repeating-linear-gradient(45deg,var(--gold-soft),var(--gold-soft) 10px,transparent 10px,transparent 20px);display:grid;place-items:center;text-align:center;padding:16px;color:var(--gold-deep);font-weight:700;font-size:13px}
.empty{text-align:center;padding:24px 12px;color:var(--ink-3)}

/* ---------- v4.1 additions ---------- */
:root{--navy:#0F2A4A}
.chip.up{background:var(--coral-soft);color:var(--up)} .chip.down{background:var(--sea-soft);color:var(--down)}
.dot.x{color:var(--ink-3);background:var(--ink-3)}
.ovb{display:inline-block;font-size:10.5px;font-weight:700;background:var(--gold);color:#3A2600;border-radius:6px;padding:0 5px;margin-left:2px}
.fxbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 12px}
/* brief */
.bhead{display:flex;align-items:center;gap:12px;background:#0F2A4A;color:#fff;border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.bhead .bt{font-size:22px;font-weight:900;letter-spacing:2px;white-space:nowrap}
.bhead .bs{font-size:12px;color:#C9D6E6;margin-top:2px}
.bhead > div:first-child{flex:1;min-width:0}
.bhead .bd{color:#F7C948;font-weight:800;font-size:16px;white-space:nowrap}
.bhead .bp{font-size:12px;color:#C9D6E6}
.bfoot{background:#0F2A4A;color:#F7C948;border-radius:var(--r);padding:14px 16px;margin-top:12px;font-size:15px}
.card.navy{background:#0F2A4A;border-color:#0F2A4A}
.card.navy .sub{color:#C9D6E6}
.card.navy .ring{background:conic-gradient(#F5BC3A calc(var(--p)*1%),#1E3B5E 0)} .card.navy .ring div{background:#0F2A4A;color:#fff}
.card.gold{background:color-mix(in srgb,var(--gold-soft) 55%,var(--surface));border-color:var(--gold)}
.card.rose{background:color-mix(in srgb,var(--coral-soft) 55%,var(--surface));border-color:color-mix(in srgb,var(--coral) 40%,transparent)}
.card.focus{border-color:var(--gold);border-width:2px}
.eyebrow{font-size:12px;font-weight:700;color:var(--gold-deep);letter-spacing:1px}
.lead{font-size:16.5px;font-weight:700;margin:6px 0 10px;line-height:1.7}
.tile.big .v{font-size:20px}
.ustk{display:grid;grid-template-columns:1fr;gap:6px;margin-top:10px}
@media (min-width:720px){.ustk{grid-template-columns:repeat(3,1fr)}}
.usr{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13.5px;background:var(--surface-2)}
.usr.hot{border-color:var(--down);background:color-mix(in srgb,var(--sea-soft) 60%,var(--surface))}
.usr b{width:52px}
.nt{color:#C9D6E6;font-size:13px}
.nside{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 12px;color:#C9D6E6;font-size:12.5px;min-width:220px;flex:1}
.nside b{color:#F7C948;display:block;font-size:14px;margin-bottom:2px}
.lightbar{display:flex;height:8px;border-radius:6px;overflow:hidden;margin-bottom:12px;gap:2px}
.lightbar span{font-size:0}
.lr{background:var(--bad)} .ly{background:var(--warn)}
.sig{display:grid;grid-template-columns:20px 130px 1fr;gap:6px 10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.sig .dot{margin-top:5px}
@media (max-width:560px){.sig{grid-template-columns:20px 1fr}.sig .st{grid-column:2}}
.ctrl{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0 4px}
.ci{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:4px 0}
.ci .dot{width:10px;height:10px;margin-top:5px}
.readline{margin:10px 0 0;font-weight:700;color:var(--coral-ink);font-size:14px}
.tag{font-size:34px;font-weight:900;letter-spacing:3px;line-height:1.1}
.tag.down{color:var(--down)}
.fr{font-size:18px;font-weight:800;margin-top:4px}
.h3c{color:var(--gold-deep);font-size:14px;margin-bottom:4px}
.obs{margin:0;padding-left:22px;color:var(--ink-2);font-size:14px}
.obs li{margin:3px 0}
.dirpill{background:var(--gold-deep);color:#fff;border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px}
:root[data-theme="dark"] .dirpill{color:#1D2633}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dirpill{color:#1D2633}}
.orange{position:relative;height:70px;margin-top:22px}
.orange.compact{height:62px;margin-top:20px}
.orange .track{position:absolute;left:0;right:0;top:24px;height:8px;border-radius:6px;background:var(--line)}
.orange .zone{position:absolute;top:20px;height:16px;border-radius:6px;background:linear-gradient(90deg,#F7C948,#E9A91B)}
.orm{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.orm i{width:2px;height:40px;background:var(--ink);order:2}
.orm span{order:1;font-size:11px;font-family:var(--num);font-weight:700;white-space:nowrap;margin-bottom:-2px}
.orm.night i{background:var(--down)}
.orm.night span{color:var(--down)}
.orl{position:absolute;top:44px;transform:translateX(-50%);font-family:var(--num);font-weight:700;font-size:12px;white-space:nowrap}
.orange .orl{top:52px}
.secrow{font-weight:900;font-size:13px;padding:10px 0 4px;letter-spacing:2px}
.secrow.spec{color:var(--coral)} .secrow.growth{color:var(--sky)} .secrow.value{color:var(--sea)}
.prow{display:block;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:6px 0;background:var(--surface-2);transition:.15s}
.prow:hover{border-color:var(--gold)}
.prow.below{background:color-mix(in srgb,#FFF27A 55%,var(--surface));border-color:#E6C800}
:root[data-theme="dark"] .prow.below{background:#3A3410}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .prow.below{background:#3A3410}}
.pr1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pxv{font-weight:800;font-size:18px}
.pr2{display:flex;gap:8px 12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);margin-top:4px;align-items:center}
.pill{border-radius:999px;padding:1px 9px;font-weight:700;font-size:12px}
.pill.g{background:var(--sea-soft);color:var(--ok)} .pill.b{background:var(--sky-soft);color:var(--sky)} .pill.r{background:var(--coral-soft);color:var(--bad)}
.pill.hl{background:#FFE14D;color:#4A3A00}
.pr3{font-size:13px;color:var(--ink-2);margin-top:2px}
.prow .rng{height:14px;margin:6px 0 2px}
.prow .rng .ln{top:5px}
.rng .tick{position:absolute;top:1px;width:2px;height:12px;background:var(--ink-3)}
.prow .rng .mk{top:0;height:14px;width:4px;border-radius:2px}
.trig{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center;background:#0F2A4A;color:#fff;border-radius:12px;padding:10px 12px;margin-top:10px;font-size:13px}
.trig b{color:#F7C948}
.xx{color:#FF8A8A;font-weight:900}
.fnote{margin:10px 0 0;padding-left:20px;font-size:12px;color:var(--ink-3)}
.mrow{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.mrow:last-child{border-bottom:0}
.mrow b{color:var(--gold-deep)}
@media (max-width:560px){.mrow{grid-template-columns:1fr;gap:2px}}
.twl{margin:0;padding-left:18px;columns:2;column-gap:28px;font-size:14px;color:var(--ink-2)}
.twl li{margin:4px 0;break-inside:avoid}
.twl li.em{color:var(--bad);font-weight:700}
.twl.one{columns:1}
@media (max-width:720px){.twl{columns:1}}
.qcards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
@media (min-width:720px){.qcards{grid-template-columns:repeat(4,1fr)}}
.qc{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--ink-2)}
.qc b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}
.mon{display:grid;gap:8px}
.mr{display:grid;grid-template-columns:1fr;gap:6px;border:1px solid var(--line);border-left:5px solid var(--ok);border-radius:12px;padding:10px 12px;background:var(--surface-2)}
.mr.kr{border-left-color:var(--bad)} .mr.ky{border-left-color:var(--warn)}
@media (min-width:860px){.mr{grid-template-columns:200px 1.2fr 1.3fr 1.4fr;align-items:center}}
.mh{display:flex;align-items:center;gap:8px}
.mv .num{font-weight:700}
.mg{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.mg i,.ma i{font-style:normal;color:var(--ink-3);font-size:11px;margin-right:6px}
.ma{font-size:13px}
.timeline .ev.today::before{border-color:var(--coral);background:var(--coral)}
.timeline .ev.today{border-color:var(--coral)}
.ring.big{width:112px;height:112px}
.ring.big div{width:88px;height:88px}
.gatepill{background:#16A34A;color:#fff;font-weight:800;border-radius:999px;padding:8px 16px;white-space:nowrap}
details.note{border-bottom:1px solid var(--line);padding:8px 0}
details.note summary{cursor:pointer;font-weight:700;list-style:none}
details.note summary::-webkit-details-marker{display:none}
details.note summary::before{content:'▸ ';color:var(--gold-deep)}
details.note[open] summary::before{content:'▾ '}
details.note p{margin-top:6px;font-size:13.5px}
.alert{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface-2);font-size:13.5px}
.dir.bear .big{color:var(--down)}
/* stock report */
.kpis5{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
@media (min-width:720px){.kpis5{grid-template-columns:repeat(5,1fr)}}
.ovcard{border:2px dashed var(--gold)}
.ovnote{background:var(--gold-soft);border-radius:12px;padding:10px 12px;font-size:14px}
.trigs{display:grid;gap:8px}
.tg{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface-2)}
.tg .tk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--coral-soft);color:var(--bad);flex:none}
.tg.on .tk{background:var(--sea-soft);color:var(--ok)}
svg.chart{width:100%;height:auto;display:block;overflow:visible}
svg.chart text{font-family:var(--num);font-size:12px;fill:var(--ink-3)}
svg.chart .ax[text-anchor],svg.chart .vl{font-size:14px}
svg.chart .vl{text-anchor:middle;fill:var(--ink-2);font-weight:700}
svg.chart .px{fill:none;stroke:var(--ink);stroke-width:2}
svg.chart .tl{font-weight:700}
svg.chart .rv1{fill:color-mix(in srgb,var(--sea) 30%,transparent)} svg.chart .rv2{fill:color-mix(in srgb,var(--sea) 14%,transparent)}
svg.chart .rv3{fill:color-mix(in srgb,var(--sky) 16%,transparent)} svg.chart .rv4{fill:color-mix(in srgb,var(--coral) 18%,transparent)}
svg.chart .base{stroke:var(--line)}
svg.chart .bu{fill:var(--up)} svg.chart .bd{fill:var(--down)} svg.chart .bg{fill:var(--gold)}
.vt{border-left:2px solid var(--line);margin-left:6px;padding-left:14px}
.vi{position:relative;padding:6px 0;display:flex;gap:10px;flex-wrap:wrap;font-size:14px}
.vi::before{content:'';position:absolute;left:-21px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--line)}
.vi.gold::before{background:var(--gold)}
.cin{width:72px;text-align:right;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);padding:3px 6px}
/* ---------- K 線 ---------- */
.kctl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.seg.sm{padding:3px;border-radius:10px}
.seg.sm button{padding:4px 10px;font-size:12.5px;border-radius:8px}
.kinfo{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;font-family:var(--num);color:var(--ink-2);min-height:40px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin-bottom:6px}
.kinfo .c5{color:var(--gold-deep)} .kinfo .c20{color:var(--sky)} .kinfo .c60{color:#6A4BC4} .kinfo .cbb{color:var(--ink-3)} .kinfo .crsi{color:#6A4BC4}
:root[data-theme="dark"] .kinfo .c60,:root[data-theme="dark"] .kinfo .crsi{color:#B39DF0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kinfo .c60,:root:not([data-theme="light"]) .kinfo .crsi{color:#B39DF0}}
svg.kline{width:100%;height:auto;display:block;touch-action:pan-y}
svg.kline text{font-family:var(--num);font-size:11px;fill:var(--ink-3)}
svg.kline .kbg{fill:none}
svg.kline .kg{stroke:var(--line);stroke-width:1}
svg.kline .ku{fill:var(--up);stroke:var(--up)} svg.kline .kd{fill:var(--down);stroke:var(--down)}
svg.kline line.ku,svg.kline line.kd{stroke-width:1}
svg.kline .kvol{opacity:.55;stroke:none}
svg.kline .km5,svg.kline .km20,svg.kline .km60,svg.kline .krsi,svg.kline .kvma,svg.kline .kbbl{fill:none;stroke-width:1.4}
svg.kline .km5{stroke:var(--gold)} svg.kline .km20{stroke:var(--sky)} svg.kline .km60{stroke:#8E6CE0} svg.kline .krsi{stroke:#8E6CE0} svg.kline .kvma{stroke:var(--ink-3);stroke-dasharray:3 3}
svg.kline .kbb{fill:color-mix(in srgb,var(--sky) 9%,transparent)} svg.kline .kbbl{stroke:color-mix(in srgb,var(--sky) 55%,transparent);stroke-dasharray:4 3}
svg.kline .kzone{fill:color-mix(in srgb,#8E6CE0 8%,transparent)}
svg.kline .kwait{stroke:var(--sea);stroke-dasharray:6 4;stroke-width:1.3} svg.kline .ktgt{stroke:var(--coral);stroke-dasharray:6 4;stroke-width:1.3}
svg.kline .kwaitt{fill:var(--sea);font-weight:700} svg.kline .ktgtt{fill:var(--coral);font-weight:700}
svg.kline .kpx{fill:var(--ink)} svg.kline .kpxt{fill:var(--bg);font-weight:700}
svg.kline .kpanel{font-weight:700;fill:var(--ink-2)}
svg.kline .kcross{stroke:var(--ink-2);stroke-dasharray:3 3}
svg.kline .khit{fill:transparent;cursor:crosshair}
.kwrap{overflow-x:auto;direction:rtl}
.kwrap svg{direction:ltr}
@media (max-width:600px){svg.kline{min-width:640px}}
.ksig{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
@media (min-width:720px){.ksig{grid-template-columns:repeat(3,1fr)}}
.ks{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface-2);font-size:13.5px}
.ks .dot{margin-top:5px}

/* 表格版 12 宮格／ETF／72 法則 */
.g12{min-width:720px}
.g12 td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.g12 tr.gs td{border-top:3px solid var(--bg)}
.g12 .gh{width:44px;text-align:center;font-weight:900;color:#fff;font-size:14px;letter-spacing:2px;border-radius:12px;border-bottom:none}
/* 白字底色寫死深色：主題色在深色模式會變淺 */
.gh.value,.fill-sea{background:#0B7F74} .gh.growth,.fill-sky{background:#1F6FB2} .gh.spec,.fill-coral{background:#C24A22}
.g12 .nm{white-space:nowrap}
.g12 .nm a b{font-size:14.5px}
.g12 .wt{font-weight:800;color:var(--gold-deep);font-size:15px}
.g12 th.wt{color:var(--gold-deep);font-weight:800}
.g12 .zc{text-align:center;font-family:var(--num);font-size:13px;color:var(--ink-3);white-space:nowrap}
.g12 th.zc{color:var(--ink-2);font-weight:700}
.g12 td.zc.on{font-weight:800;border-radius:8px}
.g12 td.zc.on.value{background:var(--sea-soft);color:var(--sea)} .g12 td.zc.on.growth{background:var(--sky-soft);color:var(--sky)} .g12 td.zc.on.spec{background:var(--coral-soft);color:var(--coral)}
.g12 tr.below td:not(.gh){background:color-mix(in srgb,#FFF27A 45%,var(--surface))}
:root[data-theme="dark"] .g12 tr.below td:not(.gh){background:#3A3410}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .g12 tr.below td:not(.gh){background:#3A3410}}
.ovb{display:inline-block;font-size:10.5px;font-weight:700;background:var(--gold);color:#3A2600;border-radius:6px;padding:0 5px;margin-left:2px}
.alloc{display:flex;gap:6px;border-radius:14px;overflow:hidden}
.alloc .seg{padding:12px;color:#fff;display:flex;flex-direction:column;gap:2px;min-width:0}
.alloc .seg span{font-size:12px;opacity:.9;font-family:var(--num);word-break:break-all}
.alloc .core{background:linear-gradient(135deg,#0FA89A,#2496E3)} .alloc .sat{background:linear-gradient(135deg,#F0663A,#E9A91B)}
.rate{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rate .kpi .v small{font-size:13px;color:var(--ink-3);font-weight:500}
.g12 td.hit,.kpi.hit{box-shadow:inset 0 0 0 2px var(--up);border-radius:8px;color:var(--up);font-weight:800}
.g12 td.near{box-shadow:inset 0 0 0 2px var(--warn);border-radius:8px}
.kpi.hit{box-shadow:0 0 0 2px var(--up)} .kpi.near{box-shadow:0 0 0 2px var(--warn)}
.bt{display:inline-block;margin-left:5px;font-size:10.5px;font-weight:800;border-radius:6px;padding:0 5px;vertical-align:1px;font-family:var(--sans,inherit)}
.bt.hit{background:var(--up);color:#fff} .bt.near{background:var(--gold-soft);color:var(--warn)}
.legend .lg{width:12px;height:12px;border-radius:3px;display:inline-block;background:none}
.legend .lg.hit{box-shadow:inset 0 0 0 2px var(--up)} .legend .lg.near{box-shadow:inset 0 0 0 2px var(--warn)}
.art{height:84px;width:auto;flex:none;margin:-10px 0 -6px;filter:drop-shadow(0 6px 10px rgba(80,50,0,.12))}
.art.ico{height:44px;margin:0}
.art.big{height:150px;margin:0 auto;display:block}
.hero.morning{background:url(assets/il-e.png) right bottom/auto 100% no-repeat,linear-gradient(180deg,#9ED8F7,#FFF1D6)}
.hero.morning::after{background:linear-gradient(90deg,rgba(10,30,50,.55),rgba(10,30,50,0) 60%)}
@media (max-width:600px){.art{height:64px}}
.dbl{height:6px;border-radius:99px;background:var(--bg-2);margin:4px 0 2px;width:120px;overflow:hidden}
.dbl i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--up))}
.code{background:var(--bg-2);border-radius:10px;padding:10px 12px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;white-space:pre-wrap;word-break:break-all;margin:8px 0 0}
code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.picker{position:relative;margin-top:4px}
.picker input{width:100%}
.pk-list{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.pk-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:13.5px;flex-wrap:wrap}
.sug{font-size:11px;color:var(--ink-3);margin-top:2px;white-space:nowrap}
.sug.off{color:var(--warn);font-weight:700}
td.nw{white-space:nowrap}
#fx-prompt{width:100%;resize:vertical;font:inherit;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.fxdiff{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.fxq{margin-top:2px;color:var(--ink);font-size:14px}
details.more.card summary{cursor:pointer;font-weight:700}
.sched{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sched>b{font-size:18px;color:var(--gold-deep);width:52px}
.g12 td.sellx{box-shadow:inset 0 0 0 2px var(--up);background:var(--coral-soft);color:var(--up);font-weight:800;border-radius:8px}
.bt.sell{background:#C92E2E;color:#fff}
.legend .lg.sell{background:var(--up)}
.banner.sellban{margin-bottom:12px;border-color:var(--up);background:var(--coral-soft);color:var(--ink)}
.gh.na,.fill-na{background:#5E6878}
.conn{display:flex;flex-direction:column;gap:14px}
.cstep{display:flex;gap:12px;align-items:flex-start}
.cstep .cn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#3A2600;display:grid;place-items:center;font-weight:900}

/* ---------- 正式版：四種狀態、盤中、備援 ---------- */
.skel{display:flex;flex-direction:column;gap:12px}
.skel i{display:block;height:84px;border-radius:var(--r);background:linear-gradient(90deg,var(--bg-2),var(--surface-2),var(--bg-2));background-size:200% 100%;animation:skel 1.2s linear infinite}
.skel i:first-child{height:44px;width:60%}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel i{animation:none}}
.state{text-align:center;padding:28px 16px}
.state .art.big{display:block;margin:0 auto 8px}
.state p{margin:6px 0 12px;color:var(--ink-2)}
.banner.delay{margin-bottom:12px;border-color:var(--warn)}
.banner.err{margin-bottom:12px;border-color:var(--bad);background:var(--coral-soft);color:var(--ink)}
.chip.fb{background:var(--gold-soft);color:var(--gold-deep);border:1px dashed var(--gold-deep)}
.intra{font-size:11px;font-weight:700;color:var(--sky);margin-left:4px}
.login .dev{margin-top:14px;display:flex;gap:8px}
.login .dev input{flex:1;font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.fhq{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.fhq fieldset{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:0}
.fhq legend{font-weight:700;font-size:13.5px;padding:0 4px}
.fhq label{display:flex;gap:6px;align-items:flex-start;font-size:13.5px;padding:2px 0}
.fhgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.fhgrid div{border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center;font-size:13px;color:var(--ink-3)}
.fhgrid div.on{border:2px solid var(--gold);background:var(--gold-soft);color:var(--ink);font-weight:900}
.keyonce{background:var(--bg-2);border:1px dashed var(--gold-deep);border-radius:10px;padding:10px 12px;font-family:ui-monospace,Menlo,monospace;word-break:break-all;margin-top:8px}
.dot.o{color:#F08A24;background:#F08A24} .dot.rr{color:var(--bad);background:var(--bad);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--bad)}