/* ============================================================
   共享设计令牌 + 基础复位
   商户控制台（/）和运营后台（/admin）都先引这一份，再引各自的样式。
   两边同一套底色、同一套主色、同一套等宽数字 —— 是同一个产品的两张脸。
   ============================================================ */

/* ── 暗色（默认）────────────────────────────────────────────────
   ★ 2026-09-26 用户要求「增加浅色模式和暗色模式」。
     这一块**一个字都没动** —— 它就是原来那一套，仍然是默认值
     （JS 没跑、脚本被拦、老浏览器：看到的就是这个，和以前完全一样）。
     浅色那一套在下面 [data-theme="light"] 里，覆盖同一批语义令牌。
     切主题的开关在商户端「设置 → 外观」，属性挂在 <html> 上。 */
:root{
  color-scheme:dark;

  /* 底色：比 brief 的 #0A0E17 再深一档用于压边，避免整页发灰 */
  --ink-950:#06080F;
  --ink-900:#0A0E17;
  --ink-800:#111827;
  --ink-750:#151C2A;
  --ink-700:#1B2436;

  --rail:#3C4C70;
  --edge:rgba(255,255,255,.07);
  --edge-strong:rgba(255,255,255,.14);

  --cyan:#22D3EE;
  --magenta:#F472B6;
  --amber:#FBBF24;

  /* ★ 「字色」和「填充色」分开两套。
     --cyan/--amber/--magenta 是**块**（主按钮的渐变、圆点、进度条、徽章底）——
       暗色浅色都得是亮的，浅色下把它们压深，主按钮就成了「深底黑字」，直接糊掉。
     --accent-ink/--warn-ink/--danger-ink 是**字**（数字、状态、链接、错误提示）——
       浅色下必须压深才有对比度（亮青写白底上只有 1.8:1，等于看不见）。
     暗色下两组值完全相等，所以暗色渲染和以前一模一样。 */
  --accent-ink:#22D3EE;
  --warn-ink:#FBBF24;
  --danger-ink:#F472B6;

  /* 抬升层：暗色下就是「白色叠一点」。数字 = 叠加透明度，
     和原来写死的 rgba(255,255,255,N) **逐个对上**（暗色零变化）。
     浅色下换成同强度的深色叠加（见下方 light 块）——
     浅色底上用白色叠加等于没叠，卡片、hover、斑马纹会整片消失。 */
  --raise-01:rgba(255,255,255,.01);
  --raise-012:rgba(255,255,255,.012);
  --raise-018:rgba(255,255,255,.018);
  --raise-02:rgba(255,255,255,.02);
  --raise-022:rgba(255,255,255,.022);
  --raise-028:rgba(255,255,255,.028);
  --raise-03:rgba(255,255,255,.03);
  --raise-035:rgba(255,255,255,.035);
  --raise-04:rgba(255,255,255,.04);
  --raise-045:rgba(255,255,255,.045);
  --raise-05:rgba(255,255,255,.05);
  --raise-055:rgba(255,255,255,.055);
  --raise-06:rgba(255,255,255,.06);
  --raise-07:rgba(255,255,255,.07);
  --raise-08:rgba(255,255,255,.08);
  --raise-10:rgba(255,255,255,.10);
  --raise-13:rgba(255,255,255,.13);
  --raise-14:rgba(255,255,255,.14);

  /* 阴影：暗色下是纯黑厚影（白底上照抄会像一块脏斑，浅色另给一档） */
  --shadow-1:rgba(0,0,0,.95);
  --shadow-2:rgba(0,0,0,.9);
  --shadow-3:rgba(0,0,0,.85);

  /* 半透明面板底：顶栏 / 手机端侧栏 / 登录页输入框 / toast ——
     这些原来是写死的深色玻璃，浅色下必须换掉，否则顶栏还是深色而
     顶栏里的字已经变成深色 → 深底深字，整条看不见。 */
  --surface-bar:rgba(10,14,23,.78);
  --surface-bar-strong:rgba(10,14,23,.96);
  --field-bg:rgba(6,8,15,.7);
  --field-bg-2:rgba(6,8,15,.72);
  --field-bg-3:rgba(6,8,15,.66);
  --field-bg-4:rgba(6,8,15,.6);
  /* 比卡片再深一档的内嵌条（输入区工具栏那种） */
  --inset-bg:rgba(6,8,15,.42);
  /* 抽屉 / 弹窗背后的遮罩 */
  --scrim:rgba(6,8,15,.62);
  /* 面板 / 弹层 / 悬浮小卡片（含它们那层渐变的两端）。
     暗色下逐个对应原来写死的值，浅色下全部变成白玻璃 ——
     浅色底上再叠深色玻璃，那些面板会变成一块块深灰，字直接糊掉。 */
  --panel-a:rgba(10,14,23,.86);
  --panel-b:rgba(10,14,23,.9);
  --panel-c:rgba(10,14,23,.99);
  --panel-d:rgba(17,24,39,.72);
  --panel-e:rgba(17,24,39,.97);
  --panel-f:rgba(23,32,50,.98);
  --panel-g:rgba(23,32,50,.99);
  --panel-h:rgba(21,28,42,.99);
  --toast-bg:rgba(30,8,20,.94);
  --toast-bg-ok:rgba(6,26,32,.95);
  --toast-ink:#FBD3E6;
  --toast-ink-ok:#B9EEF8;
  /* 页面顶部那团径向光：暗色是一抹深蓝，浅色改成极淡的一抹天蓝 */
  --glow-top:#12203A;

  --text:#E6EDF7;
  --text-2:#8A97AC;
  /* ★ 三级灰（提示 / 卡片副标题 / 分页器那类小字）：原来是 #5A6577，
     在卡片底（#111827）上只有 3.39:1 —— 11~12.5px 的字按 WCAG AA 要 4.5:1，
     暗色下这些提示其实是「糊着的」。提到 #7F8CA3：卡片底 5.23:1、
     最亮的那层浮起底（#1B2436）4.57:1，都比 --text-2 暗一档，层级还在。 */
  --text-3:#7F8CA3;

  --r-panel:14px;
  --r-bubble:12px;
  --r-control:10px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono",Consolas,monospace;

  --dur:.18s;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── 浅色 ──────────────────────────────────────────────────────
   ★ 只覆盖**语义令牌**：两个控制台的 CSS 全都从这些令牌取色，
     所以这一块一改，商户端 6 个页面和运营后台（/admin，引同一份 tokens.css）
     会同时变过去 —— 两边不会各亮一半。
     对比度是按 WCAG 相对亮度挑的，正文/次要文字在各自底色上都 ≥ 4.5:1。 */
[data-theme="light"]{
  color-scheme:light;

  --ink-950:#EDF1F8;   /* 页面底色（渐变的下端） */
  --ink-900:#F8FAFD;   /* 页面底色（渐变的上端） */
  --ink-800:#FFFFFF;   /* 浮层：下拉菜单 */
  --ink-750:#FFFFFF;   /* 收到的消息气泡、代码块 */
  --ink-700:#FFFFFF;   /* 面板 */

  --rail:#94A3B8;
  --edge:rgba(15,23,42,.14);
  --edge-strong:rgba(15,23,42,.26);

  /* 块的颜色：主按钮的渐变、圆点、进度条 —— 保持亮，和暗色同一支品牌色 */
  --cyan:#22D3EE;
  --magenta:#F472B6;
  --amber:#FBBF24;

  /* 字的颜色：压深到能在白底/浅色胶囊上读清（实测值见交付报告） */
  --accent-ink:#0E7490;    /* 白底 5.33:1，浅青胶囊上 4.98:1 */
  --warn-ink:#9A3412;      /* 白底 6.93:1 */
  --danger-ink:#BE185D;    /* 白底 5.98:1，浅粉胶囊上 5.36:1 */

  /* 抬升层：同样的台阶，换成深色叠加 */
  --raise-01:rgba(15,23,42,.012);
  --raise-012:rgba(15,23,42,.016);
  --raise-018:rgba(15,23,42,.022);
  --raise-02:rgba(15,23,42,.026);
  --raise-022:rgba(15,23,42,.028);
  --raise-028:rgba(15,23,42,.034);
  --raise-03:rgba(15,23,42,.038);
  --raise-035:rgba(15,23,42,.044);
  --raise-04:rgba(15,23,42,.05);
  --raise-045:rgba(15,23,42,.056);
  --raise-05:rgba(15,23,42,.062);
  --raise-055:rgba(15,23,42,.068);
  --raise-06:rgba(15,23,42,.075);
  --raise-07:rgba(15,23,42,.086);
  --raise-08:rgba(15,23,42,.098);
  --raise-10:rgba(15,23,42,.12);
  --raise-13:rgba(15,23,42,.15);
  --raise-14:rgba(15,23,42,.16);

  --shadow-1:rgba(15,23,42,.20);
  --shadow-2:rgba(15,23,42,.18);
  --shadow-3:rgba(15,23,42,.16);

  /* 白玻璃 —— 顶栏、手机端底部导航、登录页输入框、toast */
  --surface-bar:rgba(255,255,255,.86);
  --surface-bar-strong:rgba(255,255,255,.97);
  --field-bg:#FFFFFF;
  --field-bg-2:#FFFFFF;
  --field-bg-3:#FFFFFF;
  --field-bg-4:#FFFFFF;
  --inset-bg:rgba(15,23,42,.035);
  /* 遮罩：浅色下不能再用 62% 的近黑（那会把整页压成深色，弹窗里的字反而变糊） */
  --scrim:rgba(15,23,42,.30);
  /* 白玻璃：面板 / 弹层 / 小卡片。两端给一点点差，保留原来的「上亮下暗」层次 */
  --panel-a:#FFFFFF;
  --panel-b:#FBFCFE;
  --panel-c:#FBFCFE;
  --panel-d:#FFFFFF;
  --panel-e:#FFFFFF;
  --panel-f:#FFFFFF;
  --panel-g:#FBFCFE;
  --panel-h:#FFFFFF;
  --toast-bg:#FFFFFF;
  --toast-bg-ok:#FFFFFF;
  --toast-ink:#9D174D;
  --toast-ink-ok:#0E7490;
  --glow-top:#DCE7F7;

  --text:#0F172A;      /* 白底 17.9:1 */
  --text-2:#475569;    /* 白底 8.6:1，卡片底(#F4F6FB 一带) 8.0:1 */
  --text-3:#59657A;    /* 白底 6.4:1 —— 第三级也要过 4.5，别拿它当「可以糊」 */
}

*,*::before,*::after{box-sizing:border-box}

/* ============================================================
   文字下划线：一个都不留（用户强调过三次）

   浏览器给 <a> 的 UA 默认样式就是 text-decoration:underline，我们之前
   只改了颜色、没关掉下划线 —— 侧栏导航、退出登录、登录页那个链接
   一直带着一条线（CSS 里搜 text-decoration 是搜不到的，所以容易被漏掉）。

   这里在共用复位层一次性关掉：a（含 :visited/:hover/:focus/:active 各态）、
   u / ins（HTML 的“下划线”语义标签，我们不用它表达任何东西）、
   code / kbd / samp / pre（部分主题会给它们加虚线）。
   注意：关闭的是**装饰**，不是可识别性 —— 链接靠颜色/背景/hover 区分。
   ============================================================ */
a,a:visited,a:hover,a:focus,a:active,a:focus-visible{text-decoration:none}
u,ins,code,kbd,samp,pre,abbr,acronym{text-decoration:none}

/* display:grid/flex 会盖掉 UA 的 [hidden]{display:none}，这里统一压回去 */
[hidden]{display:none!important}

html,body{height:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55;
  color:var(--text);
  /* ★ 底色写成 background-color + background-image 两半（原来是 background 缩写）：
     ① 浅色下两层渐变都换成浅色，background-color 就是 --ink-950；
     ② 验收要看 getComputedStyle(body).backgroundColor —— 用缩写的话它算出来是
        rgba(0,0,0,0)（透明），两边永远相等，看不出主题到底换没换。
     视觉效果和以前一致：底色在下、两层渐变叠在上面。 */
  background-color:var(--ink-950);
  background-image:
    radial-gradient(120% 70% at 50% -12%, var(--glow-top) 0%, transparent 62%),
    linear-gradient(180deg,var(--ink-900),var(--ink-950));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* 数字一律等宽 + 定宽数位：额度倒数 / 表格里的数字不会左右跳 */
.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* 聚焦环用「字色」那一支：浅色下亮青画在白底上根本看不见 */
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:6px}

h1,h2{margin:0;font-weight:600;letter-spacing:-.01em}

button{font:inherit;color:inherit}

/* ============================================================
   共用控件 —— 商户控制台和运营后台长得一样的那部分
   ============================================================ */

.btn-primary{
  padding:9px 18px;border:0;border-radius:var(--r-control);cursor:pointer;
  font-weight:600;color:#04222A;
  background:linear-gradient(180deg,#4BE0F5,var(--cyan));
  transition:filter var(--dur),transform var(--dur);
}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-primary:active:not(:disabled){transform:translateY(1px)}
.btn-primary:disabled{opacity:.34;cursor:not-allowed;filter:grayscale(.5)}

.btn-quiet{
  padding:6px 11px;border:1px solid var(--edge);border-radius:8px;cursor:pointer;
  background:var(--raise-03);color:var(--text-2);font-size:12.5px;
  transition:color var(--dur),border-color var(--dur),background var(--dur);
}
.btn-quiet:hover{color:var(--text);border-color:var(--edge-strong);background:var(--raise-06)}

.btn-danger{
  padding:6px 11px;border:1px solid rgba(244,114,182,.35);border-radius:8px;cursor:pointer;
  background:rgba(244,114,182,.08);color:#F9A8D4;font-size:12.5px;
  transition:background var(--dur),border-color var(--dur);
}
.btn-danger:hover{background:rgba(244,114,182,.16);border-color:rgba(244,114,182,.55)}

.empty{margin:0;padding:26px 20px;color:var(--text-3);font-size:13px;line-height:1.75}

/* 头像：真头像和「首字默认头像」都用它。img 元素，加载失败由 JS 兜底换默认 */
.avatar{
  width:34px;height:34px;flex:none;border-radius:50%;
  object-fit:cover;display:block;
  background:var(--raise-05);border:1px solid var(--edge);
}
.avatar-sm{width:28px;height:28px}

/* 标签 + 状态胶囊：表格和卡片都会用 */
.chip{
  display:inline-block;padding:1px 9px;border-radius:999px;font-size:11px;line-height:1.75;
  border:1px solid currentColor;white-space:nowrap;
}
.chip[data-tone="ok"]{color:var(--accent-ink);background:rgba(34,211,238,.1)}
.chip[data-tone="warn"]{color:var(--warn-ink);background:rgba(251,191,36,.1)}
.chip[data-tone="bad"]{color:var(--danger-ink);background:rgba(244,114,182,.1)}
.chip[data-tone="off"]{color:var(--text-3)}

/* ── 登录页 ───────────────────────────────────────────────── */

.gate{min-height:100dvh;display:grid;place-items:center;padding:28px}

.gate-card{
  width:min(440px,100%);
  padding:38px 34px 32px;
  border:1px solid var(--edge);
  border-radius:var(--r-panel);
  background:linear-gradient(160deg,var(--raise-055),var(--raise-012));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 40px 90px -50px var(--shadow-1);
}

/* 品牌记号同时也是配色说明：青 → 洋红 */
.gate-mark{
  display:block;width:46px;height:2px;border-radius:2px;margin-bottom:24px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
}

.gate-card h1{font-size:23px;line-height:1.4;margin-bottom:12px}
.gate-note{margin:0 0 26px;color:var(--text-2);font-size:13px;line-height:1.7}
.gate-note code{
  font-family:var(--mono);font-size:12px;padding:1px 5px;border-radius:5px;
  background:var(--raise-06);
}

.field{display:block;margin-bottom:14px}
.field>span{display:block;margin-bottom:7px;font-size:12px;color:var(--text-2)}

.field input{
  width:100%;padding:11px 13px;
  border:1px solid var(--edge);border-radius:var(--r-control);
  background:var(--field-bg);color:var(--text);
  font-family:var(--mono);font-size:13px;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.field input::placeholder{color:var(--text-3)}
.field input:focus{outline:0;border-color:rgba(34,211,238,.55);box-shadow:0 0 0 3px rgba(34,211,238,.12)}

.gate-card .btn-primary{width:100%;margin-top:8px;padding:11px}

.gate-err{margin:14px 0 0;font-size:12.5px;color:var(--danger-ink);line-height:1.6}
.gate-alt{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--edge);
  font-size:12.5px;color:var(--text-3);text-align:center}
.gate-alt a{color:var(--text-2)}

/* ── toast ────────────────────────────────────────────────── */

.toast{
  position:fixed;left:50%;bottom:28px;z-index:60;transform:translateX(-50%);
  margin:0;padding:11px 18px;max-width:min(560px,90vw);
  border:1px solid rgba(244,114,182,.4);border-radius:var(--r-control);
  background:var(--toast-bg);color:var(--toast-ink);font-size:13px;line-height:1.6;
  box-shadow:0 20px 50px -24px var(--shadow-2);
  animation:toastIn .22s var(--ease) both;
}
.toast[data-tone="ok"]{border-color:rgba(34,211,238,.45);background:var(--toast-bg-ok);color:var(--toast-ink-ok)}
/* 普通违规的提醒（不是错误、也不是成功）—— 警告色，和那两档一眼分得开 */
.toast[data-tone="warn"]{border-color:rgba(251,191,36,.5);background:var(--toast-bg);color:var(--warn-ink)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

@media (prefers-reduced-motion:reduce){
  .toast{animation:none}
}

/* ===========================================================================
   布局骨架（商户端 / 运营后台共用）
   —— 结构照隔壁项目 openclaw-web 的 user/operator 页面搬（左侧栏 + 顶部工具条 + 内容区），
      配色和观感沿用我们自己的深色科技风（不抄它的浅紫白）。
   页面切换：nav a[data-page] ↔ .page-view#page-<name>，纯 show/hide，无路由。
   =========================================================================== */
.layout{display:grid;grid-template-columns:214px minmax(0,1fr);min-height:100dvh}

/* ── 左侧栏 ── */
.sidebar{
  display:flex;flex-direction:column;gap:4px;
  padding:18px 12px 14px;border-right:1px solid var(--edge);
  background:linear-gradient(180deg,var(--raise-035),var(--raise-012));
}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.sidebar-logo{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(167,139,250,.22));
  border:1px solid var(--edge-strong);color:var(--accent-ink);font-weight:700;font-size:13px;
}
.sidebar-brand-text .brand-name{font-size:14.5px;font-weight:650;line-height:1.3}
.sidebar-brand-text .brand-sub{font-size:11px;color:var(--text-3);line-height:1.4}
/* 分组标题：靠字重 / 字距 / 上间距分层，不画线 */
.nav-label{padding:16px 10px 6px;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase}
.sidebar-nav{display:flex;flex-direction:column;gap:2px}
.sidebar-nav a{
  display:flex;align-items:center;gap:10px;position:relative;
  padding:9px 11px;border-radius:9px;font-size:13.5px;color:var(--text-2);
  border:1px solid transparent;transition:color .18s,background .18s,border-color .18s;
}
.sidebar-nav a:hover{color:var(--text);background:var(--raise-045)}
.sidebar-nav a.active{
  color:var(--text);background:rgba(34,211,238,.10);
  border-color:rgba(34,211,238,.30);
}
/* 选中态不再画左侧竖条：底色 + 描边已经够，那条 2px 线是多余装饰 */
.sidebar-nav .ico{width:16px;height:16px;flex:none;opacity:.9}
.sidebar-nav .label-sm{display:none}
.nav-badge{
  margin-left:auto;min-width:17px;padding:0 5px;border-radius:9px;text-align:center;
  font-size:10.5px;line-height:17px;background:var(--magenta);color:#0A0E17;font-weight:700;
}
/* 底部分区靠上间距分层，不画分隔线 */
.sidebar-bottom{margin-top:auto;padding-top:18px}
.sidebar-user{display:flex;align-items:center;gap:9px;padding:4px 6px}
.sidebar-user .who{min-width:0}
.sidebar-user .who .n{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user .who .r{font-size:10.5px;color:var(--text-3)}
.sidebar-logout{
  display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px 10px;border-radius:8px;
  font-size:12.5px;color:var(--text-3);
}
.sidebar-logout:hover{color:var(--danger-ink);background:rgba(244,114,182,.10)}

/* ── 主区 + 顶栏 ── */
.main-area{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;flex:none;
  /* 顶栏不画下边线：半透明底 + 毛玻璃已经把它和内容分开（线属于多余装饰） */
  background:var(--surface-bar);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;
}
.topbar-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.topbar-spacer{flex:1}
.topbar-user{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.content{flex:1;padding:20px 22px 30px;min-width:0}
.page-view{display:none}
.page-view.active{display:block;animation:pageIn .26s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 卡片 / 统计卡 / 表格（两种后台共用，深色版） */
.card{
  border:1px solid var(--edge);border-radius:12px;
  background:linear-gradient(180deg,var(--raise-035),var(--raise-012));
  overflow:hidden;
}
/* 卡片头不再画下边线：头部底色比正文略深一档，靠背景分层 */
.card-header{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--raise-022);
}
.card-title{font-size:13.5px;font-weight:600}
.card-subtitle{font-size:11.5px;color:var(--text-3)}
.card-body{padding:16px}
.card-hint{margin:0;font-size:11.5px;color:var(--text-3);line-height:1.6}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.stat-card{
  padding:14px 16px;border:1px solid var(--edge);border-radius:12px;
  background:linear-gradient(180deg,var(--raise-04),var(--raise-012));
}
.stat-card .label{font-size:11.5px;color:var(--text-3)}
.stat-card .value{margin-top:6px;font-size:23px;font-weight:650;line-height:1.2}
.stat-card .extra{margin-top:4px;font-size:11px;color:var(--text-3)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{
  padding:10px 12px;text-align:left;font-size:11px;font-weight:600;color:var(--text-3);
  white-space:nowrap;
}
/* 行线去掉：行的分隔靠行间距 + 斑马底 + hover，不再是一条条灰线 */
td{padding:11px 12px;font-size:12.5px;vertical-align:middle}
tbody tr:nth-child(even){background:var(--raise-012)}
tbody tr:hover{background:var(--raise-045)}
td.actions{white-space:nowrap;text-align:right}
td.actions .btn-quiet,td.actions .btn-danger{margin-left:5px}
.quick-btn{
  padding:4px 9px;border-radius:7px;font-size:11.5px;cursor:pointer;
  border:1px solid var(--edge-strong);background:none;color:var(--text-2);
}
.quick-btn:hover{color:var(--text);border-color:var(--accent-ink)}
.quick-btn.danger:hover{color:var(--danger-ink);border-color:rgba(244,114,182,.5)}
.search-bar{display:flex;align-items:center;gap:8px}
.search-input{
  padding:7px 11px;border-radius:8px;font-size:12.5px;min-width:180px;
  border:1px solid var(--edge);background:var(--raise-03);color:var(--text);
}
.pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;font-size:12px;color:var(--text-3)}
.pager button{padding:3px 9px;border-radius:6px;border:1px solid var(--edge);color:var(--text-2);font-size:12px}
.pager button:disabled{opacity:.4;cursor:not-allowed}

/* 手机：侧栏变底部导航（隔壁也是这个套路，980px 断点） */
@media (max-width:860px){
  .layout{grid-template-columns:1fr;padding-bottom:58px}
  .sidebar{
    position:fixed;left:0;right:0;bottom:0;z-index:30;flex-direction:row;align-items:center;
    gap:0;padding:8px;
    background:var(--surface-bar-strong);backdrop-filter:blur(14px);overflow-x:auto;
  }
  .sidebar-brand,.nav-label,.sidebar-bottom{display:none}
  .sidebar-nav{flex-direction:row;gap:2px;width:100%;justify-content:space-around}
  .sidebar-nav a{flex-direction:column;gap:3px;padding:6px 8px;font-size:10.5px;min-width:56px;justify-content:center}
  .sidebar-nav .label{display:none}
  .sidebar-nav .label-sm{display:block}
  .sidebar-nav a.active{background:rgba(34,211,238,.14)}
  .content{padding:14px}
  .topbar{padding:0 14px}
}

/* ============================================================
   浅色作用域里的定点覆盖
   —— 上面 [data-theme="light"] 换掉的是**所有语义令牌**；这里剩下的
      几处是写死的浅色调（当「字」用的浅粉/浅青），本来就是给深色底挑的，
      硬换成令牌会牵动别的用法。就地按作用域覆盖：只改颜色，
      布局、尺寸、间距一个字不动；暗色下这几条完全不生效。
   对比度实测见 平台交付报告（都在 4.5:1 以上）。
   ============================================================ */
[data-theme="light"] .btn-danger{color:#9D174D;border-color:rgba(190,24,93,.32);background:rgba(190,24,93,.06)}
[data-theme="light"] .btn-danger:hover{background:rgba(190,24,93,.12);border-color:rgba(190,24,93,.5)}