/* ============================================================
   COMPUTE算力网 · 全站视觉系统
   纯静态、零外部依赖；深色 AI 科技风 + 全端响应式
   ============================================================ */
:root{
  --bg:#060a12; --bg2:#090f1d; --panel:#0f1728; --panel2:#131f35;
  --panel3:#18263e; --line:rgba(126,166,220,.14); --line2:rgba(126,190,255,.28);
  --txt:#eaf2ff; --txt2:#a9bbd8; --txt3:#6f83a6;
  --cyan:#22d3ee; --cyan2:#0ea5b7; --violet:#8b7bff; --blue:#4d8dff;
  --green:#34d399; --amber:#fbbf24; --red:#fb7185;
  --grad:linear-gradient(120deg,#22d3ee 0%,#5b8cff 48%,#8b7bff 100%);
  --grad2:linear-gradient(120deg,#34d399 0%,#22d3ee 100%);
  --shadow:0 18px 50px rgba(0,0,0,.38);
  --r:16px; --r2:22px;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 620px at 78% -8%,rgba(34,211,238,.10),transparent 62%),radial-gradient(900px 540px at 4% 12%,rgba(139,123,255,.09),transparent 60%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img,svg{max-width:100%}
::selection{background:rgba(34,211,238,.28);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0a1120}
::-webkit-scrollbar-thumb{background:#25405f;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#3a628c}

/* ---------- 布局 ---------- */
.container{width:100%;max-width:1260px;margin:0 auto;padding:0 26px}
.wrap-narrow{max-width:940px}
.section{padding:56px 0;position:relative}
.section.sm{padding:38px 0}
.section.alt{background:linear-gradient(180deg,rgba(15,23,40,.0),rgba(15,23,40,.55),rgba(15,23,40,0));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* gN 类自带 display:grid —— 历史上多处只写 g3/g4 未写 grid，导致卡片纵向堆叠 */
.grid,.g2,.g3,.g4,.g5,.g6,.g-2-1,.g-1-2{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}.g-1-2{grid-template-columns:1fr 2fr}
/* grid item 默认 min-width:auto 会被 660px 表格撑破列宽，必须允许收缩 */
.grid > *,.g2 > *,.g3 > *,.g4 > *,.g5 > *,.g6 > *,.g-2-1 > *,.g-1-2 > *{min-width:0}
.flex{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:14px}
.wrap{flex-wrap:wrap}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}.mb32{margin-bottom:32px}
.tc{text-align:center}.tr{text-align:right}
.hide{display:none!important}
.mono{font-family:var(--mono)}
.muted{color:var(--txt2)}.dim{color:var(--txt3)}
.small{font-size:13px}.tiny{font-size:12px}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nowrap{white-space:nowrap}

/* ---------- 导航 ---------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(6,10,18,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-in{height:70px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;box-shadow:0 6px 22px rgba(34,211,238,.3)}
.brand-mark svg{width:23px;height:23px}
.brand-txt strong{display:block;font-size:17px;letter-spacing:.06em;line-height:1.15}
.brand-txt span{display:block;font-size:10px;color:var(--txt3);letter-spacing:.18em}
.nav-menu{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:nowrap}
.nav-menu a{padding:8px 11px;border-radius:9px;font-size:13.5px;color:var(--txt2);white-space:nowrap;transition:.2s}
.nav-menu a:hover{color:var(--txt);background:rgba(126,166,220,.09)}
.nav-menu a.on{color:var(--cyan);background:rgba(34,211,238,.1)}
.nav-cta{display:flex;align-items:center;gap:9px;flex-shrink:0}
.nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;color:var(--txt);font-size:20px}
.nav-mobile{display:none;position:fixed;inset:70px 0 auto 0;background:rgba(8,13,24,.985);backdrop-filter:blur(18px);border-bottom:1px solid var(--line2);padding:14px 22px 24px;z-index:79;max-height:calc(100vh - 70px);overflow:auto}
.nav-mobile.open{display:block}
.nav-mobile a{display:block;padding:11px 8px;border-bottom:1px solid var(--line);font-size:15px;color:var(--txt2)}
.nav-mobile a.on{color:var(--cyan)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:11px;font-size:14px;font-weight:600;border:1px solid var(--line2);color:var(--txt);background:rgba(255,255,255,.03);transition:.22s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 8px 26px rgba(34,211,238,.14)}
.btn-primary{background:var(--grad);color:#04121b;border-color:transparent;box-shadow:0 8px 26px rgba(34,211,238,.25)}
.btn-primary:hover{color:#04121b;box-shadow:0 12px 34px rgba(34,211,238,.4)}
.btn-ghost{background:transparent;border-color:var(--line2)}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:9px}
.btn-lg{padding:14px 28px;font-size:15.5px;border-radius:13px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.link{color:var(--cyan);font-size:13px}
.link:hover{text-decoration:underline}

/* ---------- 卡片 / 标签 ---------- */
.card{background:linear-gradient(160deg,rgba(19,31,53,.94),rgba(13,21,37,.94));border:1px solid var(--line);border-radius:var(--r);padding:18px;position:relative;transition:.24s}
.card:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.card.pad-lg{padding:24px}
.card.flat:hover{transform:none;box-shadow:none}
.card-top{display:flex;align-items:flex-start;gap:14px}
.ico{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.22);font-size:18px}
.ico.v{background:rgba(139,123,255,.1);border-color:rgba(139,123,255,.25)}
.ico.g{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.25)}
.ico.a{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.25)}
.card h3{margin:0 0 8px;font-size:17px;line-height:1.4}
.card p{margin:0;color:var(--txt2);font-size:13.5px;line-height:1.8}
.card .num{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1.2}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px;font-size:11.5px;border:1px solid var(--line2);color:var(--txt2);background:rgba(126,166,220,.07);white-space:nowrap}
.tag.cy{color:var(--cyan);border-color:rgba(34,211,238,.32);background:rgba(34,211,238,.09)}
.tag.vi{color:#b3a6ff;border-color:rgba(139,123,255,.34);background:rgba(139,123,255,.1)}
.tag.gr{color:var(--green);border-color:rgba(52,211,153,.32);background:rgba(52,211,153,.09)}
.tag.am{color:var(--amber);border-color:rgba(251,191,36,.32);background:rgba(251,191,36,.09)}
.tag.rd{color:var(--red);border-color:rgba(251,113,133,.32);background:rgba(251,113,133,.09)}
.tag-row{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-block;padding:5px 14px;border-radius:99px;border:1px solid var(--line2);background:rgba(34,211,238,.06);color:var(--cyan);font-size:12.5px;letter-spacing:.05em}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--green);box-shadow:0 0 10px var(--green)}
.dot.am{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.dot.rd{background:var(--red);box-shadow:0 0 10px var(--red)}

/* ---------- 标题 ---------- */
.h1{font-size:clamp(34px,5vw,60px);line-height:1.16;margin:0 0 20px;font-weight:800;letter-spacing:-.02em}
.h2{font-size:clamp(26px,3.2vw,38px);line-height:1.28;margin:0 0 14px;font-weight:750;letter-spacing:-.01em}
.h3{font-size:20px;margin:0 0 10px;font-weight:700}
.lead{font-size:16.5px;color:var(--txt2);line-height:1.9;margin:0}
.sec-head{max-width:760px;margin-bottom:24px}
.sec-head .h2{margin-bottom:9px}
.sec-head p{color:var(--txt2);margin:0;font-size:14px;line-height:1.8}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cyan)}
.divider{height:1px;background:var(--line);margin:26px 0}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:60px 0 54px;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,180,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 75% 75% at 60% 40%,#000 20%,transparent 100%);pointer-events:none}
.hero::after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.13),transparent 65%);right:-120px;top:-160px;filter:blur(20px);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;position:relative;z-index:2}
.hero .h1{font-size:clamp(32px,3.9vw,52px)}
.hero .h1 .grad-txt{white-space:nowrap}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.hero-trust b{display:block;font-size:22px;font-family:var(--mono);color:var(--txt)}
.hero-trust span{font-size:12px;color:var(--txt3)}
/* 指挥舱 */
.deck{background:linear-gradient(160deg,rgba(19,31,53,.96),rgba(9,16,30,.96));border:1px solid var(--line2);border-radius:22px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);position:relative;overflow:hidden}
.deck::before{content:"";position:absolute;top:-60%;left:-30%;width:70%;height:200%;background:linear-gradient(90deg,transparent,rgba(34,211,238,.05),transparent);transform:rotate(22deg)}
.deck-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;position:relative}
.deck-title{font-size:12.5px;letter-spacing:.14em;color:var(--txt2)}
.deck-live{font-size:11px;color:var(--green);display:flex;align-items:center;gap:6px}
.deck-ring{display:block;margin:0 auto}
.deck-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.deck-metrics div{background:rgba(8,14,26,.7);border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center}
.deck-metrics b{display:block;font-family:var(--mono);font-size:16px;color:var(--cyan)}
.deck-metrics span{font-size:10.5px;color:var(--txt3)}
.deck-flow{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--txt2)}
.deck-flow i{font-style:normal;color:var(--cyan);font-family:var(--mono)}
.deck-flow em{font-style:normal;color:var(--txt3);flex:1;text-align:center;overflow:hidden}

