:root{
  --bg:#070502;
  --panel:rgba(24,18,6,.62);
  --panel2:rgba(30,23,8,.5);
  --line:rgba(245,197,66,.30);
  --line-soft:rgba(245,197,66,.16);
  --gold:#f5c542;
  --gold-hi:#ffe08a;
  --gold-deep:#b8860b;
  --amber:#ffb800;
  --text:#fdf6e3;
  --muted:#b8a878;
  --subtle:#7d6f4a;
  --green:#1df2a5;
  --red:#ff4d6d;
  --shadow:0 24px 90px rgba(0,0,0,.62), 0 0 42px rgba(245,197,66,.10);
  --font:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{font-family:var(--font);color:var(--text);background:var(--bg);overflow-x:hidden}

/* ============ 背景科技渲染层 ============ */
body:before{content:"";position:fixed;inset:0;z-index:-6;
  background:
    radial-gradient(circle at 78% 12%,rgba(245,197,66,.14),transparent 30%),
    radial-gradient(circle at 15% 8%,rgba(255,140,0,.10),transparent 28%),
    radial-gradient(circle at 50% 110%,rgba(184,134,11,.16),transparent 45%),
    linear-gradient(135deg,#050402 0%,#0a0703 45%,#120b02 100%);
}
#netCanvas{position:fixed;inset:0;z-index:-4;opacity:.5}
.grid-tunnel{position:fixed;inset:-22%;z-index:-5;opacity:.34;
  background:
    repeating-linear-gradient(90deg,transparent 0 72px,rgba(245,197,66,.09) 73px,transparent 74px),
    repeating-linear-gradient(0deg,transparent 0 72px,rgba(255,184,0,.07) 73px,transparent 74px);
  transform:perspective(900px) rotateX(62deg) translateY(-16%);
  animation:tunnel 18s linear infinite;
}
@keyframes tunnel{from{background-position:0 0,0 0}to{background-position:296px 592px,592px 296px}}
.holo-ring{position:fixed;right:-10vw;top:-14vh;width:56vw;height:56vw;border-radius:50%;z-index:-3;pointer-events:none;
  background:conic-gradient(from 180deg,transparent,rgba(245,197,66,.06),rgba(255,184,0,.24),rgba(255,224,138,.14),transparent 72%);
  filter:blur(.4px) drop-shadow(0 0 40px rgba(245,197,66,.22));
  animation:ring 22s linear infinite;
}
.holo-ring:after{content:"";position:absolute;inset:13%;border:1px solid rgba(245,197,66,.22);border-radius:50%;
  box-shadow:0 0 60px rgba(255,184,0,.14) inset,0 0 24px rgba(245,197,66,.10)}
.holo-ring.b{left:-14vw;top:auto;bottom:-18vh;right:auto;width:44vw;height:44vw;animation-duration:30s;animation-direction:reverse;opacity:.7}
@keyframes ring{to{transform:rotate(360deg)}}
.scanline{position:fixed;inset:0;z-index:30;pointer-events:none;
  background:linear-gradient(180deg,transparent 0 50%,rgba(255,224,138,.028) 51%,transparent 52%);
  background-size:100% 4px;mix-blend-mode:screen;opacity:.3}
.scan-beam{position:fixed;left:0;right:0;height:120px;z-index:29;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(245,197,66,.05),transparent);
  animation:beam 9s linear infinite}
@keyframes beam{0%{top:-15%}100%{top:110%}}
.orb{position:fixed;border-radius:50%;filter:blur(46px);z-index:-2;opacity:.32;animation:orbFloat 12s ease-in-out infinite alternate}
.orb-a{right:9%;top:14%;width:220px;height:220px;background:var(--gold)}
.orb-b{right:30%;top:22%;width:150px;height:150px;background:#ff8c00;animation-delay:-4s}
.orb-c{left:6%;bottom:10%;width:180px;height:180px;background:#8a6308;animation-delay:-8s}
@keyframes orbFloat{from{transform:translateY(-14px) scale(1)}to{transform:translateY(18px) scale(1.08)}}

/* ============ 通用 ============ */
.hidden{display:none!important}
.glass,.panel,.card,.status-strip>div,.login-card,.monitor-stat{
  background:linear-gradient(145deg,rgba(34,26,8,.72),rgba(14,10,3,.58));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
}
.panel{border-radius:18px;padding:16px 18px;position:relative;overflow:hidden}
.panel:before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,224,138,.55),transparent)}
.glow-border{box-shadow:var(--shadow),0 0 0 1px rgba(245,197,66,.26),0 0 34px rgba(245,197,66,.14)}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.panel-title h2{font-size:17px;margin:0;display:flex;align-items:center;gap:9px}
.panel-title h2:before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-hi),var(--gold-deep));box-shadow:0 0 12px rgba(245,197,66,.7)}
.panel-title span{color:var(--muted);font-size:12px}

