/* ==========================================================================
   ApiGate v3.0 设计系统
   主题：深空靛蓝底 + 青蓝渐变主色，玻璃面板 + 细描边
   所有尺寸用 rem 和 8px 栅格，桌面 / 平板 / 手机三档断点
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root {
  /* 底层背景（由深到浅） */
  --bg-0: #070b14;
  --bg-1: #0a0f1b;
  --bg-2: #0d1425;
  --bg-3: #111a2e;

  /* 面板 */
  --panel: rgba(17, 26, 46, .72);
  --panel-solid: #111a2e;
  --panel-2: rgba(23, 34, 58, .78);
  --panel-3: rgba(30, 43, 72, .62);

  /* 描边 */
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --line-3: rgba(255, 255, 255, .18);

  /* 文字 */
  --text: #e8eefc;
  --text-2: #a9b8d4;
  --muted: #6f7f9c;
  --muted-2: #4e5c76;

  /* 主色：青 → 蓝 → 靛 */
  --cyan: #22d3ee;
  --blue: #3b82f6;
  --indigo: #6366f1;
  --accent: #38bdf8;
  --accent-2: #818cf8;
  --accent-soft: rgba(56, 189, 248, .12);

  /* 语义色 */
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, .13);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .13);
  --err: #f87171;
  --err-soft: rgba(248, 113, 113, .13);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, .13);

  /* 阴影 */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --sh: 0 4px 18px rgba(0, 0, 0, .34);
  --sh-lg: 0 18px 50px rgba(0, 0, 0, .48);
  --sh-glow: 0 0 0 1px rgba(56, 189, 248, .28), 0 8px 28px rgba(56, 189, 248, .18);

  /* 圆角 */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* 动效 */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 140ms;
  --mid: 220ms;

  /* 等宽字体：style.css 里多处 font-family: var(--mono-font, ...)
     / var(--mono, ...) 引用，但这两个变量从未定义，浏览器只能吃 fallback。
     补齐后所有等宽文本（表格 / 前缀 / 读数条）字体一致。 */
  --mono-font: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --sidebar-w: 232px;
}

/* ---------- 重置 ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
code, pre, .mono {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
::selection { background: rgba(56, 189, 248, .3); }
.hidden { display: none !important; }
.muted { color: var(--muted); }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .1);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .18); background-clip: content-box; }

/* ==========================================================================
   登录页
   ========================================================================== */
.login-wrap {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(59, 130, 246, .2), transparent 62%),
    radial-gradient(900px 620px at 92% 108%, rgba(99, 102, 241, .18), transparent 60%),
    var(--bg-0);
}

/* 漂浮光球 */
.bg-orbs { position: absolute; inset: 0; pointer-events: none; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(76px);
  opacity: .5;
  animation: float 22s var(--ease) infinite;
}
.orb.o1 { width: 420px; height: 420px; left: -6%; top: -12%;
  background: radial-gradient(circle, rgba(34, 211, 238, .55), transparent 70%); }
.orb.o2 { width: 480px; height: 480px; right: -10%; bottom: -16%; animation-delay: -7s;
  background: radial-gradient(circle, rgba(99, 102, 241, .5), transparent 70%); }
.orb.o3 { width: 320px; height: 320px; left: 46%; top: 58%; animation-delay: -13s;
  background: radial-gradient(circle, rgba(59, 130, 246, .42), transparent 70%); }

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(26px, -30px, 0) scale(1.06); }
  66% { transform: translate3d(-22px, 22px, 0) scale(.96); }
}

/* 噪点纹理，避免大面积渐变出现色带 */
.bg-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.login-shell {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: rgba(10, 15, 27, .62);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
}

/* 左：品牌区 */
.login-aside {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(160deg, rgba(56, 189, 248, .1), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
}

.la-brand { display: flex; align-items: center; gap: 13px; }
.la-brand h1 { font-size: 21px; letter-spacing: -.02em; }
.la-brand p { font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: -.04em;
  color: #04121f;
  background: linear-gradient(135deg, var(--cyan), var(--blue) 55%, var(--indigo));
  box-shadow: 0 6px 18px rgba(56, 189, 248, .35);
  flex: none;
}
.brand-mark.lg { width: 46px; height: 46px; border-radius: 13px; font-size: 16px; }

.la-title {
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-top: 8px;
}
.la-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--cyan), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.la-desc { color: var(--text-2); font-size: 13.5px; line-height: 1.75; max-width: 42ch; }

.la-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 13px; }
.la-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--text-2); }
.la-list li b { display: block; color: var(--text); font-weight: 600; font-size: 13px; }
.la-list .ico {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-style: normal;
  font-size: 13px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(56, 189, 248, .2);
}

.la-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 16px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  font-size: 11.5px; color: var(--text-2);
  border-radius: 99px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03);
}
.ver { font-size: 11.5px; color: var(--muted-2); letter-spacing: .04em; }

/* 右：表单区 */
.login-main {
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent);
}
.login-card { width: 100%; max-width: 380px; }

.lc-head { margin-bottom: 22px; }
.lc-head h2 { font-size: 21px; letter-spacing: -.02em; }
.lc-head p { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* 分段控件（带滑动指示条） */
.seg {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
  margin-bottom: 22px;
  width: 100%;
}
.seg.sm { width: auto; margin: 0; padding: 2px; border-radius: 8px; }
.seg-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
  border-radius: 8px;
  cursor: pointer;
  transition: color var(--fast) var(--ease);
  font-family: inherit;
  white-space: nowrap;
}
.seg.sm .seg-btn { flex: none; padding: 4px 11px; font-size: 12px; }
.seg-btn.active { color: var(--text); }
.seg-btn:hover:not(.active) { color: var(--text-2); }
.seg-ink {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(33.333% - 2px);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(56, 189, 248, .22), rgba(129, 140, 248, .22));
  border: 1px solid rgba(56, 189, 248, .26);
  transition: transform var(--mid) var(--ease), width var(--mid) var(--ease);
  pointer-events: none;
}
.seg.sm .seg-ink { top: 2px; bottom: 2px; left: 2px; }

/* ---------- 表单 ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; position: relative; }
.field > label {
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 550;
  letter-spacing: .01em;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  padding: 10px 13px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  background: rgba(8, 13, 24, .72);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder { color: var(--muted-2); }
input:hover, select:hover, textarea:hover { border-color: var(--line-3); }
input:focus, select:focus, textarea:focus {
  border-color: rgba(56, 189, 248, .6);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .13);
  background: rgba(8, 13, 24, .9);
}
input:disabled, select:disabled {
  opacity: .45;
  cursor: not-allowed;
}
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f7f9c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
}
select option { background: var(--panel-solid); color: var(--text); }
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.6);
  cursor: pointer;
}

/* 带图标输入框 */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .in-ico {
  position: absolute;
  left: 12px;
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}
.input-wrap input { padding-left: 34px; }
.input-wrap .eye,
.input-wrap .send-code {
  position: absolute;
  right: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-family: inherit;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--fast), background var(--fast);
}
.input-wrap .eye:hover,
.input-wrap .send-code:hover { color: var(--accent); background: var(--accent-soft); }
.input-wrap .send-code:disabled { opacity: .4; cursor: not-allowed; }
.input-wrap input:has(+ .eye), .input-wrap input:has(+ .send-code) { padding-right: 68px; }

/* 大号验证码输入 */
.code-input {
  text-align: center !important;
  font-size: 24px !important;
  letter-spacing: .32em;
  font-family: "SF Mono", ui-monospace, monospace !important;
  padding: 14px !important;
  font-weight: 600;
}

.field-err {
  font-size: 11.5px;
  color: var(--err);
  min-height: 0;
  margin: 0;
}
.field-err:empty { display: none; }
.field-hint { font-size: 11.5px; color: var(--muted); margin: 0; line-height: 1.6; }