/* 数据条 */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.statbar>div{background:var(--panel);padding:22px 20px}
.statbar b{display:block;font-family:var(--mono);font-size:26px;color:var(--txt);margin-bottom:4px}
.statbar b em{font-style:normal;font-size:14px;color:var(--cyan);margin-left:3px}
.statbar span{font-size:12.5px;color:var(--txt3)}
.statbar small{display:block;font-size:11px;color:var(--txt3);margin-top:5px}

/* ---------- 表格 / 列表 ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:660px}
th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:rgba(126,166,220,.07);color:var(--txt2);font-size:12.5px;font-weight:600;white-space:nowrap;position:sticky;top:0}
tbody tr:hover{background:rgba(34,211,238,.035)}
tbody tr:last-child td{border-bottom:0}
td strong{color:var(--txt)}
.pos{color:var(--green)}.neg{color:var(--red)}.warn{color:var(--amber)}
.list{display:grid;gap:12px}
/* 紧凑说明行：替代「大图标 + 独立大卡」的低密度排版 */
.how-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.how-ico{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.2);color:var(--cyan);font-size:14px}
.how-row b{font-size:13.5px;font-weight:650}
.how-row p{margin:2px 0 0;font-size:12.5px;color:var(--txt2);line-height:1.7}
.list-item{display:flex;gap:14px;align-items:flex-start;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:.2s}
.list-item:hover{border-color:var(--line2)}
.list-item .idx{font-family:var(--mono);color:var(--cyan);font-size:13px;min-width:26px}
.list-item p{margin:3px 0 0;color:var(--txt2);font-size:13px}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--txt2)}
.kv b{font-family:var(--mono);font-weight:600}

