:root {
    --bg: #05070d;
    --panel: rgba(10, 15, 25, 0.7);
    --panel-solid: #0a0f19;
    --border: rgba(148, 163, 184, 0.12);
    --border-soft: rgba(148, 163, 184, 0.06);
    --text: #e2e8f0;
    --text-dim: #94a3b8;
    --text-mute: #64748b;
    --text-faint: #475569;
    --accent: #38bdf8;
    --green: #34d399;
    --amber: #fbbf24;
    --red: #f87171;
    --purple: #c084fc;
    /* 表面色（随主题切换） */
    --input-bg: rgba(7, 11, 20, 0.6);
    --topbar-bg: rgba(7, 11, 20, 0.85);
    --gate-bg: rgba(10, 15, 25, 0.92);
    --hover-row: rgba(56, 189, 248, 0.04);
    --glow: rgba(56, 189, 248, 0.16);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }

  /* ===== 白天主题 ===== */
  [data-theme="light"] {
    --bg: #f4f6fb;
    --panel: rgba(255, 255, 255, 0.82);
    --panel-solid: #ffffff;
    --border: rgba(15, 23, 42, 0.1);
    --border-soft: rgba(15, 23, 42, 0.05);
    --text: #0f172a;
    --text-dim: #475569;
    --text-mute: #64748b;
    --text-faint: #94a3b8;
    --accent: #0284c7;
    --green: #059669;
    --amber: #d97706;
    --red: #dc2626;
    --purple: #9333ea;
    --input-bg: rgba(15, 23, 42, 0.03);
    --topbar-bg: rgba(255, 255, 255, 0.88);
    --gate-bg: rgba(255, 255, 255, 0.95);
    --hover-row: rgba(2, 132, 199, 0.05);
    --glow: rgba(2, 132, 199, 0.1);
    --shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
    color-scheme: light;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  /* 横屏/大字号设置下不让 iOS 自动放大文字 */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  body::before {
    content: "";
    position: fixed;
    top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 300px;
    background: radial-gradient(circle, var(--glow), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
  }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  input { font-family: inherit; }
  .hidden { display: none !important; }

  /* ===== 登录门禁 ===== */
  #gate {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; position: relative; z-index: 1;
  }
  .gate-card {
    width: 100%; max-width: 380px;
    background: var(--gate-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    animation: rise 0.3s ease;
  }
  @keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
  .gate-head {
    display: flex; align-items: center; gap: 8px;
    padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
    font-size: 14px; font-weight: 600;
  }
  .gate-head svg { width: 16px; height: 16px; color: var(--accent); }
  .gate-body { padding: 28px 24px; text-align: center; }
  .gate-icon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.25);
  }
  .gate-icon svg { width: 24px; height: 24px; color: var(--accent); }
  .gate-body h1 { font-size: 14px; font-weight: 600; }
  .gate-body p.sub { font-size: 11px; color: var(--text-mute); margin-top: 5px; }
  .gate-body input {
    width: 100%; margin-top: 20px;
    padding: 11px 14px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text); font-size: 13px;
    outline: none; transition: border-color 0.2s;
  }
  .gate-body input:focus { border-color: rgba(56,189,248,0.4); }
  .gate-body .btn-primary { margin-top: 14px; width: 100%; }
  .gate-err { color: var(--red); font-size: 11px; margin-top: 12px; min-height: 14px; }
  .shake { animation: shake 0.3s ease; }
  @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

  /* ===== 主界面 ===== */
  #app { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
    border-bottom: 1px solid var(--border-soft);
    background: var(--topbar-bg);
    backdrop-filter: blur(20px);
    position: sticky; top: 0; z-index: 10;
  }
  .topbar .left { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .logo-badge {
    width: 34px; height: 34px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.25);
    flex-shrink: 0;
  }
  .logo-badge svg { width: 16px; height: 16px; color: var(--accent); }
  .topbar h1 { font-size: 13px; font-weight: 700; line-height: 1.2; }
  .topbar .date { font-size: 9.5px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .actions { display: flex; gap: 4px; flex-shrink: 0; }
  .icon-btn {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-mute); transition: all 0.15s;
  }
  .icon-btn:hover { color: var(--text); background: rgba(148,163,184,0.08); }
  .icon-btn.refresh:hover { color: var(--accent); background: rgba(56,189,248,0.1); }
  .icon-btn.logout:hover { color: var(--red); background: rgba(248,113,113,0.1); }
  .icon-btn svg { width: 16px; height: 16px; }
  .spin { animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Tabs */
  .tabs {
    display: flex; gap: 5px; padding: 14px 16px 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 9px;
    font-size: 11.5px; font-weight: 500;
    color: var(--text-mute); white-space: nowrap;
    transition: all 0.15s; flex-shrink: 0;
  }
  .tab:hover { color: var(--text); background: rgba(148,163,184,0.06); }
  .tab.active { color: var(--accent); background: rgba(56,189,248,0.12); }
  .tab svg { width: 14px; height: 14px; }
  .tab .badge {
    padding: 1px 6px; border-radius: 4px;
    font-size: 9px; line-height: 1.4;
    background: rgba(148,163,184,0.15); color: var(--text-dim);
  }
  .tab.active .badge { background: rgba(56,189,248,0.2); color: var(--accent); }

  /* Content */
  .content { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
  .card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
  }
  .card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; }
  .card-title svg { width: 14px; height: 14px; color: var(--accent); }
  .card-title .meta { margin-left: auto; font-size: 9.5px; color: var(--text-mute); font-weight: 400; }

  /* Stats grid */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  @media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
  .stat {
    position: relative; overflow: hidden;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 16px; padding: 16px;
    animation: rise 0.35s ease both;
  }
  .stat .glow { position: absolute; top: -24px; right: -24px; width: 80px; height: 80px; border-radius: 50%; filter: blur(20px); opacity: 0.15; pointer-events: none; }
  .stat .row { display: flex; align-items: center; justify-content: space-between; position: relative; }
  .stat .label { font-size: 10px; color: var(--text-dim); }
  .stat svg { width: 14px; height: 14px; }
  .stat .value { position: relative; margin-top: 8px; font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

  /* Tier bars */
  .tier-row { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
  .tier-row:last-child { margin-bottom: 0; }
  .tier-name { width: 64px; flex-shrink: 0; font-size: 10px; font-weight: 500; }
  .tier-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(148,163,184,0.12); overflow: hidden; }
  .tier-fill { height: 100%; border-radius: 3px; width: 0; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
  .tier-count { width: 72px; flex-shrink: 0; text-align: right; font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

  /* Recent users */
  .user-mini { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
  .user-mini + .user-mini { border-top: 1px solid var(--border-soft); }
  .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
  }
  .user-mini .info { flex: 1; min-width: 0; }
  .user-mini .name { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-mini .time { font-size: 9px; color: var(--text-mute); }
  .pill { padding: 2px 8px; border-radius: 6px; font-size: 9px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }

  /* Tables */
  .table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); }
  table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 560px; }
  thead th {
    text-align: left; padding: 11px 14px;
    font-size: 9.5px; font-weight: 500; color: var(--text-mute);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr { transition: background 0.15s; }
  tbody tr:hover { background: var(--hover-row); }
  .cell-user { display: flex; align-items: center; gap: 10px; }
  .cell-user .avatar { width: 28px; height: 28px; font-size: 11px; }
  .cell-user .u-name { font-weight: 500; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cell-user .u-email { font-size: 9px; color: var(--text-mute); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .usage-icons { display: flex; gap: 9px; color: var(--text-dim); font-size: 9.5px; white-space: nowrap; align-items: center; }
  .usage-icons span { display: inline-flex; align-items: center; gap: 3px; }
  .usage-icons svg { width: 11px; height: 11px; }
  .num { font-variant-numeric: tabular-nums; }
  .empty { padding: 44px 0; text-align: center; color: var(--text-mute); font-size: 11px; }
  .empty svg { width: 26px; height: 26px; color: var(--text-faint); margin: 0 auto 8px; display: block; }

  /* Toolbar */
  .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .search-box { position: relative; flex: 1; min-width: 180px; }
  .search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-faint); }
  .search-box input {
    width: 100%; padding: 10px 12px 10px 34px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 10px; color: var(--text); font-size: 12px; outline: none;
    transition: border-color 0.2s;
  }
  .search-box input:focus { border-color: rgba(56,189,248,0.4); }
  .filter-btn {
    padding: 7px 12px; border-radius: 9px; font-size: 10px; font-weight: 500;
    color: var(--text-mute); background: rgba(148,163,184,0.06); transition: all 0.15s; white-space: nowrap;
  }
  .filter-btn:hover { color: var(--text); }
  .filter-btn.active { color: var(--accent); background: rgba(56,189,248,0.12); }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; border-radius: 10px;
    font-size: 12px; font-weight: 600;
    color: var(--accent);
    background: rgba(56,189,248,0.15);
    border: 1px solid rgba(56,189,248,0.25);
    transition: all 0.15s;
  }
  .btn-primary:hover { background: rgba(56,189,248,0.22); }
  .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-green {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border-radius: 8px;
    font-size: 9.5px; font-weight: 600; white-space: nowrap;
    color: var(--green); background: rgba(52,211,153,0.1);
    border: 1px solid rgba(52,211,153,0.22); transition: all 0.15s;
  }
  .btn-green:hover { background: rgba(52,211,153,0.16); }
  .btn-green.big { padding: 8px 13px; font-size: 10px; }
  .count-label { font-size: 10px; color: var(--text-mute); margin-left: auto; white-space: nowrap; }

  /* Toast */
  #toast {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    padding: 9px 18px; border-radius: 10px;
    font-size: 11px; font-weight: 500;
    z-index: 100; opacity: 0; pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  #toast.ok { color: var(--green); background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.25); }
  #toast.err { color: var(--red); background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.25); }

  .footer-note { text-align: center; font-size: 9px; color: var(--text-faint); padding: 4px 0 12px; }

  /* Loading overlay */
  #loading {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,7,13,0.5); backdrop-filter: blur(2px);
  }
  #loading .ring {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid rgba(56,189,248,0.2);
    border-top-color: var(--accent);
    animation: spin 0.7s linear infinite;
  }

  /* 模型设置 */
  .cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 760px) { .cfg-grid { grid-template-columns: 1fr; } }
  .cfg-card { border: 1px solid var(--border); background: var(--panel); border-radius: 16px; padding: 16px; }
  .cfg-card h3 { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
  .cfg-card .cfg-desc { font-size: 10px; color: var(--text-mute); margin-bottom: 12px; line-height: 1.6; }
  .cfg-field { margin-bottom: 10px; }
  .cfg-field label { display: block; font-size: 10px; color: var(--text-mute); margin-bottom: 4px; }
  .cfg-field input {
    width: 100%; padding: 9px 12px; background: rgba(148,163,184,0.06);
    border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); font-size: 12px; outline: none; transition: border-color 0.2s;
  }
  .cfg-field input:focus { border-color: rgba(56,189,248,0.4); }
  .cfg-field input::placeholder { color: var(--text-faint); }
  .cfg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cfg-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
  .cfg-active { font-size: 9px; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
  .cfg-active.on { color: var(--green); background: rgba(52,211,153,0.12); }
  .cfg-active.off { color: var(--text-mute); background: rgba(148,163,184,0.1); }
  .btn-ghost {
    padding: 10px 14px; border-radius: 10px; font-size: 11px; font-weight: 500;
    color: var(--text-mute); background: rgba(148,163,184,0.08);
    border: 1px solid var(--border); transition: all 0.15s;
  }
  .btn-ghost:hover { color: var(--text); }
  .showkey { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-mute); cursor: pointer; }
  .showkey input { width: auto; accent-color: #38bdf8; }

  /* 填写记录 */
  .hist-block { margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 10px; }
  .hist-title { font-size: 10px; font-weight: 600; color: var(--text-mute); margin-bottom: 8px; letter-spacing: 0.3px; }
  .hist-item {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 9px; margin-bottom: 5px;
    border: 1px solid var(--border); border-radius: 9px;
    background: rgba(148,163,184,0.04);
    transition: border-color 0.15s, background 0.15s;
  }
  .hist-item:hover { border-color: rgba(56,189,248,0.35); background: rgba(56,189,248,0.06); }
  .hist-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
  .hist-provider { font-size: 11px; font-weight: 600; color: var(--text); }
  .hist-model { font-size: 9.5px; color: var(--accent); }
  .hist-base { font-size: 9px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hist-time { font-size: 9px; color: var(--text-faint); }
  .hist-del {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px;
    font-size: 10px; line-height: 1; color: var(--text-mute);
    background: rgba(148,163,184,0.08); border: 1px solid var(--border);
    transition: all 0.15s;
  }
  .hist-del:hover { color: #f87171; border-color: rgba(248,113,113,0.3); }
  .hist-empty { font-size: 9.5px; color: var(--text-faint); padding: 6px 0; }

  /* 卡密管理 */
  .card-stats-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 8px; font-size: 10px;
    color: var(--text-mute); background: rgba(148,163,184,0.08); border: 1px solid var(--border);
  }
  .chip b { color: var(--text); font-weight: 700; }
  .chip.big { font-size: 11px; padding: 7px 13px; }
  .chip.big.green, .chip.green { color: var(--green); border-color: rgba(52,211,153,0.25); background: rgba(52,211,153,0.08); }
  .chip.green b { color: var(--green); }
  .chips-tier { display: flex; gap: 6px; flex-wrap: wrap; }
  .cfg-select {
    padding: 9px 12px; background: rgba(148,163,184,0.06);
    border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); font-size: 12px; outline: none; width: 100%;
  }
  .cfg-select:focus { border-color: rgba(56,189,248,0.4); }
  .cfg-textarea {
    width: 100%; padding: 10px 12px; background: rgba(148,163,184,0.06);
    border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); font-size: 12px; outline: none; resize: vertical;
    font-family: ui-monospace, monospace; line-height: 1.7;
  }
  .cfg-textarea:focus { border-color: rgba(56,189,248,0.4); }
  .tier-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
  .tier-name { font-size: 12px; font-weight: 600; color: var(--text); min-width: 70px; }
  .tier-points {
    width: 90px; padding: 7px 10px; background: rgba(148,163,184,0.06);
    border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 12px; outline: none;
  }
  .tier-unit { font-size: 10px; color: var(--text-mute); flex: 1; }
  .card-code { font-family: ui-monospace, monospace; font-size: 11px; color: var(--accent); letter-spacing: 0.5px; }

  /* 数据卡 */
  .stat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  @media (max-width: 760px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
  .stat-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
    padding: 13px 15px;
  }
  .stat-card .stat-num { font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.2; }
  .stat-card .stat-label { font-size: 10px; color: var(--text-mute); margin-top: 3px; }
  .stat-card.green .stat-num { color: var(--green); }
  .stat-card.dim .stat-num { color: var(--text-mute); }
  .stat-card.blue .stat-num { color: #38bdf8; }
  .stat-card.purple .stat-num { color: #c084fc; }

  /* 档位分组折叠 */
  .group-card {
    border: 1px solid var(--border); border-radius: 14px; background: var(--panel);
    margin-bottom: 10px; overflow: hidden; transition: border-color 0.15s;
  }
  .group-card:hover { border-color: rgba(56,189,248,0.28); }
  .group-card.open { border-color: rgba(56,189,248,0.35); }
  .group-header {
    display: flex; align-items: center; gap: 9px; padding: 12px 14px;
    cursor: pointer; user-select: none; transition: background 0.15s;
  }
  .group-header:hover { background: rgba(56,189,248,0.05); }
  .g-arrow { color: var(--text-mute); font-size: 11px; width: 12px; flex-shrink: 0; }
  .group-body { border-top: 1px solid var(--border-soft); padding: 10px 14px 14px; }
  .g-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }

  /* ===== 主题切换按钮 ===== */
  .gate-theme { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; }
  .gate-theme svg { width: 15px; height: 15px; }
  [data-theme-toggle] svg { width: 16px; height: 16px; }

  /* ===== 白天主题微调 ===== */
  [data-theme="light"] .gate-card,
  [data-theme="light"] .card,
  [data-theme="light"] .cfg-card,
  [data-theme="light"] .group-card,
  [data-theme="light"] .stat,
  [data-theme="light"] .stat-card,
  [data-theme="light"] .table-wrap { box-shadow: var(--shadow); }
  [data-theme="light"] .avatar { color: #fff; }
  [data-theme="light"] .pill { font-weight: 600; }
  [data-theme="light"] .btn-primary { background: rgba(2,132,199,0.1); border-color: rgba(2,132,199,0.25); }
  [data-theme="light"] .btn-primary:hover { background: rgba(2,132,199,0.16); }
  [data-theme="light"] .tab.active { background: rgba(2,132,199,0.1); }
  [data-theme="light"] .tab.active .badge { background: rgba(2,132,199,0.15); }
  [data-theme="light"] .filter-btn.active { background: rgba(2,132,199,0.1); }
  [data-theme="light"] .group-header:hover { background: rgba(2,132,199,0.04); }
  [data-theme="light"] .group-card:hover { border-color: rgba(2,132,199,0.3); }
  [data-theme="light"] .group-card.open { border-color: rgba(2,132,199,0.4); }
  [data-theme="light"] .logo-badge,
  [data-theme="light"] .gate-icon { background: rgba(2,132,199,0.1); border-color: rgba(2,132,199,0.22); }
  [data-theme="light"] .chip.green { color: var(--green); background: rgba(5,150,105,0.08); border-color: rgba(5,150,105,0.2); }
  [data-theme="light"] #toast.ok { background: rgba(5,150,105,0.1); }
  [data-theme="light"] #toast.err { background: rgba(220,38,38,0.08); }

  /* ===== 代理管理 ===== */
  tr.row-open > td { background: rgba(56,189,248,0.03); }
  .agent-detail { padding: 12px 14px; background: rgba(148,163,184,0.03); }
  .agent-detail-title { font-size: 10px; font-weight: 600; color: var(--text-mute); margin-bottom: 8px; }
  .agent-detail table { min-width: 420px; }

  /* 收款二维码弹层 */
  .qr-modal-mask {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  .qr-modal {
    background: var(--panel-solid); border: 1px solid var(--border);
    border-radius: 18px; padding: 20px; max-width: 340px; width: 100%;
    text-align: center; box-shadow: var(--shadow);
    animation: rise 0.25s ease;
  }
  .qr-modal-title { font-size: 12px; font-weight: 600; margin-bottom: 14px; }
  .qr-modal img {
    width: 100%; max-height: 55vh; object-fit: contain;
    border-radius: 12px; background: #fff; padding: 8px;
  }

  /* 通用弹窗内容 */
  .app-modal-actions { display: flex; gap: 8px; margin-top: 16px; }
  .app-modal-actions button { flex: 1; justify-content: center; }
  .app-modal-field { text-align: left; }
  .app-modal-field label { display: block; font-size: 11px; color: var(--text-mute); margin-bottom: 6px; line-height: 1.5; }
  .app-modal-field input {
    width: 100%; padding: 10px 12px;
    background: var(--input-bg); border: 1px solid var(--border);
    border-radius: 10px; color: var(--text); font-size: 13px; outline: none;
  }
  .app-modal-field input:focus { border-color: rgba(56,189,248,0.4); }
  .app-modal-link {
    font-family: ui-monospace, monospace; font-size: 11.5px;
    color: var(--accent); background: var(--input-bg);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; word-break: break-all; text-align: left;
  }

  /* 用户档位/积分可点击调整 */
  .tier-btn {
    border: none; cursor: pointer; font-family: inherit;
    transition: transform 0.12s, box-shadow 0.12s;
  }
  .tier-btn:hover { transform: scale(1.06); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
  .points-btn {
    border: none; background: none; cursor: pointer; font-family: inherit;
    font-size: inherit; color: inherit; font-variant-numeric: tabular-nums;
    padding: 2px 8px; border-radius: 6px; transition: background 0.12s;
  }
  .points-btn:hover { background: rgba(56,189,248,0.12); color: var(--accent); }
  .tier-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tier-option {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 8px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--border); background: var(--input-bg);
    transition: border-color 0.12s, background 0.12s;
  }
  .tier-option:hover { border-color: rgba(56,189,248,0.4); }
  .tier-option.current { border-color: rgba(56,189,248,0.5); background: rgba(56,189,248,0.08); }

  /* ===== 手机端适配（≤640px 全面重排，2026-09-11 深度优化） =====
     思路：表格全部转成「一行一张卡」，字段名用 td::before 从 data-label 取；
     8 个标签排成 4×2 网格不用横滑；控件统一 16px 防 iOS 聚焦缩放；
     触控区放大到 ≥38px；弹窗改底部抽屉；吸顶栏 + 底部安全区。 */
  @media (max-width: 640px) {
    /* ---- 顶栏：高度固定（便于标签栏吸顶对齐），移动端去掉毛玻璃 ---- */
    .topbar {
      height: calc(env(safe-area-inset-top, 0px) + 52px);
      padding: 0 12px;
      padding-top: env(safe-area-inset-top, 0px);
      backdrop-filter: none;
      background: var(--panel-solid);
    }
    .topbar h1 { font-size: 13px; }
    .topbar .date { display: none; }
    .logo-badge { width: 32px; height: 32px; border-radius: 10px; }
    .icon-btn { width: 38px; height: 38px; border-radius: 10px; }
    .icon-btn svg { width: 17px; height: 17px; }

    /* ---- 标签栏：4×2 网格（8 个全部可见，无需横滑）+ 吸顶 ---- */
    .tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      padding: 10px 12px;
      overflow: visible;
      position: sticky;
      top: calc(env(safe-area-inset-top, 0px) + 52px);
      z-index: 9;
      background: var(--bg);
      border-bottom: 1px solid var(--border-soft);
    }
    .tab {
      position: relative;
      justify-content: center;
      gap: 5px;
      min-height: 44px;
      padding: 9px 2px;
      font-size: 10.5px;
      line-height: 1.15;
    }
    .tab svg { width: 15px; height: 15px; flex-shrink: 0; }
    .tab .badge {
      position: absolute; top: 3px; right: 3px;
      padding: 0 4px; font-size: 8px;
    }

    /* ---- 内容区 ---- */
    .content {
      padding: 12px;
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
      gap: 12px;
    }
    .card, .cfg-card { padding: 14px; border-radius: 14px; }
    .card-title { font-size: 12px; }
    body::before { width: 360px; height: 220px; filter: blur(30px); }

    /* ---- 统计卡 ---- */
    .stat-cards, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .stat-card { padding: 12px; border-radius: 12px; }
    .stat-card .stat-num { font-size: 19px; }
    .stat { padding: 13px; border-radius: 14px; }
    .stat .value { font-size: 20px; }
    .stat .label { font-size: 10.5px; }
    .stat .glow { filter: blur(14px); }

    /* ---- 工具条：搜索框独占一行且排最前；计数/下拉整宽 ---- */
    .toolbar { gap: 8px; flex-wrap: wrap; }
    .toolbar .search-box { order: -1; flex: 1 1 100%; min-width: 0; }
    .toolbar > .cfg-select { flex: 1 1 100%; max-width: 100% !important; }
    .toolbar .count-label { flex: 1 1 100%; margin-left: 0; text-align: right; font-size: 10.5px; }
    .filter-btn { min-height: 34px; padding: 8px 12px; font-size: 11px; border-radius: 10px; }
    .search-box input { padding: 11px 12px 11px 36px; }

    /* ---- 控件统一 16px：iOS Safari 聚焦时不会自动放大页面 ---- */
    .gate-body input, .cfg-field input, .cfg-select, .cfg-textarea,
    .search-box input, .app-modal-field input, .tier-points { font-size: 16px !important; }
    .cfg-row2 { grid-template-columns: 1fr; }
    .cfg-actions { gap: 10px; }
    .tier-row { gap: 6px; }
    .tier-name { min-width: 0; width: auto; font-size: 12px; }
    .tier-unit { flex-basis: 100%; order: 5; }
    .tier-points { width: 88px; }

    /* ---- 按钮触控区放大 ---- */
    .btn-primary { min-height: 42px; padding: 11px 16px; }
    .btn-ghost { min-height: 38px; padding: 9px 13px; }
    .btn-green { min-height: 34px; padding: 8px 13px; }
    .tier-btn { min-height: 34px; padding: 8px 14px; font-size: 11px; }
    .points-btn { min-height: 34px; padding: 8px 12px; }
    .hist-item { padding: 9px 10px; }
    .hist-del { width: 32px; height: 32px; font-size: 13px; border-radius: 9px; }

    /* ===== 表格 → 卡片列表 ===== */
    .table-wrap:has(> table) { border: none; background: transparent; border-radius: 0; overflow: visible; }
    table, .agent-detail table { min-width: 0; font-size: 12px; }
    thead { display: none; }
    tbody tr {
      display: block;
      padding: 12px 13px;
      margin-bottom: 10px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--panel);
    }
    tbody tr:last-child { margin-bottom: 0; }
    tbody tr:hover, tr.row-open > td { background: transparent; }
    tbody td {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 6px 0;
      border: none;
      overflow-wrap: anywhere;
    }
    tbody td::before {
      content: attr(data-label);
      flex: 0 0 76px;
      font-size: 11px;
      color: var(--text-mute);
    }
    /* 卡片标题行（用户名 / 卡密 / 邀请码 / 代理码）：无标签、整宽、带分隔线 */
    tbody td[data-lead] {
      display: block;
      padding: 0 0 10px;
      margin-bottom: 4px;
      border-bottom: 1px solid var(--border-soft);
    }
    tbody td[data-lead]::before { content: none; }
    tbody td[data-lead] .cell-user .u-name { font-size: 14px; }
    tbody td[data-lead] .card-code { font-size: 13px; }
    /* 操作行：整宽，按钮铺满好点 */
    tbody td[data-block] { display: block; padding-top: 10px; }
    tbody td[data-block]::before { content: none; }
    tbody td[data-block] .btn-ghost,
    tbody td[data-block] .btn-green { min-height: 40px; }
    /* 空状态行（colspan）：保留卡片样式并居中 */
    tbody td[colspan] { display: block; padding: 0; }
    tbody td[colspan]::before { content: none; }
    .empty { padding: 28px 0; }

    /* 代理展开的下级明细：外层不要卡片，内层小表用紧凑行 */
    tbody tr.agent-detail-row, tbody tr.agent-detail-row:last-child {
      border: none; background: transparent; padding: 0; margin: 0 0 10px;
    }
    .agent-detail {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: rgba(148,163,184,0.05);
    }
    .agent-detail tbody tr, .agent-detail tbody tr:last-child {
      border: none; background: transparent; border-radius: 0;
      padding: 9px 0; margin: 0;
      border-bottom: 1px solid var(--border-soft);
    }
    .agent-detail tbody tr:last-child { border-bottom: none; }
    .agent-detail tbody td { padding: 3px 0; font-size: 11.5px; }
    .agent-detail tbody td::before { flex: 0 0 66px; font-size: 10px; }
    .agent-detail-title { margin-top: 6px; }

    /* ---- 卡密分组头 ---- */
    .group-header { flex-wrap: wrap; padding: 12px; gap: 7px; }
    .group-header .chip { font-size: 9.5px; padding: 3px 8px; }
    .g-actions { margin-left: 0; flex-basis: 100%; }
    .g-actions .btn-ghost { flex: 1; justify-content: center; }

    /* ---- Toast：改到底部（拇指区，且不会被吸顶栏盖住） ---- */
    #toast {
      top: auto;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
      left: 12px; right: 12px;
      transform: translateY(8px);
      padding: 12px 16px;
      font-size: 12.5px;
      text-align: center;
    }
    #toast.show { transform: translateY(0); }

    /* ---- 弹窗 → 底部抽屉 ---- */
    .qr-modal-mask { align-items: flex-end; padding: 0; backdrop-filter: none; }
    .qr-modal {
      max-width: 100%;
      max-height: 88vh;
      overflow-y: auto;
      border-radius: 20px 20px 0 0;
      padding: 20px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
      animation: sheetUp 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .qr-modal img { max-height: 46vh; }
    .app-modal-actions { gap: 10px; margin-top: 18px; }
    .app-modal-actions button { min-height: 44px; }

    /* ---- 登录门禁 ---- */
    .gate-card { max-width: 100%; border-radius: 18px; backdrop-filter: none; }
    .gate-body { padding: 24px 18px; }
    .gate-body .btn-primary { min-height: 46px; }
  }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

  /* 超小屏（≤380px）进一步压缩 */
  @media (max-width: 380px) {
    .tab { font-size: 10px; gap: 4px; padding: 8px 1px; }
    .tab svg { width: 14px; height: 14px; }
    .stat-card .stat-num { font-size: 17px; }
    tbody td::before { flex: 0 0 66px; font-size: 10.5px; }
    .filter-btn { padding: 7px 10px; font-size: 10.5px; }
  }