/* 密码强度 */
.pw-meter { display: flex; align-items: center; gap: 5px; height: 14px; }
.pw-meter span {
  height: 3px;
  flex: 1;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
  transition: background var(--mid) var(--ease);
}
.pw-meter em { font-style: normal; font-size: 11px; color: var(--muted); min-width: 40px; text-align: right; }
.pw-meter.lv1 span:nth-child(1) { background: var(--err); }
.pw-meter.lv2 span:nth-child(-n+2) { background: var(--warn); }
.pw-meter.lv3 span:nth-child(-n+3) { background: var(--info); }
.pw-meter.lv4 span { background: var(--ok); }

.form-msg {
  font-size: 12.5px;
  color: var(--err);
  text-align: center;
  min-height: 0;
  margin: 0;
}
.form-msg:empty { display: none; }
.form-msg.ok { color: var(--ok); }
.form-msg.warn { color: var(--warn); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--fast) var(--ease),
              background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              opacity var(--fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: rgba(255, 255, 255, .1); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(56, 189, 248, .35); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 7px; }
.btn.lg { padding: 12px 20px; font-size: 14px; border-radius: 10px; }
.btn.full { width: 100%; }

.btn.primary {
  color: #04121f;
  border-color: transparent;
  background: linear-gradient(135deg, var(--cyan), var(--blue) 58%, var(--indigo));
  box-shadow: 0 6px 20px rgba(56, 189, 248, .26);
}
.btn.primary:hover {
  box-shadow: 0 8px 26px rgba(56, 189, 248, .38);
  filter: brightness(1.06);
}
.btn.ghost { background: transparent; border-color: var(--line-2); color: var(--text-2); }
.btn.ghost:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.btn.danger { color: var(--err); border-color: rgba(248, 113, 113, .32); background: var(--err-soft); }
.btn.danger:hover { background: rgba(248, 113, 113, .22); }
.btn.icon {
  padding: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 14px;
}
.btn.icon:hover { background: rgba(255, 255, 255, .07); color: var(--text); }

/* 按钮内小转菊花 */
.btn-spin { display: inline-flex; gap: 3px; }
.btn-spin i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: dotPulse 1s var(--ease) infinite;
}
.btn-spin i:nth-child(2) { animation-delay: .15s; }
.btn-spin i:nth-child(3) { animation-delay: .3s; }
@keyframes dotPulse {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
.btn.loading .btn-text { opacity: .5; }

/* ==========================================================================
   主控制台布局
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  background:
    radial-gradient(900px 600px at 78% -8%, rgba(56, 189, 248, .07), transparent 60%),
    radial-gradient(760px 520px at 6% 104%, rgba(99, 102, 241, .07), transparent 60%),
    var(--bg-0);
}

/* ---------- 侧栏 ---------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 20, 37, .92), rgba(7, 11, 20, .96));
  backdrop-filter: blur(16px);
  z-index: 20;
}

.sb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 18px;
  font-weight: 650;
  font-size: 14.5px;
  letter-spacing: -.01em;
}
.sb-brand em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  color: var(--muted-2);
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .04);
  letter-spacing: .02em;
}

.nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; padding-right: 2px; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 550;
  font-family: inherit;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav-item i {
  flex: none;
  width: 20px;
  text-align: center;
  font-style: normal;
  font-size: 13px;
  opacity: .8;
  transition: transform var(--fast) var(--ease);
}
.nav-item:hover { color: var(--text-2); background: rgba(255, 255, 255, .045); }
.nav-item:hover i { transform: scale(1.12); }
.nav-item.active {
  color: var(--text);
  background: linear-gradient(100deg, rgba(56, 189, 248, .16), rgba(129, 140, 248, .1));
}
.nav-item.active i { color: var(--accent); opacity: 1; }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--cyan), var(--indigo));
  box-shadow: 0 0 10px rgba(56, 189, 248, .5);
}

.sb-foot { padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
}
.user-chip > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #04121f;
  background: linear-gradient(135deg, var(--cyan), var(--indigo));
}

/* ---------- 主区 ---------- */
.main {
  padding: 26px 32px 60px;
  min-width: 0;
  max-width: 1500px;
  width: 100%;
}

.page { display: none; }
.page.active { display: block; animation: pageIn var(--mid) var(--ease); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-head h2 {
  font-size: 22px;
  letter-spacing: -.025em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-head h2::before {
  content: "";
  width: 3px; height: 19px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--cyan), var(--indigo));
  box-shadow: 0 0 12px rgba(56, 189, 248, .45);
}
.page-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; padding-left: 13px; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.search-box { position: relative; }
.search-box input {
  width: 210px;
  padding: 7px 30px 7px 12px;
  font-size: 12.5px;
  background: rgba(8, 13, 24, .7);
}
.search-box .s-ico {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}
.input-sm {
  padding: 7px 12px;
  font-size: 12.5px;
  width: auto;
  min-width: 110px;
}

/* ==========================================================================
   统计卡
   ========================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stat {
  position: relative;
  padding: 15px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  overflow: hidden;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.stat:hover { border-color: var(--line-2); transform: translateY(-1px); }
.stat-label {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .03em;
  margin-bottom: 7px;
  text-transform: uppercase;
}
.stat b {
  display: block;
  font-size: 25px;
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat b small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.stat-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.stat-sub.up { color: var(--ok); }
.stat-sub.down { color: var(--err); }

.stat.accent {
  border-color: rgba(56, 189, 248, .26);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(56, 189, 248, .16), transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
}
.stat.accent b { color: #7dd3fc; }
.stat.accent::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, .22), transparent 68%);
  pointer-events: none;
}

/* ==========================================================================
   卡片 / 表格
   ========================================================================== */
.card {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(12px);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--sh-sm);
}
.card > h3, .card-head h3 {
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -.01em;
}
.card > h3 { margin-bottom: 14px; }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.card-head .hint { font-size: 11.5px; color: var(--muted); }
.card-note {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 14px;
}
.card-note b { color: var(--text-2); font-weight: 600; }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.two-col > .card { margin-bottom: 16px; }

.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-sm);
  margin: 0 -4px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