/* ---------- 表单 ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--txt2);margin-bottom:7px;font-weight:600}
.field label .req{color:var(--red)}
.field .hint{font-size:11.5px;color:var(--txt3);margin-top:6px;line-height:1.6}
.input,.select,.textarea{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line2);background:rgba(6,12,24,.75);outline:none;transition:.2s;font-size:14px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%236f83a6' stroke-width='1.5' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.select option{background:#0f1728;color:#eaf2ff}
.textarea{min-height:96px;resize:vertical}
.field-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field-row.g3{grid-template-columns:repeat(3,1fr)}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--txt2);cursor:pointer;padding:8px 0}
.check input{accent-color:var(--cyan);margin-top:4px;width:15px;height:15px}
.range{width:100%;accent-color:var(--cyan);height:5px}
.range-val{float:right;color:var(--cyan);font-family:var(--mono);font-size:13px}
.form-note{font-size:11.5px;color:var(--txt3);line-height:1.7;margin-top:10px}

/* ---------- Tabs / Accordion / Steps ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:24px}
.tabs button{padding:10px 18px;font-size:14px;color:var(--txt2);border-bottom:2px solid transparent;transition:.2s;font-weight:600}
.tabs button:hover{color:var(--txt)}
.tabs button.on{color:var(--cyan);border-color:var(--cyan)}
.tabpane{display:none}.tabpane.on{display:block;animation:fadeUp .35s ease}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 13px;border-radius:99px;border:1px solid var(--line2);font-size:12.5px;color:var(--txt2);background:rgba(255,255,255,.02);transition:.2s}
.chip:hover{border-color:var(--cyan);color:var(--txt)}
.chip.on{background:rgba(34,211,238,.15);border-color:var(--cyan);color:var(--cyan)}
.acc{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:10px;background:var(--panel)}
.acc-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;text-align:left;font-size:14.5px;font-weight:600}
.acc-head:hover{background:rgba(126,166,220,.06)}
.acc-head i{font-style:normal;color:var(--cyan);font-size:18px;transition:.25s}
.acc.open .acc-head i{transform:rotate(45deg)}
.acc-body{display:none;padding:0 18px 18px;color:var(--txt2);font-size:13.5px;line-height:1.85}
.acc.open .acc-body{display:block}
.steps{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.step{display:flex;align-items:center;gap:8px;color:var(--txt3);font-size:12.5px}
.step b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);font-family:var(--mono);font-size:12px}
.step.on{color:var(--cyan)}.step.on b{border-color:var(--cyan);background:rgba(34,211,238,.12)}
.step.done{color:var(--green)}.step.done b{border-color:var(--green)}
.step-line{width:26px;height:1px;background:var(--line2)}

/* ---------- 结果 / 强调块 ---------- */
.result{background:linear-gradient(150deg,rgba(34,211,238,.09),rgba(139,123,255,.07));border:1px solid rgba(34,211,238,.28);border-radius:var(--r2);padding:26px}
.result h3{margin:0 0 14px}
.note{border-left:3px solid var(--cyan);background:rgba(34,211,238,.055);padding:13px 16px;border-radius:0 10px 10px 0;font-size:13px;color:var(--txt2);line-height:1.8}
.note.warn{border-color:var(--amber);background:rgba(251,191,36,.06)}
.note.gr{border-color:var(--green);background:rgba(52,211,153,.06)}
.note.vi{border-color:var(--violet);background:rgba(139,123,255,.07)}
.notice{font-size:11.5px;color:var(--txt3);line-height:1.75}
.metric{font-family:var(--mono);font-size:28px;font-weight:700;line-height:1.2}
.metric.cy{color:var(--cyan)}.metric.gr{color:var(--green)}.metric.am{color:var(--amber)}.metric.vi{color:#b3a6ff}
.metric small{font-size:13px;color:var(--txt3);font-weight:400}
.bar{height:8px;border-radius:99px;background:rgba(126,166,220,.13);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--grad);transition:width .7s ease}
.bar>i.gr{background:var(--grad2)}.bar>i.am{background:linear-gradient(90deg,#fbbf24,#fb7185)}
.score{font-family:var(--mono);font-size:13px;color:var(--cyan)}
.empty{padding:44px 20px;text-align:center;color:var(--txt3);border:1px dashed var(--line2);border-radius:var(--r);font-size:13.5px}

/* ---------- 图表 ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:inherit;fill:var(--txt3);font-size:11px}
.chart .grid-l{stroke:rgba(126,166,220,.12);stroke-width:1}
.chart .axis{stroke:rgba(126,166,220,.28);stroke-width:1}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--txt2);margin-top:10px}
.chart-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}
.chart-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}

/* ---------- 时间线 / 流程 ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.flow-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;position:relative}
.flow-item .n{font-family:var(--mono);font-size:12px;color:var(--cyan);margin-bottom:8px}
.flow-item h4{margin:0 0 8px;font-size:15px}
.flow-item p{margin:0;font-size:12.5px;color:var(--txt2);line-height:1.75}
.timeline{border-left:1px solid var(--line2);padding-left:24px;margin-left:8px}
.timeline-item{position:relative;padding-bottom:26px}
.timeline-item::before{content:"";position:absolute;left:-30px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.13)}
.timeline-item h4{margin:0 0 5px;font-size:15px}
.timeline-item p{margin:0;color:var(--txt2);font-size:13px}

/* ---------- 弹层 / 提示 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(2,6,14,.78);backdrop-filter:blur(6px);z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.modal-mask.open{display:flex}
.modal{width:100%;max-width:620px;max-height:88vh;overflow:auto;background:linear-gradient(160deg,#14213a,#0b1324);border:1px solid var(--line2);border-radius:20px;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.6);animation:fadeUp .25s ease}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.modal-head h3{margin:0;font-size:20px}
.modal-close{font-size:24px;color:var(--txt3);line-height:1;padding:0 4px}
.modal-close:hover{color:var(--txt)}
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);background:#142a3a;border:1px solid rgba(34,211,238,.45);color:var(--txt);padding:12px 22px;border-radius:12px;font-size:14px;z-index:200;opacity:0;pointer-events:none;transition:.28s;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.fade-in{animation:fadeUp .5s ease both}
.blink{animation:pulse 1.8s infinite}

/* ---------- 页脚 ---------- */
.footer{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(10,16,30,.4),rgba(6,10,18,.95));padding:56px 0 26px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px;margin-bottom:36px}
.footer h4{margin:0 0 14px;font-size:14px}
.footer a,.footer p{display:block;color:var(--txt3);font-size:12.5px;margin:0 0 9px;line-height:1.7}
.footer a:hover{color:var(--cyan)}
.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--txt3)}
.footer .disclaimer{font-size:11.5px;color:var(--txt3);line-height:1.8;max-width:420px}

