/* ============================================================
   卖货机 · 统一后台 UI 规范（深色）
   只做视觉与排版，不改任何业务逻辑
   ============================================================ */

/* ---------- 1. 色彩 / 字号 / 间距 ---------- */
html:root{
  --bg:#0f172a;            /* 页面底色 */
  --panel:#1e293b;         /* 卡片底色 */
  --panel2:#273449;        /* 卡片内次级块 */
  --row:#334155;           /* 行 hover / 选中 */
  --line:rgba(148,163,184,.16);   /* 只在必要时用，尽量靠留白分组 */
  --txt:#e2e8f0;
  --dim:#94a3b8;
  --accent:#2b74e9;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --muted:#64748b;
  --radius:14px;
  --gap:16px;
  --pad:20px;
  --fs-title:18px;
  --fs-h:15px;
  --fs-body:13px;
  --fs-note:11px;
}

body{
  background:var(--bg) !important;
  color:var(--txt);
  font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
}

/* ---------- 2. 顶部导航 ---------- */
.top{
  background:var(--bg) !important;
  border-bottom:1px solid var(--line) !important;
  padding:14px 24px !important;
  gap:18px !important;
}
.top h1{ font-size:var(--fs-title) !important; letter-spacing:.5px; }
.top h1::before{
  content:"🛒";
  margin-right:8px;
  font-size:16px;
}
.top nav{
  gap:4px !important;
  margin-left:16px !important;
  flex-wrap:wrap;
}
.top nav a{
  border:0 !important;
  background:transparent !important;
  color:var(--dim) !important;
  padding:8px 14px !important;
  border-radius:10px !important;
  font-size:var(--fs-body) !important;
  transition:background .15s,color .15s;
}
.top nav a:hover{ background:var(--panel) !important; color:var(--txt) !important; }
.top nav a.on{
  background:var(--accent) !important;
  color:#fff !important;
  font-weight:600;
}
/* 右侧用户区与导航做隔离 */
.top .who{
  margin-left:auto !important;
  padding-left:18px;
  border-left:1px solid var(--line);
  color:var(--dim) !important;
}
.top .who b{ color:var(--txt) !important; }
.top .who a{ color:var(--bad) !important; }

/* ---------- 3. 卡片 / 分区 ---------- */
.wrap{ padding:20px 24px !important; max-width:1320px !important; }
.card{
  background:var(--panel) !important;
  border:1px solid transparent !important;
  border-radius:var(--radius) !important;
  padding:var(--pad) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
}
.card + .card{ margin-top:var(--gap); }
.grid{ gap:var(--gap) !important; }
.card h2{
  font-size:var(--fs-h) !important;
  font-weight:700 !important;
  margin:0 0 14px !important;
}
.card h2 .cnt{ color:var(--dim) !important; font-weight:400; font-size:var(--fs-note) !important; }
h1{font-size:var(--fs-title)}
h3{font-size:var(--fs-h);font-weight:700;margin:18px 0 10px}

/* ---------- 4. 按钮分级 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 16px;
  border-radius:10px; border:1px solid transparent;
  background:var(--accent); color:#fff;
  font-size:var(--fs-body); font-weight:600; cursor:pointer;
  transition:filter .15s,background .15s,border-color .15s;
  white-space:nowrap;
}
.btn:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.sm{ height:30px; padding:0 12px; font-size:12px; border-radius:8px; }

/* 次要：描边 */
.btn.gray,.btn.sec{
  background:transparent !important;
  border-color:rgba(148,163,184,.35) !important;
  color:var(--txt) !important;
}
.btn.gray:hover,.btn.sec:hover{ background:var(--panel2) !important; }