thead th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
  z-index: 1;
}
tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  color: var(--text-2);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--fast) var(--ease); }
tbody tr:hover td { background: rgba(56, 189, 248, .045); color: var(--text); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono, th.mono { font-family: "SF Mono", ui-monospace, monospace; font-size: 11.5px; }
td.error-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.error-cell:not(:empty) { color: var(--err); }

/* ==========================================================================
   徽章 / 状态
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.6;
}
.badge.ok   { color: var(--ok);   background: var(--ok-soft);   border-color: rgba(52, 211, 153, .26); }
.badge.warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(251, 191, 36, .26); }
.badge.err  { color: var(--err);  background: var(--err-soft);  border-color: rgba(248, 113, 113, .26); }
.badge.info { color: var(--info); background: var(--info-soft); border-color: rgba(96, 165, 250, .26); }
.badge.off  { color: var(--muted); background: rgba(255, 255, 255, .05); border-color: var(--line-2); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 7px rgba(52, 211, 153, .6); }
.dot.err { background: var(--err); box-shadow: 0 0 7px rgba(248, 113, 113, .6); }
.dot.warn { background: var(--warn); }
.dot.live { background: var(--ok); animation: livePulse 2s var(--ease) infinite; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}

.status-row { display: flex; align-items: flex-start; gap: 11px; }
.status-dot {
  flex: none;
  width: 9px; height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--muted-2);
}
.status-dot.ok { background: var(--ok); box-shadow: 0 0 9px rgba(52, 211, 153, .6); }
.status-dot.warn { background: var(--warn); box-shadow: 0 0 9px rgba(251, 191, 36, .5); }
.status-dot.err { background: var(--err); box-shadow: 0 0 9px rgba(248, 113, 113, .5); }
.status-text { display: grid; gap: 2px; font-size: 13px; }
.status-text b { font-weight: 600; }
.status-text span { font-size: 12px; }

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 0;
}
.item-grid > div { display: grid; gap: 3px; }
.item-grid dt { font-size: 11px; color: var(--muted); letter-spacing: .03em; }
.item-grid dd { margin: 0; font-size: 13px; color: var(--text-2); font-weight: 500; }

/* ==========================================================================
   卡片列表（密钥 / 上游 / 子账号）
   ========================================================================== */
.card-list { display: grid; gap: 12px; }

.item-card {
  position: relative;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.item-card:hover {
  border-color: var(--line-2);
  transform: translateY(-1px);
  box-shadow: var(--sh);
}
.item-card.dim { opacity: .58; }

.ic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ic-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.ic-title h4 { font-size: 14.5px; font-weight: 620; letter-spacing: -.01em; }
.ic-sub {
  font-size: 11.5px;
  color: var(--muted);
  font-family: "SF Mono", ui-monospace, monospace;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ic-sub .copy-mini {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0 3px;
  border-radius: 4px;
}
.ic-sub .copy-mini:hover { color: var(--accent); background: var(--accent-soft); }
.ic-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.ic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ic-grid > div { display: grid; gap: 2px; }
.ic-grid dt { font-size: 10.5px; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.ic-grid dd { margin: 0; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* 配额条 */
.meter {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  margin-top: 4px;
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: width var(--mid) var(--ease);
}
.meter.warn > i { background: linear-gradient(90deg, var(--warn), #f59e0b); }
.meter.err > i { background: linear-gradient(90deg, var(--err), #dc2626); }

/* 空状态 */
.empty-state {
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 60px 20px;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--muted);
}
.empty-ico { font-size: 30px; opacity: .35; }
.empty-state b { font-size: 14px; color: var(--text-2); font-weight: 600; }
.empty-state p { font-size: 12.5px; max-width: 34ch; line-height: 1.65; }
.empty { padding: 26px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ==========================================================================
   图表
   ========================================================================== */
.chart-wrap { padding: 8px 0 0; }
.chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 170px;
  /* 左右留出空间给首尾标签溢出，否则 "11-01" 会顶到卡片边缘被裁 */
  padding: 0 10px;
}
.chart .bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  height: 100%;
  position: relative;
  cursor: default;
  min-width: 0;
}
.chart .bar {
  position: relative;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(56, 189, 248, .95), rgba(37, 99, 235, .55));
  min-height: 2px;
  transition: filter var(--fast) var(--ease);
}
.chart .bar-col:hover .bar { filter: brightness(1.25); }

/* 零值日期：给一条淡淡的短基线，让用户看到"这天有数据点、只是为 0"。
   原来 height:0% 完全消失，14 天里 13 天为 0 时整片空白，像是坏图。
   宽度只占格子中间一小段（下面 60%），不再整条铺满 ——
   之前它跨满整个格子，看起来像一条横线穿过柱子区，很容易被误认成"标签"或"网格线"。 */
.chart .bar-col.is-zero .bar {
  background: var(--line-2);
  min-height: 3px;
  border-radius: 2px;
  width: 60%;
  margin: 0 auto;
}
.chart .bar-col.is-zero:hover .bar { background: var(--muted-2); }

/* 有数据的柱子也限宽，和零值基线视觉宽度一致 */
.chart .bar-col .bar { margin: 0 auto; }
.chart .bar-col:not(.is-zero) .bar { width: 74%; }
.chart .bar-err {
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(248, 113, 113, .95), rgba(220, 38, 38, .5));
  min-height: 0;
  /* 和柱子同宽同位置，否则红块会比蓝柱宽出一截 */
  width: 74%;
  margin: 0 auto;
}
.chart .bar-label {
  /* 已废弃：标签改为独立轴行 .chart-axis 渲染。
     留在 bar-col 里必然出问题 —— 每格只有 1/14 宽（约25px），
     而 "11-01" 要 30px，只要 overflow:visible 就会压到相邻格子的基线，
     形成"标签-灰条-标签-灰条"的穿插；overflow:hidden 又会裁成 "11-…"。
     两头都是错，所以必须把标签移出格子。 */
  display: none;
}

/* ---------- X 轴（独立一行，不跟柱子抢空间） ---------- */
/* 用 grid 而不是 flex：列宽和 .chart 的柱子完全一致（同样的 gap / padding），
   这样每个标签的中心正好对准对应柱子。标签本身允许溢出到相邻列，
   因为这一行只有文字、没有基线，压不到任何东西。 */
.chart-axis {
  display: grid;
  gap: 4px;
  padding: 6px 10px 0;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}
.chart-axis .ax-label {
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted-2);
  text-align: center;
  white-space: nowrap;
  /* 允许溢出：这一行是独立行，左右不会撞到别的东西 */
  overflow: visible;
  min-width: 0;
}
.chart .tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast) var(--ease);
  z-index: 5;
  box-shadow: var(--sh);
}
.chart .bar-col:hover .tip { opacity: 1; }

/* tooltip 边缘对齐：第一根靠左、最后一根靠右，
   否则 left:50%+translate(-50%) 会让末端的提示框跑出卡片外（截图里已经飞到右边界外）。 */
.chart .tip.tip-left {
  left: 0;
  transform: translate(0, -6px);
}
.chart .tip.tip-right {
  left: auto;
  right: 0;
  transform: translate(0, -6px);
}

/* ---------- 图表读数条（替代悬浮 tooltip） ---------- */
/* 悬浮 tooltip 在手机上根本显示不全：卡片 overflow:hidden 会裁掉它，
   末根柱子会把它推出边界，而且触屏没有 hover。改用固定读数条。 */
.chart-readout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 26px;
  padding: 4px 10px;
  margin-bottom: 6px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.chart-readout.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}
.chart-readout .ro-date {
  font-family: var(--mono-font, ui-monospace, monospace);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.chart-readout.active .ro-date { color: var(--text-2); }
.chart-readout .ro-val {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
}
.chart-readout .ro-err {
  font-size: 12px;
  color: var(--err);
  white-space: nowrap;
}

/* 图表卡片不再裁切内容 —— 之前 tooltip 就是被这条 overflow:hidden 切掉的 */
.card:has(.chart-wrap) { overflow: visible; }
.chart-wrap { overflow: visible; }

/* 柱子可点，给个手型提示 */
.chart .bar-col { cursor: pointer; }

/* 图例里跟柱子同色的圆点（原来用的 .dot.ok 是绿色，和蓝色柱子不符） */
.chart-legend .dot.accent {
  background: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .18);
}

/* 底部说明行（"近 14 天 · 调用"）单独占一行，不再和图例挤在一起 */
.chart-note-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }

/* 排行条 */
.rank-list { display: grid; gap: 11px; }
.rank-item { display: grid; gap: 5px; }
.rank-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}
.rank-name {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11.5px;
}
.rank-val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.rank-bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.rank-bar > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--indigo));
}

/* ==========================================================================
   筛选栏
   ========================================================================== */
.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-item { display: grid; gap: 5px; }
.filter-item > label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .03em;
}
.filter-item.grow { flex: 1; min-width: 160px; }
.filter-item input[type="date"] { min-width: 132px; }
.filter-item select { min-width: 118px; }
.filter-btns { display: flex; gap: 7px; margin-left: auto; }

.chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  padding: 7px 0;
}
.chk input { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }

.log-summary {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.log-summary b { color: var(--text); font-weight: 600; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   动态密匙
   ========================================================================== */
.otp-selected {
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: rgba(56, 189, 248, .07);
  border: 1px solid rgba(56, 189, 248, .2);
  font-size: 12.5px;
  margin-bottom: 14px;
}
.otp-quota {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  margin-bottom: 18px;
  font-size: 12.5px;
}
.otp-quota-label { color: var(--muted); }
.otp-quota-value { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.otp-quota-value.warn { color: var(--warn); }
.otp-quota-value.err { color: var(--err); }
.otp-quota-hint { color: var(--muted); font-size: 11.5px; }

.otp-step {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.otp-step-num {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(56, 189, 248, .22);
}
.otp-step-body { flex: 1; min-width: 0; display: grid; gap: 9px; justify-items: start; }
.otp-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 620;
}
.otp-step-desc { font-size: 12.5px; color: var(--muted); line-height: 1.65; }

.otp-code-box {
  width: 100%;
  padding: 18px;
  border-radius: var(--r);
  background: rgba(56, 189, 248, .06);
  border: 1px solid rgba(56, 189, 248, .24);
  display: grid;
  gap: 10px;
  justify-items: center;
}
.otp-code-label { font-size: 11.5px; color: var(--muted); }
.otp-code-value {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .26em;
  color: #7dd3fc;
  text-shadow: 0 0 22px rgba(56, 189, 248, .5);
  font-variant-numeric: tabular-nums;
}
.otp-code-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 11.5px;
  color: var(--muted);
}

.otp-verify-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.otp-verify-row input { max-width: 170px; }
.otp-result { font-size: 12.5px; min-height: 0; }
.otp-result:empty { display: none; }
.otp-result.ok { color: var(--ok); }
.otp-result.err { color: var(--err); }

.otp-tip {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.75;
}
.otp-tip b { color: var(--text-2); display: block; margin-bottom: 3px; font-size: 12px; }
.otp-tip code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, .12);
  color: var(--accent);
  font-size: 11.5px;
}

