/* 龙遇 · 冷调高级灰 · 无障碍基线
   无障碍要求：按钮 ≥48px、文案短、状态变化必须有视觉信号（不依赖声音） */
:root{
  --bg:#14171c; --panel:#1b1f26; --panel2:#22262f; --line:#2b303a; --line2:#3a4150;
  --text:#e6e9ee; --text2:#9aa4b2; --text3:#6b7482;
  --accent:#5b8def; --accent-ink:#ffffff;
  --ok:#3fae7a; --warn:#e0a252; --danger:#e05252;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}

/* ---------- 布局 ---------- */
.wrap{max-width:1100px;margin:0 auto;padding:0 20px;}
.narrow{max-width:460px;margin:0 auto;padding:0 20px;}

header.top{
  border-bottom:1px solid var(--line); background:var(--panel);
  padding:14px 0; position:sticky; top:0; z-index:20;
}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand{font-size:19px;font-weight:700;letter-spacing:2px;}
.brand small{display:block;font-size:11px;color:var(--text3);letter-spacing:0;font-weight:400;margin-top:2px;}

/* ---------- 按钮（无障碍：≥48px） ---------- */
button,.btn{
  min-height:48px; padding:0 20px; border:none; border-radius:var(--radius);
  background:var(--panel2); color:var(--text); font-size:15px; cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line); transition:.15s;
}
button:hover,.btn:hover{border-color:var(--line2);background:#282d38;}
button:disabled{opacity:.45;cursor:not-allowed;}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.btn-primary:hover{background:#4a7ce0;border-color:#4a7ce0;}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);}
.btn-danger:hover{background:#c94646;border-color:#c94646;}
.btn-block{width:100%;}
.btn-lg{min-height:56px;font-size:16px;}
.btn-sm{min-height:38px;padding:0 12px;font-size:13px;}

/* ---------- 表单 ---------- */
.field{margin:14px 0;}
.field label{display:block;font-size:13px;color:var(--text2);margin-bottom:6px;}
input,select,textarea{
  width:100%; min-height:48px; padding:10px 14px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--text); font-size:15px; font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
input[type=number]{font-variant-numeric:tabular-nums;}
.row{display:flex;gap:10px;}
.row>*{flex:1;}

/* ---------- 卡片 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin:16px 0;}
.card h3{margin:0 0 12px;font-size:16px;}

/* ---------- 角色选择 ---------- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0;}
.role-card{
  background:var(--panel);border:2px solid var(--line);border-radius:12px;
  padding:18px 12px;text-align:center;cursor:pointer;transition:.15s;min-height:96px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.role-card:hover{border-color:var(--line2);}
.role-card.on{border-color:var(--accent);background:#1e2635;}
.role-card .ico{font-size:26px;line-height:1;}
.role-card .t{font-size:15px;font-weight:600;}
.role-card .d{font-size:12px;color:var(--text3);line-height:1.4;}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
th{color:var(--text2);font-weight:600;font-size:12.5px;background:var(--panel2);}
tbody tr:hover{background:#1f242c;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}

/* ---------- 后台骨架 ---------- */
.admin{display:flex;min-height:100vh;}
.side{width:200px;background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;flex-shrink:0;}
.side .nav{display:block;width:100%;text-align:left;margin-bottom:6px;justify-content:flex-start;}
.side .nav.on{background:#1e2635;border-color:var(--accent);color:var(--accent);}
.main{flex:1;padding:22px;min-width:0;}

/* ---------- KPI ---------- */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.kpi .box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.kpi .v{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;}
.kpi .l{font-size:12px;color:var(--text3);margin-top:4px;}

/* ---------- 徽标 ---------- */
.tag{display:inline-block;padding:2px 8px;border-radius:5px;font-size:12px;border:1px solid var(--line2);color:var(--text2);}
.tag.ok{color:var(--ok);border-color:#2c5f47;background:#16241e;}
.tag.warn{color:var(--warn);border-color:#5c452a;background:#241d13;}
.tag.danger{color:var(--danger);border-color:#5c2b2b;background:#241616;}
.tag.accent{color:var(--accent);border-color:#2c4370;background:#161d2b;}

/* ---------- 提示 / Toast（视觉优先，不依赖声音） ---------- */
#toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{
  background:var(--panel2);border:1px solid var(--line2);color:var(--text);
  padding:12px 20px;border-radius:10px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:toastIn .2s ease;
}
.toast.err{border-color:var(--danger);color:#ffb3b3;}
.toast.ok{border-color:var(--ok);color:#9fe0c1;}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* 关键提醒：闪烁（聋人用户依赖视觉信号） */
@keyframes flashAlert{0%,100%{box-shadow:0 0 0 0 rgba(224,82,82,0);}50%{box-shadow:0 0 0 8px rgba(224,82,82,.35);}}
.flash{animation:flashAlert 1s infinite;}

.muted{color:var(--text3);font-size:13px;}
.center{text-align:center;}
.hidden{display:none !important;}
.mt{margin-top:16px;} .mb{margin-bottom:16px;}
hr{border:none;border-top:1px solid var(--line);margin:18px 0;}
@media (max-width:720px){
  .roles{grid-template-columns:1fr;}
  .admin{flex-direction:column;}
  .side{width:100%;display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);}
  .side .nav{margin:0 6px 0 0;white-space:nowrap;}
}