/* ============ 登录 ============ */
#app{min-height:100vh;position:relative}
.login-card{width:min(640px,calc(100vw - 32px));position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:38px;border-radius:26px;animation:cardIn .8s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes cardIn{from{opacity:0;transform:translate(-50%,-42%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.brand-row{display:flex;align-items:center;gap:16px}
.brand-mark{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;font-size:36px;font-weight:1000;letter-spacing:-3px;
  background:linear-gradient(135deg,var(--gold-hi),var(--amber) 45%,var(--gold-deep));color:#1a1200;
  box-shadow:0 0 40px rgba(245,197,66,.5),inset 0 1px 0 rgba(255,255,255,.5);
  animation:markPulse 3s ease-in-out infinite}
.brand-mark.small{width:58px;height:58px;font-size:28px;border-radius:16px}
@keyframes markPulse{0%,100%{box-shadow:0 0 28px rgba(245,197,66,.4),inset 0 1px 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 56px rgba(245,197,66,.75),inset 0 1px 0 rgba(255,255,255,.5)}}
.eyebrow{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.login-card h1{font-size:32px;margin:4px 0 8px;background:linear-gradient(90deg,#fff6d8,var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.login-card p{color:var(--muted);margin:0 0 22px}
.login-card form{display:grid;gap:12px}
.login-card label{font-weight:900;font-size:13px;color:var(--gold-hi)}
.login-card input{height:52px;border-radius:12px;border:1px solid var(--line);background:rgba(10,7,2,.6);color:var(--text);padding:0 16px;font-size:16px;transition:.25s}
.login-card input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,197,66,.16),0 8px 26px rgba(245,197,66,.16)}
button{border:1px solid rgba(245,197,66,.5);background:linear-gradient(135deg,#ffe08a,#f5b81f 50%,#c9920e);color:#241a00;border-radius:13px;
  padding:12px 20px;font-weight:900;font-family:var(--font);font-size:14px;cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 6px 22px rgba(245,197,66,.28);transition:transform .18s,box-shadow .18s}
button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(245,197,66,.42)}
button:active{transform:translateY(0)}
button:after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:left .5s}
button:hover:after{left:130%}
button.secondary{background:rgba(38,29,9,.8);color:var(--gold-hi)}
button.ghost{background:rgba(255,77,109,.10);border-color:rgba(255,77,109,.45);color:#ffb3c2;box-shadow:none}
.login-card button{height:54px;margin-top:8px;font-size:16px}
.login-foot{margin-top:20px;text-align:center;color:var(--green);font-weight:800;font-size:13px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);margin-right:8px;animation:pulseDot 1.6s ease-in-out infinite}
@keyframes pulseDot{50%{opacity:.4;transform:scale(.8)}}
.error{color:var(--red);margin-top:12px;font-size:13px}

/* ============ 仪表盘 ============ */
.dashboard-shell{min-height:100vh;padding:18px;display:grid;gap:14px;align-content:start}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:76px;padding:12px 18px;border-radius:18px;
  background:linear-gradient(145deg,rgba(34,26,8,.72),rgba(14,10,3,.58));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(6px);
  flex-wrap:wrap}
.brand-area{display:flex;align-items:center;gap:14px}
.brand-area h1{font-size:26px;line-height:1;margin:0 0 6px;background:linear-gradient(90deg,#fff6d8,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-area p{margin:0;color:var(--muted);font-size:13px}
#utc8Clock{color:var(--gold-hi);font-weight:800;font-variant-numeric:tabular-nums;font-size:14px}
.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{border:1px solid rgba(125,111,74,.4);background:rgba(125,111,74,.12);color:var(--muted);border-radius:12px;padding:11px 16px;font-weight:900;font-size:13px;cursor:default}
.badge.running{color:var(--green);border-color:rgba(29,242,165,.4);background:rgba(29,242,165,.12)}
.badge.analyzing{color:var(--gold);border-color:rgba(245,197,66,.5);background:rgba(245,197,66,.12);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

.status-strip{display:grid;gap:10px}
.status-strip-main{grid-template-columns:repeat(4,1fr)}
.status-strip>div{border-radius:16px;padding:14px 18px;position:relative;overflow:hidden}
.status-strip>div:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));opacity:.8}
.status-strip span,.card span,.quote-grid span,.kv span{display:block;color:var(--muted);font-size:12px;font-weight:800}
.status-strip strong{font-size:23px;display:block;margin-top:8px;color:var(--gold-hi);font-variant-numeric:tabular-nums}

/* 模块导航 */
.module-nav{display:flex;gap:8px;flex-wrap:wrap;position:sticky;top:10px;z-index:20;padding:8px;border-radius:16px;
  background:rgba(10,7,2,.82);border:1px solid var(--line-soft);backdrop-filter:blur(10px)}
.nav-tab{padding:10px 18px;border-radius:11px;background:transparent;border:1px solid transparent;color:var(--muted);font-weight:900;font-size:13px;cursor:pointer;transition:.25s;box-shadow:none}
.nav-tab:hover{color:var(--gold-hi);transform:none;box-shadow:none}
.nav-tab.active{color:#241a00;background:linear-gradient(135deg,var(--gold-hi),var(--amber));border-color:var(--gold);box-shadow:0 0 22px rgba(245,197,66,.35)}

.module-pages{position:relative}
.module-page{display:none;gap:14px}
.module-page.active{display:grid;gap:14px;animation:pageIn .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 总览 */
.chart-hero{display:grid;grid-template-rows:auto auto}
.interval-tabs{display:flex;gap:8px;flex-wrap:wrap}
.interval{padding:8px 15px;border-radius:11px;background:rgba(20,15,4,.75);color:var(--muted);border:1px solid var(--line-soft);box-shadow:none;font-size:12px}
.interval.active{background:linear-gradient(135deg,var(--gold-hi),var(--amber));color:#241a00;border-color:var(--gold);box-shadow:0 0 20px rgba(245,197,66,.35)}
.kline-chart{width:calc(100% + 36px);height:420px;min-height:420px;margin:0 -18px;border-radius:0;overflow:hidden;background:rgba(8,5,1,.8);display:grid;place-items:center;color:var(--muted)}
.kline-chart canvas,.kline-chart svg{width:100%;height:100%;display:block}
.price-ticker{position:absolute;top:12px;left:14px;font-size:13px;font-weight:900;color:var(--gold-hi);
  background:rgba(10,7,2,.7);border:1px solid var(--line-soft);border-radius:10px;padding:8px 12px;backdrop-filter:blur(4px);font-variant-numeric:tabular-nums}
.overview-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.card{border-radius:16px;padding:14px 16px;min-width:0;overflow:hidden;position:relative;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow),0 0 26px rgba(245,197,66,.18)}
.card strong{display:block;margin-top:9px;font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.card small{display:block;margin-top:7px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .up{color:var(--green)}.card .down{color:var(--red)}.card .gold{color:var(--gold)}
.flash-up{animation:flashUp .6s}.flash-down{animation:flashDown .6s}
@keyframes flashUp{0%{color:var(--green);text-shadow:0 0 18px rgba(29,242,165,.8)}100%{}}
@keyframes flashDown{0%{color:var(--red);text-shadow:0 0 18px rgba(255,77,109,.8)}100%{}}

/* 网格与KV */
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-two.wide-left{grid-template-columns:1.45fr 1fr}
.market-grid{grid-template-columns:1fr 1.25fr}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quote-grid>div,.kv>div{padding:11px 13px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(12,9,2,.5);min-width:0;transition:border-color .2s}
.quote-grid>div:hover,.kv>div:hover{border-color:var(--line)}
.quote-grid strong,.kv strong{display:block;margin-top:6px;font-size:15px;word-break:break-word;color:#f4e9c8;font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-content:start}
.kv strong .g{color:var(--green)}.kv strong .r{color:var(--red)}.kv strong .y{color:var(--gold)}
.reason-box{white-space:pre-wrap;line-height:1.7;color:#efe4c2;font-size:13px;background:rgba(12,9,2,.5);border:1px solid var(--line-soft);border-radius:14px;padding:16px}
.model-votes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.vote-card{padding:14px;border:1px solid var(--line-soft);border-radius:14px;background:rgba(12,9,2,.55)}
.vote-card small,.vote-card p{color:var(--muted);margin:6px 0 0}
.vote{display:inline-block;margin:8px 0;padding:4px 12px;border-radius:999px;font-weight:900;font-size:12px}
.vote.long{color:var(--green);background:rgba(29,242,165,.12);border:1px solid rgba(29,242,165,.35)}
.vote.short{color:var(--red);background:rgba(255,77,109,.12);border:1px solid rgba(255,77,109,.35)}
.vote.wait{color:var(--gold-hi);background:rgba(245,197,66,.12);border:1px solid rgba(245,197,66,.35)}
.vote-bar{height:6px;border-radius:99px;background:rgba(245,197,66,.12);overflow:hidden;margin-top:10px}
.vote-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));box-shadow:0 0 10px rgba(245,197,66,.6);width:0;transition:width 1.2s cubic-bezier(.2,.8,.3,1)}

/* Darwin 风控环 */
.darwin-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.darwin-ring{position:relative;width:150px;height:150px;flex-shrink:0}
.darwin-ring svg{transform:rotate(-90deg)}
.darwin-ring .track{stroke:rgba(245,197,66,.12)}
.darwin-ring .prog{stroke:url(#goldGrad);stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(245,197,66,.7));transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.3,1)}
.darwin-ring .score{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.darwin-ring .score strong{font-size:38px;color:var(--gold-hi);text-shadow:0 0 22px rgba(245,197,66,.6)}
.darwin-ring .score small{color:var(--muted);font-size:11px;font-weight:800}
.flow-steps,.protection-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.flow-step,.protection-card{padding:13px;border:1px solid var(--line-soft);border-radius:14px;background:rgba(12,9,2,.5);font-size:13px;line-height:1.6}
.flow-step.done{border-color:rgba(29,242,165,.4)}
.flow-step.blocked{border-color:rgba(255,77,109,.4)}
.flow-step .st{float:right;font-weight:900;font-size:12px}
.events{display:grid;gap:8px;align-content:start}
.compact-events{max-height:170px;overflow:auto}
.event{padding:10px 13px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(12,9,2,.5);font-size:13px;line-height:1.5}
.event small{color:var(--subtle);display:block;margin-top:3px;font-size:11px}
.table-wrap{overflow:auto;max-height:220px}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{border-bottom:1px solid rgba(245,197,66,.12);padding:9px 8px;text-align:left;white-space:nowrap;font-variant-numeric:tabular-nums}
th{color:var(--gold);font-weight:900;position:sticky;top:0;background:rgba(20,15,4,.95)}
td .g{color:var(--green)}td .r{color:var(--red)}

/* 参数页 */
.config-form{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px 14px;align-items:center}
.config-form label{color:var(--gold-hi);font-weight:900;font-size:13px}
.config-form input,.config-form select{height:46px;border-radius:11px;border:1px solid var(--line);background:rgba(10,7,2,.6);color:var(--text);padding:0 14px;font-size:14px;font-family:var(--font)}
.config-form input:focus,.config-form select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,197,66,.14)}
.config-form button{grid-column:1 / -1}
.hint{margin-top:12px;color:var(--green);font-weight:800;font-size:13px}
.small-reason{min-height:200px}

/* 滚动条 */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(12,9,2,.5)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-deep),#6b4e08);border-radius:99px}

@media(max-width:1200px){
  .overview-cards{grid-template-columns:repeat(3,1fr)}
  .status-strip-main{grid-template-columns:repeat(2,1fr)}
  .grid-two,.grid-two.wide-left,.market-grid{grid-template-columns:1fr}
  .brand-area h1{font-size:20px}
  .config-form{grid-template-columns:1fr}
}
@media(max-width:640px){.overview-cards{grid-template-columns:repeat(2,1fr)}.quote-grid{grid-template-columns:1fr 1fr}}