:root {
  --bg: #0b0f17;
  --panel: #121826;
  --panel-2: #161d2e;
  --line: #26304a;
  --text: #e8edf7;
  --muted: #8b97b0;
  --brand: #ff5a1f;
  --brand-2: #ff8a3d;
  --ok: #27c093;
  --warn: #f5b738;
  --err: #ef4b6a;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 15% -10%, #1b2440 0%, var(--bg) 55%);
  color: var(--text);
  font: 14px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}
a { color: var(--brand-2); text-decoration: none; }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }

header.top {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  background: rgba(11, 15, 23, .85); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
header.top .logo { width: 30px; height: 30px; }
header.top .brand { font-weight: 700; letter-spacing: .4px; }
header.top .brand small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
header.top .spacer { flex: 1; }
.pill {
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 12px;
}
.pill.hot { border-color: #6a2d13; color: var(--brand-2); background: #22150e; }

.layout { display: grid; grid-template-columns: 210px 1fr; min-height: calc(100vh - 56px); }
nav.side { border-right: 1px solid var(--line); padding: 14px 10px; }
nav.side button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; margin-bottom: 4px;
  background: transparent; border: 0; border-radius: 9px; color: var(--muted); cursor: pointer;
}
nav.side button:hover { background: var(--panel); color: var(--text); }
nav.side button.active { background: var(--panel-2); color: var(--text); box-shadow: inset 2px 0 0 var(--brand); }

main { padding: 18px 22px 60px; }
h1.page { font-size: 19px; margin: 4px 0 16px; }
h2.sec { font-size: 15px; margin: 22px 0 10px; color: var(--muted); font-weight: 600; }

.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.card {
  background: linear-gradient(180deg, var(--panel) 0%, #0f1522 100%);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.card h3 { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi { font-size: 26px; font-weight: 700; }
.kpi small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.kpi.brand { color: var(--brand-2); }
.kpi.ok { color: var(--ok); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
th { color: var(--muted); font-weight: 600; font-size: 12px; }
tbody tr:hover { background: #131a29; }

label.field { display: block; margin: 10px 0; }
label.field span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 9px 11px; background: #0d1320; color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 160px; }

button.btn {
  padding: 9px 16px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 600;
}
button.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); font-weight: 500; }
button.btn.small { padding: 5px 10px; font-size: 12px; }
button.btn:disabled { opacity: .5; cursor: not-allowed; }
/* 请求进行中（发送中…/登录中…）：禁用态 + 等待光标，风格沿用 .btn:disabled */
button.btn.btn-busy { opacity: .6; cursor: progress; }

.tag { padding: 2px 8px; border-radius: 999px; font-size: 11px; border: 1px solid var(--line); color: var(--muted); }
.tag.ok { color: var(--ok); border-color: #1c5c48; background: #10241d; }
.tag.err { color: var(--err); border-color: #5c1c2c; background: #241016; }
.tag.warn { color: var(--warn); border-color: #5c4a1c; background: #241f10; }

.bar { height: 8px; background: #0d1320; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }

.notice { border-left: 3px solid var(--brand); background: #1a140f; padding: 10px 12px; border-radius: 8px; color: #f2ddce; }
.muted { color: var(--muted); }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
/* 账号列表头像：有 avatar_url 才出现，空值/加载失败不留破图 */
.avatar { display: inline-block; width: 0; height: 18px; vertical-align: middle; }
.avatar:has(img) { width: auto; margin-right: 6px; }
.avatar img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: #0d1320; border: 1px solid var(--line); display: block; }
.err-text { color: var(--err); min-height: 18px; font-size: 12px; }
.flash { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: grid; gap: 8px; }
.flash div {
  padding: 10px 14px; border-radius: 10px; background: #16213a; border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: in .18s ease;
}
.flash div.ok { border-color: #1c5c48; }
.flash div.err { border-color: #5c1c2c; }
@keyframes in { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }

.login-wrap { display: grid; place-items: center; min-height: calc(100vh - 56px); }
.login-card { width: min(420px, 92vw); }
.login-card .logo-lg { width: 56px; height: 56px; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button {
  flex: 1; padding: 8px; border-radius: 9px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer;
}
.tabs button.active { background: var(--panel-2); color: var(--text); border-color: var(--brand); }
.qr { width: 120px; height: 120px; border-radius: 10px; border: 1px solid var(--line); background: #0d1320; }

/* ---- 协议上号页：表单网格 + 二维码区（避免 .row 把每个 child 拉满） ---- */
.formgrid { display: grid; gap: 12px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.formgrid label.field { margin: 0; }
@media (max-width: 980px) { .formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .formgrid { grid-template-columns: 1fr; } }

.qrflex { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.qrbox {
  flex: 0 0 196px; width: 196px; height: 196px; border: 1px dashed var(--line); border-radius: 12px;
  background: #0d1320; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; text-align: center; padding: 8px; box-sizing: border-box;
}
.qrbox img { width: 176px; height: 176px; background: #fff; border-radius: 8px; padding: 6px; box-sizing: border-box; }
.qrmain { flex: 1 1 260px; min-width: 0; }
.qrmain .qrstate { font-size: 13px; color: var(--muted); min-height: 42px; }
.flowline { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ---------- 系统日志 ---------- */
.logbox { max-height: 62vh; overflow: auto; padding: 6px 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.7; }
.logline { white-space: pre-wrap; word-break: break-all; border-bottom: 1px solid rgba(255,255,255,.045); padding: 3px 2px; }
.logline:last-child { border-bottom: 0; }
.logline .tag { font-size: 10px; padding: 1px 5px; }
@media (max-width: 640px) { .logbox { font-size: 11px; max-height: 70vh; } }

/* ---------- 账号托管：MCN 邀约阶段（筛选条 + 待邀约作业台） ---------- */
/* 阶段标签配色：待邀约灰（.tag 默认）/ 待签约橙（.tag.invited）/ 待凭证黄（.tag.warn）/
   已完成绿（.tag.ok）/ 邀约失败红（.tag.err）—— 只新增，不动上面已有规则。 */
.tag.invited { color: var(--brand-2); border-color: #6a2d13; background: #22150e; }
/* 筛选/批量工具条：不用 .row（那里的 `> * { flex: 1 1 160px }` 会把按钮拉满一行） */
.accbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.accbar .muted { font-size: 12px; }

/* ================= 窄屏自适应（手机 / 竖屏平板） =================
   约定：**>860px 的桌面样式一律不动**，下面全部是 @media 内的窄屏覆盖，
   只新增、不改写上面的任何桌面规则。断点两层：
     · max-width: 860px —— 侧栏改底部导航、网格收列、表格可横滑、点击区 44px；
     · max-width: 420px —— 更紧的间距（小屏安卓 / iPhone SE 一档）。
   导航实现：侧栏（nav.side）在窄屏变成**底部固定横滑导航**（一个字 JS 都不动，
   全靠 CSS 改定位），横滑保证管理端 13 个菜单项也都点得到。 */
@media (max-width: 860px) {
  /* ---- 顶栏：只留 品牌 + 角色 pill + 退出，可换行，绝不把页面撑宽 ---- */
  header.top { gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
  header.top .logo { width: 26px; height: 26px; }
  header.top .brand { font-size: 14px; }
  header.top .brand small { font-size: 10px; }
  header.top .pill.hot { display: none; }        /* 「点位 x%」pill：窄屏收起 */
  header.top .pill:nth-of-type(3) { display: none; } /* 用户名 pill：窄屏收起 */
  header.top #logout { margin-left: auto; }      /* 退出始终靠右好点 */

  /* ---- 布局：左侧栏脱离网格 → 主内容独占一行、左边距归零 ---- */
  .layout { grid-template-columns: 1fr; min-height: 0; }

  /* ---- 侧栏 → 底部固定导航（横向可滑；图标位置留给文字，44px 点击高） ---- */
  nav.side {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: stretch; gap: 6px;
    padding: 6px 8px;                                  /* 不支持 env() 时的兜底 */
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); /* iPhone 底部条 */
    border-right: 0; border-top: 1px solid var(--line);
    background: rgba(11, 15, 23, .97); backdrop-filter: blur(8px);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav.side::-webkit-scrollbar { display: none; }        /* 横滑条不占位、不破坏视觉 */
  nav.side button {
    flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap;
    min-height: 44px; padding: 6px 12px; font-size: 12px; text-align: center;
    display: flex; align-items: center; justify-content: center;
  }
  nav.side button.active { box-shadow: inset 0 -2px 0 var(--brand); } /* 左竖条 → 下横条 */

  /* ---- 主内容：去左侧留白；底部留出固定导航的高度 ---- */
  main {
    padding: 14px 12px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    /* 关键：网格项默认 min-width:auto 会按“最宽表格”撑开整页，
       这里归零 → 表格由卡片自己横滑，页面不再出现横向滚动条 */
    min-width: 0;
  }
  h1.page { font-size: 17px; margin: 2px 0 12px; }
  h2.sec { font-size: 14px; margin: 16px 0 8px; }

  /* ---- 网格：一律 minmax(0,1fr)（原来是 minmax(170/220/320px,1fr)，窄屏会撑破） ---- */
  .grid { gap: 10px; }
  .grid.c2 { grid-template-columns: minmax(0, 1fr); }            /* 图文/表格塔：单列 */
  .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* KPI：两列 */
  .kpi { font-size: 22px; }

  /* ---- 卡片/表格：卡片当横向滚动容器 —— 表格照常对齐，宽了就滑，页面不横滚 ---- */
  .card { padding: 14px; overflow-x: auto; }
  .card > table { width: auto; min-width: 100%; }
  .card > table th, .card > table td { white-space: nowrap; }
  .logbox { padding: 4px 6px; }

  /* ---- 表单：`.row` 收成单列（按钮随之铺满），点得到的控件最小 44px ---- */
  .row { gap: 10px; }
  .row > * { flex: 1 1 100%; }
  .btn, button.btn, .tabs button, input, select, textarea { min-height: 44px; }
  input, select, textarea { font-size: 16px; }   /* iOS 聚焦不放大 */
  .accbar { gap: 6px; }

  /* ---- 登录页：铺满宽度、两侧留 16px、字段单列 ---- */
  .login-wrap { padding: 16px; min-height: calc(100vh - 56px); }
  .login-card { width: 100%; }

  /* ---- 浮层 toast：压到屏幕内，并抬到底部导航上方，别挡住菜单 ---- */
  .flash {
    left: 12px; right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .flash div { padding: 10px 12px; }

  /* ---- 长串（token / 错误详情 / 会话）不许把页面撑宽 ---- */
  .mono, .logline, .notice { overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  header.top { gap: 8px; padding: 8px 10px; }
  main { padding-left: 10px; padding-right: 10px; }
  .card { padding: 12px; }
  .grid { gap: 8px; }                 /* KPI 仍两列：minmax(0,1fr) 下不会撑破，只是更紧凑 */
  .kpi { font-size: 20px; }
  nav.side { gap: 4px; padding-left: 6px; padding-right: 6px; }
  nav.side button { padding: 6px 10px; font-size: 11px; }
}

/* ================= r230：竞品对齐页面的新增样式 =================
   只新增类，不改上面任何既有规则（桌面视觉与交互保持不变）。
   新增类：.gcard（四张渐变收益卡）/ .kpi.big（大屏大数字）/ .chartline（手写 SVG 折线）
   / .plainbox（只读文本块）/ .helpbody + details（帮助中心折叠）/ .qr-img（客服二维码图）。 */
.gcard { position: relative; overflow: hidden; }
.gcard::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,138,61,.28), transparent 68%);
  pointer-events: none;
}
/* 第 2/4 张（本月 / 总收益）换一种色调，四张卡一眼能分开 */
.gcard.brand::after { background: radial-gradient(circle, rgba(39,192,147,.24), transparent 68%); }
.kpi.big { font-size: 40px; line-height: 1.2; }
.chartline { width: 100%; }
.chartline svg { display: block; width: 100%; max-width: 100%; }
/* 只读展示块（代理 / 客户看内容时用；没有输入框也不会是一片空白） */
.plainbox { white-space: pre-wrap; overflow-wrap: anywhere; background: #0d1320; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; min-height: 40px; }
/* 帮助中心：折叠块 + 正文（保换行、长串不撑宽） */
details { border-top: 1px solid var(--line); padding-top: 10px; }
details summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 4px 0; }
details[open] summary { margin-bottom: 8px; }
.helpbody { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
/* 客服二维码：限宽，窄屏不撑破页面 */
.qr-img { width: 180px; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: #fff; padding: 6px; display: block; }
/* 搜索输入（系统列表 / 代理列表）：窄屏的 44px 与 16px 由下面媒体查询统一顶起来 */
.sysq { max-width: 100%; }

@media (max-width: 860px) {
  /* 收益四张卡：窄屏两列（.grid.c4 已被上面收成两列，这里只压字号与内边距） */
  .kpi.big { font-size: 28px; }
  .gcard { padding: 12px; }
  /* 筛选 / 分页工具条：按钮自动换行、不撑宽；搜索框独占一行更好点 */
  .accbar > input, .accbar > select { flex: 1 1 100%; width: 100% !important; min-width: 0; }
  .accbar > button { flex: 0 0 auto; }
  /* 手写折线：窄屏降高，避免一屏被图表吃掉（viewBox 等比缩放，字形不拉伸） */
  .chartline svg { height: 200px; }
  .plainbox { font-size: 14px; }
  .qr-img { width: 160px; }
  details summary { min-height: 44px; display: flex; align-items: center; }
}

/* ================= r233：登录页重做 + 商标位 / 版权行 / 空态 =================
   只新增类与"更靠后"的覆盖规则，**不改上面任何既有规则**（主界面桌面视觉基本保持）。
   新增类：.login-bg/.login-shell/.login-head/.brand-chip/.brand-lock/.brand-mark/.tm
   /.login-sub/.login-slogan/.sell-chips/.login-switch/.login-service/.stats/.login-foot
   /nav.side 里的 .side-brand + .side-foot、以及 .appfoot / .empty-state。
   背景一律**纯 CSS**（径向渐变 + 细网格），没有任何外部图片 / CDN / 字体。 */

/* ---- 登录页：居中单卡片（同行参考的信息架构），背景自绘 ---- */
.login-wrap {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  min-height: 100vh; padding: 28px 16px; overflow-x: hidden;
}
/* 背景层：两层径向光斑 + 细网格（用 repeating-linear-gradient 画，不引图） */
.login-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(680px 380px at 12% -6%, rgba(255,138,61,.20), transparent 62%),
    radial-gradient(620px 420px at 92% 8%, rgba(63,96,190,.22), transparent 66%),
    radial-gradient(900px 520px at 50% 118%, rgba(39,192,147,.10), transparent 68%),
    repeating-linear-gradient(0deg, rgba(140,160,200,.055) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(140,160,200,.055) 0 1px, transparent 1px 34px);
}
.login-shell { position: relative; z-index: 1; width: min(430px, 100%); display: grid; gap: 14px; }
.login-shell .login-card { width: 100%; padding: 26px 24px 22px; }
.login-head { display: grid; justify-items: center; gap: 10px; text-align: center; margin-bottom: 12px; }
/* 徽标底片（**浅色圆角底片**）：透明徽标直接贴深色背景会发灰，垫一层浅底才立得住 */
.brand-chip {
  width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #e9eefb 100%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 26px rgba(6,10,20,.42), inset 0 1px 0 rgba(255,255,255,.9);
}
.brand-chip img { width: 54px; height: 54px; object-fit: contain; display: block; }

/* ---- 商标锁定组合：徽标 + 机构名 + 商标符号 + 品牌词（登录页 / 侧栏共用） ---- */
.brand-lock { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
}
.brand-mark img { width: 26px; height: 26px; object-fit: contain; display: block; }
.brand-lock-text { display: grid; min-width: 0; }
.brand-lock-name { font-weight: 700; font-size: 15px; letter-spacing: .3px; line-height: 1.25; }
.brand-lock-words { color: var(--muted); font-size: 11px; }
/* 商标符号：普通文本字符（™ / ® 都能配），字号略小、紧贴机构名右上角 */
.tm { font-size: .58em; font-weight: 700; vertical-align: super; margin-left: 1px; letter-spacing: 0; }
/* 登录页那份更大：徽标在底片里，这里只放大字 */
.login-lock { display: grid; justify-items: center; gap: 2px; }
.login-lock .brand-lock-name { font-size: 24px; }
.login-lock .brand-lock-words { font-size: 12px; }
.login-sub { margin: 0; text-align: center; font-size: 13px; color: var(--text); opacity: .9; }
.login-slogan { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--brand-2); }

/* 卖点 chips：两行 2×2（不设固定宽，格子自适应；窄屏仍是两行，不横滚） */
.sell-chips {
  list-style: none; margin: 12px 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
}
.sell-chips li {
  font-size: 11px; color: var(--muted); padding: 4px 9px; text-align: center;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.login-switch { margin: 12px 0 0; text-align: center; font-size: 12px; }
.login-switch a { cursor: pointer; }

/* 客服入口：只有配了二维码 / 微信号才渲染（都没有时整块 hidden，不留空框） */
.login-service { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.login-service .svc-title { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.login-service .svc-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.login-service .svc-body.no-qr { justify-content: center; }
.login-service .svc-qr {
  width: 116px; height: 116px; object-fit: contain; border-radius: 10px;
  background: #fff; padding: 5px; border: 1px solid var(--line); display: block;
}
.login-service .svc-wx { font-size: 12px; }
.login-service .svc-wx b { display: block; font-size: 15px; margin-top: 2px; letter-spacing: .4px; }

/* 三个数据点（真实数字 · 千分位）：让卡片底部"不空" */
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.stats .stat { display: grid; justify-items: center; gap: 2px; text-align: center; }
.stats .stat b { font-size: 18px; font-weight: 700; letter-spacing: .3px; }
.stats .stat span { font-size: 11px; color: var(--muted); }
.stats .stat + .stat { border-left: 1px solid var(--line); }

/* 登录页页脚：版权行（可关）+ ICP（非空才显示） */
.login-foot { text-align: center; font-size: 11px; color: var(--muted); line-height: 1.8; }

/* ---- 侧栏：顶部商标位 + 底部机构名 / 版本号（都用中性的深色底，不抢主内容） ---- */
nav.side { display: flex; flex-direction: column; }
nav.side .side-brand { padding: 4px 6px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
nav.side .side-brand .brand-mark { background: rgba(255,255,255,.05); }
nav.side .side-brand .brand-lock-words { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav.side .side-foot { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--line); }
nav.side .side-foot-org { font-size: 12px; color: var(--muted); }
nav.side .side-foot-ver { font-size: 11px; color: var(--muted); opacity: .75; margin-top: 2px; }
/* 桌面（>860px）：侧栏随页面**钉住**（顶栏 56px 之下），这样底部的机构名 + 版本号
   不用滚到页面尽头才看得到；菜单多的时候在侧栏内部滚动，不影响主内容。
   只加这一条，桌面其余规则一律不动；窄屏侧栏是底部导航，靠下面的 min-width 条件排除。 */
@media (min-width: 861px) {
  nav.side {
    position: sticky; top: 56px; align-self: start;
    max-height: calc(100vh - 56px); overflow-y: auto;
  }
}

/* ---- 主内容区底部版权行（在 .layout 之外，视图重渲染不会冲掉） ---- */
.appfoot {
  padding: 14px 22px 22px; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.8;
}
.appfoot span + span { display: block; }
/* 窄屏专用：机构名 + 版本号（桌面在侧栏底部显示，窄屏侧栏变成底部导航，没地方放） */
.appfoot .appfoot-meta { display: none; }

/* ---- 空态引导块：图标 + 说明 + 一个可点按钮（各列表统一用它） ---- */
.empty-state {
  display: grid; justify-items: center; gap: 8px; padding: 22px 12px; text-align: center;
}
.empty-state .empty-ico {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px dashed var(--line); color: var(--muted); font-size: 15px;
}
.empty-state .empty-text { color: var(--muted); font-size: 13px; }
.empty-cell { padding: 0 !important; }   /* 整行一个 td，内边距交给 .empty-state */

/* ---- 卡片 / 表格轻微润色（只加阴影与过渡，不动尺寸，避免布局漂移） ---- */
.card { box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 10px 26px rgba(3,6,14,.18); }
tbody tr { transition: background .15s ease; }
button.btn { transition: filter .15s ease, opacity .15s ease; }
button.btn:hover:not(:disabled) { filter: brightness(1.06); }
.tabs button { transition: color .15s ease, border-color .15s ease; }
.tabs button:hover { color: var(--text); }

@media (max-width: 860px) {
  /* 登录页：单列铺满、点击区 ≥44px、不横滚（复用上面同一条断点的风格） */
  .login-wrap { padding: 18px 14px; gap: 10px; min-height: 100vh; }
  .login-shell { width: 100%; }
  .login-shell .login-card { padding: 20px 16px 18px; }
  .login-lock .brand-lock-name { font-size: 21px; }
  .login-bg {
    background:
      radial-gradient(420px 260px at 20% -4%, rgba(255,138,61,.18), transparent 64%),
      radial-gradient(420px 300px at 88% 6%, rgba(63,96,190,.20), transparent 66%),
      repeating-linear-gradient(0deg, rgba(140,160,200,.05) 0 1px, transparent 1px 30px),
      repeating-linear-gradient(90deg, rgba(140,160,200,.05) 0 1px, transparent 1px 30px);
  }
  .login-switch { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .stats .stat b { font-size: 16px; }
  /* 空态按钮：窄屏 44px 由上面的 `.btn { min-height: 44px }` 统一顶起来 */
  .empty-state { padding: 16px 10px; }

  /* 侧栏在窄屏是**底部横滑导航**（原始规则见上面的 860 断点）：
     这里把 flex 方向改回横排，商标位只留一枚徽标当作导航最左的落款，
     机构名 / 版本号挪到页脚（.appfoot-meta），不然横滑条里根本扫不到。 */
  nav.side { flex-direction: row; }
  nav.side .side-brand {
    flex: 0 0 auto; display: flex; align-items: center;
    padding: 0 8px 0 2px; margin: 0 6px 0 0; border-bottom: 0; border-right: 1px solid var(--line);
  }
  nav.side .side-brand .brand-lock-text { display: none; }
  nav.side .side-brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  nav.side .side-brand .brand-mark img { width: 26px; height: 26px; }
  nav.side .side-foot { display: none; }
  .appfoot .appfoot-meta { display: block; }

  /* 底部固定导航会盖住页脚版权行：给 .appfoot 留出导航的高度 */
  .appfoot { padding: 12px 12px calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 420px) {
  .login-shell .login-card { padding: 18px 13px 16px; }
  .login-lock .brand-lock-name { font-size: 19px; }
  .brand-chip { width: 64px; height: 64px; border-radius: 19px; }
  .brand-chip img { width: 46px; height: 46px; }
  .sell-chips li { font-size: 10px; padding: 2px 8px; }
  .stats .stat b { font-size: 15px; }
}

/* ================= r241：「权限」列（管理 / 代理 / 客户，管理可改） =================
   只**追加**新类，不改上面任何一条既有规则（包括 860px 断点里的 select 规则）。
   新增类：.kcell（权限单元格）/ .ksel（管理看到的下拉）/ .ktag.k*（代理 / 客户看到的文字标签）
   / .hint-tip（"改完权限要刷新才见菜单"那行小字）。
   桌面：下拉窄一点、行内不撑高；窄屏（≤860px）：点击区顶到 44px，表格照旧在 .card 里横滑。 */
.kcell { white-space: nowrap; }
/* 下拉宽度收窄：既有的 `input, select, textarea { width:100% }` 是**元素选择器**，
   类选择器优先，所以这里不用 !important 也能覆盖（避免把表格撑破）。 */
.ksel { width: auto; min-width: 84px; padding: 3px 7px; border-radius: 8px; font-size: 12px; }
.ktag { font-weight: 500; }
/* 三个角色各一色（沿用站内既有的橙 / 蓝 / 灰三档配色变量），一眼能分清 */
.ktag.kadmin { color: var(--brand-2); border-color: #6a2d13; background: #22150e; }
.ktag.kagent { color: #6fb3d9; border-color: #1f4a63; background: #0f1e26; }
.ktag.kretail { color: var(--muted); }
.hint-tip { margin: 8px 2px 0; font-size: 12px; }

@media (max-width: 860px) {
  /* 窄屏：权限下拉的点击区 ≥44px（宽高都放开，别被压成一条细缝）；
     字号 16px 防 iOS 聚焦放大 —— 与 860 断点里既有那条 select 规则同口径。 */
  .ksel { min-height: 44px; min-width: 0; padding: 6px 10px; font-size: 16px; }
  .kcell { padding-left: 6px; padding-right: 6px; }
  .hint-tip { margin-top: 10px; }
}

/* ================= r242：AI 运维（自愈动作面板 / 待处理问题明细 / 真口径文案） =================
   **只追加**新类，不改上面任何一条既有规则（前 28580 字节与改前逐字节一致，见报告里的哈希）。
   新增类：.clickable（可点卡片）/ .warn-text（warn 色文字）/ .aiops-openlist（待处理明细容器）
   / .healbar + .healbar-sum + .healbar-btns（面板顶栏）/ .healrow + .healrow-main + .healrow-head
   + .healrow-desc + .healrow-meta + .healrow-side + .healsw（单条动作行）/ .btnrow（按钮行）。
   窄屏（≤860px）：动作行改单列、控件点击区 ≥44px，风格沿用上面两个断点。 */
.card.clickable { cursor: pointer; transition: border-color .15s ease; }
.card.clickable:hover { border-color: #33405f; }
.card.clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.warn-text { color: var(--warn); }
.aiops-openlist { max-height: 40vh; }

/* 面板顶栏：汇总文案 + 全部执行 / 只预演 */
.healbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.healbar-sum { flex: 1 1 260px; min-width: 0; font-size: 12px; }
.healbar-sum .muted { font-size: 12px; }
.healbar-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* 单条动作：左侧说明 / 右侧控件；飞中或执行中整行压暗并禁用（防连点） */
.healrow {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 10px 2px; border-top: 1px solid rgba(255,255,255,.05);
}
.healrow:first-child { border-top: 0; }
.healrow-main { flex: 1 1 320px; min-width: 0; }
.healrow-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.healrow-head .mono { font-size: 11px; }
.healrow-desc { font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.healrow-meta { font-size: 11px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.healrow-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.healrow.busy { opacity: .6; }
.healrow.running { background: rgba(245,183,56,.05); }

/* 单条动作的开关：轻量 label + 原生 checkbox（不引第三方控件，窄屏靠断点顶到 44px） */
.healsw { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.healsw input { width: auto; margin: 0; accent-color: var(--brand); cursor: pointer; }
.healsw input:disabled { cursor: not-allowed; }

/* 按钮行（立即巡检一次 / 清理历史遗留） */
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

@media (max-width: 860px) {
  /* 动作行改单列：说明在上、控件在下；按钮与开关点击区 ≥44px（与上面的断点同口径） */
  .healrow { gap: 8px; }
  .healrow-side { flex: 1 1 100%; }
  .healrow-side .btn { flex: 1 1 auto; }
  .healsw { min-height: 44px; }
  .healsw input { width: 20px; height: 20px; }
  .aiops-openlist { max-height: 46vh; }
  .btnrow .btn { flex: 1 1 auto; }
}

/* r382 账号列表：头像单独一列后放大（原来 18px 在列表里基本看不清）。
   r383：源图改用 `_b`（750×750）后放到 48px 仍然清晰，所以再放大一档。
   只作用于列表里那个 .accav，别处的 .avatar 尺寸不变。 */
td[data-cell="avatar"], th[data-cell="avatar"] { width: 64px; text-align: center; }
.avatar.accav {
  width: 48px; height: 48px; margin: 0 auto;
  background: rgba(127, 127, 127, .14);
}
/* `.avatar:has(img)` 原件带了 `margin-right: 6px`（给昵称行内头像留间距用），
   在独立头像列里会把圆图顶偏 —— 这里用更高优先级压回 0，居中才真的居中。 */
.avatar.accav:has(img) { width: 48px; margin: 0 auto; }
.avatar.accav img {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; image-rendering: auto; margin: 0 auto;
}
@media (max-width: 860px) {
  td[data-cell="avatar"], th[data-cell="avatar"] { width: 52px; }
  .avatar.accav, .avatar.accav img { width: 40px; height: 40px; }
}