.otp-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.otp-mode-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
}
.otp-mode-item > div { display: grid; gap: 3px; }
.otp-mode-item b { font-size: 12.5px; font-weight: 600; }
.otp-mode-item p { font-size: 11.5px; color: var(--muted); line-height: 1.6; }

.otp-limit-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.otp-limit-row > label { font-size: 12.5px; color: var(--text-2); font-weight: 550; }
.otp-limit-ctrl { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.otp-limit-ctrl input { max-width: 110px; }
.otp-limit-unit { font-size: 12.5px; color: var(--muted); }

/* 密钥选择列表 */
.otp-key-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast);
  margin-bottom: 8px;
}
.otp-key-row:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .04); }
.otp-key-row.sel { border-color: rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .08); }
.otp-key-row input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.otp-key-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.otp-key-info b { font-size: 12.5px; font-weight: 600; }
.otp-key-info span {
  font-size: 11px;
  color: var(--muted);
  font-family: "SF Mono", ui-monospace, monospace;
}

/* ==========================================================================
   设置页
   ========================================================================== */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.switch-row:first-of-type { border-top: 0; }
.sw-label { font-size: 13px; font-weight: 550; }
.sw-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.6; }

.switch { position: relative; display: inline-block; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  display: block;
  width: 42px; height: 24px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--line-2);
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease);
  position: relative;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--mid) var(--ease), background var(--mid) var(--ease);
}
.switch input:checked + .track {
  background: linear-gradient(135deg, rgba(56, 189, 248, .5), rgba(99, 102, 241, .5));
  border-color: rgba(56, 189, 248, .5);
}
.switch input:checked + .track::after {
  transform: translateX(18px);
  background: #e8f6ff;
  box-shadow: 0 0 10px rgba(56, 189, 248, .6);
}
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(56, 189, 248, .3); }

.btn-row { display: flex; gap: 9px; flex-wrap: wrap; padding-top: 14px; }
.row-inline { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

.bind-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(52, 211, 153, .07);
  border: 1px solid rgba(52, 211, 153, .24);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.bind-chip { display: flex; align-items: center; gap: 9px; font-size: 13px; }

/* 健康检查 */
.health-list { display: grid; gap: 9px; }
.health-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--line);
}
.health-row.ok { border-color: rgba(52, 211, 153, .2); }
.health-row.err { border-color: rgba(248, 113, 113, .24); }
.health-ico {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 6px;
  font-size: 11px;
  margin-top: 1px;
}
.health-row.ok .health-ico { color: var(--ok); background: var(--ok-soft); }
.health-row.err .health-ico { color: var(--err); background: var(--err-soft); }
.health-body { display: grid; gap: 2px; min-width: 0; }
.health-body b { font-size: 12.5px; font-weight: 600; }
.health-body span { font-size: 11.5px; color: var(--muted); word-break: break-word; }

/* TOTP 设置 */
.totp-setup-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding: 16px 0;
  align-items: start;
}
.qr-box {
  width: 168px; height: 168px;
  padding: 10px;
  border-radius: var(--r);
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--sh);
}
.qr-box svg, .qr-box img { width: 100%; height: 100%; display: block; }
.secret-text {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(56, 189, 248, .08);
  border: 1px solid rgba(56, 189, 248, .22);
  font-size: 12px;
  color: #7dd3fc;
  word-break: break-all;
  letter-spacing: .06em;
  line-height: 1.7;
}
.totp-badge {
  width: 62px; height: 62px;
  margin: 8px auto 22px;
  display: grid; place-items: center;
  border-radius: 20px;
  font-size: 27px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(56, 189, 248, .26);
  box-shadow: 0 0 34px rgba(56, 189, 248, .2);
}

.alert {
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03);
  margin-top: 16px;
}
.alert b { display: block; font-size: 13px; margin-bottom: 4px; }
.alert p { font-size: 12px; color: var(--muted); line-height: 1.7; }
.alert.warn {
  border-color: rgba(251, 191, 36, .32);
  background: var(--warn-soft);
}
.alert.warn b { color: var(--warn); }
.backup-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 7px;
  margin: 12px 0;
}
.backup-codes code {
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid var(--line-2);
  font-size: 12px;
  text-align: center;
  letter-spacing: .06em;
  color: var(--text);
}
/* 注入预览的消息块 */
.msg-preview {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .022);
  overflow: hidden;
}
.mp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.mp-head .muted { font-size: 11px; }
.mp-body {
  margin: 0;
  padding: 11px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
  font-family: "SF Mono", ui-monospace, monospace;
}

/* 价格配置编辑器 */
.price-edit-list { display: grid; gap: 12px; }
.price-edit {
  padding: 13px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .022);
}
.pe-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pe-head b { font-size: 13px; }
.pe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pe-grid label {
  display: grid;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
}
.pe-grid input { padding: 6px 9px; font-size: 12.5px; }
.price-edit .field-hint { margin-top: 8px; }

@media (max-width: 560px) {
  .pe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 备份列表 */
.backup-list { display: grid; gap: 7px; }
.backup-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--line);
  font-size: 12px;
}
.backup-row .b-name {
  flex: 1;
  min-width: 0;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backup-row .b-size { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.backup-row .b-time { color: var(--muted); flex: none; }

/* ==========================================================================
   文档页
   ========================================================================== */
.doc h3 {
  font-size: 13.5px;
  margin: 22px 0 10px;
  padding-left: 11px;
  position: relative;
}
.doc h3::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--cyan), var(--indigo));
}
.doc h3:first-child { margin-top: 0; }

.doc-kv { display: grid; gap: 8px; }
.doc-kv > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--line);
  font-size: 12.5px;
}
.doc-kv dt { color: var(--muted); font-size: 11.5px; }
.doc-kv dd { margin: 0; color: var(--text-2); }
.doc-kv code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, .1);
  color: var(--accent);
  font-size: 11.5px;
}

.code-block { position: relative; }
.code-block pre {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r);
  background: rgba(4, 8, 16, .82);
  border: 1px solid var(--line-2);
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.75;
  color: #b9c9e4;
}
.code-block pre code { color: inherit; }
.doc-base-inline, .doc-key-inline { color: #7dd3fc; }
.copy-btn {
  position: absolute;
  top: 8px; right: 8px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-family: inherit;
  color: var(--muted);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--fast), color var(--fast), background var(--fast);
}
.code-block:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--accent); background: var(--accent-soft); }

.err-table code { color: var(--info); font-size: 11px; }

/* ==========================================================================
   弹窗
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 6, 12, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: fadeIn var(--fast) var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  width: min(560px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  box-shadow: var(--sh-lg);
  animation: modalIn var(--mid) var(--ease);
  overflow: hidden;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to { opacity: 1; transform: none; }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.modal-head h3 { font-size: 15px; }
.modal-body {
  padding: 18px;
  overflow-y: auto;
  display: grid;
  gap: 14px;
  font-size: 13px;
}
.modal-foot {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  flex: none;
}
.modal-foot:empty { display: none; }

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 11px 20px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-lg);
  font-size: 13px;
  color: var(--text);
  max-width: min(90vw, 480px);
  animation: toastIn var(--mid) var(--ease);
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.toast.ok { border-color: rgba(52, 211, 153, .38); }
.toast.ok::before { content: "✓ "; color: var(--ok); }
.toast.err { border-color: rgba(248, 113, 113, .38); }
.toast.err::before { content: "✕ "; color: var(--err); }

/* ==========================================================================
   手机端：底部 Tab Bar + 抽屉 + 紧凑登录
   设计原则（和桌面版不同，不是缩小版）：
     1 导航放底部（拇指可达），只留 5 个主入口，其余进「更多」抽屉
     2 所有可点区域 >= 44px（iOS HIG / Material 标准）
     3 登录页首屏必须能看到登录按钮，营销文案折叠
     4 卡片列表取代宽表格，表格只在确实需要时横向滚动
     5 底部留出安全区（刘海屏 home indicator）
   ========================================================================== */

