/* sector-monitor — 深色行情监测主题 */
:root{
  --bg:#12161c; --bg2:#1a2029; --bg3:#222a35; --line:#2c3644;
  --fg:#e6edf3; --fg2:#9aa7b6; --dim:#6b7480;
  --accent:#4dabf7; --ok:#37b24d; --bad:#f03e3e; --warn:#f59f00;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.55;
}
a{color:inherit;text-decoration:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.right{text-align:right}
.dim{color:var(--fg2)}
.small{font-size:12px}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:10px 22px; background:var(--bg2);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.brand a{font-weight:700; font-size:16px; letter-spacing:.3px}
.nav{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-left:auto}
.nav a{color:var(--fg2); padding:4px 8px; border-radius:8px}
.nav a:hover{color:var(--fg); background:var(--bg3)}
.user{color:var(--fg2); font-size:13px; border-left:1px solid var(--line); padding-left:14px;
  display:flex; align-items:center; gap:12px}
.user a{color:var(--accent)}
.user .uname{color:var(--dim)}

/* ---------- 修改密码页 ---------- */
.pw-wrap{display:flex; justify-content:center; padding:26px 0 10px}
.okbox{
  background:rgba(55,178,77,.12); border:1px solid rgba(55,178,77,.45);
  color:#b2f2bb; padding:9px 12px; border-radius:9px; margin-bottom:16px; font-size:13px;
}

.btn{
  cursor:pointer; border:1px solid var(--line); background:var(--bg3);
  color:var(--fg); padding:6px 12px; border-radius:9px; font-size:13px;
}
.btn:hover{border-color:var(--accent); color:#fff}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#08131f; font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}

.wrap{max-width:1240px; margin:0 auto; padding:26px 22px 60px}
/* ---------- 页脚 + 备案（固定在视口底部，任何页面始终可见） ---------- */
body{padding-bottom:46px}          /* 给固定页脚让位，避免遮挡内容 */

.foot{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  margin:0; padding:7px 16px;
  background:rgba(18,22,28,.94);   /* 半透明深色底，压住下方滚过的内容 */
  border-top:1px solid var(--line);
  color:var(--dim); text-align:center; font-size:12px; line-height:1.5;
}

.icp-footer{
  font-size:12px; line-height:1.6;
  color:rgba(255,255,255,.62);
}
.icp-footer a{
  color:rgba(255,255,255,.82); text-decoration:none;
  display:inline-block; margin:0 6px;      /* 两个备案号各自可点，窄屏自动换行 */
}
.icp-footer a:hover,
.icp-footer a:focus{color:#fff; text-decoration:underline; outline:none}

/* 公安网备图标：官方原图 62×67（带 alpha），按公安部系统给的参数显式渲染 16×17 CSS px。
   不要用 width:auto —— intrinsic 62/67=0.925 与 16/17=0.941 差 1.7%，尺寸以系统参数为准。
   vertical-align:-4px 是实测值（12px 字号下图标中心与文字中心对齐）。 */
.icp-footer img{
  display:inline-block; vertical-align:-4px; margin-right:3px;
  width:16px; height:17px; border:0;
}

@media (max-width:480px){
  .icp-footer{font-size:11px}
  .icp-footer a{margin:0 4px}
}

/* ---------- 登录页布局（卡片居中，页脚是固定页脚） ---------- */
.login-page{display:flex; flex-direction:column; min-height:100vh}
.login-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:24px}

/* ---------- toast ---------- */
.login-card{
  width:340px; background:var(--bg2); border:1px solid var(--line);
  border-radius:16px; padding:30px 28px 26px; box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.login-card h1{font-size:19px; margin:0 0 4px}
.login-card .sub{color:var(--fg2); font-size:13px; margin:0 0 20px}
.login-card label{display:block; margin-bottom:14px; color:var(--fg2); font-size:13px}
.login-card input[type=text],.login-card input[type=password]{
  width:100%; margin-top:6px; padding:10px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--bg); color:var(--fg); font-size:14px;
}
.login-card input:focus{outline:none; border-color:var(--accent)}
.login-card .remember{display:flex; align-items:center; gap:8px; font-size:13px}
.login-card .remember input{width:auto; margin:0}
.login-card .btn{width:100%; margin-top:6px; padding:11px; font-size:15px}
.err{
  background:rgba(240,62,62,.12); border:1px solid rgba(240,62,62,.4);
  color:#ffc9c9; padding:9px 12px; border-radius:9px; margin-bottom:16px; font-size:13px;
}

/* ---------- 总览卡片 ---------- */
.group{margin-bottom:34px}
.group-title{font-size:15px; color:var(--fg2); font-weight:600; letter-spacing:.5px;
  margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line)}
/* 单行卡片：auto-fit 让卡片自动铺满一行，数量多了才换行 */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px; margin-bottom:30px}
.card{
  display:block; background:var(--bg2); border:1px solid var(--line);
  border-top:3px solid var(--accent,var(--accent));   /* 顶部色条 = 分组色 */
  border-radius:var(--radius); padding:14px 16px 15px; transition:.16s;
}
.card:hover{border-color:var(--accent); transform:translateY(-2px)}
.card-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.card-name{font-weight:650; font-size:14.5px; display:flex; align-items:center;
  gap:7px; min-width:0}
