/* =========================================================
   馨选运营平台 · 全局视觉层（2026）
   只做样式覆盖，不改页面结构与业务逻辑
   ========================================================= */
:root{
  --ui-bg:#f4f7fb;
  --ui-surface:#ffffff;
  --ui-surface-2:#f8fafc;
  --ui-line:#e6ecf4;
  --ui-line-2:#eef2f7;
  --ui-text:#1e2a3b;
  --ui-text-2:#5a6b82;
  --ui-text-3:#94a1b4;
  --ui-primary:#2f6fed;
  --ui-primary-2:#4c8dff;
  --ui-primary-soft:#eaf1ff;
  --ui-success:#12a15c;
  --ui-success-soft:#e7f7ef;
  --ui-warn:#c77d00;
  --ui-warn-soft:#fff3df;
  --ui-danger:#d94a4a;
  --ui-danger-soft:#fdecec;
  --ui-radius:14px;
  --ui-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.045);
  --ui-shadow-hover:0 14px 34px rgba(16,24,40,.10);
}

html body{
  background:
    radial-gradient(900px 320px at 12% -8%,#e8f0ff 0%,rgba(232,240,255,0) 70%),
    var(--ui-bg)!important;
  color:var(--ui-text)!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif!important;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{color:var(--ui-text);font-weight:700;letter-spacing:-.2px}
p{color:inherit}
a{color:var(--ui-primary)}
::selection{background:#cfe0ff}

/* 滚动条 */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:#d3dce9;border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:#bcc9db}
*::-webkit-scrollbar-track{background:transparent}

/* 按钮 */
button,.btn,.btn-primary,.btn-secondary,.btn-ghost{
  font-family:inherit;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .12s;
}
.btn,.btn-primary{
  border-radius:9px!important;
  font-weight:600!important;
}
.btn-primary,.btn.primary,button.primary{
  border:1px solid var(--ui-primary)!important;
  background:var(--ui-primary)!important;
  color:#fff!important;
  box-shadow:0 4px 12px rgba(47,111,237,.18);
}
.btn-primary:hover,.btn.primary:hover,button.primary:hover{background:#245fd8!important;border-color:#245fd8!important}
.btn.ghost,.btn.secondary,.btn.outline,.btn-ghost,.btn-secondary{
  background:#fff!important;
  border:1px solid var(--ui-line)!important;
  color:var(--ui-text-2)!important;
  box-shadow:none!important;
}
.btn.ghost:hover,.btn.secondary:hover,.btn.outline:hover,.btn-ghost:hover,.btn-secondary:hover{
  border-color:#c6d6ef!important;color:var(--ui-text)!important;
}
.btn.danger{
  background:var(--ui-danger-soft)!important;
  border-color:#f4c9c9!important;
  color:var(--ui-danger)!important;
  box-shadow:none!important;
}
.btn.small,.btn-sm{padding:6px 11px!important;font-size:12px!important;border-radius:8px!important}
button:disabled,.btn:disabled{opacity:.45!important;cursor:not-allowed!important;transform:none!important}

/* 表单控件 */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select,textarea{
  border:1px solid var(--ui-line)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--ui-text)!important;
  font-family:inherit!important;
  font-size:13px!important;
  transition:border-color .15s,box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus,
select:focus,textarea:focus{
  outline:none!important;
  border-color:#9cb8ee!important;
  box-shadow:0 0 0 3px rgba(47,111,237,.12)!important;
}
input::placeholder,textarea::placeholder{color:#a9b4c4}

/* 卡片 / 面板 */
.card,.panel,.chart-card,.s-filter,.s-table,.stat-bar,.filter-bar,.toolbar,.ov-card,.big-card{
  background:var(--ui-surface)!important;
  border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-radius)!important;
  box-shadow:var(--ui-shadow)!important;
}
.card:hover,.panel:hover{box-shadow:var(--ui-shadow-hover)!important}

/* 表格 */
table{border-collapse:collapse}
th{
  background:#f7f9fc!important;
  color:var(--ui-text-2)!important;
  font-weight:600!important;
  border-bottom:1px solid var(--ui-line)!important;
}
td{border-bottom:1px solid var(--ui-line-2)!important;color:var(--ui-text)}
tr:hover td{background:#f8fafc!important}

/* 标签 / 胶囊 */
.tag,.chip,.badge,.pill,.cat-btn,.rg-btn,.mapped-tag,.unmapped-tag{
  border-radius:8px!important;
}

/* 弹层 */
.ov,.backdrop,.modal{background:rgba(15,23,42,.55)!important;backdrop-filter:blur(2px)}
.ov-card,.dialog,.big-card,.modal-panel{
  border-radius:16px!important;
  box-shadow:0 24px 70px rgba(16,24,40,.28)!important;
}
.ov-head,.modal-head,.big-head{border-bottom:1px solid var(--ui-line-2)!important}

/* 空状态与辅助文字 */
.empty,.empty-state{color:var(--ui-text-3)!important}
.muted,.sub,.hint,.desc{color:var(--ui-text-3)}

/* 分页 */
.pager button,.pagination button{border-radius:8px!important;border-color:var(--ui-line)!important}
.pager button:hover,.pagination button:hover{border-color:#9cb8ee!important;color:var(--ui-primary)!important}

/* 数字类统一等宽 */
.num,.money,.value,.td-money,.td-month,.stat .value,.kpi-value{font-variant-numeric:tabular-nums}

/* 焦点可见性（键盘） */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid rgba(47,111,237,.55);outline-offset:2px;
}

/* 页面容器：只补背景与圆角，不改布局 */
.wrap,.container,.page{color:var(--ui-text)}

/* 登录/初始化页 */
main.card{max-width:420px;margin:8vh auto!important;padding:26px 28px!important}
main.card h1{font-size:22px}
main.card .sub{font-size:13px;margin-top:6px}

/* 个别页面的旧布局补丁：统一由 body padding 承担左侧偏移 */
body[data-page="monitor"] .layout{padding-left:0!important;padding-top:0!important}
body[data-page="laban"] .embed-frame,
body[data-page="groups"] .embed-frame{
  margin-left:0!important;
  margin-top:0!important;
  width:100%!important;
  height:100vh!important;
}