/* Tab Bar / 抽屉默认隐藏，只在手机屏幕显示 */
.tabbar, .drawer, .drawer-mask { display: none; }

@media (max-width: 768px) {
  /* ---------- 全局：让出底部空间 ---------- */
  :root { --tabbar-h: 62px; }

  body { padding-bottom: env(safe-area-inset-bottom, 0); }

  .app {
    grid-template-columns: 1fr;
    /* 给 Tab Bar 让位，避免最后一行内容被挡住 */
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- 隐藏桌面侧栏，改顶部窄条 ---------- */
  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
    z-index: 30;
    /* 毛玻璃：内容滑过时保持可读 */
    background: rgba(10, 15, 27, .88);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
  }
  .sb-brand { padding: 0; flex: none; gap: 8px; }
  .sb-brand span { display: inline; font-size: 15px; }
  .sb-brand em { display: inline; margin-left: 2px; }
  .sb-brand .brand-mark { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }

  /* 顶部导航整条隐藏（用底部 Tab Bar 替代） */
  .nav { display: none; }

  .sb-foot {
    margin-left: auto;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-top: 0;
  }
  /* 顶部只留头像，点击进「更多」抽屉看账号 */
  .user-chip {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .user-chip > span:last-child { display: none; }
  .avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; }
  #btn-logout { display: none; }

  /* ---------- 主区 ---------- */
  .main {
    padding: 16px 14px 24px;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .page-head {
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 10px;
  }
  .page-head h2 { font-size: 19px; }
  .page-sub { font-size: 12px; padding-left: 12px; }

  .head-actions {
    width: 100%;
    gap: 7px;
  }
  /* 主操作按钮占满一行，次操作平摊 */
  .head-actions .btn { flex: 1 1 0; min-height: 42px; }
  .head-actions .btn.primary { order: -1; flex: 1 1 100%; }
  .head-actions .search-box { flex: 1 1 100%; }
  .search-box input { width: 100%; min-height: 42px; font-size: 14px; }
  .head-actions select.input-sm { flex: 1 1 auto; min-width: 0; min-height: 42px; }

  /* ---------- 统计卡：两列大数字 ---------- */
  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .stat {
    padding: 13px 14px;
    min-width: 0;
    border-radius: 14px;
  }
  .stat-label { font-size: 11px; margin-bottom: 5px; }
  .stat b { font-size: 22px; }
  .stat b small { font-size: 12px; }
  .stat-sub { font-size: 11px; margin-top: 4px; }
  /* 6 个卡里挑前 4 个突出，其余也要能看 */
  .stat.accent { box-shadow: 0 0 0 1px rgba(56, 189, 248, .18); }

  /* ---------- 卡片：更薄更圆 ---------- */
  .card {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 12px;
  }
  .card > h3, .card-head h3 { font-size: 13.5px; }
  .card-head { margin-bottom: 12px; gap: 8px; }
  .card-note { font-size: 12px; margin-bottom: 12px; }

  /* ---------- 表格：横向滚动 + 首列吸附 ---------- */
  .table-wrap {
    margin: 0 -14px;
    padding: 0 14px;
    /* 提示可横滑 */
    -webkit-overflow-scrolling: touch;
  }
  table { font-size: 12px; min-width: 520px; }
  thead th { padding: 8px 8px; font-size: 10.5px; }
  tbody td { padding: 10px 8px; }
  /* 第一列（名称）固定在左边，横滑时不丢上下文 */
  thead th:first-child, tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg-1);
    z-index: 2;
    box-shadow: 1px 0 0 var(--line);
  }
  tbody tr:hover td:first-child { background: var(--bg-2); }

  /* ---------- 卡片列表（密钥/渠道/子账号）---------- */
  .card-list { gap: 10px; }
  .item-card {
    padding: 14px;
    border-radius: 14px;
  }
  .ic-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
  }
  .ic-title { gap: 7px; }
  .ic-title h4 { font-size: 14px; }
  .ic-sub { font-size: 11px; }

  /* 操作按钮：网格排列，每个都够大 */
  .ic-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    width: 100%;
  }
  .ic-actions .btn {
    min-height: 44px;
    font-size: 12.5px;
    padding: 0 6px;
  }
  /* 危险操作独占一行，避免误触 */
  .ic-actions .btn.danger {
    grid-column: 1 / -1;
    min-height: 42px;
  }

  .ic-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px 12px;
    padding-top: 11px;
  }
  .ic-grid dt { font-size: 10px; }
  .ic-grid dd { font-size: 12.5px; }

  /* ---------- 筛选栏：单列堆叠 ---------- */
  .filter-bar { gap: 9px; }
  .filter-item { flex: 1 1 100%; }
  .filter-item input, .filter-item select {
    min-width: 0;
    width: 100%;
    min-height: 42px;
    font-size: 14px;
  }
  /* 日期两个并排省空间 */
  .filter-item.half { flex: 1 1 calc(50% - 5px); }
  .filter-btns {
    margin-left: 0;
    width: 100%;
    gap: 8px;
  }
  .filter-btns .btn { flex: 1; min-height: 42px; }
  .chk { min-height: 42px; padding: 0; }

  /* ---------- 图表：14 根柱子在窄屏太挤，只留 7 天 ---------- */
  .chart { height: 132px; gap: 3px; }
  .chart .bar-label { font-size: 8px; }
  .chart .tip { font-size: 10px; padding: 4px 7px; }
  .chart-legend { gap: 12px; font-size: 11px; padding-top: 8px; }

  /* ---------- 表单元素统一 42px ---------- */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], select, textarea {
    min-height: 42px;
    font-size: 16px;  /* iOS 上 <16px 会触发自动放大，必须 16 */
    padding: 10px 12px;
  }
  .btn { min-height: 44px; font-size: 13.5px; }
  .btn.sm { min-height: 44px; font-size: 12.5px; }
  .btn.icon { width: 44px; height: 44px; min-height: 44px; }
  .btn-row .btn { flex: 1; }
  .row-inline { gap: 8px; }
  .row-inline > input { flex: 1 1 100%; }
  .row-inline > .btn { flex: 1; }

  /* ---------- 动态密匙 ---------- */
  .otp-step { gap: 11px; padding: 14px 0; }
  .otp-step-num { width: 24px; height: 24px; font-size: 11px; }
  .otp-step-title { font-size: 13px; }
  .otp-step-desc { font-size: 12px; }
  .otp-code-value { font-size: 30px; letter-spacing: .2em; }
  .otp-verify-row input { max-width: none; flex: 1 1 100%; }
  .otp-verify-row .btn { flex: 1; }
  .otp-key-row { padding: 12px; }

  /* ---------- 设置页 ---------- */
  .switch-row { gap: 12px; padding: 13px 0; }
  .sw-label { font-size: 13px; }
  .sw-sub { font-size: 11.5px; }
  .switch .track { width: 46px; height: 27px; }
  .switch .track::after { width: 21px; height: 21px; }
  .switch input:checked + .track::after { transform: translateX(19px); }
  .item-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .item-grid dd { font-size: 12.5px; }
  .bind-current { flex-direction: column; align-items: stretch; gap: 10px; }
  .bind-current .btn { width: 100%; }
  .backup-row { flex-wrap: wrap; gap: 5px; padding: 10px 12px; }
  .backup-row .b-name { flex: 1 1 100%; }
  .health-row { padding: 10px 12px; gap: 9px; }
  .health-body b { font-size: 12.5px; }
  .health-body span { font-size: 11.5px; }
  .totp-setup-grid { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .qr-box { width: 156px; height: 156px; }
  .backup-codes { grid-template-columns: 1fr 1fr; }

  /* ---------- 价格配置弹窗 ---------- */
  .pe-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pe-grid input { min-height: 40px; }

  /* ---------- 文档页 ---------- */
  .doc-kv > div { grid-template-columns: 1fr; gap: 3px; }
  .doc-kv dd { min-width: 0; overflow-wrap: anywhere; }
  .code-block pre { font-size: 11px; padding: 12px; }
  .copy-btn { opacity: 1; }  /* 手机没有 hover，按钮常显 */

  /* ---------- 弹窗：底部抽屉式，更易操作 ---------- */
  .modal {
    padding: 0;
    align-items: flex-end;
  }
  .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    animation: sheetUp 240ms var(--ease);
  }
  @keyframes sheetUp {
    from { transform: translateY(24px); opacity: .6; }
    to { transform: none; opacity: 1; }
  }
  .modal-head {
    padding: 14px 16px;
    position: relative;
  }
  /* 顶部拖拽指示条 */
  .modal-head::before {
    content: "";
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .16);
  }
  .modal-head h3 { font-size: 15px; margin-top: 4px; }
  .modal-body { padding: 16px; padding-bottom: 18px; }
  .modal-foot {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  .modal-foot .btn { flex: 1; min-height: 44px; }

  /* ---------- Toast 上移，不被 Tab Bar 挡住 ---------- */
  .toast {
    bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 28px);
    text-align: center;
    font-size: 13px;
  }

  /* ---------- 底部 Tab Bar ---------- */
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(9, 14, 25, .94);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-top: 1px solid var(--line-2);
    z-index: 60;
  }
  .tab-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 550;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 140ms var(--ease);
  }
  .tab-item .tab-ico {
    font-size: 19px;
    line-height: 1;
    opacity: .75;
    transition: transform 160ms var(--ease), opacity 140ms;
  }
  .tab-item .tab-txt { letter-spacing: .02em; }
  .tab-item:active .tab-ico { transform: scale(.9); }
  .tab-item.active { color: var(--accent); }
  .tab-item.active .tab-ico { opacity: 1; transform: translateY(-1px); }
  /* 激活指示：顶部一条小横线 */
  .tab-item.active::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 2.5px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--cyan), var(--indigo));
    box-shadow: 0 0 10px rgba(56, 189, 248, .7);
  }

  /* ---------- 更多抽屉 ---------- */
  .drawer-mask {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(3, 6, 12, .6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 70;
    animation: fadeIn 180ms var(--ease);
  }
  .drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 82vh;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--line-2);
    background: var(--bg-2);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .5);
    z-index: 80;
    animation: drawerUp 260ms var(--ease);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @keyframes drawerUp {
    from { transform: translateY(100%); }
    to { transform: none; }
  }
  .drawer-mask.hidden, .drawer.hidden { display: none !important; }

  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 13px;
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .drawer-head::before {
    content: "";
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .16);
  }
  .dh-user { display: flex; align-items: center; gap: 11px; min-width: 0; margin-top: 4px; }
  .dh-user .avatar { width: 36px; height: 36px; border-radius: 11px; font-size: 14px; }
  .dh-user > div { display: grid; gap: 1px; min-width: 0; }
  .dh-user b {
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dh-user span { font-size: 11px; color: var(--muted); }

  .drawer-body {
    overflow-y: auto;
    padding: 8px 10px;
    -webkit-overflow-scrolling: touch;
  }
  .drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 12px;
    min-height: 58px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms var(--ease);
  }
  .drawer-item:active { background: rgba(255, 255, 255, .07); }
  .drawer-item.active {
    background: linear-gradient(100deg, rgba(56, 189, 248, .14), rgba(129, 140, 248, .08));
  }
  .di-ico {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 11px;
    font-size: 16px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(56, 189, 248, .18);
  }
  .di-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .di-body b { font-size: 13.5px; font-weight: 600; }
  .di-body em { font-style: normal; font-size: 11.5px; color: var(--muted); }
  .di-arrow { flex: none; color: var(--muted-2); font-size: 17px; }

  .drawer-foot {
    padding: 10px 16px 14px;
    border-top: 1px solid var(--line);
  }
  .drawer-foot .btn { min-height: 44px; }

  /* ---------- 登录页：首屏就要能点登录 ---------- */
  .login-wrap {
    padding: 14px;
    align-items: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .login-shell {
    grid-template-columns: 1fr;
    margin: auto 0;
    border-radius: 18px;
  }
  .login-aside {
    padding: 22px 20px 18px;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .la-brand h1 { font-size: 19px; }
  .la-brand p { font-size: 10.5px; }
  .la-title { font-size: 20px; margin-top: 2px; line-height: 1.25; }
  /* 手机上营销列表太长，收成一行小字 */
  .la-list { display: none; }
  .la-desc {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    /* 只留一行半，超出省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .la-foot { padding-top: 4px; }
  .pill { font-size: 10.5px; padding: 4px 9px; }
  .ver { font-size: 10.5px; }

  .login-main {
    padding: 20px 20px 24px;
    align-items: stretch;
  }
  .login-card { max-width: none; width: 100%; }
  .lc-head { margin-bottom: 16px; }
  .lc-head h2 { font-size: 19px; }
  .lc-head p { font-size: 12.5px; }

  .seg { margin-bottom: 16px; }
  .seg-btn {
    padding: 10px 10px;
    font-size: 13.5px;
    min-height: 42px;
  }
  .form { gap: 13px; }
  .field > label { font-size: 12px; }
  .field-hint { font-size: 11px; }
  /* 眼睛按钮放大到能点 */
  .input-wrap .eye,
  .input-wrap .send-code {
    min-width: 48px;
    min-height: 38px;
    font-size: 12px;
    right: 4px;
  }
  .input-wrap input { min-height: 46px; font-size: 16px; }
  .code-input { font-size: 22px !important; letter-spacing: .28em; }
  .btn.lg { min-height: 48px; font-size: 15px; }
  .pw-meter { height: 12px; }

  /* 隐藏装饰光球：手机上很吃性能，且看不到效果 */
  .orb { display: none; }
}

/* 更窄的机型（<360px）再收一档 */
@media (max-width: 360px) {
  .stat b { font-size: 19px; }
  .stat-grid { gap: 8px; }
  .ic-actions { grid-template-columns: 1fr 1fr; }
  .tab-item { font-size: 9.5px; }
  .tab-item .tab-ico { font-size: 17px; }
  .otp-code-value { font-size: 26px; }
}

/* 横屏手机：底部 Tab Bar 会挤压内容，隐藏它改用顶部条 */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 480px) {
  .tabbar { display: none; }
  .app { padding-bottom: 0; }
  .nav { display: flex; flex-direction: row; }
  .sidebar { overflow-x: auto; }
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* ==========================================================================
   账号安全（设置页：改登录邮箱 / 改密码）
   ========================================================================== */
.acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.acct-block {
  padding: 14px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel-3);
}
.acct-block-head {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .02em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.acct-block-head::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
}
.acct-block label {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
.acct-block label input {
  display: block;
  width: 100%;
  margin-top: 5px;
}
.acct-block .btn-row { padding-top: 4px; }
.acct-block .field-hint { margin-top: 8px; word-break: break-all; }
#account-card .item-grid dd { font-family: var(--mono, ui-monospace, monospace); }
@media (max-width: 560px) {
  .acct-grid { grid-template-columns: 1fr; gap: 11px; }
  .acct-block { padding: 12px 13px; }
}


/* ===== 备份设置区（开关 + 间隔 + 保留 + 删除） ===== */
.backup-config {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 6px 0 14px;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--line);
  transition: opacity .18s ease;
}
.backup-config.is-off { opacity: .45; }
.backup-config-item { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.backup-config-item input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.backup-config-item--check { align-content: center; }
.backup-config-item--check .muted { font-size: 12px; }
.backup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 4px 0 10px;
  font-size: 12px;
  color: var(--muted);
}
.backup-meta b { color: var(--text-2); font-variant-numeric: tabular-nums; }
.backup-row .b-del { flex: none; padding: 3px 9px; font-size: 11.5px; }

/* ==========================================================================
   布局与可交互元素修复（v3.4.1）
   逐条对应实际反馈的现象，改动都带原因注释，方便回滚时判断该不该留。
   ========================================================================== */

/* 【1】grid 项默认 min-width:auto 会被长内容顶破，导致输入框溢出/被"撑大"。
       login-shell 的两个子项、以及所有 .card 内容区统一给 0。 */
.login-shell > *,
.login-aside,
.login-main,
.acct-block,
.backup-config,
.filter-item,
.field { min-width: 0; }

/* login-shell 之前有两条 display 声明（grid 与 flex 各一），后者生效会破坏两栏布局。
   这里显式固定为 grid，避免样式表顺序变化时布局突然塌。 */
.login-shell { display: grid; }

/* 【2】iOS Safari：输入框字号 <16px 时聚焦会自动放大整页。
       基样式是 13.5px，移动端虽然给了 16px 但被 .filter-item 等更具体选择器盖掉。
       用 !important 统一兜住所有输入类元素，允许 iOS 缩放由 viewport 控制。 */
input, select, textarea { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="search"],
  input[type="tel"], input[type="url"], select, textarea {
    font-size: 16px !important;
    line-height: 1.35;
    min-height: 42px;
  }
  /* 密码框放大字号后 letter-spacing 会显得松散，收一点 */
  input[type="password"] { letter-spacing: .06em; }

  /* 【3】.chk 原为 inline-flex + min-height:42px，flex 子项默认 stretch，
         checkbox 会被拉到 42px 高显得巨大。锁定尺寸 + 固定基线。 */
  .chk {
    min-height: 42px;
    padding: 0 2px;
    align-items: center;
  }
  .chk > input[type="checkbox"],
  .chk > input[type="radio"] {
    flex: 0 0 auto;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    accent-color: var(--accent);
  }
  /* 裸 checkbox（不在 .chk 里）也统一，避免某处漏样式变成大方块 */
  input[type="checkbox"]:not(.chk > input),
  input[type="radio"]:not(.chk > input) {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    accent-color: var(--accent);
  }

  /* 【4】开关：轨道 46x27，滑块 21px，可移动距离 = 46 - 21 - 2*2 = 21px。
         原值 19px 会让滑块差 2px 不到位（视觉上"没推到底"）。 */
  .switch .track { width: 46px; height: 27px; }
  .switch .track::after { width: 21px; height: 21px; top: 2px; left: 2px; }
  .switch input:checked + .track::after { transform: translateX(21px); }

  /* 【5】日期输入在窄屏容易撑破：给个收敛的宽度 */
  .filter-item input[type="date"] { min-width: 0; width: 100%; }
  .filter-item select { min-width: 0; width: 100%; }

  /* 表单标签与输入框间距，避免字号变大后贴太紧 */
  .field > label { margin-bottom: 6px; display: block; line-height: 1.4; }
  .field-err, .field-hint { font-size: 11.5px; line-height: 1.5; }
}

