/* ===== QUANT · RL 霓虹 3D 主題 ===== */
:root{
  --bg:#05060b; --panel:rgba(11,15,28,.84); --line:rgba(34,230,255,.18);
  --text:#e6ecff; --muted:#8f97ba; --cy:#22e6ff; --vi:#c08bff;
  --up:#2ee6a6; --down:#ff6b93; --warn:#ffb547;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans TC',sans-serif;min-height:100%}
a{color:var(--cy)}a:hover{color:#8ff3ff}
button{font-family:inherit}
.hidden{display:none!important}

/* 背景：透視網格地板、地平線光暈、掃描線 */
.sky{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 40% at 50% 100%,rgba(176,108,255,.16),transparent 70%);z-index:0}
.floor{position:fixed;left:-50%;width:200%;bottom:-8vh;height:62vh;pointer-events:none;transform:perspective(520px) rotateX(72deg);transform-origin:50% 100%;background-image:linear-gradient(rgba(34,230,255,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(34,230,255,.32) 1px,transparent 1px);background-size:64px 64px;animation:fly 3s linear infinite;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%);z-index:0}
@keyframes fly{to{background-position:0 64px}}
.scanlines{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);z-index:0}

.wrap{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:24px 20px 64px;display:flex;flex-direction:column;gap:20px}
.glass{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 44px rgba(0,0,0,.55);transition:transform .35s ease,box-shadow .35s ease}
.hud::before,.hud::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none}
.hud::before{top:-1px;left:-1px;border-top:2px solid var(--cy);border-left:2px solid var(--cy);border-top-left-radius:14px;filter:drop-shadow(0 0 4px var(--cy))}
.hud::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--vi);border-right:2px solid var(--vi);border-bottom-right-radius:14px;filter:drop-shadow(0 0 4px var(--vi))}
.tilt:hover{transform:perspective(1000px) rotateX(4deg) rotateY(-4deg) translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 60px rgba(0,0,0,.6),0 0 28px rgba(34,230,255,.2)}
.pad{padding:20px}
.row{display:flex;flex-wrap:wrap;gap:20px}
.col{display:flex;flex-direction:column;gap:12px}
.grow{flex:999 1 560px;min-width:0}
.side{flex:1 1 300px;min-width:0}
.between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}

.orb{font-family:'Orbitron','Space Grotesk',sans-serif;letter-spacing:.08em}
.disp{font-family:'Space Grotesk','Noto Sans TC',sans-serif;letter-spacing:.02em}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}.small{font-size:13px}.xs{font-size:12px}
.up{color:var(--up)}.down{color:var(--down)}.cy{color:var(--cy)}.vi{color:var(--vi)}.warn{color:var(--warn)}
.glowc{text-shadow:0 0 16px rgba(34,230,255,.55)}
h2.h2{margin:0;font-size:18px;font-weight:700}

/* 3D 核心 */
.core-wrap{perspective:400px;flex:0 0 auto}
.core{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:coreSpin 9s linear infinite}
.core .r{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(34,230,255,.75);box-shadow:0 0 10px rgba(34,230,255,.5)}
.core .r2{transform:rotateY(60deg);border-color:rgba(192,139,255,.8);box-shadow:0 0 10px rgba(192,139,255,.5)}
.core .r3{transform:rotateY(120deg)}
.core .r4{transform:rotateX(90deg);border-color:rgba(46,230,166,.6);box-shadow:0 0 10px rgba(46,230,166,.4)}
.core .nucleus{position:absolute;left:50%;top:50%;width:28%;height:28%;transform:translate(-50%,-50%);border-radius:50%;background:var(--cy);box-shadow:0 0 18px var(--cy),0 0 36px rgba(34,230,255,.6)}
.core.violet .nucleus{background:var(--vi);box-shadow:0 0 22px var(--vi),0 0 44px rgba(192,139,255,.6)}
@keyframes coreSpin{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}

