*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4f6fa;--panel:#fff;--panel2:#fafbfd;--border:#e5e9f0;--border2:#eef1f6;
  --text:#0f172a;--text2:#4b5768;--muted:#8b95a5;
  --primary:#2563eb;--primary-soft:#eef3ff;--primary-dark:#1d4ed8;
  --ok:#0d9488;--ok-soft:#e6f7f4;--warn:#c2740a;--warn-soft:#fdf4e3;
  --danger:#dc2626;--danger-soft:#fdecec;--info:#6366f1;--info-soft:#eef0fe;
  --sidebar:#0d1526;--sidebar2:#141d31;--sidebar-text:#8e9cb4;
  --r:10px;--r2:14px;
  --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --sh2:0 8px 28px rgba(16,24,40,.12);
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);font-size:13.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#94a3b8;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 登录 ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 15% 0%,#e8efff 0%,transparent 55%),
             radial-gradient(900px 500px at 90% 100%,#eaf7f4 0%,transparent 55%),#f4f6fa;
  padding:32px 20px}
.login-box{width:100%;max-width:880px}
.login-head{text-align:center;margin-bottom:26px}
.login-logo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#4f46e5);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px;
  box-shadow:0 8px 20px rgba(37,99,235,.28);margin-bottom:14px;letter-spacing:-.5px}
.login-head h1{font-size:22px;font-weight:650;letter-spacing:-.3px}
.login-head p{color:var(--muted);font-size:13px;margin-top:5px}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.role-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r2);padding:20px 18px;
  text-align:left;transition:.18s;position:relative;overflow:hidden}