/* 【6】超窄屏（<360）里 .stat b 19px + 长数字容易换行挤压，给最小宽度保护 */
@media (max-width: 360px) {
  .stat b { font-size: 18px; word-break: break-all; }
}

/* 【7】桌面端：确保 input 不会被父级 flex/grid 拉成超宽或超窄 */
.field input, .field select, .field textarea { width: 100%; }

/* 【8】折叠卡片（设置页）
       .card-collapsible：整卡可折叠，header 右侧加箭头指示 */
.card-collapsible > .card-head,
.card-collapsible > h3:first-child { cursor: pointer; user-select: none; }

.card-fold-btn {
  flex: none;
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s var(--ease), background var(--fast), color var(--fast);
}
.card-fold-btn:hover { background: rgba(255, 255, 255, .07); color: var(--text-2); }
.card-collapsible.is-folded .card-fold-btn { transform: rotate(-90deg); }

/* 折叠后整体收起，只留标题栏 */
.card-collapsible.is-folded > *:not(.card-head):not(h3) { display: none !important; }
.card-collapsible.is-folded { padding-bottom: 14px; }

/* 折叠状态下的标题栏补一点内边距，视觉上更饱满 */
.card-collapsible.is-folded > .card-head { margin-bottom: 0; }

/* ==========================================================================
   图标压字修复（v3.4.2）
   实测：.input-wrap 内的 @ / ⚿ 图标位于 left:12px ~ 22px，
   而 input 的 padding-left 被移动端 `padding: 10px 12px` 覆盖回 12px，
   文字从 12px 处开始 → 直接被图标盖住。

   这里不再和特异性博弈，直接把留白按「图标位置 + 图标宽度 + 间隙」算准，
   并用 !important 锁死，防止后续任何简写 padding 再把它冲掉。
   --in-ico-w: 图标占位宽（含 left 偏移 + 间隙）
   ========================================================================== */