/* 强操作：绿色（启动导播 / 保存成功类） */
.btn.green{ background:var(--ok) !important; color:#062b14 !important; font-weight:700; }

/* 危险 */
.btn.red{ background:transparent !important; border-color:rgba(239,68,68,.55) !important; color:#fca5a5 !important; }
.btn.red:hover{ background:rgba(239,68,68,.12) !important; }

/* 文字按钮：低频（刷新 / 全部已读） */
.btn.text,.btn.link{
  background:transparent !important; border:0 !important;
  color:var(--accent) !important; padding:0 6px !important; height:auto !important;
}

/* ---------- 5. 状态标签 ---------- */
.pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:var(--fs-note) !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  background:rgba(100,116,139,.18) !important;
  color:var(--dim) !important;
  white-space:nowrap;
}
.pill.ok,.pill.live,.pill.active{ background:rgba(34,197,94,.16) !important; color:#86efac !important; }
.pill.warn,.pill.pending{ background:rgba(245,158,11,.16) !important; color:#fcd34d !important; }
.pill.bad,.pill.danger,.pill.blocked{ background:rgba(239,68,68,.16) !important; color:#fca5a5 !important; }
.pill.mute,.pill.off{ background:rgba(100,116,139,.18) !important; color:var(--dim) !important; }

/* ---------- 6. 表格 ---------- */
table{ font-size:var(--fs-body) !important; }
th{
  color:var(--dim) !important;
  font-weight:500 !important;
  font-size:var(--fs-note) !important;
  text-transform:none;
  padding:10px 8px !important;
  border-bottom:1px solid var(--line) !important;
  background:transparent !important;
}
td{
  padding:12px 8px !important;
  border-bottom:1px solid var(--line) !important;
  vertical-align:middle;
}
tr:last-child td{ border-bottom:0 !important; }
tr:hover td{ background:var(--row) !important; }

/* ---------- 7. 表单 ---------- */
label{
  display:block;
  font-size:var(--fs-note) !important;
  color:var(--dim) !important;
  margin-bottom:6px !important;
}
input[type=text],input[type=password],input[type=number],input[type=search],
input:not([type]),select,textarea{
  width:100%;
  height:38px;
  padding:0 12px;
  background:var(--panel2) !important;
  color:var(--txt) !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  font-size:var(--fs-body) !important;
  outline:none;
}
textarea{ height:auto; padding:10px 12px; line-height:1.6; }
input:focus,select:focus,textarea:focus{ border-color:var(--accent) !important; }
.hint,.note,.desc{
  color:var(--dim) !important;
  font-size:var(--fs-note) !important;
  line-height:1.6;
}

/* ---------- 8. 统计数字 ---------- */
.stat{
  background:var(--panel2);
  border-radius:12px;
  padding:16px 18px;
}
.stat .k{ font-size:var(--fs-note); color:var(--dim); margin-bottom:6px; }
.stat .v{ font-size:28px; font-weight:800; line-height:1.1; letter-spacing:.5px; }
.stat .v small{ font-size:12px; font-weight:500; color:var(--dim); margin-left:4px; }

/* ---------- 9. 告警横幅 ---------- */
.banner-alert{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.45);
  color:#fecaca;
  border-radius:12px;
  padding:12px 16px;
  font-size:var(--fs-body);
  margin-bottom:var(--gap);
  display:flex; align-items:center; gap:8px;
}

/* ---------- 10. 空状态 ---------- */
.empty{
  text-align:center;
  color:var(--dim);
  padding:48px 12px;
  font-size:var(--fs-body);
}
.empty::before{
  content:"📭";
  display:block;
  font-size:32px;
  margin-bottom:10px;
  opacity:.7;
}

/* ---------- 11. 移动端 ---------- */
@media (max-width:900px){
  .wrap{ padding:16px !important; }
  .top{ flex-wrap:wrap; }
  .top .who{ margin-left:0 !important; border-left:0; padding-left:0; }
}


/* ---------- 12. 状态条（把多条 banner 压成一行小胶囊） ---------- */
.banner, #dyBadge, #devBadge{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin:0 8px 12px 0 !important;
  padding:7px 12px !important;
  border-radius:10px !important;
  font-size:12px !important;
  line-height:1.4;
  border:1px solid rgba(148,163,184,.22) !important;
  background:rgba(30,41,59,.7) !important;
  color:var(--dim) !important;
}
.banner.live{ background:rgba(34,197,94,.12) !important; border-color:rgba(34,197,94,.45) !important; color:#bbf7d0 !important; }

/* ---------- 13. 折叠区（低频表单默认收起） ---------- */
details.fold{
  margin-top:14px;
  border-radius:12px;
  background:var(--panel2);
  padding:0 16px;
}
details.fold > summary{
  cursor:pointer;
  list-style:none;
  padding:12px 0;
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--txt);
}
details.fold > summary::-webkit-details-marker{ display:none; }
details.fold > summary::before{
  content:"＋";
  margin-right:8px;
  color:var(--accent);
  font-weight:700;
}
details.fold[open] > summary::before{ content:"－"; }
details.fold > .form, details.fold > .hint{ padding-bottom:14px; }

/* ---------- 14. 横向步骤条 ---------- */
ol.steps.stepper{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  list-style:none;
  padding:0;
  margin:6px 0 0;
  counter-reset:step;
}
ol.steps.stepper > li{
  position:relative;
  background:var(--panel2);
  border-radius:12px;
  padding:16px 14px 14px;
  font-size:var(--fs-body);
  counter-increment:step;
}
ol.steps.stepper > li::before{
  content:counter(step);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:700;
  margin-bottom:8px;
}
ol.steps.stepper > li b{ display:block; margin-bottom:4px; font-size:var(--fs-body); }
ol.steps.stepper > li span{ color:var(--dim); font-size:var(--fs-note); line-height:1.6; }
@media(max-width:1000px){ ol.steps.stepper{ grid-template-columns:1fr 1fr; } }

/* ---------- 15. 胶囊间距 ---------- */
.pill + .pill{ margin-left:6px; }

/* ---------- 16. 表格里的操作按钮更轻 ---------- */
td .btn.sm{ height:28px; padding:0 10px; font-size:12px; border-radius:8px; }

/* ============================================================
   17. 全局导航组件（所有页面强制复用，禁止各页自写）
   ============================================================ */
:root{
  --nav-bg:#121826;
  --nav-line:#1f293b;
  --nav-txt:#b4bccd;
  --nav-hover:#1f293b;
  --nav-active:#2b78f5;
  --page-bg:#141a29;
  --card-bg:#192032;
}
body{ background:var(--page-bg) !important; }

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:48px;
  padding:0 24px;
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-line);
  position:sticky;
  top:0;
  z-index:200;
  gap:16px;
}
.nav-brand{ display:flex; align-items:center; min-width:0; }
.nav-logo{
  color:#fff;
  font-weight:600;
  font-size:16px;
  margin-right:24px;
  white-space:nowrap;
}
.nav-bread{
  color:#86909c;
  font-size:13px;
  margin-right:32px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-tabs{
  display:flex;
  gap:4px;
  flex:1;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-tabs::-webkit-scrollbar{ display:none; }
.nav-tab-item{
  padding:6px 14px;
  border-radius:6px;
  font-size:14px;
  color:var(--nav-txt);
  cursor:pointer;
  transition:all .2s;
  text-decoration:none;
  white-space:nowrap;
  line-height:20px;
}
.nav-tab-item:hover{ background:var(--nav-hover); color:#fff; }
.nav-tab-item.active{ background:var(--nav-active); color:#fff; }
.nav-user-area{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--nav-txt);
  font-size:14px;
  white-space:nowrap;
}
.nav-user-area b{ color:#e2e8f0; font-weight:600; }
.nav-user-area a{
  color:#b4bccd;
  text-decoration:none;
  padding:4px 10px;
  border-radius:6px;
  background:#1b2333;
  cursor:pointer;
}
.nav-user-area a:hover{ background:#26324a; color:#fff; }
@media(max-width:1100px){
  .nav-bread{ display:none; }
}

/* 页面内次级标题（二级标题） */
.page-head{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:22px 26px 0;
  max-width:1600px;
  margin:0 auto;
  width:94vw;
  box-sizing:border-box;
}
.page-head h1{
  font-size:18px;
  font-weight:600;
  color:#e6edf7;
  margin:0;
  letter-spacing:.3px;
}
.page-head .ph-sub{
  font-size:12px;
  color:#64748b;
}
.page-head .ph-right{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* 卡片统一：圆角 12 / 底色 #192032 */
.card{
  background:var(--card-bg) !important;
  border-radius:12px !important;
  border-color:rgba(148,163,184,.12) !important;
}
.wrap > .card, .wrap > section.card{ padding:24px !important; }
/* 主按钮配色统一 */
.btn.green, .btn.ok, button.green{ background:#00b42a !important; }
.btn.red, button.red{ background:#f53f3f !important; }
.btn.primary, .btn:not(.gray):not(.green):not(.red):not(.amber){ }


/* 导航固定后，页内 sticky 元素下移 48px，避免被导航压住 */
/* sticky-offset */
.ctlbar{ top:48px !important; }
aside{ top:64px !important; }