.role-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--sh2)}
.role-card.on{border-color:var(--primary);background:var(--primary-soft)}
.role-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.role-card h3{font-size:14.5px;font-weight:600;margin-bottom:5px}
.role-card p{font-size:12px;color:var(--muted);line-height:1.55;min-height:37px}
.role-card .cnt{font-size:11px;color:var(--primary);font-weight:600;margin-top:9px}
.line-pick{margin-top:16px;background:#fff;border:1px solid var(--border);border-radius:var(--r);
  padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.line-pick .lbl{font-size:12.5px;color:var(--text2);font-weight:500}
.chip{padding:6px 13px;border-radius:20px;font-size:12.5px;border:1px solid var(--border);
  background:#fff;color:var(--text2);transition:.15s}
.chip:hover{border-color:#c3cede}
.chip.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500}
.login-btn{width:100%;margin-top:18px;padding:12px;border-radius:var(--r);background:var(--primary);
  color:#fff;font-weight:600;font-size:14px;transition:.15s;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.login-btn:hover{background:var(--primary-dark)}
.login-btn:disabled{background:#c3cede;box-shadow:none;cursor:not-allowed}
.lg-card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 40px rgba(16,24,40,.09);padding:34px 32px 26px;width:100%;max-width:400px}
.lg-head{text-align:center;margin-bottom:22px}
.lg-field{margin-bottom:13px}
.lg-field label{display:block;font-size:12.5px;font-weight:600;color:var(--text2);margin-bottom:6px}
.lg-field input{width:100%;padding:10.5px 13px;border:1.5px solid var(--border);border-radius:9px;font-size:13.5px;outline:none;transition:.15s;background:var(--panel2)}
.lg-field input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3.5px var(--primary-soft)}
.lg-btn{width:100%;margin-top:6px;padding:11px;border-radius:9px;background:var(--primary);color:#fff;font-weight:600;font-size:14px;transition:.15s;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.lg-btn:hover{background:var(--primary-dark)}
.lg-err{color:var(--danger);font-size:12.3px;margin-top:9px;min-height:18px;text-align:center}
.lg-demo{margin-top:16px;padding-top:15px;border-top:1px solid var(--border2);text-align:center}
.lg-demo .t{font-size:11.3px;color:var(--muted);margin-bottom:8px;line-height:1.6}
.lg-chip{display:inline-flex;align-items:center;margin:3px;padding:5px 11px;border:1px solid var(--border);border-radius:18px;font-size:12px;background:var(--panel2);color:var(--text2);transition:.14s}
.lg-chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.user-chip{cursor:pointer;transition:.15s}
.user-chip:hover{border-color:#c3cede;background:var(--panel2)}
.su-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:9px;transition:.13s;text-align:left}
.su-row:hover{background:var(--panel2)}

/* ---------- 外壳 ---------- */
.app{display:flex;min-height:100vh;--sw:232px}
.app.collapsed{--sw:68px}
.sidebar{width:var(--sw);background:var(--sidebar);flex-shrink:0;display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:30;overflow:hidden;transition:width .18s ease}
.side-logo{padding:19px 20px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #1c2740}
.side-logo .mark{width:31px;height:31px;border-radius:9px;background:linear-gradient(135deg,#3b82f6,#6366f1);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0}
.side-logo b{color:#fff;font-size:14.5px;font-weight:600;letter-spacing:-.2px;display:block;line-height:1.25}
.side-logo span{color:#5f6d85;font-size:10.5px;letter-spacing:.4px}
.side-nav{flex:1;overflow-y:auto;padding:10px 10px 16px}
.side-nav::-webkit-scrollbar{width:5px}
.side-nav::-webkit-scrollbar-thumb{background:#2a3852;border:none}
.nav-group{font-size:10.5px;color:#56637a;font-weight:600;letter-spacing:.8px;
  padding:14px 10px 6px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:8.5px 11px;border-radius:8px;
  color:var(--sidebar-text);font-size:13px;transition:.13s;width:100%;text-align:left;margin-bottom:1px;position:relative}
.nav-item:hover{background:#1a2437;color:#d6deea}
.nav-item.on{background:#1e2a41;color:#fff;font-weight:500}
.nav-item.on::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;
  background:#3b82f6;border-radius:0 3px 3px 0}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.85}
.nav-item.lock{opacity:.42;cursor:not-allowed}
.nav-badge{margin-left:auto;font-size:10px;background:#dc2626;color:#fff;border-radius:9px;
  padding:1px 6px;font-weight:600;line-height:1.5}
.side-foot{padding:12px 16px;border-top:1px solid #1c2740;font-size:11px;color:#4d5a70}

.main{flex:1;margin-left:var(--sw);display:flex;flex-direction:column;min-width:0;transition:margin-left .18s ease}
.topbar{height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;
  align-items:center;padding:0 22px;gap:14px;position:sticky;top:0;z-index:20}
.side-toggle{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:.14s;flex-shrink:0}
.side-toggle:hover{background:var(--panel2);color:var(--text)}
.crumb{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px}
.crumb b{color:var(--text);font-weight:600;font-size:14px}
.top-search{margin-left:auto;position:relative}
.top-search input{width:210px;padding:7px 12px 7px 31px;border:1px solid var(--border);border-radius:8px;
  background:var(--panel2);font-size:12.5px;outline:none;transition:.15s}
.top-search input:focus{width:250px;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--primary-soft)}
.top-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted)}
.role-tag{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;
  font-size:12px;font-weight:600;background:var(--primary-soft);color:var(--primary)}
.user-chip{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:20px;
  border:1px solid var(--border);background:#fff}
.avatar{width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#3b82f6);
  color:#fff;font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.user-chip .nm{font-size:12.5px;font-weight:500}
.user-chip .rl{font-size:10.5px;color:var(--muted);display:block;line-height:1.2}
.logout{font-size:12px;color:var(--muted);padding:6px 9px;border-radius:7px;transition:.15s}
.logout:hover{background:var(--danger-soft);color:var(--danger)}

.content{padding:22px;flex:1;min-width:0}
.page-head{margin-bottom:18px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.page-head h2{font-size:19px;font-weight:650;letter-spacing:-.3px}
.page-head p{font-size:12.5px;color:var(--muted);margin-top:2px}
.page-head .acts{margin-left:auto;display:flex;gap:8px}

/* ---------- 通用组件 ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--sh)}
.card+.card{margin-top:16px}
.card-head{padding:15px 18px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:10px}
.card-head h3{font-size:14px;font-weight:600}
.card-head .sub{font-size:11.5px;color:var(--muted)}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-body{padding:16px 18px}
.card-body.flush{padding:0}

.btn{padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:500;border:1px solid var(--border);
  background:#fff;color:var(--text2);transition:.14s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:#c3cede;background:var(--panel2)}
.btn.pri{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.pri:hover{background:var(--primary-dark)}
.btn.sm{padding:4.5px 10px;font-size:12px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--primary)}
.btn.ghost:hover{background:var(--primary-soft)}
.btn.dgr{color:var(--danger);border-color:#f5c9c9}
.btn.dgr:hover{background:var(--danger-soft)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:6px;
  font-size:11.5px;font-weight:500;white-space:nowrap;line-height:1.7}
.badge i{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.b-ok{background:var(--ok-soft);color:var(--ok)}
.b-warn{background:var(--warn-soft);color:var(--warn)}
.b-dgr{background:var(--danger-soft);color:var(--danger)}
.b-info{background:var(--info-soft);color:var(--info)}
.b-gray{background:#f1f4f9;color:#7b8698}
.b-line{background:#f1f4f9;color:var(--text2)}

.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12.3px}
.muted{color:var(--muted)}
.tiny{font-size:11.5px}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.3px;
  padding:10px 16px;background:var(--panel2);border-bottom:1px solid var(--border2);white-space:nowrap}
td{padding:11px 16px;border-bottom:1px solid var(--border2);font-size:12.8px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fbfcfe}
.t-acts{display:flex;gap:6px;justify-content:flex-end}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:var(--r2);padding:15px 16px;
  box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi .k-l{font-size:11.5px;color:var(--muted);font-weight:500;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.kpi .k-v{font-size:23px;font-weight:680;letter-spacing:-.6px;line-height:1.15}
.kpi .k-v small{font-size:12px;font-weight:500;color:var(--muted);margin-left:3px;letter-spacing:0}
.kpi .k-f{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:5px}
.up{color:#dc2626;font-weight:600}
.down{color:#0d9488;font-weight:600}
.kpi::after{content:'';position:absolute;right:-24px;top:-24px;width:74px;height:74px;border-radius:50%;
  background:var(--primary-soft);opacity:.75}

.lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px;margin-bottom:16px}
.line-card{background:#fff;border:1px solid var(--border);border-radius:var(--r2);padding:15px 16px;
  box-shadow:var(--sh);position:relative;overflow:hidden}
.line-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lc)}
.line-card .lh{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.line-mark{width:29px;height:29px;border-radius:8px;background:var(--lsoft);color:var(--lc);
  font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.2px}
.line-card h4{font-size:13.5px;font-weight:600}
.line-card .ld{font-size:11px;color:var(--muted);display:block;line-height:1.35}
.line-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.line-metrics div{background:var(--panel2);border-radius:8px;padding:8px 10px}
.line-metrics .ml{font-size:10.5px;color:var(--muted)}
.line-metrics .mv{font-size:15px;font-weight:650;letter-spacing:-.3px;margin-top:1px}

.bars{display:flex;align-items:flex-end;gap:9px;height:150px;padding:10px 4px 0}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.bars .bar{width:100%;max-width:38px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--bc),var(--bc2));
  transition:.25s;position:relative;min-height:4px}
.bars .bar:hover{filter:brightness(1.08)}
.bars .bl{font-size:10.5px;color:var(--muted);white-space:nowrap}
.bars .bv{font-size:10.5px;color:var(--text2);font-weight:600}

.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.tabs{display:flex;gap:3px;background:#eef1f6;padding:3px;border-radius:9px}
.tab{padding:6px 13px;border-radius:7px;font-size:12.5px;color:var(--text2);transition:.14s;font-weight:500}
.tab:hover{color:var(--text)}
.tab.on{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.08);font-weight:600}
.fi{padding:7px 11px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:12.5px;outline:none;min-width:130px}
.fi:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}

.pwd{display:inline-flex;align-items:center;gap:8px}
.pwd .dots{letter-spacing:1.5px;color:var(--muted);font-size:13px}
.pwd .val{background:#fff8e6;border:1px dashed #e8c377;border-radius:5px;padding:1px 7px;font-size:12.3px}
.risk-hi{color:var(--danger)}
.risk-md{color:var(--warn)}

.timeline{position:relative;padding-left:20px}
.timeline::before{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:1.5px;background:var(--border)}
.tl-item{position:relative;padding-bottom:17px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-19px;top:4px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--primary)}
.tl-dot.g{border-color:var(--ok)}.tl-dot.r{border-color:var(--danger)}.tl-dot.y{border-color:var(--warn)}
.tl-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tl-h b{font-size:13px;font-weight:600}
.tl-h span{font-size:11.5px;color:var(--muted)}
.tl-b{font-size:12.3px;color:var(--text2);margin-top:3px}

.alert{display:flex;gap:11px;padding:12px 14px;border-radius:var(--r);font-size:12.6px;
  border:1px solid var(--border);background:var(--panel2);margin-bottom:14px;align-items:flex-start}
.alert.w{background:var(--warn-soft);border-color:#f0dcb4;color:#8a5409}
.alert.i{background:var(--primary-soft);border-color:#d3e0fd;color:#1e40af}
.alert b{font-weight:600}
.alert > svg{width:16px;height:16px;flex:0 0 auto;margin-top:1.5px;color:inherit}

.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:13px}
.empty svg{width:34px;height:34px;opacity:.4;margin-bottom:10px}

.deny{padding:52px 20px;text-align:center;max-width:420px;margin:0 auto}
.deny .ic{width:56px;height:56px;border-radius:50%;background:var(--danger-soft);color:var(--danger);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.deny h3{font-size:16px;font-weight:650;margin-bottom:7px}
.deny p{font-size:12.8px;color:var(--muted);line-height:1.7}

/* ---------- 弹窗 / 提示 ---------- */
.mask{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .16s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:var(--r2);width:100%;max-width:430px;box-shadow:var(--sh2);
  animation:pop .2s cubic-bezier(.2,.9,.3,1.2);overflow:hidden}
@keyframes pop{from{transform:scale(.95) translateY(8px);opacity:0}to{transform:none;opacity:1}}
.modal-head{padding:17px 20px 13px;display:flex;align-items:center;gap:10px}
.modal-head .mi{width:33px;height:33px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-head h3{font-size:14.5px;font-weight:650}
.modal-head p{font-size:11.8px;color:var(--muted)}
.modal-body{padding:0 20px 6px;font-size:12.8px;color:var(--text2);line-height:1.7}
.modal-body .kv{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border2)}
.modal-body .kv:last-child{border-bottom:none}
.modal-body .kv .k{color:var(--muted);width:74px;flex-shrink:0;font-size:12.3px}
.modal-body .kv .v{flex:1;word-break:break-all}
.modal-foot{padding:15px 20px 18px;display:flex;gap:9px;justify-content:flex-end}
.secret{background:#fff8e6;border:1px dashed #e8c377;border-radius:7px;padding:9px 12px;
  font-size:14px;letter-spacing:.4px;text-align:center;margin:6px 0 4px;user-select:all}

.toasts{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:9px}
.toast{background:#0f172a;color:#fff;padding:10px 15px;border-radius:9px;font-size:12.6px;
  box-shadow:var(--sh2);display:flex;align-items:center;gap:9px;animation:slide .22s}
@keyframes slide{from{transform:translateX(22px);opacity:0}to{transform:none;opacity:1}}
.toast svg{width:15px;height:15px;color:#4ade80;flex-shrink:0}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid2>.card{margin-top:0}
.sec-title{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.5px;
  text-transform:uppercase;margin:20px 0 10px}
.perm-table td{text-align:center}
.perm-table td:first-child{text-align:left;font-weight:500}
.perm-table th:not(:first-child){text-align:center}
.y{color:var(--ok);font-weight:700}
.n{color:#cbd5e1}
.p{color:var(--warn);font-weight:700;font-size:11.5px}
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:11px}
.link-item{display:flex;gap:11px;padding:12px 13px;border:1px solid var(--border);border-radius:var(--r);
  background:#fff;transition:.15s;align-items:center}
.link-item:hover{border-color:var(--primary);box-shadow:var(--sh);transform:translateY(-1px)}
.link-ic{width:32px;height:32px;border-radius:8px;background:var(--panel2);display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--text2);flex-shrink:0}
.link-item b{font-size:13px;font-weight:600;display:block}
.link-item span{font-size:11.3px;color:var(--muted);word-break:break-all}
.progress{height:6px;background:#eef1f6;border-radius:4px;overflow:hidden;margin-top:7px}
.progress i{display:block;height:100%;border-radius:4px;background:var(--primary)}
/* 折叠态：窄栏只留图标 */
.app.collapsed .side-logo,
.app.collapsed .nav-item{justify-content:center;padding-left:0;padding-right:0}
.app.collapsed .side-logo .txt,
.app.collapsed .nav-group,
.app.collapsed .nav-item>span,
.app.collapsed .side-foot{display:none}
.app.collapsed .nav-item{padding:11px 0}
/* 窗口较窄时自动收窄，功能栏始终可见 */
@media(max-width:1180px){
  .app{--sw:68px}
  .app .side-logo,
  .app .nav-item{justify-content:center;padding-left:0;padding-right:0}
  .app .side-logo .txt,
  .app .nav-group,
  .app .nav-item>span,
  .app .side-foot{display:none}
  .app .nav-item{padding:11px 0}
}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}.roles{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
@media(max-width:720px){
  .top-search{display:none}
  .content{padding:14px}
  .topbar{padding:0 13px;gap:9px}
}

/* ============ 正式版补充样式 ============ */
.loading{padding:64px 20px;text-align:center;color:var(--muted);font-size:13px}
.spin{width:22px;height:22px;border:2.5px solid var(--border);border-top-color:var(--primary);
  border-radius:50%;display:inline-block;animation:sp .7s linear infinite;vertical-align:-4px}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,#eef1f6 25%,#f6f8fb 37%,#eef1f6 63%);
  background-size:400% 100%;animation:shim 1.3s ease infinite;border-radius:6px;height:13px}
@keyframes shim{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skel-row{height:38px;margin:8px 16px}
.form-row{margin-bottom:12px}
.form-row label{display:block;font-size:12.3px;font-weight:600;color:var(--text2);margin-bottom:5px}
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:8.5px 11px;border:1.5px solid var(--border);border-radius:8px;
  font-size:12.8px;outline:none;background:var(--panel2);transition:.14s;font-family:inherit}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--primary-soft)}
.form-row textarea{resize:vertical;min-height:62px;line-height:1.6}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.form-err{color:var(--danger);font-size:12.3px;min-height:17px;margin:2px 0 4px}
.modal.wide{max-width:620px}
.modal.wide .modal-body{max-height:62vh;overflow-y:auto}
.modal.narrow{max-width:400px}
.warn-tip{background:var(--warn-soft);border:1px solid #f0dcb4;color:#8a5409;border-radius:8px;
  padding:9px 12px;font-size:12.2px;line-height:1.65;margin-bottom:12px}
.warn-tip b{font-weight:650}
.dgr-tip{background:var(--danger-soft);border:1px solid #f5c9c9;color:#a51c1c;border-radius:8px;
  padding:9px 12px;font-size:12.2px;line-height:1.65;margin-bottom:12px}
.kv-row{display:flex;gap:9px;align-items:center}
.tag-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.inp-inline{padding:7px 10px;border:1px solid var(--border);border-radius:7px;font-size:12.5px;outline:none;background:#fff}
.inp-inline:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.card-note{padding:10px 18px;border-top:1px solid var(--border2);font-size:11.8px;color:var(--muted);background:var(--panel2)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two-col>.card{margin-top:0}
.bar-legend{display:flex;gap:16px;font-size:11.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.bar-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}
@media(max-width:900px){.two-col,.form-2{grid-template-columns:1fr}}