/* 智享生物 · 薪酬管理子系统 — 样式 */
:root{
  --bg:#f4f6f9;
  --panel:#ffffff;
  --ink:#1a2332;
  --ink-2:#4a5568;
  --ink-3:#8a95a5;
  --line:#e2e8f0;
  --line-2:#eef2f7;
  --brand:#1d4ed8;
  --brand-dark:#16389e;
  --brand-soft:#eef3ff;
  --ok:#15803d;
  --ok-soft:#ecfdf3;
  --warn:#b45309;
  --warn-soft:#fffbeb;
  --danger:#b91c1c;
  --danger-soft:#fef2f2;
  --side:#0f1b2d;
  --side-2:#16263d;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ============ 登录 ============ */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#0f1b2d 0%,#17304f 46%,#1d4ed8 130%);
  padding:24px;
}
.auth-card{
  width:100%; max-width:400px; background:#fff; border-radius:16px;
  padding:32px 30px 24px; box-shadow:0 24px 60px rgba(8,20,45,.30);
}
.auth-card.wide{max-width:460px}
.auth-brand{display:flex; gap:14px; align-items:center}
.auth-logo{
  width:46px; height:46px; flex:none; border-radius:12px;
  background:linear-gradient(140deg,#1d4ed8,#4f46e5);
  color:#fff; font-size:22px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(29,78,216,.35);
}
.auth-brand h1{font-size:18px; margin:0; letter-spacing:.3px}
.auth-brand p{margin:2px 0 0; font-size:12px; color:var(--ink-3)}
.auth-divider{height:1px; background:var(--line-2); margin:22px 0 20px}

.fld{display:block; margin-bottom:15px}
.fld > span{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:6px; font-weight:500}
.fld > span em{font-style:normal; color:var(--ink-3); font-weight:400; margin-left:6px}
.fld input, .toolbar input, .toolbar select{
  width:100%; padding:10px 12px; font-size:14px; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; background:#fbfcfe;
  transition:border-color .15s, box-shadow .15s, background .15s;
  font-family:inherit;
}
.fld input:focus, .toolbar input:focus{
  outline:none; border-color:var(--brand); background:#fff;
  box-shadow:0 0 0 3px rgba(29,78,216,.12);
}
#li-totp, #totp-code{letter-spacing:.42em; font-size:19px; text-align:center; font-weight:600}

.btn-primary{
  width:100%; padding:11px 16px; font-size:14.5px; font-weight:600; color:#fff;
  background:var(--brand); border:none; border-radius:8px; cursor:pointer;
  transition:background .15s, transform .06s; font-family:inherit;
}
.btn-primary:hover{background:var(--brand-dark)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{background:#9aa8c9; cursor:not-allowed}
.btn-primary.sm{width:auto; padding:8px 16px; font-size:13px}

.btn-ghost{white-space:nowrap;
  padding:6px 12px; font-size:12.5px; color:var(--brand); background:var(--brand-soft);
  border:1px solid #d4e0ff; border-radius:6px; cursor:pointer; font-family:inherit;
}
.btn-ghost:hover{background:#e2eaff}
.btn-link{
  background:none; border:none; color:var(--ink-3); font-size:12.5px;
  cursor:pointer; margin-top:16px; padding:0; font-family:inherit;
}
.btn-link:hover{color:var(--brand)}

.auth-foot{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line-2);
  font-size:11.5px; color:var(--ink-3); text-align:center; letter-spacing:.2px;
}
.lock-ico{margin-right:4px}

.msg{
  font-size:12.5px; padding:9px 12px; border-radius:7px; margin-bottom:14px;
  background:var(--danger-soft); color:var(--danger); border:1px solid #fbd5d5;
}
.msg.ok{background:var(--ok-soft); color:var(--ok); border-color:#bbf7d0}

.step-title{font-size:15px; margin:0 0 14px; display:flex; align-items:center; gap:9px}
.step-no{
  width:21px; height:21px; flex:none; border-radius:50%; background:var(--brand);
  color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center;
}
.step-desc{font-size:12.5px; color:var(--ink-2); margin:0 0 12px}
.step-desc.muted{color:var(--ink-3)}
.step-desc code{background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:12px}

.secret-box{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px; margin-bottom:12px;
}
.secret-box code{
  flex:1; font-size:13.5px; letter-spacing:1.6px; word-break:break-all; color:#0f172a;
}

/* ============ 主框架 ============ */
.app{display:flex; min-height:100vh}

.side{
  width:212px; flex:none; background:var(--side); color:#c7d2e0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.side-brand{
  display:flex; align-items:center; gap:11px; padding:20px 18px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.side-logo{
  width:34px; height:34px; flex:none; border-radius:9px;
  background:linear-gradient(140deg,#2563eb,#4f46e5);
  color:#fff; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.side-title strong{display:block; font-size:13.5px; color:#fff; letter-spacing:.3px}
.side-title small{font-size:10.5px; color:#5d7290; letter-spacing:.4px}

.nav{padding:12px 10px; flex:1; overflow-y:auto}
.nav-item{
  display:flex; align-items:center; gap:9px; padding:9px 11px; margin-bottom:2px;
  border-radius:7px; font-size:13px; color:#a9bacd; cursor:pointer;
  text-decoration:none; transition:background .13s, color .13s;
}
.nav-item i{font-style:normal; font-size:14px; width:17px; text-align:center; opacity:.85}
.nav-item:hover{background:rgba(255,255,255,.06); color:#e3ebf5}
.nav-item.active{background:var(--side-2); color:#fff; box-shadow:inset 3px 0 0 var(--brand)}
.nav-item.disabled{opacity:.34; cursor:not-allowed}
.nav-item.disabled:hover{background:none; color:#a9bacd}

.side-foot{padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,.07)}
.user-chip{display:flex; align-items:center; gap:9px; margin-bottom:10px}
.avatar{
  width:30px; height:30px; flex:none; border-radius:50%;
  background:rgba(37,99,235,.28); color:#93b4ff;
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600;
}
.user-chip strong{display:block; font-size:12.5px; color:#e3ebf5}
.user-chip small{font-size:10.5px; color:#5d7290}
.btn-logout{
  width:100%; padding:7px; font-size:12px; color:#93a5bb;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:6px; cursor:pointer; font-family:inherit;
}
.btn-logout:hover{background:rgba(220,38,38,.16); color:#fca5a5; border-color:rgba(220,38,38,.3)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  height:58px; flex:none; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; position:sticky; top:0; z-index:20;
}
.topbar h2{font-size:15.5px; margin:0; font-weight:600}
.topbar-right{display:flex; align-items:center; gap:14px}
.badge-secure{
  font-size:11px; color:var(--ok); background:var(--ok-soft);
  border:1px solid #c6f0d8; padding:3px 9px; border-radius:20px;
}
.topbar-time{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}

.content{padding:22px 26px 40px; flex:1}

/* ============ KPI ============ */
.kpi-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px; margin-bottom:18px;
}
@media (max-width:1180px){ .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .kpi-grid{grid-template-columns:1fr} }
.kpi{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow);
}
.kpi .k-label{font-size:12px; color:var(--ink-3); margin-bottom:7px; letter-spacing:.2px}
.kpi .k-value{
  font-size:23px; font-weight:650; letter-spacing:-.4px;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.kpi .k-value small{font-size:12.5px; font-weight:500; color:var(--ink-3); margin-left:4px}
.kpi.accent{border-left:3px solid var(--brand)}
.kpi.warn{border-left:3px solid #f59e0b}
.kpi.warn .k-value{color:var(--warn)}

/* ============ 面板 ============ */
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  margin-bottom:16px;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line-2);
}
.panel-head h3{margin:0; font-size:13.5px; font-weight:600}
.panel-note{font-size:11.5px; color:var(--ink-3)}
.panel-body{padding:16px 18px}
.panel-body.nopad{padding:0}

.hint{
  font-size:12.5px; color:var(--warn); background:var(--warn-soft);
  border:1px solid #fde68a; border-left:3px solid #f59e0b;
  border-radius:8px; padding:11px 14px; margin-bottom:16px; line-height:1.65;
}

/* ============ 表格 ============ */
.toolbar{display:flex; gap:10px; margin-bottom:14px; align-items:center}
.toolbar input{max-width:300px; min-width:180px}
.toolbar select{max-width:180px; min-width:120px}
.toolbar .btn-primary{flex:none; white-space:nowrap}

.grid{width:100%; border-collapse:collapse; font-size:13px}
.grid th{
  text-align:left; font-weight:600; color:var(--ink-2); font-size:12px;
  background:#f8fafc; padding:10px 14px; border-bottom:1px solid var(--line);
  white-space:nowrap; position:sticky; top:0; z-index:2;
}
.grid td{
  padding:8px 14px; border-bottom:1px solid var(--line-2);
  color:var(--ink); vertical-align:middle;
}
.grid tbody tr:hover{background:#fafbfd}
.grid tbody tr:last-child td{border-bottom:none}
.grid .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.grid .empty{text-align:center; color:var(--ink-3); padding:36px 14px; font-size:12.5px}

.tag{
  display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px;
  background:#f1f5f9; color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap;
}
.tag.ok{background:var(--ok-soft); color:var(--ok); border-color:#c6f0d8}
.tag.warn{background:var(--warn-soft); color:var(--warn); border-color:#fde68a}
.tag.mute{background:#f8fafc; color:var(--ink-3)}
.tag.err{background:var(--danger-soft); color:var(--danger); border-color:#fbd5d5}

/* ============ 抽屉 ============ */
.drawer{position:fixed; inset:0; z-index:200}
.drawer-mask{position:absolute; inset:0; background:rgba(15,27,45,.34); animation:fade .16s ease-out}
@keyframes fade{from{opacity:0} to{opacity:1}}
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width:520px; max-width:92vw;
  background:#fff; box-shadow:-8px 0 32px rgba(8,20,45,.16);
  display:flex; flex-direction:column; animation:slide .18s ease-out;
}
@keyframes slide{from{transform:translateX(24px); opacity:.6} to{transform:translateX(0); opacity:1}}
.drawer-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 22px 14px; border-bottom:1px solid var(--line);
}
.drawer-head h3{margin:0; font-size:16px}
.drawer-head p{margin:3px 0 0; font-size:12px; color:var(--ink-3)}
.drawer-close{
  border:none; background:#f1f5f9; color:var(--ink-2); width:28px; height:28px;
  border-radius:7px; cursor:pointer; font-size:13px; flex:none; font-family:inherit;
}
.drawer-close:hover{background:#e2e8f0}
.drawer-body{padding:18px 22px 32px; overflow-y:auto; flex:1}

.dr-sec{margin-bottom:22px}
.dr-sec h4{
  font-size:12px; color:var(--ink-3); font-weight:600; letter-spacing:.4px;
  margin:0 0 10px; text-transform:uppercase;
}
.dr-kv{display:grid; grid-template-columns:96px 1fr; gap:7px 12px; font-size:13px}
.dr-kv dt{color:var(--ink-3)}
.dr-kv dd{margin:0; color:var(--ink)}

.money-list{display:flex; flex-direction:column; gap:1px; background:var(--line-2); border-radius:8px; overflow:hidden}
.money-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 13px; background:#fff; font-size:13px;
}
.money-row span{color:var(--ink-2)}
.money-row b{font-variant-numeric:tabular-nums; font-weight:600}
.money-row.total{background:#f8fafc; font-size:14px}
.money-row.total b{color:var(--brand); font-size:15px}

.tl{position:relative; padding-left:16px}
.tl::before{content:''; position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--line)}
.tl-item{position:relative; padding-bottom:14px}
.tl-item::before{
  content:''; position:absolute; left:-16px; top:5px; width:7px; height:7px;
  border-radius:50%; background:var(--brand); box-shadow:0 0 0 2px #fff;
}
.tl-item .tl-d{font-size:11.5px; color:var(--ink-3); margin-bottom:2px}
.tl-item .tl-t{font-size:13px}
.tl-item .tl-t b{font-variant-numeric:tabular-nums}
.tl-delta{font-size:12px; font-weight:600; margin-left:6px}
.tl-delta.up{color:var(--danger)}      /* 涨薪用红色（中式口径） */
.tl-delta.down{color:var(--ok)}

.band-bar{
  height:6px; border-radius:3px; background:#eef2f7; position:relative; margin:8px 0 4px;
}
.band-bar .fill{height:100%; border-radius:3px; background:var(--brand)}
.band-bar .fill.over{background:#f59e0b}
.band-legend{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3)}

/* ============ toast ============ */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:#0f1b2d; color:#fff; font-size:13px; padding:11px 22px;
  border-radius:8px; box-shadow:0 12px 30px rgba(8,20,45,.30); z-index:999;
  animation:tin .2s ease-out;
}
@keyframes tin{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}}

@media (max-width:860px){
  .side{width:62px}
  .side-title, .nav-item span, .user-chip div{display:none}
  .content{padding:16px}
}

/* ============ 账号管理：弹窗 + 提示 ============ */
.modal{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center}
.modal-mask{position:absolute; inset:0; background:rgba(15,27,45,.38); animation:fade .16s ease-out}
.modal-box{
  position:relative; width:420px; max-width:92vw; max-height:88vh; overflow-y:auto;
  background:#fff; border-radius:14px; padding:24px 26px 20px;
  box-shadow:0 24px 60px rgba(8,20,45,.26); animation:pop .18s ease-out;
}
@keyframes pop{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
.modal-box h3{margin:0 0 4px; font-size:16px}
.modal-sub{margin:0 0 18px; font-size:12px; color:var(--ink-3)}
.modal-box select{
  width:100%; padding:10px 12px; font-size:14px; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; background:#fbfcfe; font-family:inherit;
}
.modal-box select:focus{outline:none; border-color:var(--brand); background:#fff}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:20px}
.modal-foot .btn-primary.sm, .modal-foot .btn-ghost{padding:8px 18px; font-size:13px}
.msg.err{color:var(--danger); background:#fef2f2; border-color:#fecaca}
.toolbar-note{font-size:12px; color:var(--ink-3); margin-left:auto}
.act-row{display:flex; gap:6px; justify-content:flex-end; white-space:nowrap}
.tag.ok{background:#ecfdf5; color:#047857; border-color:#a7f3d0}
.tag.warn{background:#fffbeb; color:#b45309; border-color:#fde68a}
.tag.err{background:#fef2f2; color:#b91c1c; border-color:#fecaca}
.tag.mute{background:#f1f5f9; color:var(--ink-3)}

/* 弹窗紧凑化：视口高度较小时也能看到底部按钮 */
.modal-box{padding:20px 24px 16px}
.modal-box .fld{margin-bottom:12px}
.modal-box .fld > span{font-size:12px; margin-bottom:5px}
.modal-sub{margin-bottom:14px}
.modal-foot{margin-top:14px; position:sticky; bottom:0; background:#fff; padding-top:6px}

/* ============ 侧边栏用户下拉 + 账号设置（2026-10-22 方案 C） ============ */
.side-foot{position:relative}
.su-toggle{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  border-radius:8px; padding:8px 10px; cursor:pointer; font-family:inherit;
  transition:background .15s;
}
.su-toggle:hover{background:rgba(255,255,255,.12)}
.su-toggle .avatar{
  width:28px; height:28px; flex:none; border-radius:50%;
  background:rgba(37,99,235,.35); color:#b9cdff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;
}
.su-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.su-info strong{display:block; font-size:12.5px; color:#e3ebf5; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.su-info small{font-size:10.5px; color:#7c8fa8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.su-caret{color:#5d7290; font-size:10px; flex:none}
.su-menu{
  position:absolute; left:12px; right:12px; bottom:calc(100% - 2px);
  background:#1b2b42; border:1px solid rgba(255,255,255,.12); border-radius:9px;
  box-shadow:0 -6px 24px rgba(0,0,0,.35); overflow:hidden; z-index:40; padding:4px; margin-bottom:6px;
}
.su-menu button{
  display:block; width:100%; text-align:left; background:none; border:none;
  padding:8px 11px; font-size:12.5px; color:#cfdcec; border-radius:6px;
  cursor:pointer; font-family:inherit;
}
.su-menu button:hover{background:rgba(255,255,255,.09)}

.me-tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px}
.me-tab{
  background:none; border:none; padding:9px 13px; font-size:12.5px; color:var(--ink-3);
  cursor:pointer; font-family:inherit; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.me-tab:hover{color:var(--ink)}
.me-tab.active{color:var(--brand); border-bottom-color:var(--brand); font-weight:600}
.me-body{min-height:280px; max-height:58vh; overflow-y:auto}
.me-rules{display:flex; flex-wrap:wrap; gap:7px; margin:-6px 0 13px}
.me-rules span{
  font-size:11px; padding:2px 8px; border-radius:20px;
  background:#f1f5f9; color:#94a3b8; border:1px solid var(--line); transition:all .15s;
}
.me-rules span.ok{background:#ecfdf5; color:#047857; border-color:#a7f3d0}
.me-rules span.ok::before{content:'✓ '}
.me-rules span.bad{background:#fef2f2; color:#b91c1c; border-color:#fecaca}
.me-warn{
  font-size:11.5px; color:#92400e; background:#fffbeb; border:1px solid #fde68a;
  border-radius:7px; padding:8px 11px; line-height:1.65; margin-bottom:11px;
}
.me-msg{font-size:12px; padding:8px 11px; border-radius:7px; line-height:1.65}
.me-msg.err{background:#fef2f2; color:#b91c1c; border:1px solid #fecaca}
.me-msg.ok{background:#ecfdf5; color:#047857; border:1px solid #a7f3d0}
.me-secret{
  background:#f8fafc; border:1px dashed var(--line); border-radius:8px;
  padding:12px; text-align:center; margin-bottom:14px;
}
.me-secret code{font-size:15px; letter-spacing:.14em; color:var(--ink); font-weight:600}
.me-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px}
.me-hint{font-size:12px; color:var(--ink-3)}
.me-table{width:100%; border-collapse:collapse; font-size:12px}
.me-table th{
  text-align:left; font-weight:600; color:var(--ink-2); font-size:11px;
  background:#f8fafc; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.me-table td{padding:8px 10px; border-bottom:1px solid var(--line-2); color:var(--ink); vertical-align:middle}
.me-table tr:last-child td{border-bottom:none}
.me-table .empty{text-align:center; color:var(--ink-3); padding:30px 10px}
.me-tag{display:inline-block; font-size:10px; padding:1px 7px; border-radius:9px; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe}
.me-tag.ok{background:#ecfdf5; color:#047857; border-color:#a7f3d0}
.me-tag.err{background:#fef2f2; color:#b91c1c; border-color:#fecaca}