:root[data-theme="dark"] {
    --bg1: #0f172a; --bg2: #1e293b; --bg3: #334155;
    --glass: rgba(30, 41, 59, 0.55);
    --glass-border: rgba(255,255,255,0.1);
    --text: #f1f5f9; --sub: #94a3b8;
    --brand: #3b82f6; --brand-hover: #60a5fa;
    --input-bg: rgba(15,23,42,0.6); --input-border: rgba(255,255,255,0.15);
    --success: #22c55e; --warn: #f59e0b; --danger: #ef4444;
  }
  :root[data-theme="light"] {
    --bg1: #dbeafe; --bg2: #f1f5f9; --bg3: #e2e8f0;
    --glass: rgba(255,255,255,0.6);
    --glass-border: rgba(0,0,0,0.08);
    --text: #0f172a; --sub: #64748b;
    --brand: #2563eb; --brand-hover: #1d4ed8;
    --input-bg: rgba(255,255,255,0.8); --input-border: rgba(0,0,0,0.12);
    --success: #16a34a; --warn: #d97706; --danger: #dc2626;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
    color: var(--text);
    transition: background .3s, color .3s;
  }

  /* ============ 玻璃态 ============ */
  .glass {
    background: var(--glass);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
  }
  .glass-topbar {
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
  }

  /* ============ 顶部栏 ============ */
  .topbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px;
    border-radius: 0 0 20px 20px;
  }
  .topbar .brand { font-size: 18px; font-weight: 600; }
  .topbar nav { display: flex; gap: 6px; align-items: center; }
  .topbar nav button, .topbar nav select {
    background: transparent; border: 1px solid transparent; color: var(--sub);
    padding: 8px 14px; border-radius: 10px; cursor: pointer;
    font-size: 14px; font-family: inherit;
    transition: all .2s;
  }
  .topbar nav button:hover { background: rgba(59,130,246,0.15); color: var(--brand); }
  .topbar nav button.active {
    background: var(--brand); color: #fff;
  }
  .user-menu { position: relative; }
  .user-menu > span {
    cursor: pointer; padding: 8px 12px; border-radius: 10px;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .user-menu:hover .dropdown { display: block; }
  .dropdown {
    display: none; position: absolute; right: 0; top: 42px;
    min-width: 160px;
    background: var(--glass); border: 1px solid var(--glass-border); border-radius: 12px;
    backdrop-filter: blur(20px);
    padding: 8px;
  }
  .dropdown a {
    display: block; padding: 10px 12px; border-radius: 8px;
    color: var(--text); text-decoration: none; font-size: 13px; cursor: pointer;
  }
  .dropdown a:hover { background: rgba(59,130,246,0.15); }

  /* ============ 主内容 ============ */
  main { max-width: 1280px; margin: 20px auto; padding: 0 20px 60px; }
  .view { display: none; }
  .view.active { display: block; }
  .grid-2 {
    display: grid; gap: 20px;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 1100px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
  }
  .panel { padding: 20px; }

  /* ============ 搜索 ============ */
  .search-bar { display: flex; gap: 10px; flex-wrap: wrap; }
  .search-bar select, .search-bar input, .search-bar button {
    padding: 10px 14px; border-radius: 10px; font-family: inherit; font-size: 14px;
  }
  .search-bar select, .search-bar input {
    background: var(--input-bg); border: 1px solid var(--input-border);
    color: var(--text); outline: none; flex: 1; min-width: 140px;
  }
  .search-bar input { flex: 2; }
  .search-bar button {
    background: var(--brand); color: #fff; border: none; cursor: pointer;
    font-weight: 500; transition: all .2s;
  }
  .search-bar button:hover { background: var(--brand-hover); }

  /* ============ 国家选择器 ============ */
  .cc-select { position: relative; min-width: 200px; z-index: 10; }
  .cc-select-trigger {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 10px;
    background: var(--input-bg); border: 1px solid var(--input-border);
    color: var(--text); cursor: pointer; font-size: 14px;
    font-family: inherit; user-select: none; gap: 6px;
  }
  .cc-select-trigger:hover { border-color: var(--brand); }
  .cc-select-trigger .arrow { transition: transform .2s; font-size: 10px; color: var(--sub); }
  .cc-select.open .cc-select-trigger .arrow { transform: rotate(180deg); }
  .cc-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--input-bg); border: 1px solid var(--input-border);
    border-radius: 12px; backdrop-filter: blur(20px);
    z-index: 200; display: none; overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  }
  .cc-select.open .cc-dropdown { display: block; }
  .cc-search {
    width: 100%; padding: 10px 12px; border: none; border-bottom: 1px solid var(--input-border);
    background: transparent; color: var(--text); outline: none; font-family: inherit; font-size: 13px;
  }
  .cc-list { max-height: 320px; overflow-y: auto; }
  .cc-group-title {
    padding: 6px 14px; font-size: 11px; color: var(--sub); font-weight: 600; text-transform: uppercase;
  }
  .cc-item {
    padding: 9px 14px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px;
    transition: background .1s;
  }
  .cc-item:hover { background: rgba(59,130,246,0.15); }
  .cc-item.selected { color: var(--brand); font-weight: 600; }
  .cc-item .cc-code { color: var(--sub); font-family: ui-monospace, monospace; font-size: 11px; margin-left: auto; }
  /* 遮罩仅移动端启用(默认不参与布局) */
  .cc-mask { display: none; }

  .card-list { display: grid; gap: 16px; margin-top: 20px; }
  @media (min-width: 640px) {
    .card-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  }
  .app-card {
    display: flex; gap: 14px; padding: 16px;
  }
  .app-card .icon { width: 72px; height: 72px; border-radius: 16px; overflow: hidden; flex-shrink: 0; background: var(--bg3); }
  .app-card .icon img { width: 100%; height: 100%; object-fit: cover; }
  .app-card .info { flex: 1; min-width: 0; }
  .app-card .name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
  .app-card .seller { font-size: 12px; color: var(--sub); margin-bottom: 6px; }
  .app-card .meta { font-size: 12px; color: var(--sub); display: flex; gap: 12px; flex-wrap: wrap; }
  .app-card .actions { margin-top: 10px; display: flex; gap: 8px; }

  .btn {
    padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500;
    border: 1px solid var(--input-border); cursor: pointer; font-family: inherit;
    transition: all .2s; background: transparent; color: var(--text);
  }
  .btn:hover { background: rgba(59,130,246,0.15); border-color: var(--brand); color: var(--brand); }
  .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
  .btn-primary:hover { background: var(--brand-hover); }
  .btn-danger:hover { background: rgba(239,68,68,0.15); border-color: var(--danger); color: var(--danger); }
  .btn-sm { padding: 4px 10px; font-size: 11px; }

  .empty {
    text-align: center; padding: 40px 20px; color: var(--sub); font-size: 14px;
  }

  /* ============ 监控列表 ============ */
  .toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
  .toolbar select {
    padding: 8px 12px; border-radius: 10px; font-family: inherit; font-size: 13px;
    background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text);
  }

  /* ===== 批量操作样式 ===== */
  .btn-bulk-toggle.active { background: var(--brand); color: #fff; border-color: var(--brand); }
  .bulk-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: 12px;
    background: rgba(127,127,127,0.08); border: 1px solid var(--glass-border);
  }
  .bulk-select-all { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); user-select: none; cursor: pointer; }
  .bulk-select-all input[type=checkbox] { accent-color: var(--brand); width: 15px; height: 15px; }
  .bulk-count { font-size: 12px; color: var(--sub); margin-right: auto; }
  .bulk-count b { color: var(--brand); font-size: 15px; font-weight: 600; }
  .watched-card .bulk-check {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(0,0,0,0.25); backdrop-filter: blur(6px);
  }
  .watched-card .bulk-check input[type=checkbox] { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; cursor: pointer; }
  /* 批量模式时卡片有相对定位 */
  .watched-card:has(.bulk-check) { position: relative; }

  .watched-grid {
    display: grid; gap: 14px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) {
    .watched-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1100px) {
    .watched-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .watched-card {
    display: flex; gap: 12px; padding: 14px;
    transition: transform .15s;
    position: relative;  /* 无条件相对定位,给 checkbox 绝对定位做参照 */
  }
  .watched-card:hover { transform: translateY(-2px); }
  .watched-card:has(.bulk-check input:checked) {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.18);
  }
  .watched-card .icon { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--bg3); }
  .watched-card .icon img { width: 100%; height: 100%; object-fit: cover; }
  .watched-card .info { flex: 1; min-width: 0; }
  .watched-card .title { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
  .watched-card .title .t-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .watched-card .version { font-size: 12px; color: var(--sub); margin-bottom: 6px; }
  .watched-card .version .new { color: var(--success); font-weight: 600; }
  .region-badge { display: inline-block; flex-shrink: 0; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--sub); background: rgba(127,127,127,0.12); }
  .watched-card .time { font-size: 11px; color: var(--sub); }
  .watched-card .actions { display: flex; gap: 4px; margin-top: 8px; }

  /* ============ 设置面板 ============ */
  .sub-tabs { display: flex; gap: 4px; background: var(--input-bg); border-radius: 12px; padding: 4px; margin-bottom: 20px; }
  .sub-tabs button {
    flex: 1; padding: 10px; border-radius: 8px; border: none; background: transparent;
    color: var(--sub); font-size: 13px; font-family: inherit; cursor: pointer;
    transition: all .2s;
  }
  .sub-tabs button.active { background: var(--brand); color: #fff; }
  .sub-tab-btn { padding: 6px 12px; border: none; background: transparent; color: var(--sub); border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit; transition: all .15s; }
  .sub-tab-btn:hover { color: var(--text); }
  .sub-tab-panel { display: none; }
  .sub-tab-panel.active { display: block; }

  .channel-card { border: 1px solid var(--glass-border); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
  .channel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .channel-head .icon { font-size: 20px; }
  .channel-head .name { flex: 1; font-weight: 600; }

  /* ============ Modal 弹窗 ============ */
  .modal-mask {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 500;
    display: none; align-items: center; justify-content: center; padding: 20px;
  }
  .modal-mask.open { display: flex; }
  .modal {
    background: var(--bg2); border: 1px solid var(--glass-border); border-radius: 18px;
    width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    animation: modalIn .18s ease-out;
  }
  @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  .modal-head {
    padding: 16px 20px; border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 10px;
  }
  .modal-head .mh-icon { font-size: 20px; }
  .modal-head .mh-title { flex: 1; font-weight: 600; font-size: 15px; }
  .modal-head .mh-close {
    background: transparent; border: none; color: var(--sub); font-size: 18px; cursor: pointer;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px;
  }
  .modal-head .mh-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
  .modal-body { padding: 18px 20px; }
  .modal-foot {
    padding: 12px 20px; border-top: 1px solid var(--glass-border);
    display: flex; gap: 8px; justify-content: flex-end;
  }
  .ch-field { margin-bottom: 14px; }
  .ch-field label { display: block; font-size: 12px; color: var(--sub); margin-bottom: 5px; font-weight: 500; }
  .ch-field label .req { color: #ef4444; margin-left: 2px; }
  .ch-field .hint { font-size: 11px; color: var(--sub); margin-top: 4px; line-height: 1.5; }
  .ch-field input, .ch-field select, .ch-field textarea {
    width: 100%; padding: 9px 12px; border-radius: 8px; font-family: inherit; font-size: 13px;
    background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); outline: none;
    transition: border-color .15s;
  }
  .ch-field input:focus, .ch-field select:focus, .ch-field textarea:focus { border-color: var(--brand); }
  .ch-field textarea { resize: vertical; min-height: 64px; }
  .ch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 480px) { .ch-row { grid-template-columns: 1fr; } }

  /* Confirm / Prompt 专用 */
  .modal-sm { max-width: 360px; }
  .confirm-body { text-align: center; padding: 28px 24px 20px; }
  .confirm-icon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(239,68,68,0.12); color: #ef4444; font-size: 24px;
  }
  .confirm-icon.info { background: rgba(59,130,246,0.12); color: #3b82f6; }
  .confirm-icon.warn { background: rgba(245,158,11,0.12); color: #f59e0b; }
  .confirm-text { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
  .confirm-sub { font-size: 12px; color: var(--sub); line-height: 1.5; }

  .switch { position: relative; width: 44px; height: 24px; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .switch .slider {
    position: absolute; inset: 0; background: rgba(148,163,184,0.4);
    border-radius: 12px; cursor: pointer; transition: .2s;
  }
  .switch .slider::before {
    content: ''; position: absolute; height: 20px; width: 20px;
    left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .2s;
  }
  .switch input:checked + .slider { background: var(--success); }
  .switch input:checked + .slider::before { transform: translateX(20px); }

  .form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .form-grid label { display: block; font-size: 12px; color: var(--sub); margin-bottom: 4px; }
  .form-grid input, .form-grid select {
    width: 100%; padding: 9px 12px; border-radius: 8px; font-family: inherit; font-size: 13px;
    background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); outline: none;
  }

  /* ============ 通知历史 / 日志 ============ */
  .timeline-item {
    display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--glass-border);
  }
  .timeline-item:last-child { border-bottom: none; }
  .timeline-item .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); margin-top: 6px; flex-shrink: 0; }
  .timeline-item .content { flex: 1; }
  .timeline-item .title { font-weight: 500; font-size: 14px; }
  .timeline-item .sub { font-size: 12px; color: var(--sub); margin-top: 2px; }
  .timeline-item .time { font-size: 11px; color: var(--sub); flex-shrink: 0; }

  /* ============ 版本历史 Timeline(按 App 分组) ============ */
  .hist-group { border: 1px solid var(--glass-border); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
  .hist-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: rgba(255,255,255,0.03); cursor: pointer; user-select: none;
  }
  .hist-head:hover { background: rgba(255,255,255,0.06); }
  .hist-head .h-icon { width: 40px; height: 40px; border-radius: 9px; overflow: hidden; flex-shrink: 0; }
  .hist-head .h-icon img { width: 100%; height: 100%; object-fit: cover; }
  .hist-head .h-info { flex: 1; min-width: 0; }
  .hist-head .h-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hist-head .h-meta { font-size: 12px; color: var(--sub); margin-top: 2px; display: flex; gap: 8px; align-items: center; }
  .hist-head .h-count {
    background: var(--brand); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 500;
  }
  .hist-head .h-chev { color: var(--sub); transition: transform .2s; }
  .hist-head.open .h-chev { transform: rotate(90deg); }
  .hist-body { display: none; padding: 4px 16px 14px; }
  .hist-group.open .hist-body { display: block; }
  .hist-chain {
    border-left: 2px solid var(--brand); padding-left: 16px; margin-left: 19px;
  }
  .hist-node { padding: 8px 0; position: relative; }
  .hist-node::before {
    content: ''; position: absolute; left: -21px; top: 12px;
    width: 10px; height: 10px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--brand);
  }
  .hist-node .n-ver { font-size: 13px; font-weight: 600; }
  .hist-node .n-old { color: var(--sub); text-decoration: line-through; font-weight: 400; margin-right: 4px; }
  .hist-node .n-time { font-size: 11px; color: var(--sub); margin-top: 2px; }
  .hist-node .n-changes { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
  .hist-node .n-change {
    font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(59,130,246,0.15); color: #60a5fa;
  }
  .hist-node .n-change.price { background: rgba(245,158,11,0.15); color: #fbbf24; }
  .hist-node .n-change.rating { background: rgba(168,85,247,0.15); color: #c084fc; }
  .hist-node .n-change.title { background: rgba(239,68,68,0.15); color: #f87171; }

  /* ============ 通知历史 ============ */
  .notif-item {
    display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--glass-border); align-items: flex-start;
  }
  .notif-item:last-child { border-bottom: none; }
  .notif-item .n-status { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
  .notif-item .n-status.ok { background: rgba(34,197,94,0.15); color: #22c55e; }
  .notif-item .n-status.fail { background: rgba(239,68,68,0.15); color: #ef4444; }
  .notif-item .n-mix { background: rgba(245,158,11,0.15); color: #f59e0b; }
  .notif-item .n-body { flex: 1; min-width: 0; }
  .notif-item .n-title { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notif-item .n-version { color: var(--success); font-weight: 500; font-size: 13px; }
  .notif-item .n-channels { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
  .notif-item .n-ch { font-size: 11px; padding: 1px 7px; border-radius: 4px; background: rgba(255,255,255,0.08); color: var(--sub); display: inline-flex; align-items: center; gap: 3px; }
  .notif-item .n-ch.ok { background: rgba(34,197,94,0.12); color: #4ade80; }
  .notif-item .n-ch.fail { background: rgba(239,68,68,0.12); color: #f87171; cursor: pointer; }
  .notif-item .n-ch.fail:hover { background: rgba(239,68,68,0.25); }
  .notif-item .n-time { font-size: 11px; color: var(--sub); flex-shrink: 0; padding-top: 2px; }

  /* ============ Toast / Modal ============ */
  #toastRoot { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; }
  .toast {
    padding: 10px 20px; border-radius: 10px; margin-bottom: 8px;
    backdrop-filter: blur(20px); font-size: 13px;
    border: 1px solid var(--glass-border);
    animation: slideDown .2s ease-out;
  }
  .toast.success { background: rgba(34,197,94,0.2); color: #22c55e; }
  .toast.error   { background: rgba(239,68,68,0.2); color: #ef4444; }
  .toast.info    { background: rgba(59,130,246,0.2); color: #3b82f6; }
  @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

  /* ============ 滚动条 ============ */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--sub); }

  /* ============ 移动端适配 (≤ 639px) ============ */
  @media (max-width: 639px) {
    /* 定义安全区感知变量:让所有 bottom 定位的元素自动避开 iPhone 底部安全区 */
    :root {
      --tabbar-h: calc(60px + env(safe-area-inset-bottom, 0px));
      --topbar-h: calc(56px + env(safe-area-inset-top, 0px));
    }

    /* 移除桌面 hover,移动端无鼠标 */
    .topbar nav button:hover,
    .app-card:hover,
    .watched-card:hover,
    .cc-item:hover { background: transparent !important; transform: none !important; }

    /* 顶部栏简化 */
    .topbar { padding: 10px 12px; gap: 8px; border-radius: 0; }
    .topbar .brand { font-size: 15px; flex-shrink: 0; }
    /* 隐藏所有桌面 nav 按钮和用户菜单(导航走底部 Tab Bar) */
    .topbar nav > button,
    .topbar nav .user-menu { display: none !important; }


    /* main */
    main { margin: 8px auto 0; padding: 0 8px 90px; max-width: 100%; }
    /* glass 面板浮在 cc-mask 之上(避免被遮罩变暗) */
    .panel { padding: 14px; border-radius: 16px; position: relative; z-index: 100; }

    /* 搜索栏全宽 */
    .search-bar { flex-direction: row; gap: 8px; }
    .cc-select { min-width: 0; width: auto; flex-shrink: 0; }
    .cc-select-trigger { padding: 8px 10px; font-size: 12px; }
    .search-bar input { flex: 2; min-width: 0; padding: 8px 10px; font-size: 13px; }
    .search-bar button { padding: 8px 12px; font-size: 13px; }

    /* 国家选择器:改为全宽底部弹层(夹在顶栏与 Tab Bar 之间)
       兼容性:仅用 px/var,不用 env/min/calc,老内核 webview 也能正确定位 */
    .cc-mask {
      display: block;
      position: fixed;
      top: var(--topbar-h, 44px);
      bottom: var(--tabbar-h, 60px);
      left: 0; right: 0;
      background: rgba(0,0,0,0.45); z-index: 94;
      opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    .cc-mask.open { opacity: 1; pointer-events: auto; }
    /* 注意:.cc-dropdown 会被 JS 移到 body 下(脱离 glass 的 backdrop-filter 包含块),因此用独立 .open 类而非 .cc-select.open 后代选择器 */
    .cc-dropdown.open {
      position: fixed;
      top: auto;
      bottom: calc(var(--tabbar-h) - 1px);
      left: 0; right: 0;
      width: 100%;
      max-height: 60dvh;
      display: block;
      overflow: hidden;
      background: var(--bg2);
      border: none; border-top: 1px solid var(--glass-border);
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
      z-index: 200;
      animation: ccSlideUp .2s ease-out;
    }
    /* 下滑手柄:可点击关闭 + hover 提示 */
    .cc-dropdown.open::before {
      content: ''; display: block;
      width: 40px; height: 4px; border-radius: 999px;
      background: var(--bg3); margin: 8px auto 4px;
      cursor: pointer;
    }
    @keyframes ccSlideUp {
      from { -webkit-transform: translateY(100%); transform: translateY(100%); }
      to { -webkit-transform: none; transform: none; }
    }
    /* 搜索框 */
    .cc-dropdown.open .cc-search {
      display: block;
      width: calc(100% - 28px);
      margin: 4px 14px 6px;
      box-sizing: border-box;
    }
    /* 列表:60dvh 减去手柄(~20px) + 搜索框(~44px) + padding = ~70px */
    .cc-dropdown.open .cc-list {
      max-height: calc(60dvh - 80px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .cc-item { padding: 12px 16px; font-size: 14px; }
    .cc-search { padding: 12px 14px; font-size: 14px; }
    .cc-group-title { padding: 8px 16px 4px; }

    /* 排序筛选 Chip */
    .toolbar { margin-bottom: 12px; }
    .toolbar select, .toolbar button { font-size: 12px; padding: 6px 10px; }

    /* 监控列表紧凑模式 */
    .watched-grid { grid-template-columns: 1fr; gap: 10px; }
    .watched-card { padding: 10px 12px; gap: 10px; }
    .watched-card .icon { width: 42px; height: 42px; border-radius: 9px; }
    .watched-card .title { font-size: 13px; margin-bottom: 2px; }
    .watched-card .version { font-size: 11px; margin-bottom: 6px; }
    .watched-card .time { font-size: 10px; }
    .watched-card .actions { gap: 4px; flex-wrap: nowrap; overflow-x: auto; }
    .watched-card .actions button { flex-shrink: 0; font-size: 11px; padding: 4px 8px; }
    .region-badge { font-size: 10px; padding: 1px 6px; }

    /* 搜索结果卡片 */
    .card-list { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
    .app-card { padding: 12px; gap: 10px; }
    .app-card .icon { width: 48px; height: 48px; border-radius: 11px; }
    .app-card .name { font-size: 13px; }
    .app-card .seller { font-size: 11px; }
    .app-card .meta { font-size: 11px; gap: 8px; }
    .app-card .actions { flex-wrap: nowrap; overflow-x: auto; }
    .app-card .actions button { flex-shrink: 0; }

    /* Toast 避开顶部栏 */
    #toastRoot { top: 64px; }

    /* 底部 Tab Bar */
    .tabbar {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
      display: flex; height: 60px;
      background: rgba(30,41,59,0.95); backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid var(--glass-border);
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .tabbar button {
      flex: 1; background: transparent; border: none; color: var(--sub);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; font-size: 10px; cursor: pointer; font-family: inherit;
      transition: color .15s; position: relative;
    }
    .tabbar button.active { color: var(--brand); }
    .tabbar button i { font-size: 18px; }
    .tabbar .count-badge {
      position: absolute; top: 6px; right: calc(50% - 22px);
      min-width: 16px; height: 16px; padding: 0 4px;
      background: var(--danger); color: #fff; border-radius: 999px;
      font-size: 9px; font-weight: 700; line-height: 16px; text-align: center;
      display: none;
    }
    .tabbar .count-badge.show { display: inline-block; }

    /* Drawer 抽屉(夹在顶部栏与底部 Tab Bar 之间,两栏保持可见) */
    .drawer-mask {
      position: fixed;
      top: var(--topbar-h, 44px);
      bottom: var(--tabbar-h, 60px);
      left: 0; right: 0;
      background: rgba(0,0,0,0.4); z-index: 95;
      opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    .drawer-mask.open { opacity: 1; pointer-events: auto; }
    .drawer {
      position: fixed;
      top: var(--topbar-h, 44px);
      bottom: var(--tabbar-h, 60px);
      right: 0; z-index: 96;
      width: 78%; max-width: 320px;
      background: var(--bg2); backdrop-filter: blur(24px);
      border-left: 1px solid var(--glass-border);
      border-radius: 16px 0 0 16px;
      transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
      display: flex; flex-direction: column;
    }
    .drawer.open { transform: translateX(0); }
    .drawer-head {
      padding: 16px 18px; border-bottom: 1px solid var(--glass-border);
      display: flex; align-items: center; justify-content: space-between;
    }
    .drawer-head .who { font-size: 13px; font-weight: 600; }
    .drawer-head .close {
      background: transparent; border: none; color: var(--text);
      font-size: 18px; cursor: pointer;
    }
    .drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }
    .drawer-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 18px; font-size: 14px;
      background: transparent; border: none; color: var(--text);
      width: 100%; text-align: left; cursor: pointer; font-family: inherit;
      border-bottom: 1px solid var(--glass-border);
    }
    .drawer-item:first-child { border-top: 1px solid var(--glass-border); }
    .drawer-item:active { background: rgba(59,130,246,0.15); }
    .drawer-item i { width: 18px; text-align: center; color: var(--sub); }
    .drawer-item .arrow { margin-left: auto; font-size: 10px; color: var(--sub); }
    .drawer-foot { padding: 12px 18px; border-top: 1px solid var(--glass-border); }
    .drawer-foot .user { font-size: 13px; color: var(--sub); margin-bottom: 8px; }

    /* 设置面板 sub-tabs 移动端 */
    .sub-tabs button { font-size: 12px; padding: 8px 6px; }
    .form-grid { grid-template-columns: 1fr; }

    /* 历史时间线 */
    .timeline-item { gap: 10px; padding: 10px 0; }
    .timeline-item .time { flex-shrink: 0; }
  }
  /* 汉堡按钮已移除,移动端导航统一走底部 Tab Bar */

  /* 抽屉和 Tab Bar 桌面端隐藏;移动端恢复各自的布局方式(flex,不能被 block 覆盖) */
  .tabbar, .drawer, .drawer-mask { display: none; }
  @media (max-width: 639px) {
    .tabbar { display: flex; }
    .drawer { display: flex; }
    .drawer-mask { display: block; }
    .cc-mask { display: block; }
  }

  /* 桌面端 hover (仅支持 hover 的设备) */
  @media (hover: hover) and (min-width: 640px) {
    .topbar nav button:hover { background: rgba(59,130,246,0.15); color: var(--brand); }
    .app-card:hover { transform: translateY(-2px); }
    .watched-card:hover { transform: translateY(-2px); }
    .cc-item:hover { background: rgba(59,130,246,0.15); }
  }

  /* ===== 管理员视图 ===== */
  .admin-stats {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .admin-stat-card {
    padding: 14px 16px; border-radius: 14px;
    background: rgba(127,127,127,0.07);
    border: 1px solid var(--glass-border);
  }
  .admin-stat-card .stat-val { font-size: 22px; font-weight: 700; color: var(--text); }
  .admin-stat-card .stat-label { font-size: 12px; color: var(--sub); margin-top: 2px; }

  .user-card-list {
    grid-template-columns: 1fr;
  }
  @media (min-width: 720px) {
    .user-card-list { grid-template-columns: repeat(2, 1fr); }
  }
  .admin-user-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px; border-radius: 14px;
    background: rgba(127,127,127,0.05);
    border: 1px solid var(--glass-border);
    transition: transform .12s, border-color .12s;
  }
  .admin-user-card:hover { transform: translateY(-1px); border-color: var(--brand); }
  .admin-user-card .u-head { display: flex; align-items: center; gap: 10px; }
  .admin-user-card .u-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg3); color: var(--sub);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 16px; flex-shrink: 0;
  }
  .admin-user-card .u-avatar.admin { background: rgba(59,130,246,0.15); color: var(--brand); }
  .admin-user-card .u-meta { flex: 1; min-width: 0; }
  .admin-user-card .u-email { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-user-card .u-name { font-size: 12px; color: var(--sub); }
  .admin-user-card .u-badges { display: flex; gap: 6px; flex-wrap: wrap; }
  .admin-user-card .u-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
  .admin-user-card .u-badge.role-admin { background: rgba(59,130,246,0.15); color: var(--brand); }
  .admin-user-card .u-badge.role-user { background: rgba(127,127,127,0.15); color: var(--sub); }
  .admin-user-card .u-badge.active { background: rgba(34,197,94,0.15); color: var(--success); }
  .admin-user-card .u-badge.inactive { background: rgba(239,68,68,0.15); color: var(--danger); }
  .admin-user-card .u-info { font-size: 11px; color: var(--sub); display: flex; flex-wrap: wrap; gap: 10px; }
  .admin-user-card .u-info b { color: var(--text); font-weight: 500; }
  .admin-user-card .u-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .admin-user-card .u-actions .btn { font-size: 12px; padding: 5px 10px; }

  /* ===== 审计日志卡片列表 ===== */
  #auditLogList { display: flex; flex-direction: column; gap: 10px; }
  .audit-row {
    display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px;
    background: var(--bg2, rgba(127,127,127,0.04)); border: 1px solid var(--glass-border);
    transition: background .15s;
  }
  .audit-row:hover { background: var(--bg3, rgba(127,127,127,0.08)); }

  /* 左侧头像 */
  .audit-row .ar-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand-soft, rgba(59,130,246,0.15));
    color: var(--brand); font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
  }
  .audit-row .ar-avatar.system { background: rgba(127,127,127,0.15); color: var(--sub); }

  /* 主内容区 */
  .audit-row .ar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

  /* 顶部行: action pill + target + time */
  .audit-row .ar-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .audit-row .ar-action {
    font-weight: 600; padding: 3px 10px; border-radius: 999px; font-size: 11.5px;
  }
  .audit-row .ar-action.create    { background: rgba(34,197,94,0.15); color: var(--success); }
  .audit-row .ar-action.update    { background: rgba(59,130,246,0.15); color: var(--brand); }
  .audit-row .ar-action.delete    { background: rgba(239,68,68,0.15);  color: var(--danger); }
  .audit-row .ar-action.default   { background: rgba(127,127,127,0.15); color: var(--sub); }
  .audit-row .ar-target {
    font-size: 12px; color: var(--text); font-weight: 500;
    font-family: ui-monospace, SFMono-Regular, monospace;
  }
  .audit-row .ar-time {
    margin-left: auto; color: var(--sub); font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 11.5px; flex-shrink: 0;
  }

  /* meta chips 区 */
  .audit-row .ar-meta-row { display: flex; gap: 6px; flex-wrap: wrap; }
  .audit-row .ar-chip {
    font-size: 11px; padding: 2px 8px; border-radius: 5px;
    background: var(--bg3, rgba(127,127,127,0.08));
    color: var(--text); border: 1px solid var(--glass-border);
    font-family: ui-monospace, SFMono-Regular, monospace;
  }
  .audit-row .ar-chip.email { color: var(--brand); }
  .audit-row .ar-chip.role  { color: var(--warn, #f59e0b); }
  .audit-row .ar-chip.price { color: var(--warn, #f59e0b); }
  .audit-row .ar-chip.date  { color: var(--sub); }

  /* 底部: 操作者 + IP */
  .audit-row .ar-foot {
    display: flex; gap: 14px; font-size: 11.5px; color: var(--sub);
  }
  .audit-row .ar-actor b { color: var(--text); font-weight: 600; }
  .audit-row .ar-ip {
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: var(--muted, var(--sub));
  }
  .audit-row .ar-ip::before { content: '🛰 '; font-size: 10px; }

  @media (max-width: 560px) {
    .audit-row { padding: 12px; gap: 10px; }
    .audit-row .ar-avatar { width: 32px; height: 32px; font-size: 12px; }
    .audit-row .ar-time { margin-left: 0; width: 100%; font-size: 11px; }
  }