/* ==========================================================================
   特冶智慧管理一体化平台 - 前台样式
   base.css - 设计变量 / 重置 / 通用
   ========================================================================== */
:root{
  --bg-deep:      #040b1a;          /* 最深背景 */
  --bg-base:      #061634;          /* 主背景 */
  --bg-1:         #082045;          /* 卡片背景 */
  --bg-2:         #0a2858;          /* 卡片次级 */
  --bg-3:         #0d3470;          /* 高亮区 */
  --line:         rgba(0,229,255,.18);
  --line-2:       rgba(0,229,255,.32);
  --line-3:       rgba(0,229,255,.55);
  --c-primary:    #00e5ff;          /* 主青色 */
  --c-primary-2:  #29b6f6;          /* 次青 */
  --c-deep:       #0066ff;          /* 深蓝 */
  --c-amber:      #ffb300;          /* 警示 */
  --c-orange:     #ff7043;
  --c-green:      #00e676;
  --c-red:        #ff3d57;
  --c-purple:     #7c4dff;
  --text-1:       #e6f4ff;
  --text-2:       #b5d6f0;
  --text-3:       #7a9bbb;
  --text-mute:    #4f6f8f;
  --shadow-glow:  0 0 20px rgba(0,229,255,.35);
  --shadow-card:  0 4px 20px rgba(0,30,80,.45), inset 0 0 0 1px rgba(0,229,255,.08);
  --radius:       8px;
  --radius-lg:    14px;
  --gap:          14px;
  --h-topbar:     56px;
  --h-tabbar:     44px;
  --w-sidebar:    220px;
  --font:         "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-dig:     "Consolas", "Menlo", "Courier New", monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{
  overflow:auto;           /* 根滚动容器：当大屏内容超出视口时产生滚动条 */
}
body{
  font-family:var(--font);
  color:var(--text-1);
  background:var(--bg-deep);
  overflow:hidden;         /* 内部不滚动，避免与 html 双重滚动 */
  user-select:none;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{display:block;max-width:100%}

/* 滚动条 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(0,30,80,.2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0a4d8c,#00e5ff55);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#00e5ff99}

/* 通用文字与图标 */
.t-mute{color:var(--text-mute)}
.t-2{color:var(--text-2)}
.t-3{color:var(--text-3)}
.t-pri{color:var(--c-primary)}
.t-amber{color:var(--c-amber)}
.t-green{color:var(--c-green)}
.t-red{color:var(--c-red)}
.t-purple{color:var(--c-purple)}
.dig{font-family:var(--font-dig);font-feature-settings:"tnum";letter-spacing:1px}
.txt-c{text-align:center}
.txt-r{text-align:right}

/* 通用按钮 */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:4px;
  background:linear-gradient(180deg,rgba(0,229,255,.15),rgba(0,229,255,.05));
  border:1px solid var(--line-2);color:var(--text-1);
  transition:.2s;font-size:13px;
}
.btn:hover{background:rgba(0,229,255,.25);border-color:var(--c-primary);box-shadow:var(--shadow-glow)}
.btn.primary{background:linear-gradient(180deg,#00b3d4,#008cb3);border-color:var(--c-primary);color:#fff;font-weight:600}
.btn.primary:hover{background:linear-gradient(180deg,#00e5ff,#00b3d4)}
.btn.danger{border-color:rgba(255,61,87,.5);background:rgba(255,61,87,.1)}
.btn.warn{border-color:rgba(255,179,0,.5);background:rgba(255,179,0,.1)}
.btn.ok{border-color:rgba(0,230,118,.5);background:rgba(0,230,118,.1)}

/* 状态点 */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#666;vertical-align:middle}
.dot.ok{background:var(--c-green);box-shadow:0 0 8px var(--c-green)}
.dot.warn{background:var(--c-amber);box-shadow:0 0 8px var(--c-amber)}
.dot.err{background:var(--c-red);box-shadow:0 0 8px var(--c-red)}
.dot.info{background:var(--c-primary);box-shadow:0 0 8px var(--c-primary)}
.dot.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.4);opacity:.6}
}

/* 标签/徽章 */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;font-size:12px;border-radius:3px;
  background:rgba(0,229,255,.1);border:1px solid var(--line);color:var(--text-2);
}
.tag.green{background:rgba(0,230,118,.12);border-color:rgba(0,230,118,.4);color:var(--c-green)}
.tag.amber{background:rgba(255,179,0,.12);border-color:rgba(255,179,0,.4);color:var(--c-amber)}
.tag.red{background:rgba(255,61,87,.12);border-color:rgba(255,61,87,.4);color:var(--c-red)}
.tag.purple{background:rgba(124,77,255,.12);border-color:rgba(124,77,255,.4);color:var(--c-purple)}

/* 输入控件 */
.input,.select{
  background:rgba(0,40,90,.6);border:1px solid var(--line);
  color:var(--text-1);padding:6px 10px;border-radius:3px;font-size:13px;
  outline:none;transition:.2s;
}
.input:focus,.select:focus{border-color:var(--c-primary);box-shadow:0 0 0 2px rgba(0,229,255,.15)}

/* 表格 */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid rgba(0,229,255,.08);text-align:left}
.tbl th{color:var(--text-3);font-weight:500;background:rgba(0,40,90,.4)}
.tbl tr:hover td{background:rgba(0,229,255,.05)}

/* 通用动画 */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes flicker{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes glow{0%,100%{box-shadow:0 0 8px rgba(0,229,255,.3)}50%{box-shadow:0 0 24px rgba(0,229,255,.6)}}
.fade-in{animation:fadeIn .35s ease}

/* 装饰小元素 */
.scanline::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0,transparent 50%,rgba(0,229,255,.06) 50%,transparent 51%,transparent 100%);
  background-size:100% 4px;opacity:.5;
}
.hex-corner{position:relative}
.hex-corner::before,.hex-corner::after{
  content:"";position:absolute;width:14px;height:14px;
  border:2px solid var(--c-primary);pointer-events:none;
}
.hex-corner::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hex-corner::after{bottom:-1px;right:-1px;border-left:0;border-top:0}