/* ---------- 移动端底栏 ---------- */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(8,14,26,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line2);padding:7px 4px calc(7px + env(safe-area-inset-bottom))}
.mbar-in{display:grid;grid-template-columns:repeat(5,1fr)}
.mbar a{text-align:center;font-size:10px;color:var(--txt3);padding:4px 0;line-height:1.5}
.mbar a.on{color:var(--cyan)}
.mbar a i{display:block;font-style:normal;font-size:18px;line-height:1.3}

/* ---------- 响应式 ---------- */
/* 中等宽度：导航项较多，先收掉两个业务按钮，只留会员入口，避免菜单被截断 */
@media(max-width:1400px){
  .nav-cta > a:not(#navLogin){display:none}
}
@media(max-width:1180px){
  .nav-menu,.nav-cta{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .nav-in{gap:10px}
  .g6,.g5{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero{padding:56px 0 52px}
  .deck{max-width:520px;margin:0 auto}
  .g4,.g3,.g-2-1,.g-1-2{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .section{padding:44px 0}
  .section.sm{padding:32px 0}
}
@media(max-width:700px){
  body{font-size:14px}
  .container{padding:0 17px}
  .g2,.g3,.g4,.g5,.g6,.g-2-1,.g-1-2,.field-row,.field-row.g3{grid-template-columns:1fr}
  .statbar{grid-template-columns:repeat(2,1fr)}
  .section{padding:36px 0}
  .section.sm{padding:28px 0}
  .hero{padding:40px 0 36px}
  .h1{font-size:32px}
  .hero .h1{font-size:30px}
  .hero-actions .btn{flex:1;min-width:140px}
  .hero-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px}
  .hero-trust b{font-size:19px}
  .card{padding:18px}
  .card.pad-lg{padding:20px}
  .sec-head{margin-bottom:26px}
  .flow{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px}
  .mbar{display:block}
  .footer{padding-bottom:86px}
  .modal{padding:20px}
  .tabs button{padding:9px 12px;font-size:13px}
  .btn-lg{padding:12px 20px;font-size:14px}
  .steps{gap:6px}
  .step-line{width:12px}
  .result{padding:20px}
  .metric{font-size:24px}
  .nav-in{gap:8px}
  #cityTrigger{padding:5px 8px;font-size:12px}
  .theme-toggle{width:34px;height:34px;font-size:14px}
  .deck-title{font-size:10.5px;letter-spacing:.04em;white-space:nowrap}
  .deck-live{font-size:9.5px;white-space:nowrap}
}
/* 手机端底部有 5 宫格导航，悬浮客服必须上移，否则遮挡「我的」 */
@media(max-width:700px){
  body .sf-wrap{bottom:74px;right:12px}
}
@media(max-width:390px){
  .statbar b{font-size:21px}
  .h1{font-size:29px}
  .brand-txt strong{font-size:15px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ============ 新增模块通用样式：主题切换 / 城市入口 / 会员入口 ============ */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;color:var(--txt2);font-size:16px;background:rgba(126,166,220,.05);transition:.2s;flex-shrink:0}
.theme-toggle:hover{color:var(--txt);border-color:var(--cyan)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sf-fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#cityTrigger{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--txt2);padding:6px 11px;border-radius:9px;background:rgba(126,166,220,.07);border:1px solid var(--line);transition:.2s;white-space:nowrap;flex-shrink:0}
#cityTrigger:hover{color:var(--txt);border-color:var(--cyan)}
#cityTrigger b{color:var(--cyan);font-weight:600}
#navLogin{white-space:nowrap;flex-shrink:0}
.form-msg{display:none;font-size:12.5px;margin-top:8px;line-height:1.6}
.form-msg.ok{color:var(--green)} .form-msg.err{color:var(--red)}
#authMask .modal .field-row{margin-bottom:14px}

/* xsd 模块统一为 COMPUTE 配色（用双类选择器压过 float-service.css / city-switch.css 的单类默认值） */
.sf-wrap.xsd-t-compute, .city-modal.xsd-t-compute{
  --xsd-brand:#22d3ee; --xsd-brand-deep:#0b1626;
  --xsd-brand-soft:#16263d; --xsd-brand-border:#23395b;
  --xsd-accent:#fbbf24;
  --xsd-panel:#0f1728; --xsd-ink:#eaf2ff;
}
.sf-item .sf-ico{width:22px;flex:0 0 22px;text-align:center;font-size:15px}
/* 城市弹窗：CSS display:flex 会覆盖 HTML hidden 属性，必须显式隐藏 */
.cm-result[hidden],.cm-prov-cities[hidden]{display:none!important}
.xsd-t-compute .sf-panel,.xsd-t-compute .sf-chatbox,.xsd-t-compute .sf-chat-foot{background:var(--xsd-panel);color:var(--xsd-ink);border-color:var(--xsd-brand-border)}
.xsd-t-compute .sf-item{color:var(--xsd-ink);border-color:rgba(126,166,220,.14)}
.xsd-t-compute .sf-item:hover{background:var(--xsd-brand-soft);color:var(--cyan)}
.xsd-t-compute .sf-chat-head{background:linear-gradient(135deg,var(--xsd-brand-deep),var(--xsd-brand))}
.xsd-t-compute .msg.bot{background:#16263d;color:var(--xsd-ink);border-color:var(--xsd-brand-border)}
.xsd-t-compute .sf-chat-body,.xsd-t-compute .chip-row{background:#0b1324}
.xsd-t-compute .chip-q{background:#16263d;color:var(--cyan);border-color:var(--xsd-brand-border)}
.xsd-t-compute .sf-chat-foot input{background:#16263d;color:var(--xsd-ink);border-color:var(--xsd-brand-border)}
.xsd-t-compute .city-modal{color:#fff}
.xsd-t-compute .city-modal .cm-search input{color:#fff}

/* ============ 浅色主题 ============ */
[data-theme="light"]{
  --bg:#eef2f8; --bg2:#e7edf6; --panel:#ffffff; --panel2:#f4f7fc; --panel3:#e9eff7;
  --line:rgba(36,64,110,.16); --line2:rgba(36,92,160,.34);
  --txt:#15233b; --txt2:#42556f; --txt3:#7a8aa1;
  --cyan:#0891b2; --cyan2:#0e7490; --violet:#6d5efc; --blue:#2f6bff;
  --green:#0f9d6b; --amber:#b45309; --red:#e11d48;
  --grad:linear-gradient(120deg,#0891b2 0%,#3b6fff 48%,#6d5efc 100%);
  --grad2:linear-gradient(120deg,#0f9d6b 0%,#0891b2 100%);
  --shadow:0 18px 50px rgba(20,40,80,.12);
}
[data-theme="light"] body{background-image:radial-gradient(1100px 620px at 78% -8%,rgba(8,145,178,.10),transparent 62%),radial-gradient(900px 540px at 4% 12%,rgba(109,94,252,.08),transparent 60%)}
[data-theme="light"] ::-webkit-scrollbar-track{background:#dbe4f0}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:#a9bdd8}
[data-theme="light"] .nav{background:rgba(255,255,255,.86)}
[data-theme="light"] .nav-mobile{background:rgba(255,255,255,.98)}
[data-theme="light"] .card{background:linear-gradient(160deg,#ffffff,#f4f7fc);color:var(--txt)}
[data-theme="light"] .card p{color:var(--txt2)}
[data-theme="light"] .deck{background:linear-gradient(160deg,#ffffff,#eef3fa);border-color:var(--line2)}
[data-theme="light"] .deck-metrics div{background:rgba(238,242,248,.85);border-color:var(--line)}
[data-theme="light"] .modal{background:linear-gradient(160deg,#ffffff,#f1f5fb)}
[data-theme="light"] .footer{background:linear-gradient(180deg,rgba(238,242,248,.55),rgba(230,236,245,.96))}
[data-theme="light"] .result{background:linear-gradient(150deg,rgba(8,145,178,.08),rgba(109,94,252,.07))}
[data-theme="light"] .note{background:rgba(8,145,178,.06)} .note.warn{background:rgba(180,83,9,.06)} .note.gr{background:rgba(15,157,107,.06)} .note.vi{background:rgba(109,94,252,.07)}
[data-theme="light"] .list-item,.acc,.statbar>div,.chart-box,.table-wrap{background:#fff;border-color:var(--line)}
[data-theme="light"] .input,.select,.textarea{background:rgba(255,255,255,.92);border-color:var(--line2);color:var(--txt)}
[data-theme="light"] .select option{background:#fff;color:var(--txt)}
[data-theme="light"] .mbar{background:rgba(255,255,255,.96)}
[data-theme="light"] .section.alt{background:linear-gradient(180deg,transparent,rgba(8,145,178,.05),transparent);border-color:var(--line)}
[data-theme="light"] .pill{background:rgba(8,145,178,.07);border-color:var(--line2)}
[data-theme="light"] .toast{background:#0b3a4a;color:#fff}
[data-theme="light"] .btn{background:rgba(20,40,80,.04);color:var(--txt)}
[data-theme="light"] .ico{background:rgba(8,145,178,.1);border-color:rgba(8,145,178,.22)}
[data-theme="light"] .ico.v{background:rgba(109,94,252,.1);border-color:rgba(109,94,252,.25)}
[data-theme="light"] .ico.g{background:rgba(15,157,107,.1);border-color:rgba(15,157,107,.25)}
[data-theme="light"] .ico.a{background:rgba(180,83,9,.1);border-color:rgba(180,83,9,.25)}
[data-theme="light"] .chart text{fill:var(--txt3)}
[data-theme="light"] .nav-menu a{color:var(--txt2)} .nav-menu a.on{color:var(--cyan)}
[data-theme="light"] .nav-menu a:hover{background:rgba(36,64,110,.07)}
[data-theme="light"] #cityTrigger{color:var(--txt2);background:rgba(36,64,110,.06)} #cityTrigger b{color:var(--cyan)}
[data-theme="light"] .tabpane{background:transparent}
[data-theme="light"] .tag{background:rgba(36,64,110,.06)}
[data-theme="light"] .modal-mask{background:rgba(20,30,50,.55)}
[data-theme="light"] .theme-toggle{color:var(--txt2);background:rgba(36,64,110,.06)}
[data-theme="light"] .hero::after{opacity:.6}

/* 浅色主题下模块面板翻白 */
[data-theme="light"] .xsd-t-compute .sf-panel,[data-theme="light"] .xsd-t-compute .sf-chatbox,[data-theme="light"] .xsd-t-compute .sf-chat-foot{background:#fff;color:#15233b;border-color:#e1e8f2}
[data-theme="light"] .xsd-t-compute .sf-item{color:#3e4c63;border-color:#eef1f6}
[data-theme="light"] .xsd-t-compute .sf-item:hover{background:#eef6ff;color:#0891b2}
[data-theme="light"] .xsd-t-compute .msg.bot{background:#f3f7fc;color:#15233b;border-color:#e1e8f2}
[data-theme="light"] .xsd-t-compute .sf-chat-body,[data-theme="light"] .xsd-t-compute .chip-row{background:#f7f9fc}
[data-theme="light"] .xsd-t-compute .chip-q{background:#eef6ff;color:#0891b2;border-color:#cfe6f2}
[data-theme="light"] .xsd-t-compute .sf-chat-foot input{background:#fff;color:#15233b;border-color:#e1e8f2}

@media print{.nav,.mbar,.footer,.hero-actions{display:none}body{background:#fff;color:#111}}