/* ============================================================
   蒸汽热效智优调控系统 · 基础样式
   ============================================================ */
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#060a0f;
  --bg-soft:#080e14;
  --surface:#0c141c;
  --surface-2:#101a24;
  --surface-3:#14202b;
  --line:rgba(128,196,196,.10);
  --line-strong:rgba(128,196,196,.20);
  --text:#e7f2f1;
  --text-2:#9db3ba;
  --text-3:#647a84;
  --teal:#19e0c2;
  --teal-deep:#0b9fb0;
  --teal-soft:rgba(25,224,194,.12);
  --amber:#ffb547;
  --amber-soft:rgba(255,181,71,.13);
  --rose:#ff5f6d;
  --rose-soft:rgba(255,95,109,.13);
  --blue:#4db8ff;
  --blue-soft:rgba(77,184,255,.13);
  --violet:#8b7bff;
  --violet-soft:rgba(139,123,255,.14);
  --green:#34d399;
  --green-soft:rgba(52,211,153,.13);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --shadow-sm:0 10px 30px rgba(0,0,0,.30);
  --sidebar-w:270px;
  --topbar-h:68px;
  --font:'Inter','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-size:14px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 600px at 82% -8%,rgba(25,224,194,.10),transparent 60%),
    radial-gradient(900px 560px at -6% 108%,rgba(255,181,71,.07),transparent 62%),
    radial-gradient(700px 500px at 50% 50%,rgba(77,184,255,.035),transparent 70%),
    linear-gradient(180deg,#070c12 0%,#060a0f 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(120,190,190,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,190,190,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
}
::selection{background:rgba(25,224,194,.28);color:#fff}
a{color:var(--teal);text-decoration:none}
a:hover{color:#5ff2d6}
button{font-family:inherit}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
input,select,textarea,button{font-family:inherit;font-size:14px;color:inherit}
table{border-collapse:collapse;width:100%}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(120,170,175,.20);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(25,224,194,.35);background-clip:padding-box}

.num{font-family:'Inter',var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mono{font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;letter-spacing:.02em}
.muted{color:var(--text-3)}
.text-2{color:var(--text-2)}
.text-xs{font-size:12px}
.text-sm{font-size:13px}
.flex{display:flex}
.flex-center{display:flex;align-items:center}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.w-100{width:100%}
.hidden{display:none !important}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{flex:1}

@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(25,224,194,.5)}70%{box-shadow:0 0 0 7px rgba(25,224,194,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes glow-line{0%{opacity:.4}50%{opacity:1}100%{opacity:.4}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}