:root {
  --in-ico-offset: 12px;   /* 图标 left */
  --in-ico-w: 12px;        /* 图标自身宽度（单字符） */
  --in-ico-gap: 10px;      /* 图标与文字的最小间隙 */
  --in-btn-w: 62px;        /* 右侧按钮（显示/获取）预留宽 */
}

/* 左图标留白：12 + 12 + 10 = 34px（与设计稿一致） */
.input-wrap > input,
.input-wrap input[type="text"],
.input-wrap input[type="email"],
.input-wrap input[type="password"],
.input-wrap input[type="number"] {
  padding-left: calc(var(--in-ico-offset) + var(--in-ico-w) + var(--in-ico-gap)) !important;
  padding-right: 13px;
}

/* 右侧带按钮的，右留白要够，否则文字钻到按钮底下 */
.input-wrap > input:has(+ .eye),
.input-wrap > input:has(+ .send-code),
.input-wrap input[type="password"]:has(+ .eye) {
  padding-right: calc(var(--in-btn-w) + 10px) !important;
}

/* 浏览器不支持 :has() 时（老 Safari）退回 class 兜底 */
.input-wrap.has-btn > input { padding-right: calc(var(--in-btn-w) + 10px) !important; }

/* 图标：固定盒、垂直居中、不参与点击 */
.input-wrap .in-ico {
  left: var(--in-ico-offset);
  width: var(--in-ico-w);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}

/* 右侧按钮：贴右内边距，不超出输入框 */
.input-wrap .eye,
.input-wrap .send-code {
  right: 6px;
  max-width: var(--in-btn-w);
  white-space: nowrap;
  line-height: 1.4;
}