/* 市場星球 */
.stage{perspective:1000px;display:flex;align-items:center;justify-content:center;min-height:400px;flex:1 1 360px}
.globe{--r:170px;position:relative;width:340px;height:340px;transform-style:preserve-3d;animation:globe 36s linear infinite}
.stage:hover .globe{animation-play-state:paused}
@keyframes globe{from{transform:rotateX(-16deg) rotateY(0)}to{transform:rotateX(-16deg) rotateY(360deg)}}
.mer{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(34,230,255,.2)}
.par{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(192,139,255,.22);transform:rotateX(90deg)}
.par.n{transform:translateY(calc(var(--r) * -0.643)) rotateX(90deg) scale(.766)}
.par.s{transform:translateY(calc(var(--r) * 0.643)) rotateX(90deg) scale(.766)}
.node{--lat:0deg;--lon:0deg}
.node{transform:rotateY(var(--lon)) rotateX(var(--lat)) translateZ(var(--r))}
.node{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.node .lab{position:absolute;transform:translate(-50%,-50%);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgba(5,6,11,.85);border:1px solid currentColor;font:600 12px 'JetBrains Mono',monospace;white-space:nowrap;box-shadow:0 0 12px currentColor}
.node .pt{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}

/* 元件 */
.tab{min-height:44px;padding:0 18px;border-radius:10px;border:1px solid rgba(34,230,255,.22);background:transparent;color:#cfd6f5;font:500 15px 'Noto Sans TC',sans-serif;cursor:pointer;transition:all .2s}
.tab:hover{border-color:var(--cy);color:#fff;box-shadow:0 0 14px rgba(34,230,255,.3)}
.tab.on{background:var(--cy);color:#041016;border-color:var(--cy);box-shadow:0 0 22px rgba(34,230,255,.55)}
.btn{min-height:40px;padding:0 14px;border-radius:9px;border:1px solid rgba(34,230,255,.35);background:rgba(34,230,255,.08);color:#bff6ff;font:500 14px 'Noto Sans TC',sans-serif;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap}
.btn:hover{background:rgba(34,230,255,.18);box-shadow:0 0 14px rgba(34,230,255,.35)}
.btn:disabled{opacity:.5;cursor:wait}
.btn.vio{border-color:rgba(192,139,255,.45);background:rgba(192,139,255,.1);color:#e3ccff}
.btn.danger{border-color:rgba(255,107,147,.55);background:rgba(255,107,147,.1);color:#ffc2d3}
.btn.danger:hover{box-shadow:0 0 16px rgba(255,107,147,.45)}
.btn.big{min-height:46px;padding:0 22px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.12);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot.run{background:var(--up);box-shadow:0 0 8px var(--up)}.dot.stop{background:var(--warn);box-shadow:0 0 8px var(--warn)}.dot.off{background:#5a6080}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap}
.tag.scan{background:rgba(34,230,255,.12);color:#8ff3ff}.tag.ai{background:rgba(192,139,255,.15);color:#dcc0ff}
.tag.long{background:rgba(46,230,166,.13);color:#7dffd0}.tag.short{background:rgba(255,107,147,.13);color:#ffb3c8}.tag.hold{background:rgba(255,255,255,.07);color:#aab2d4}
.tblbox{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.tbl th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:10px 12px;border-bottom:1px solid rgba(34,230,255,.14);white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap}
.tbl tr:hover td{background:rgba(34,230,255,.05)}
.lnk{background:none;border:none;color:var(--text);font:700 15px 'Space Grotesk',sans-serif;cursor:pointer;padding:6px 0;min-height:32px}
.lnk:hover{color:var(--cy);text-shadow:0 0 10px rgba(34,230,255,.6)}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;min-width:60px}
.bar>div{height:100%;border-radius:3px}
.kpi{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.kpi .v{font-size:24px;font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:999px;border:1px solid rgba(255,107,147,.35);background:rgba(255,107,147,.08);font-size:13px}
.chip button{width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:#ffc2d3;cursor:pointer}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.field input{min-height:42px;border-radius:9px;border:1px solid rgba(34,230,255,.25);background:rgba(0,0,0,.35);color:var(--text);padding:0 12px;font:500 15px 'JetBrains Mono',monospace}
.field input:focus{outline:none;border-color:var(--cy);box-shadow:0 0 12px rgba(34,230,255,.35)}
.sw{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:transparent;color:#aab2d4;cursor:pointer;font:500 13px 'Noto Sans TC',sans-serif}
.sw.on{border-color:var(--cy);color:#041016;background:var(--cy)}
.toast{position:fixed;right:20px;bottom:20px;z-index:50;max-width:420px;padding:14px 16px;border-color:rgba(192,139,255,.5)}
.toast.bad{border-color:rgba(255,107,147,.6)}
.chart-box{position:relative;height:340px;border-radius:10px;background:rgba(0,0,0,.35);overflow:hidden}
.tv-box{height:520px;border-radius:10px;overflow:hidden;border:1px solid rgba(192,139,255,.3)}
.empty{padding:28px;text-align:center;color:var(--muted)}
.holo{transform:perspective(900px) rotateX(14deg);transform-origin:50% 100%}
.loading{opacity:.55;transition:opacity .2s}

/* 登入 */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}
.login .glass{width:100%;max-width:400px;padding:32px;display:flex;flex-direction:column;gap:18px}

@media (prefers-reduced-motion: reduce){.floor,.core,.globe{animation:none}.tilt:hover{transform:none}}
@media (max-width:640px){.wrap{padding:16px 12px 48px}.grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi{padding:14px}.kpi .v{font-size:20px}.globe{--r:130px;width:260px;height:260px}}