.card-tag{                                  /* 分组标签，用分组色描边 */
  font-size:10.5px; font-weight:600; letter-spacing:.4px;
  color:var(--accent); border:1px solid currentColor; border-radius:5px;
  padding:0 5px; opacity:.85; white-space:nowrap;
}
.card-unit{color:var(--dim); font-size:12px; white-space:nowrap}
.card-val{font-size:26px; font-weight:700; margin:8px 0 2px; letter-spacing:-.5px;
  color:var(--accent); font-variant-numeric:tabular-nums}
.card-val.dim{color:var(--fg2); font-size:16px; font-weight:500}
.card-date{color:var(--fg2); font-size:12px}
.card-desc{color:var(--fg2); font-size:12.5px; margin:9px 0; min-height:34px}
.card-foot{display:flex; gap:6px; flex-wrap:wrap}
.pill{
  background:var(--bg3); border:1px solid var(--line); border-radius:999px;
  padding:2px 9px; font-size:11px; color:var(--fg2);
}

/* ---------- 日志表 ---------- */
table.log{width:100%; border-collapse:collapse; font-size:12.5px}
table.log th{text-align:left; color:var(--fg2); font-weight:600; padding:8px 10px;
  border-bottom:1px solid var(--line)}
table.log td{padding:7px 10px; border-bottom:1px solid rgba(255,255,255,.045)}
.ok{color:var(--ok)} .bad{color:var(--bad)}

/* ---------- 面板页 ---------- */
.panel-head{display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap; margin-bottom:20px}
.panel-head h1{font-size:22px; margin:0 0 6px}
.panel-head .sub{color:var(--fg2); margin:0; font-size:13px}
.panel-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.range-tabs{display:flex; background:var(--bg2); border:1px solid var(--line); border-radius:9px; overflow:hidden}
.range-tabs .tab{
  cursor:pointer; border:0; background:transparent; color:var(--fg2);
  padding:7px 13px; font-size:13px;
}
.range-tabs .tab:hover{color:var(--fg)}
.range-tabs .tab.active{background:var(--bg3); color:var(--accent); font-weight:600}
.chart{height:520px; background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--radius); padding:8px}
.panel-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:24px}
@media(max-width:820px){.panel-grid{grid-template-columns:1fr}.chart{height:400px}}
.sec-title{font-size:13px; color:var(--fg2); margin:0 0 10px; font-weight:600}
table.kv{width:100%; border-collapse:collapse; font-size:13px}
table.kv td{padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.05)}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:9px}
.note{color:var(--dim); font-size:11.5px; margin-top:12px; line-height:1.7}

/* ---------- 审计日志页 ---------- */
table.log.audit td{font-size:12.5px}
.ev{font-weight:600; white-space:nowrap}
.ev-login_ok{color:var(--ok)}
.ev-login_fail,.ev-login_locked{color:var(--bad)}
.ev-password_change{color:var(--warn)}
.ev-panel_refresh{color:var(--accent)}
.ev-logout{color:var(--fg2)}

/* ---------- toast ---------- */
#toast{
  position:fixed; left:50%; bottom:58px; transform:translateX(-50%) translateY(20px);
  background:var(--bg3); border:1px solid var(--accent); color:var(--fg);
  padding:11px 20px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none;
  transition:.25s; z-index:99; box-shadow:0 10px 30px rgba(0,0,0,.4);
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}