/* 搜索框那枚 ⌕ 图标同理 */
.search-box input { padding-right: 34px !important; }
.search-box .s-ico {
  right: 11px;
  left: auto;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 移动端：字号 16 后字形更宽，图标与文字间距再放宽 2px，避免贴脸 */
@media (max-width: 768px) {
  :root { --in-ico-gap: 12px; }
  .input-wrap .in-ico { font-size: 13px; width: 13px; }
  .input-wrap > input,
  .input-wrap input[type="text"],
  .input-wrap input[type="email"],
  .input-wrap input[type="password"],
  .input-wrap input[type="number"] {
    padding-left: calc(var(--in-ico-offset) + var(--in-ico-w) + var(--in-ico-gap)) !important;
    padding-right: 14px;
    /* 注意：这里不能再写 padding 简写，否则会把上面的左右留白冲掉 */
  }
  .input-wrap > input:has(+ .eye),
  .input-wrap > input:has(+ .send-code) {
    padding-right: calc(var(--in-btn-w) + 12px) !important;
  }
  /* 右侧按钮在移动端略微放大，保证可点 */
  .input-wrap .eye,
  .input-wrap .send-code { font-size: 12.5px; padding: 6px 9px; }
}

/* ==========================================================================
   登录区兜底（v3.4.2）
   1) 小高度屏幕上内容超一屏时允许滚动，而不是被 overflow:hidden 裁掉
   2) 密码强度条与上方输入框拉开一点，避免视觉上贴在一起
   ========================================================================== */
.login-wrap {
  overflow-x: hidden;
  overflow-y: auto;          /* 内容超屏可滚动，不再裁切 */
  -webkit-overflow-scrolling: touch;
  align-items: safe center;
}

/* 内容高于视口时从顶部开始排，避免 grid 居中把顶部顶出去 */
@media (max-height: 760px) {
  .login-wrap { align-items: flex-start; }
  .login-shell { margin: 0 auto; }
}

/* 密码强度条与输入框间距（原先紧贴，视觉上像压在一起） */
#pw-meter { margin-top: 2px; }
.pw-meter { height: 16px; }

/* 表单字段之间给稳定间距，避免 label/输入/提示三层挤在一起 */
.form { gap: 15px; }
.field { gap: 6px; }
.field > label { margin-bottom: 1px; }

/* ==========================================================================
   搜索框图标 / 代码块复制按钮 修复（v3.4.3）
   ========================================================================== */

/* ---- 1) 搜索框：右侧留白必须覆盖「图标偏移 + 图标宽 + 间隙」 ---- */
.search-box input {
  /* 10(right) + 16(图标盒) + 10(间隙) = 36 */
  padding-right: 36px !important;
  padding-left: 12px;
}
.search-box .s-ico {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;          /* 固定盒，避免字形宽度差导致位置漂 */
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  pointer-events: none;
}

/* ---- 2) 代码块：给复制按钮让出顶部空间，避免压住第一行代码 ---- */
.code-block { position: relative; }
.code-block > pre {
  /* 按钮 top 8 + 高度约 23 + 间隙 6 = 37，取 40 更稳 */
  padding-top: 40px !important;
}
/* 有 pre 在里面的才补，避免影响别的 pre */
.code-block > pre > code { display: block; }

/* 复制按钮微调：与代码区左边界对齐一点，别贴太边 */
.copy-btn {
  top: 8px;
  right: 8px;
  line-height: 1.5;
  z-index: 2;
}

@media (max-width: 768px) {
  /* 移动端搜索框字号 16（防 iOS 放大），右侧留白同步加大 */
  .search-box input {
    padding-right: 40px !important;
    min-height: 42px;
  }
  .search-box .s-ico { right: 12px; width: 18px; height: 18px; font-size: 14px; }

  /* 移动端复制按钮常显（无 hover），给它更多呼吸空间 */
  .code-block > pre { padding-top: 46px !important; }
  .copy-btn { top: 10px; right: 10px; padding: 6px 12px; font-size: 12px; }

  /* 代码块本身允许横向滚动，别让长行把布局顶破 */
  .code-block > pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   弹窗溢出修复（v3.4.4）
   问题：添加上游表单有 7 个字段（含 textarea），在手机上整卡超出屏幕，
        顶部被切掉且无法滚动。

   三条修复：
   ① .modal 改成 flex 居中 + 允许滚动，内容超高时从顶部开始排，不再顶出可视区
   ② .modal-card 用 dvh（动态视口高度，扣掉浏览器地址栏），并保留 vh 兜底
   ③ .modal-body 作为 grid 容器必须 min-height:0，否则不收缩，overflow 失效
   ========================================================================== */

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 弹窗自身超高时兜底滚动，不至于无法触达 */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
}

.modal-card {
  /* dvh 扣掉移动端地址栏；老浏览器退回 vh */
  max-height: 88vh;
  max-height: 88dvh;
  /* 关键：flex 子项默认 min-height:auto 会被内容撑开 */
  min-height: 0;
  margin: auto;
}

/* grid 子项必须能收缩，不然 overflow-y:auto 不生效 */
.modal-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 表单里的 textarea 不要撑太高 */
.modal-body textarea {
  min-height: 84px;
  max-height: 160px;
  resize: vertical;
}

/* 窄屏 / 矮屏：底部抽屉式，顶部圆角，内容区独立滚动 */
@media (max-width: 768px) {
  .modal {
    align-items: flex-end;
    padding: 0;
  }
  .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
  }
  .modal-body {
    /* 底部抽屉时给足滚动空间，footer 固定可见 */
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* 矮屏（横屏手机 / 小屏）：进一步压缩，保证按钮始终可点 */
@media (max-height: 640px) {
  .modal-card {
    max-height: 96vh;
    max-height: 96dvh;
  }
  .modal-head { padding: 11px 16px; }
  .modal-body { padding: 12px 16px; gap: 10px; }
  .modal-foot { padding: 10px 16px; }
}

/* ==========================================================================
   卡片操作按钮溢出修复（v3.4.5）
   现象（手机端「上游渠道」）：测活 / 拉模型 / 编辑 三个按钮被挤出屏幕右侧，
        删除按钮整条飞出卡片。

   根因：
   ① .ic-actions 在移动端用 grid-template-columns: repeat(3, 1fr)。
      1fr 的 min 是 auto，按钮文字有最小宽度 → 三列总宽超过容器，横向溢出。
      必须写成 minmax(0, 1fr) 才允许压缩。
   ② .ic-head 是 flex 行，.ic-title 和 .ic-actions 挤在一行；
      按钮组 width:100% 后与标题抢空间，把整行撑破。
   ③ 卡片本身没有 overflow 约束，溢出直接穿透到页面。
   ========================================================================== */

/* 卡片兜底：任何内容都不许横向溢出 */
.item-card {
  overflow: hidden;
  min-width: 0;
}

.ic-head {
  min-width: 0;
  flex-wrap: wrap;   /* 窄屏时按钮组自动换到标题下面 */
}

.ic-title {
  min-width: 0;
  flex: 1 1 auto;
}

.ic-actions {
  min-width: 0;
}

@media (max-width: 768px) {
  /* 关键：minmax(0,1fr) 才能压缩，1fr 会被内容撑破 */
  .ic-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    flex: 1 1 100%;    /* 独占一行，不和标题抢宽度 */
  }
  .ic-actions .btn {
    min-height: 44px;
    font-size: 12.5px;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  /* 危险操作独占整行 */
  .ic-actions .btn.danger {
    grid-column: 1 / -1;
    min-height: 42px;
  }
}

/* 超窄屏（<380）：改成两列，保证按钮文字不被压扁 */
@media (max-width: 380px) {
  .ic-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 密钥 / 提示词 / 角色卡等其他卡的 ic-actions 同样兜底 */
.item-card .ic-actions .btn {
  min-width: 0;
  max-width: 100%;
}

/* ==========================================================================
   卡片操作按钮布局重排（v3.4.6）
   之前：repeat(3, 1fr) 让 4 个普通按钮排成 3+1，删除再单独一行，视觉破碎。
   现在：普通按钮 2 列 x 2 行（窄屏）/ 4 列一行（宽屏），删除独占整行。
   ========================================================================== */

@media (max-width: 768px) {
  .ic-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  /* 删除按钮：独占整行，明显区分 */
  .ic-actions .btn.danger {
    grid-column: 1 / -1;
    margin-top: 2px;
  }
}

/* 稍微宽一点的手机/平板：4 个普通按钮排一行更紧凑 */
@media (min-width: 420px) and (max-width: 768px) {
  .ic-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}/* ============ 告警页补充样式 ============
   项目已有 .item-card / .ic-head / .ic-actions / .ic-grid / .badge / .field
   等基础类，这里只补告警页专有的两处：
   1. 停用规则整卡降透明度（复用 .dim，安全起见显式声明）
   2. badge 的 ok 态绿字（若已有则自动覆盖，无副作用）
*/
#page-alerts .item-card.dim {
  opacity: .58;
}
#page-alerts .item-card.dim:hover {
  opacity: .82;
}
#page-alerts .badge.ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
#page-alerts .ic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px;
  margin-top: 12px;
}
#page-alerts .ic-grid dt {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}
#page-alerts .ic-grid dd {
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
}
#al-smtp-hint {
  font-size: 12.5px;
  line-height: 1.7;
}
@media (max-width: 560px) {
  #page-alerts .ic-grid {
    grid-template-columns: 1fr 1fr;
  }
}