:root {
  --bg: #F2F2F2;
  --surface: #ffffff;
  --border: #d9d9d9;
  --text: #404040;
  --text-secondary: #6e6e6e;
  --primary: #0E7F51;
  --primary-hover: #0b6a44;
  --primary-soft: #e8f5ef;
  --primary-border: #9dceb8;
  --success: #0E7F51;
  --error: #dc2626;
  --warning: #d97706;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(64,64,64,.04), 0 8px 24px rgba(64,64,64,.06);
  --sidebar: #404040;
  --sidebar-w: 256px;
  --topbar-h: 64px;
  --tabbar-h: 56px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

.app { min-height: 100vh; }

/* ========== App shell (sidebar layout) ========== */
.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}


.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar);
  color: #f2f2f2;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 40;
  border-right: 1px solid rgba(255,255,255,.08);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 16px 16px 12px;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
}

.sidebar-logo-lockup {
  display: block;
  width: 84px;
  height: auto;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

.sidebar-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-brand .brand-icon {
  display: none;
}

.sidebar-brand-text {
  display: none;
}

.sidebar-close {
  display: none;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #C0C0C0;
  font-size: 22px;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
}
.sidebar-close:hover { background: rgba(255,255,255,.08); color: #fff; }

.sidebar-nav-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 14px 28px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.sidebar-nav-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  background: linear-gradient(180deg, rgba(64,64,64,0) 0%, rgba(64,64,64,.92) 55%, var(--sidebar) 100%);
  opacity: 0;
  transition: opacity .2s ease;
}
.sidebar-nav-wrap.has-more .sidebar-nav-hint { opacity: 1; }
.sidebar-nav-hint span {
  font-size: 11px;
  font-weight: 500;
  color: #a8a29e;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.sidebar-nav-hint span::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid #a8a29e;
  vertical-align: middle;
}

.nav-group { margin-bottom: 10px; }
.nav-group:last-child { margin-bottom: 4px; }

.nav-group-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: #f5f5f5;
  padding: 10px 10px 8px;
  line-height: 1.3;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
}
.nav-group-title:hover { background: rgba(255,255,255,.06); }
.nav-group-title::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #a8a29e;
  transition: transform .18s ease;
  flex-shrink: 0;
}
.nav-group.is-collapsed .nav-group-title::after {
  transform: rotate(-90deg);
}
.nav-group-body {
  overflow: hidden;
  max-height: 640px;
  transition: max-height .22s ease, opacity .18s ease;
  opacity: 1;
}
.nav-group.is-collapsed .nav-group-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #e8e8e8;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  text-align: left;
  margin: 0 0 2px;
  box-sizing: border-box;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.nav-item:focus-visible {
  outline: 2px solid rgba(14,127,81,.65);
  outline-offset: 1px;
}
.nav-item:focus:not(:focus-visible) { outline: none; }
.nav-ico { display: none !important; }

.sidebar-foot {
  padding: 12px 12px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
  background: var(--sidebar);
}

.sidebar-account {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.sidebar-account:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(14,127,81,.55);
}
.sidebar-account:focus-visible {
  outline: 2px solid rgba(14,127,81,.7);
  outline-offset: 2px;
}
.sidebar-account-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
}
.sidebar-account-label {
  font-size: 11px;
  color: #a8a29e;
  line-height: 1.2;
}
.sidebar-account-row strong,
.sidebar-account-row b {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  line-height: 1.2;
  text-align: left;
}
.sidebar-account-row b {
  font-size: 14px;
  font-weight: 700;
  color: #9dceb8;
  font-variant-numeric: tabular-nums;
}
.sidebar-account-row b.balance-negative { color: #f87171; }
.sidebar-account-row b.sidebar-cloak {
  font-size: 11px;
  font-weight: 600;
  color: #a8a29e;
  text-align: right;
  line-height: 1.35;
  max-width: 62%;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.sidebar-account-row b.sidebar-cloak.is-active {
  color: #4ade80;
}
.sidebar-account-row.hidden { display: none; }
.sidebar-account-hint {
  font-size: 11px;
  color: #78716c;
  line-height: 1.2;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 2px;
}

.sidebar-recharge {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.sidebar-recharge:hover { background: var(--primary-hover); }
.sidebar-recharge b { font-weight: 700; }

.sidebar-invite {
  width: 100%;
  height: 36px;
  border: 1px solid rgba(14, 127, 81, .45);
  border-radius: 8px;
  background: rgba(14, 127, 81, .16);
  color: #b7e0cc;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
}
.sidebar-invite:hover {
  background: rgba(14, 127, 81, .26);
  color: #fff;
  border-color: rgba(14, 127, 81, .7);
}

.sidebar-logout {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: transparent;
  color: #a8a29e;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
}
.sidebar-logout:hover {
  color: #fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 35;
}

.shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  height: 64px;
  background: var(--surface);
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(64,64,64,.04);
}

.topbar-menu {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
}

.topbar-crumb {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

.topbar-root {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C0C0C0;
  line-height: 1.2;
}

.topbar-title,
#crumbCurrent {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.crumb-sep { display: none; }

.topbar-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-support-tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: #229ED9;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  max-width: 200px;
  transition: background .12s ease, border-color .12s ease;
}
.topbar-support-tg:hover {
  background: #f0f9ff;
  border-color: #7dd3fc;
  color: #0ea5e9;
}
.topbar-tg-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
#topbarSupportTgLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px 0 6px;
  border: none;
  border-radius: 999px;
  background: #F2F2F2;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  max-width: 180px;
}
.topbar-user:hover { background: #e8e8e8; }
.topbar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
#topbarUsername {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-content {
  flex: 1;
  padding: 20px 28px 40px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.shell-content:has(.view-wide:not(.hidden)) {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
}

.page-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  background: #fff;
  padding: 6px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  width: fit-content;
  max-width: 100%;
}

.page-subtab {
  padding: 7px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.page-subtab.active {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}

.page-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.cloak-table-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.cloak-links-count {
  font-size: 12px;
  color: var(--text-secondary);
}

.cloak-links-pager-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.cloak-links-pager-bottom:empty {
  display: none;
}

.cloak-links-pager-bottom .list-pager {
  display: flex;
  gap: 8px;
  margin-top: 0;
}

.cloak-data-table-dense {
  min-width: 1280px;
  font-size: 12px;
}

.cloak-data-table-dense th,
.cloak-data-table-dense td {
  padding: 10px 8px;
  max-width: 180px;
}

.cloak-data-table-dense .th-ops,
.cloak-data-table-dense .td-ops {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 2;
  box-shadow: -4px 0 8px rgba(0,0,0,.04);
  min-width: 110px;
}

.cloak-data-table-dense thead .th-ops {
  background: #fafafa;
  z-index: 3;
}

.cloak-owner {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
  word-break: break-all;
}

.cloak-owner-block {
  min-width: 118px;
  max-width: 168px;
}

.cloak-owner-sub {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

.cloak-owner-sub.is-active { color: #047857; }
.cloak-owner-sub.is-expired { color: #b45309; }
.cloak-owner-sub.is-none { color: #6b7280; }

.cloak-owner-exp {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
  white-space: normal;
}

.cloak-mode-stage {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

.cloak-slug {
  font-size: 11px;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}

.cloak-flags {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: nowrap;
}

.cloak-stats {
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
}

.cloak-stats b { color: var(--primary-hover); }

.cloak-note {
  font-size: 11px;
  color: var(--text-secondary);
}

.cloak-regions {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.cloak-url-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.cloak-review-field {
  max-width: none;
}

.cloak-review-modes {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 6px 0 8px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--border) 40%, var(--bg));
}

.cloak-review-mode {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-secondary);
  user-select: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.cloak-review-mode:hover {
  color: var(--text);
}

.cloak-review-mode:has(input:checked) {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.cloak-review-mode input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.cloak-review-field .cloak-review-category-select {
  width: auto !important;
  min-width: 120px;
  max-width: 180px;
  min-height: 36px;
  margin: 0;
}

select.cloak-mode-select.cloak-as-picks,
select.cloak-review-category-select.cloak-as-picks {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cloak-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.cloak-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 0;
  user-select: none;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.cloak-choice-compact {
  min-width: 0;
  padding: 5px 12px;
}
.cloak-choice:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.cloak-choice:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--bg));
  color: var(--text);
  font-weight: 600;
}
.cloak-choice input {
  position: absolute;
  opacity: 0;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  border: 0 !important;
  box-shadow: none !important;
}
.cloak-choice span,
.cloak-choice .cloak-chip-text {
  display: inline;
  flex: none;
  min-width: 0;
  white-space: nowrap;
  line-height: 1.35;
}
.cloak-choice b {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.cloak-choice small { display: none; }

.pwa-preview-section { margin-top: 8px; }
.pwa-preview-frame {
  display: flex;
  justify-content: center;
  padding: 16px 8px 8px;
  background: #f3f4f6;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pwa-preview-phone {
  width: min(360px, 100%);
  background: #fff;
  border-radius: 16px;
  padding: 16px 14px 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  color: #202124;
}
.pwa-pv-head { display: flex; gap: 12px; align-items: flex-start; }
.pwa-pv-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: #e8eaed;
  flex-shrink: 0;
}
.pwa-pv-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-pv-meta strong { font-size: 18px; line-height: 1.25; }
.pwa-pv-meta span { font-size: 13px; color: #01875f; }
.pwa-pv-meta em { font-size: 12px; color: #5f6368; font-style: normal; }
.pwa-pv-stats {
  display: flex;
  gap: 16px;
  margin: 14px 0 12px;
  font-size: 12px;
  color: #5f6368;
  font-weight: 600;
}
.pwa-pv-cta {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: #01875f;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  cursor: default;
}
.pwa-pv-shots {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 14px;
  padding-bottom: 4px;
}
.pwa-pv-shots img {
  width: 92px;
  height: 164px;
  object-fit: cover;
  border-radius: 10px;
  background: #e8eaed;
  flex-shrink: 0;
}
.pwa-pv-shots:empty { display: none; }

.landing-preview-mount { margin-top: 14px; }
.landing-reviews-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 10px;
}
.landing-comments-details {
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fafafa;
}
.landing-comments-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}
.landing-comments-details summary::-webkit-details-marker { display: none; }
.landing-comment-row {
  display: grid;
  grid-template-columns: 1fr 72px 1fr 88px auto;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.landing-comment-row .landing-comment-text { grid-column: 1 / -2; }
.landing-comment-row input,
.landing-comment-row select {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 8px;
  font-size: 12px;
  background: #fff;
}
.pwa-preview-phone {
  max-height: 720px;
  overflow: auto;
}
.pwa-pv-about,
.pwa-pv-reviews {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e8eaed;
}
.pwa-pv-about strong,
.pwa-pv-reviews strong {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}
.pwa-pv-about p {
  margin: 0 0 6px;
  font-size: 12px;
  color: #5f6368;
  line-height: 1.45;
}
.pwa-pv-score-head b {
  font-size: 28px;
  color: #01875f;
}
.pwa-pv-comment-list { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.pwa-pv-comment-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.pwa-pv-comment-top img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #e8eaed;
}
.pwa-pv-comment-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 4px 36px;
  font-size: 11px;
  color: #5f6368;
}
.pwa-pv-comment-meta em {
  font-style: normal;
  color: #01875f;
  letter-spacing: 1px;
}
.pwa-pv-comment p {
  margin: 0 0 0 36px;
  font-size: 12px;
  line-height: 1.45;
  color: #202124;
}
@media (max-width: 720px) {
  .landing-comment-row { grid-template-columns: 1fr 1fr; }
  .landing-comment-row .landing-comment-text { grid-column: 1 / -1; }
}

.cloak-review-field .cloak-review-custom-input {
  width: 100% !important;
  max-width: 280px;
  min-height: 36px;
  margin: 0;
}

.cloak-review-search {
  width: 100%;
}

.cloak-review-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.cloak-review-search-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.cloak-review-system-note,
.field-note.cloak-review-system-note {
  margin: 0 0 8px;
  max-width: 36em;
  color: #c62828;
}

.cloak-review-field > .cloak-review-system-note,
.cloak-review-field .field-note.cloak-review-system-note {
  color: #c62828;
}

.cloak-review-field .field-note {
  margin-top: 6px;
}

.cloak-review-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.cloak-review-cell-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 10%, var(--bg));
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-all;
}

.cloak-review-cell-tag.is-custom {
  background: color-mix(in srgb, var(--border) 55%, var(--bg));
  font-weight: 500;
}

.cloak-mirror-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cloak-mirror-st {
  font-size: 11px;
  color: var(--text-secondary);
}

.cloak-mirror-st.is-ready { color: #2e7d32; }
.cloak-mirror-st.is-pending { color: #f9a825; }
.cloak-mirror-st.is-fail { color: #c62828; }

.pwa-domain-check-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pwa-domain-check-row input {
  flex: 1;
}

.cloak-review-cell .cloak-mini-edit {
  font-size: 12px;
}

.cloak-review-admin-layout {
  align-items: start;
}

.cloak-review-cat-list,
.cloak-review-link-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cloak-review-cat-item,
.cloak-review-link-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}

.cloak-review-cat-item.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--bg));
}

.cloak-review-link-item {
  cursor: default;
}

.cloak-review-cat-main,
.cloak-review-link-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cloak-review-cat-main span,
.cloak-review-link-main span {
  font-size: 12px;
  color: var(--text-secondary);
}

.cloak-review-link-main a {
  color: var(--text);
  word-break: break-all;
  text-decoration: none;
}

.cloak-review-link-main a:hover {
  color: var(--primary);
}

.cloak-review-cat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cloak-review-cat-actions .danger {
  color: #c0392b;
}

.cloak-url-stack a {
  color: var(--text);
  text-decoration: none;
  word-break: break-all;
}

.cloak-url-stack a:hover { color: var(--primary); }

.cloak-mini-copy {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.cloak-copy-link {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 4px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.cloak-copy-link:hover {
  background: var(--primary-soft);
}

.cloak-copy-link-block {
  width: 100%;
  justify-content: center;
  margin: 8px 0 10px;
}

.cloak-muted { color: var(--text-secondary); }
.nowrap { white-space: nowrap; }
.cloak-cards-mobile { display: none; }

.cloak-url-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cloak-mini-edit {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.page-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cloak-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.cloak-inline-form .modal-field { margin: 0; min-width: 200px; flex: 1 1 280px; }

.cloak-domains-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cloak-domains-add-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.cloak-domains-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0;
}

.cloak-domains-field > span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.cloak-domains-field textarea,
.cloak-domains-field input[type="url"],
.cloak-domains-field input[type="text"] {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
  box-sizing: border-box;
  background: #fff;
}

.cloak-domains-field input[type="url"],
.cloak-domains-field input[type="text"] {
  min-height: 40px;
  height: 40px;
  resize: none;
  font-family: inherit;
}

.cloak-domains-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

.cloak-domains-add-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cloak-domains-pool-check {
  margin: 0;
  flex: 1 1 auto;
}

.cloak-domains-add-bar .btn {
  width: auto;
  min-width: 148px;
  margin: 0;
  flex-shrink: 0;
}

.cloak-domains-meta {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.cloak-domains-meta:empty { display: none; }

.cloak-domains-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cloak-domains-list-head .page-card-title,
.cloak-domains-list-head .modal-section-title {
  margin: 0;
}

.modal-domains-list-head {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cloak-domains-count {
  font-size: 12px;
  color: var(--text-secondary);
}

.cloak-domains-table-head,
.cloak-domain-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) 72px 72px minmax(180px, auto);
  gap: 10px;
  align-items: center;
}

.cloak-domains-table-head {
  padding: 0 12px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.cloak-domain-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cloak-domain-main strong {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloak-domain-cell {
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .cloak-domains-table-head { display: none; }
  .cloak-domain-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cloak-domain-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .cloak-domains-add-bar .btn { width: 100%; }
}

.cloak-access-logs {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  max-height: min(62vh, 640px);
  overflow-y: auto;
  background: var(--surface);
}

.cloak-access-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.cloak-access-meta:empty { display: none; }

.cloak-access-filters {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(3, minmax(100px, 0.8fr)) auto;
  gap: 10px;
  align-items: end;
}

.cloak-access-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cloak-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}

.cloak-chip.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--bg));
  color: var(--text);
  font-weight: 600;
}

.cloak-access-row {
  display: grid;
  grid-template-columns: 106px 76px minmax(220px, 1.4fr) minmax(180px, 1.3fr) 42px 52px minmax(90px, 0.9fr) 52px;
  column-gap: 10px;
  row-gap: 0;
  padding: 10px 12px;
  font-size: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  align-items: start;
  min-width: 1100px;
  box-sizing: border-box;
}

.cloak-access-row.with-user {
  grid-template-columns: 106px 72px minmax(80px, 0.7fr) minmax(220px, 1.4fr) minmax(180px, 1.3fr) 42px 52px minmax(90px, 0.9fr) 52px;
  min-width: 1240px;
}

.cloak-access-row > * {
  min-width: 0;
  max-width: 100%;
}

.cloak-access-row-head {
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  font-weight: 600;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
  z-index: 2;
}

.cloak-access-row-head > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloak-access-time,
.cloak-access-ip,
.cloak-access-cc,
.cloak-access-user,
.cloak-access-device {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.cloak-access-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: normal;
  word-break: break-all;
  overflow: visible;
  text-overflow: unset;
}

.cloak-access-device {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  color: var(--text-secondary);
}

.cloak-access-user,
.cloak-access-slug-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloak-access-slug {
  border: 0;
  background: none;
  color: var(--primary-hover);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloak-access-slug:hover { text-decoration: underline; }

.cloak-access-result {
  display: flex;
  align-items: center;
}

.cloak-access-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.cloak-access-tag.is-real {
  background: color-mix(in srgb, #16a34a 14%, var(--bg));
  color: #15803d;
}

.cloak-access-tag.is-review {
  background: color-mix(in srgb, #64748b 16%, var(--bg));
  color: #475569;
  border: 1px solid color-mix(in srgb, #94a3b8 45%, transparent);
}

.cloak-access-reason {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloak-access-card .list-pager {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--surface);
  z-index: 1;
}

@media (max-width: 900px) {
  .cloak-access-filters {
    grid-template-columns: 1fr 1fr;
  }
  .cloak-access-filters .cloak-filter-actions {
    grid-column: 1 / -1;
  }
}

.stats-summary-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

.cloak-stats-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.cloak-stats-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cloak-stats-toolbar input[type="date"],
.cloak-stats-toolbar select {
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
  font-size: 13px;
}

.cloak-stats-global {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.cloak-stats-global-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
}
.cloak-stats-global-main b {
  font-size: 18px;
  color: var(--text);
}
.cloak-stats-global-main em {
  font-style: normal;
  color: var(--text-secondary);
}
.cloak-stats-global-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cloak-stats-global-chip {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text-secondary);
}
.cloak-pass-issues {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
}
.cloak-pass-issue {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cloak-pass-issue-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cloak-pass-issue-head code {
  font-size: 13px;
}
.cloak-pass-issue-head em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-secondary);
}
.cloak-pass-issue-head em.is-reject {
  color: #f59e0b;
}
.cloak-pass-issue-reason {
  font-size: 12px;
  color: var(--text-secondary);
}

button.cloak-country-row {
  width: 100%;
  display: grid;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 6px 0;
}

.cloak-stat-card {
  background: var(--surface);
  border: none;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  box-shadow: var(--shadow);
}

.cloak-stat-card span {
  font-size: 12px;
  color: var(--text-secondary);
}

.cloak-stat-card b {
  font-size: 24px;
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cloak-stat-card small {
  font-size: 11px;
  color: var(--text-secondary);
}

.cloak-stat-card.is-pass {
  background: var(--primary);
}
.cloak-stat-card.is-reject {
  background: var(--sidebar);
}
.cloak-stat-card.is-pass span,
.cloak-stat-card.is-pass b,
.cloak-stat-card.is-pass small,
.cloak-stat-card.is-reject span,
.cloak-stat-card.is-reject b,
.cloak-stat-card.is-reject small {
  color: #fff;
}
.event-stats-cards .stat-mini-card:nth-child(4n+2) {
  background: var(--primary);
}
.event-stats-cards .stat-mini-card:nth-child(4n+3) {
  background: var(--sidebar);
}
.event-stats-cards .stat-mini-card:nth-child(4n+2) span,
.event-stats-cards .stat-mini-card:nth-child(4n+2) b,
.event-stats-cards .stat-mini-card:nth-child(4n+2) .event-stats-card-sub,
.event-stats-cards .stat-mini-card:nth-child(4n+2) .event-stats-card-money,
.event-stats-cards .stat-mini-card:nth-child(4n+3) span,
.event-stats-cards .stat-mini-card:nth-child(4n+3) b,
.event-stats-cards .stat-mini-card:nth-child(4n+3) .event-stats-card-sub,
.event-stats-cards .stat-mini-card:nth-child(4n+3) .event-stats-card-money {
  color: #fff;
}

.cloak-stats-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 12%, var(--bg));
  border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border));
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

.cloak-stats-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.25fr);
  gap: 12px;
  margin-bottom: 12px;
}

.cloak-stats-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.cloak-stats-panel-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.cloak-stats-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.cloak-stats-country {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}

.cloak-country-row {
  grid-template-columns: 22px minmax(92px, 1.1fr) minmax(0, 1fr) auto;
}

.cloak-country-row .cloak-rank-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: normal;
}

.cloak-country-row .cloak-rank-name strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cloak-country-row .cloak-rank-name em {
  margin-left: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.cloak-stats-bars,
.cloak-stats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cloak-trend-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 220px;
  padding: 8px 4px 0;
}

.cloak-trend-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cloak-trend-val {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}

.cloak-trend-bars {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.cloak-trend-bar {
  width: 56%;
  min-width: 14px;
  max-width: 36px;
  border-radius: 8px 8px 4px 4px;
  background: color-mix(in srgb, var(--primary) 55%, #9dceb8);
  position: relative;
  overflow: hidden;
  min-height: 2px;
}

.cloak-trend-bar-real {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, #16a34a 75%, var(--primary));
  border-radius: 0 0 4px 4px;
}

.cloak-trend-date {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.cloak-trend-split {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.cloak-trend-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-secondary);
}

.cloak-trend-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cloak-trend-leg-item i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.cloak-trend-leg-item i.is-total {
  background: color-mix(in srgb, var(--primary) 55%, #9dceb8);
}

.cloak-trend-leg-item i.is-real {
  background: color-mix(in srgb, #16a34a 75%, var(--primary));
}

.cloak-bar-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.cloak-bar-date {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.cloak-bar-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, var(--bg));
  overflow: hidden;
}

.cloak-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  min-width: 0;
}

.cloak-bar-val {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cloak-bar-val small {
  margin-left: 4px;
  font-weight: 500;
  color: var(--text-secondary);
}

.cloak-stats-rank {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cloak-rank-row {
  display: grid;
  grid-template-columns: 22px 48px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.cloak-rank-row:last-child { border-bottom: none; }

.cloak-rank-row-wide {
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
}

.cloak-rank-row-wide .cloak-rank-name { grid-column: 2; }
.cloak-rank-row-wide b { grid-column: 3; grid-row: 1; }
.cloak-rank-row-wide .cloak-rank-meta {
  grid-column: 2 / 4;
  grid-row: 2;
  font-size: 11px;
  color: var(--text-secondary);
}

.cloak-rank-idx {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.cloak-rank-name {
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloak-rank-name em {
  font-style: normal;
  font-weight: 500;
  color: var(--text);
  margin-left: 6px;
}

.cloak-rank-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, var(--bg));
  overflow: hidden;
}

.cloak-rank-fill {
  height: 100%;
  background: color-mix(in srgb, var(--primary) 75%, #1aa36a);
  border-radius: 999px;
}

.cloak-rank-row b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.cloak-hot-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cloak-hot-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  color: inherit;
}

.cloak-hot-row:last-child { border-bottom: none; }

.cloak-hot-row:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--bg));
}

.cloak-hot-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cloak-hot-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.cloak-hot-title .cloak-slug {
  color: var(--primary-hover);
  font-weight: 600;
}

.cloak-hot-title em {
  font-style: normal;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloak-hot-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.cloak-hot-row b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.cloak-hot-go {
  font-size: 11px;
  color: var(--primary-hover);
  font-weight: 600;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .cloak-stats-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cloak-stats-grid { grid-template-columns: 1fr; }
  .cloak-trend-chart { min-height: 200px; }
}

.stat-mini-card {
  background: var(--surface);
  border: none;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow);
}

.stat-mini-card span {
  font-size: 12px;
  color: var(--text-secondary);
}

.stat-mini-card b {
  font-size: 22px;
  color: var(--primary-hover);
}

.cloak-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.view-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.view-page.hidden { display: none !important; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.page-head h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--text);
}

.page-desc {
  display: none;
}

.page-card {
  background: var(--surface);
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.build-type-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  grid-column: 1 / -1;
  background: #fff;
  padding: 6px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.build-type-tab {
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.build-type-tab.active {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}

.build-panel.hidden { display: none !important; }

/* Cloak filter + table */
.cloak-filter-bar {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) repeat(6, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.cloak-filter-bar .cloak-filter-grow {
  min-width: 0;
}

.cloak-filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 0;
}

.cloak-filter-bar input,
.cloak-filter-bar select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.cloak-filter-bar input[type="date"] {
  min-width: 0;
  padding: 0 8px;
}

.cloak-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cloak-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cloak-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 960px;
}

.cloak-data-table th {
  text-align: left;
  padding: 10px 12px;
  background: #fafafa;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.cloak-data-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  max-width: 220px;
  word-break: break-all;
}

.cloak-data-table tr:hover td { background: #fffbf7; }

.cloak-table-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 28px !important;
}

.cloak-name-cell {
  font-weight: 600;
  color: var(--text);
}

.cloak-mode-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: 650;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.cloak-mode-tag.is-cloak {
  background: color-mix(in srgb, var(--primary) 14%, #fff);
  color: #0e7f51;
}
.cloak-mode-tag.is-green {
  background: #ecfdf5;
  color: #047857;
}
.cloak-mode-tag.is-full {
  background: #eff6ff;
  color: #1d4ed8;
}
.cloak-mode-tag.is-review {
  background: #fff7ed;
  color: #c2410c;
}
.cloak-mode-tag.is-direct {
  background: #f3f4f6;
  color: #374151;
}
.cloak-mode-tag.is-block {
  background: #fef2f2;
  color: #b91c1c;
}

.cloak-type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.cloak-type-pill.solo { background: #ecfdf5; color: #047857; }
.cloak-type-pill.build { background: #eff6ff; color: #1d4ed8; }
.cloak-trial-pill {
  display: inline-block;
  margin: 4px 0 0;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fff7ed;
  color: #c2410c;
  font-weight: 600;
}

.cloak-op-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cloak-op-links button {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.cloak-op-links button.danger { color: var(--error); }

.cloak-url-cell {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.cloak-domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.cloak-domain-row:last-child { border-bottom: none; }

.history-list-page {
  max-height: none;
}

.cloak-mobile-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  background: #fff;
}

.cloak-mobile-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.cloak-mobile-card h3 {
  font-size: 14px;
  font-weight: 700;
}

.cloak-mobile-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  margin-top: 6px;
}

.cloak-mobile-row span:first-child {
  color: var(--text-secondary);
  flex-shrink: 0;
  width: 64px;
}

.cloak-mobile-row span:last-child {
  word-break: break-all;
  color: var(--text);
}

.mobile-tabbar {
  display: none;
}

.stat-badge {
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  min-width: 0;
}

.brand-icon {
  width: 44px;
  height: 44px;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
}

.brand h1 { font-size: 18px; font-weight: 600; }
.brand p { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

.stat-badge {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--primary-soft);
  color: var(--primary-hover);
  white-space: nowrap;
}

.stat-badge b {
  font-size: 15px;
  margin: 0 2px;
}

.env-badge {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #f3f4f6;
  color: var(--text-secondary);
  white-space: nowrap;
}

.env-badge.ready { background: #ecfdf5; color: var(--success); }
.env-badge.error { background: #fef2f2; color: var(--error); }

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.header-nav-recharge {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: 600;
}

.header-nav-recharge b {
  color: var(--primary-hover);
}

.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }

.login-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text);
  color-scheme: light;
  background: #F2F2F2;
}

.login-watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}
.login-watermark img {
  width: min(92vw, 720px);
  height: auto;
  opacity: .07;
  user-select: none;
}

.login-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 48px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-logo {
  width: 196px;
  height: auto;
  margin-bottom: 28px;
  display: block;
}

.login-kicker {
  margin: 0 0 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #404040;
  text-transform: uppercase;
}

.login-card {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.login-tabs {
  display: flex;
  gap: 0;
  margin: 0 auto 22px;
  padding: 0;
  width: 100%;
  max-width: 220px;
  border-bottom: 1px solid #C0C0C0;
  background: none;
  border-radius: 0;
}
.login-tab {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #8a8a8a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}
.login-tab.active {
  background: none;
  color: #404040;
  box-shadow: none;
}
.login-tab.active::after {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -1px;
  height: 2px;
  background: #0E7F51;
}

.login-card .field { text-align: left; margin-bottom: 14px; }
.login-card .field span { display: none; }
.login-card .field input {
  height: 50px;
  font-size: 15px;
  border-radius: 12px;
  border: none;
  background: #F2F2F2;
  color: #404040;
  padding: 0 16px;
  width: 100%;
}
.login-card .field input::placeholder { color: #9a9a9a; }
.login-card .field input:focus {
  border-color: transparent;
  background: #F2F2F2;
  box-shadow: 0 0 0 3px rgba(14,127,81,.16);
  outline: none;
}
.login-card .field input:-webkit-autofill,
.login-card .field input:-webkit-autofill:hover,
.login-card .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #404040;
  caret-color: #404040;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-out;
}

.login-pass { position: relative; display: block; }
.login-pass input { padding-right: 48px; }
.login-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238a8a8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 10s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6z'/%3E%3Ccircle cx='10' cy='10' r='2.4'/%3E%3C/svg%3E");
}
.login-eye.is-on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%230E7F51' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 10s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6z'/%3E%3Ccircle cx='10' cy='10' r='2.4'/%3E%3Cpath d='M3 17 17 3'/%3E%3C/svg%3E");
}

.login-error { color: #dc2626; font-size: 13px; margin: 0 0 12px; text-align: center; }
.login-error.hidden { display: none; }

.login-card .btn-block {
  height: 50px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 6px;
  border: none;
  border-radius: 12px;
  background: #0E7F51;
  color: #fff;
  width: 100%;
  letter-spacing: .02em;
}
.login-card .btn-block:hover:not(:disabled) {
  background: #0b6a44;
}

.login-forgot {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 0;
  border: none;
  background: none;
  color: #3a3a3a;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.login-forgot:hover { color: #404040; }
.login-forgot-tip {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  color: #6e6e6e;
}
.login-forgot-tip.hidden { display: none; }
.login-code-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.login-code-row.hidden { display: none; }
.login-code-row input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #C0C0C0;
  border-radius: 0;
  background: #fff;
  color: #404040;
  font-size: 14px;
}
.login-code-row input:focus {
  outline: none;
  border-color: #404040;
}
.login-code-btn {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 12px;
  border: 1px solid #C0C0C0;
  background: #fff;
  color: #404040;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.login-code-btn:disabled { color: #9a9a9a; cursor: default; }
.mail-code-row {
  display: flex;
  gap: 8px;
}
.mail-code-row input { flex: 1; min-width: 0; }
.mail-code-row .btn { white-space: nowrap; }
.mail-campaign-card { max-width: 720px; }
.mail-campaign-card .modal-field { margin-bottom: 12px; }
.mail-campaign-body {
  width: 100%;
  min-height: 220px;
  resize: vertical;
}
.mail-campaign-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
}

@media (max-width: 480px) {
  .login-logo { width: 160px; }
  .login-wrap { padding: 36px 20px 48px; }
}

.invite-account-entry {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.invite-account-entry:hover { text-decoration: underline; }

.invite-rule {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 16px;
}
.invite-code-box,
.invite-link-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-muted, #fafaf9);
}
.invite-label {
  width: 100%;
  font-size: 11px;
  color: var(--text-secondary);
}
.invite-code-box code {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
}
.invite-link-text {
  flex: 1 1 100%;
  font-size: 12px;
  word-break: break-all;
  color: var(--text);
}
.invite-stats {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 4px 0 12px;
}
.invite-list {
  max-height: 220px;
  overflow: auto;
}
.invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.invite-row:last-child { border-bottom: none; }
.invite-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.invite-row-main strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-row-time {
  font-size: 11px;
  color: var(--text-secondary);
}
.invite-row-status {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
}
.invite-row-status.ok { color: #16a34a; }
.invite-row-status.pending { color: #ca8a04; }

.queue-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
}

.queue-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; }

.queue-stats {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

.queue-stats b { color: var(--text); font-size: 18px; margin-left: 4px; }

.history-search-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 16px;
}
.history-search-field {
  display: block;
  margin: 0;
}
.history-search-field input {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: #F2F2F2;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: box-shadow .15s ease;
}
.history-search-field input::placeholder {
  color: #9a9a9a;
}
.history-search-field input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(14,127,81,.16);
}
.history-search-field-page {
  margin: 0 0 14px;
}
.history-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.history-filter-btn {
  appearance: none;
  border: 1px solid rgba(18, 28, 24, 0.12);
  background: #f4f7f5;
  color: #3a4a42;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.2;
}
.history-filter-btn:hover {
  border-color: rgba(14, 127, 81, 0.35);
  color: #0e7f51;
}
.history-filter-btn.is-active {
  background: #0e7f51;
  border-color: #0e7f51;
  color: #fff;
}

.field input[type="file"] {
  display: none;
}

.material-upload {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.material-upload-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: #f9fafb;
  cursor: pointer;
  text-align: left;
}

.material-upload-btn:hover {
  border-color: var(--text-secondary);
}

.material-upload-preview {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 12px;
}

.material-upload-preview img,
.material-upload-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-upload-text {
  font-size: 13px;
  color: var(--text);
}

.material-upload.is-drag .material-upload-btn {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.material-html-list > li:not(.history-empty) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.material-html-list > li:last-child {
  border-bottom: none;
}

.material-html-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .material-html-list > li:not(.history-empty) {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .material-html-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

#materialHtmlForm .form-actions {
  margin-top: 16px;
  padding-top: 16px;
}

.site-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

@media (max-width: 720px) {
  .site-social-grid {
    grid-template-columns: 1fr;
  }
}

.upload-field {
  display: flex;
  align-items: center;
  gap: 12px;
}

.upload-preview {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 1px dashed var(--border);
  background: #f9fafb;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.upload-preview.has-image {
  border-style: solid;
  background: #fff;
}

.upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-placeholder {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  padding: 4px;
  line-height: 1.3;
}

.upload-preview.has-image .upload-placeholder { display: none; }

.upload-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-xs {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.upload-clear { color: var(--error); }

.timezone-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.timezone-field input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

/* 必须压过后面的 .field select { width:100% }，否则会把左侧输入挤没 */
.field .timezone-quick,
.timezone-field .timezone-quick {
  width: 140px;
  max-width: 42%;
  flex: 0 0 140px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  color: var(--text-secondary);
  cursor: pointer;
}

.field .timezone-quick:focus,
.timezone-field .timezone-quick:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,127,81,.12);
  color: var(--text);
}

.screenshots-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.screenshots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 0;
}

.screenshots-grid:empty::before {
  content: '最多 5 张，用于落地页轮播';
  font-size: 12px;
  color: var(--text-secondary);
}

.screenshot-item {
  position: relative;
  width: 80px;
  height: 142px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f9fafb;
}

.screenshot-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screenshot-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screenshot-remove:hover { background: rgba(0,0,0,.75); }

.result-link-copy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.result-link-copy a {
  flex: 1;
  min-width: 0;
  color: var(--primary);
}

.btn-copy {
  flex-shrink: 0;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
}

.btn-copy:hover { background: #f9fafb; color: var(--text); }
.btn-copy.is-copied {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #111827;
  color: #fff;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 10050;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto auto auto;
  gap: 16px 20px;
  align-items: start;
}

.main > .build-type-tabs {
  grid-column: 1 / -1;
  grid-row: 1;
}

.main > .feature-guide-card {
  grid-column: 1 / -1;
  grid-row: 2;
}

.main > .form-card:not(.adjust-form-card),
.main > .adjust-form-card {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
}

.main > .side-panel {
  grid-column: 2;
  grid-row: 3;
}

.form-card, .result-card, .history-card {
  background: var(--surface);
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.form-card { padding: 28px; }

.adjust-form-card {
  border-color: transparent;
  box-shadow: var(--shadow);
}

.adjust-form-card .form-section h2 {
  color: var(--text);
}

.adjust-intro { margin-bottom: 12px; }

.adjust-token-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.adjust-token-header h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}

.adjust-bridge-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.adjust-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid #dbe3f0;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  font: inherit;
  color: inherit;
}

.adjust-mode-card:hover {
  border-color: #93c5fd;
  background: #f0f7ff;
}

.adjust-mode-card.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.adjust-mode-card.is-active[data-adjust-mode="fugui"],
.adjust-mode-card.is-active[data-af-mode="fugui"] {
  border-color: #0d9488;
  background: #f0fdfa;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .14);
}

.adjust-mode-card.is-active[data-adjust-mode="tt"],
.adjust-mode-card.is-active[data-af-mode="tt"] {
  border-color: #c2410c;
  background: #fff7ed;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, .12);
}

.adjust-mode-card.is-active[data-adjust-mode="come"],
.adjust-mode-card.is-active[data-af-mode="come"] {
  border-color: #7c3aed;
  background: #f5f3ff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.adjust-mode-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}

.adjust-mode-card.is-active .adjust-mode-kicker {
  color: #1d4ed8;
}

.adjust-mode-card.is-active[data-adjust-mode="fugui"] .adjust-mode-kicker,
.adjust-mode-card.is-active[data-af-mode="fugui"] .adjust-mode-kicker {
  color: #0f766e;
}

.adjust-mode-card.is-active[data-adjust-mode="tt"] .adjust-mode-kicker,
.adjust-mode-card.is-active[data-af-mode="tt"] .adjust-mode-kicker {
  color: #c2410c;
}

.adjust-mode-card.is-active[data-adjust-mode="come"] .adjust-mode-kicker,
.adjust-mode-card.is-active[data-af-mode="come"] .adjust-mode-kicker {
  color: #7c3aed;
}

.af-product-mode {
  margin-top: 4px;
  margin-bottom: 12px;
}

.adjust-mode-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.adjust-mode-desc {
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.adjust-mode-desc code {
  font-size: 11px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(15, 23, 42, .06);
}

.adjust-mode-hint {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.adjust-mode-hint[data-mode="afun"] {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #115e59;
}

.adjust-mode-hint strong {
  font-weight: 700;
}

.adjust-token-bulk {
  margin-bottom: 14px;
}

.adjust-token-bulk-input {
  width: 100%;
  min-height: 108px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.55;
  font-family: ui-monospace, Consolas, monospace;
  resize: vertical;
  box-sizing: border-box;
}

.adjust-token-bulk-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,127,81,.12);
}

.btn-adjust {
  background: #1e40af;
}

.btn-adjust:hover:not(:disabled) {
  background: #1e3a8a;
}

.telegram-bind-card {
  margin: 0 0 16px;
  padding: 14px 14px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #fafafa;
}
.cloak-notify-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cloak-notify-block h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.cloak-notify-cmd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.cloak-notify-cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}
.cloak-notify-cmd code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.cloak-pass-msg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.cloak-pass-msg-field > span {
  font-size: 13px;
  color: var(--muted);
}
.cloak-pass-msg-field textarea {
  width: 100%;
  min-height: 220px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
}
.cloak-pass-msg-preview {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.5;
  max-height: 360px;
  overflow: auto;
}
.cloak-pass-notify-row,
.cloak-pass-notify-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cloak-pass-notify-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}
.cloak-pass-notify-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.cloak-pass-notify-row input[type="time"],
.cloak-pass-user-toolbar input[type="search"] {
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
}
.cloak-pass-user-pick {
  margin-top: 12px;
}
.cloak-pass-user-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cloak-pass-user-toolbar input[type="search"] {
  flex: 1;
  min-width: 160px;
}
.cloak-pass-user-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  max-height: 220px;
  overflow: auto;
  margin-top: 8px;
}
.cloak-notify-env-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cloak-notify-env-line {
  flex: 1;
  min-width: 200px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 12px;
  word-break: break-all;
}
.cloak-notify-ops {
  padding: 14px;
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 10px;
  background: #f8fafc;
}
.cloak-notify-status {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
}
.telegram-bind-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.telegram-bind-steps {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary, #64748b);
}
.telegram-bind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 8px;
}
.telegram-user-field {
  flex: 1 1 200px;
  min-width: 160px;
  margin: 0;
}
.telegram-bind-card .mono a {
  word-break: break-all;
}

.page-card-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}

.landing-apk-opts,
.landing-pwa-opts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.landing-apk-opts.hidden,
.landing-pwa-opts.hidden {
  display: none;
}

.landing-adjust-s2s {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface-2, #fafafa);
}
.landing-adjust-s2s > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #111);
  list-style: none;
}
.landing-adjust-s2s > summary::-webkit-details-marker { display: none; }
.landing-adjust-s2s > summary::before {
  content: '▸ ';
  color: var(--accent, #0E7F51);
}
.landing-adjust-s2s[open] > summary::before { content: '▾ '; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  font-size: 13px;
  color: var(--text-secondary);
}

.checkbox-row input {
  width: 16px;
  height: 16px;
}

.adjust-landing-toggle {
  margin-bottom: 0;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.adjust-landing-toggle input {
  width: 16px;
  height: 16px;
}

.adjust-landing-toggle input {
  width: 16px;
  height: 16px;
}

.adjust-extras-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.adjust-icon-field {
  margin: 0;
}

.adjust-icon-upload {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f9fafb;
  align-items: center;
}

.adjust-icon-upload .upload-preview {
  width: 80px;
  height: 80px;
  border-radius: 18px;
}

.adjust-icon-upload .upload-actions {
  flex: 1;
  min-width: 0;
}

.adjust-sandbox-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.adjust-sandbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.adjust-sandbox-labels {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.adjust-sandbox-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.adjust-sandbox-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.adjust-sandbox-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.adjust-sandbox-desc strong {
  color: var(--text);
  font-weight: 600;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  width: 48px;
  height: 28px;
  background: #d1d5db;
  border-radius: 999px;
  transition: background .2s;
  position: relative;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.toggle-switch input:checked + .toggle-track {
  background: var(--warning);
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-track {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.result-share {
  margin-top: 16px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f9fafb;
  overflow: hidden;
}

.result-share + .result-share {
  margin-top: 8px;
}

.result-share.hidden { display: none; }

.result-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.result-share-head span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.result-share pre {
  margin: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  max-height: 220px;
  overflow-y: auto;
}

.result-share-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.result-share-meta.hidden { display: none; }

.result-share-meta strong {
  color: var(--text);
  font-weight: 600;
}

.history-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eff6ff;
  color: #1e40af;
  margin-left: 4px;
}

.form-section + .form-section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.form-section h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.form-grid > .full {
  grid-column: 1 / -1;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field.is-disabled { opacity: 0.45; }

.adjust-token-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
}

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

@media (max-width: 560px) {
  .adjust-token-grid { grid-template-columns: 1fr; }
}

.adjust-event-block {
  margin-top: 16px;
}

.adjust-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.adjust-event-head > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.adjust-event-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adjust-event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  gap: 10px;
  align-items: center;
}

.adjust-event-row input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

.adjust-event-row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,127,81,.12);
}

.adjust-event-del {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all .15s;
}

.adjust-event-del:hover {
  border-color: #ef4444;
  color: #ef4444;
}

@media (max-width: 560px) {
  .adjust-event-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 8px; }
}

.field span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.field em { color: var(--error); font-style: normal; }

.field-note {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.adjust-package-notice {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  font-size: 12px;
  color: #1e3a8a;
  line-height: 1.55;
}

.adjust-package-notice strong {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: #1e40af;
}

.adjust-package-notice p {
  margin: 0 0 6px;
}

.adjust-package-notice ul {
  margin: 0 0 6px;
  padding-left: 18px;
}

.adjust-package-notice li {
  margin-bottom: 2px;
}

.adjust-package-notice code {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.7);
}

.adjust-package-notice-tip {
  margin-bottom: 0 !important;
  color: #2563eb;
}

.field input,
.field select {
  width: 100%;
  max-width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,127,81,.12);
}

.field input::placeholder { color: #9ca3af; }

.field .cloak-choice input,
.field .cloak-choice-grid input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
}

.field-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.5;
}

.result-links {
  margin: 14px 0;
  text-align: left;
  font-size: 12px;
}

.result-link-row {
  margin-bottom: 8px;
  word-break: break-all;
}

.result-link-row span {
  display: block;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.result-link-row a { color: var(--primary); }

.form-actions {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn {
  height: 42px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, opacity .15s;
  text-decoration: none;
}

.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid #C0C0C0;
}

.btn-ghost:hover { background: #F2F2F2; }

.btn-block { width: 100%; margin-top: 16px; }

.side-panel { display: flex; flex-direction: column; gap: 16px; }

.result-card {
  position: relative;
  padding: 24px;
  text-align: center;
}

.result-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #f3f4f6;
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-dismiss:hover {
  background: #e5e7eb;
  color: var(--text);
}

.result-card.hidden { display: none; }

.result-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.result-icon.success { background: #ecfdf5; color: var(--success); }
.result-icon.error { background: #fef2f2; color: var(--error); }
.result-icon.building { background: #eff6ff; color: var(--primary); }

.result-card h3 { font-size: 16px; margin-bottom: 6px; }
.result-card p { font-size: 13px; color: var(--text-secondary); word-break: break-word; }

.history-card { padding: 20px; }

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.history-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.history-tab {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.history-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.history-tab-panel.hidden { display: none; }

.history-header h3 { font-size: 14px; font-weight: 600; }

.btn-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-secondary);
}

.btn-icon:hover { background: #f9fafb; }

.history-list { list-style: none; }

.history-empty {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  padding: 20px 0;
}

.history-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.history-item:last-child { border-bottom: none; }

.history-item-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.history-info { min-width: 0; flex: 1; }
.history-info .name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.history-info .meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

.history-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.history-title-row .name {
  flex: 1;
}

.history-del {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: #dc2626;
  cursor: pointer;
  line-height: 1.2;
}

.history-del:hover {
  color: #b91c1c;
  text-decoration: underline;
}

.history-cancel {
  border: 1px solid #fecaca;
  background: #fff;
  color: #dc2626;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.history-cancel:hover {
  background: #fef2f2;
}

.btn-danger-ghost {
  border: 1px solid #fecaca;
  background: #fff;
  color: #dc2626;
}

.btn-danger-ghost:hover {
  background: #fef2f2;
}

.history-share-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.history-share-collapse {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

.history-share-collapse:hover {
  color: var(--text);
  text-decoration: underline;
}

.history-ch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.35;
}

.history-ch-meta b {
  font-weight: 600;
  color: var(--text);
}

.history-h5-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.history-error {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #b42318;
  word-break: break-all;
}

.history-copy.is-active {
  font-weight: 600;
  text-decoration: underline;
}

.history-share-panel {
  margin-top: 10px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  border: none;
}

.history-share-panel.hidden { display: none !important; }

.history-share-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.history-share-link-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}

.history-share-link-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.history-share-link-copy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.history-share-link-copy a {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  word-break: break-all;
  line-height: 1.4;
}

.history-share-link-copy .btn-copy {
  flex-shrink: 0;
}

.history-share-card {
  margin-top: 8px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f9fafb;
  overflow: hidden;
}

.history-share-card .history-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.history-share-card .history-share-head span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.history-share-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.history-share-meta strong {
  color: var(--text);
  font-weight: 600;
}

.history-share-pre {
  margin: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  max-height: 220px;
  overflow-y: auto;
  background: #f9fafb;
}

.history-share-empty {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.success { background: var(--success); }
.status-dot.failed { background: var(--error); }
.status-dot.building { background: var(--primary); animation: pulse 1.2s infinite; }

.history-download {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  flex-shrink: 0;
}

.history-copy {
  font-size: 12px;
  color: var(--primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.history-copy:hover { text-decoration: underline; }

.history-clone {
  font-size: 12px;
  color: var(--primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.history-clone:hover { text-decoration: underline; }

#resultCloneBtn {
  margin-top: 8px;
  color: #0d9488;
  border-color: rgba(13, 148, 136, 0.35);
}

#resultCloneBtn:hover {
  background: rgba(13, 148, 136, 0.06);
}

.history-download:hover { text-decoration: underline; }

.history-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.history-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.history-billed {
  font-size: 11px;
  color: var(--success);
  white-space: nowrap;
}

.history-progress {
  margin-top: 6px;
}

.history-progress-track {
  position: relative;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.history-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width .4s ease;
}

.history-progress-track.indeterminate .history-progress-fill {
  position: absolute;
  width: 40%;
  left: 0;
  transition: none;
  animation: indeterminate-slide 1.2s infinite ease-in-out;
}

.history-progress-label {
  display: block;
  font-size: 10px;
  color: var(--primary);
  margin-top: 3px;
}

.build-progress {
  margin: 14px 0 4px;
  text-align: left;
}

.build-progress-track {
  position: relative;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.build-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #0E7F51, #1aa36a);
  border-radius: 3px;
  transition: width .4s ease;
}

.build-progress.indeterminate .build-progress-fill {
  position: absolute;
  width: 40%;
  left: 0;
  transition: none;
  animation: indeterminate-slide 1.2s infinite ease-in-out;
}

@keyframes indeterminate-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.build-progress-text {
  font-size: 12px;
  color: var(--primary);
  margin-top: 6px;
}
.result-refresh-status {
  margin: 10px 0 2px;
  width: 100%;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.hidden { display: none !important; }

.cloak-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.cloak-section-head h2 {
  margin: 0;
}

.cloak-enable-row {
  font-size: 13px;
}

.cloak-intro {
  margin-bottom: 12px;
}

.cloak-intro a {
  color: var(--primary);
}

.cloak-fields {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.cloak-settings-details {
  margin-top: 14px;
}

.cloak-settings-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.cloak-domains-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cloak-domains-list-card .cloak-domains-list {
  margin-top: 0;
}

.cloak-domain-row {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}

.cloak-domain-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

.cloak-domain-status.ok {
  background: #dcfce7;
  color: #166534;
}

.cloak-domain-status.pending {
  background: #fef3c7;
  color: #92400e;
}

.cloak-domain-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  justify-content: flex-end;
}

.cloak-domains-empty {
  margin: 0;
  padding: 28px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.cloak-mode-hint {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.cloak-mode-hint:empty { display: none; }

[data-cloak-countries],
[data-cloak-lang],
[data-cloak-ad-platforms] {
  width: 100%;
  min-width: 0;
}

.cloak-country-filter {
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  height: 32px;
}

.cloak-picker-summary {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.cloak-country-grid,
.cloak-lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 148px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--border) 18%, var(--bg));
}

.cloak-country-chip,
.cloak-lang-chip,
.cloak-platform-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  user-select: none;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.cloak-country-chip input,
.cloak-lang-chip input,
.cloak-platform-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cloak-country-chip.is-on,
.cloak-country-chip:has(input:checked),
.cloak-lang-chip:has(input:checked),
.cloak-platform-chip:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--bg));
  color: var(--text);
  font-weight: 600;
}

.cloak-quick-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}

.cloak-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.cloak-toggle:hover {
  color: var(--text);
}

.cloak-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cloak-toggle:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg));
  color: var(--text);
}

.cloak-full-bl-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--border) 22%, var(--bg));
}

.cloak-full-bl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.cloak-full-bl-panel textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
}

.cloak-regions-title {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.cloak-settings-details {
  margin-top: 10px;
}

.cloak-settings-details > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  list-style: none;
}

.cloak-settings-details > summary::-webkit-details-marker { display: none; }
.cloak-settings-details > summary::before {
  content: '▸ ';
  color: var(--primary);
}
.cloak-settings-details[open] > summary::before { content: '▾ '; }

.cloak-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloak-country-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.cloak-ad-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cloak-ad-params-block {
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--border) 14%, var(--bg));
}

.cloak-ad-params-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.cloak-ad-platform-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cloak-ad-platform-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  box-sizing: border-box;
}

.cloak-ad-platform-row.is-on {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--bg));
}

/* 覆盖 .field input { width:100%; height:40px }，避免勾选框把内容顶到右侧 */
.cloak-ad-params-block .cloak-ad-platform-row > input[type="checkbox"] {
  position: static;
  opacity: 1;
  pointer-events: auto;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  max-width: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 16px;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  background: transparent;
  accent-color: var(--primary);
  cursor: pointer;
}

.cloak-ad-platform-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.cloak-ad-platform-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.cloak-ad-platform-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cloak-ad-key,
.cloak-ad-chip code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--border) 35%, var(--bg));
  color: var(--text-secondary);
}

.cloak-ad-platform-status {
  font-size: 11px;
  color: var(--text-secondary);
  margin: -4px 0 0;
}

.cloak-ad-custom {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.cloak-ad-custom-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.cloak-ad-custom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 8px;
  align-items: center;
}

.cloak-ad-custom-empty {
  font-size: 12px;
  color: var(--muted);
}

.cloak-ad-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text);
}

.cloak-ad-chip:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.cloak-ad-custom-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cloak-ad-params-block .cloak-ad-custom-add input[type="text"] {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  height: 34px !important;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
  box-shadow: none;
}

.cloak-ad-params-block .cloak-ad-custom-add input[type="text"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 127, 81, 0.12);
}

.cloak-settings-grid {
  margin-top: 8px;
  gap: 10px !important;
}

.cloak-settings-grid .field > span:first-child {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.cloak-settings-grid .field-note {
  font-size: 11px;
  margin-top: 2px;
}

.cloak-settings-grid textarea {
  min-height: 64px;
  font-size: 12px;
  padding: 8px;
}

.cloak-settings-grid input[type="number"],
.cloak-settings-grid input[type="text"] {
  height: 32px;
  padding: 4px 8px;
  font-size: 12px;
}

/* 高级设置：开关项紧凑横排 */
.cloak-settings-grid > label.field:not(.full) {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  min-height: 0;
}

.cloak-settings-grid > label.field:not(.full) .checkbox-row {
  height: auto;
  min-height: 0;
  margin: 0;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.cloak-settings-grid > label.field:not(.full) .checkbox-row input {
  width: 14px;
  height: 14px;
}

/* 语言：允许/禁止并排 */
.cloak-lang-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px) {
  .cloak-lang-pair {
    grid-template-columns: 1fr;
  }
}

.cloak-lang-pair .field {
  margin: 0;
}

.cloak-lang-pair .field > span:first-child {
  font-size: 12px;
  margin-bottom: 4px;
}

.cloak-section .field-note,
.cloak-edit-section .field-note {
  font-size: 11px;
  line-height: 1.4;
}

.cloak-regions-cloak .field > span:first-child,
.cloak-regions-block .field > span:first-child {
  font-size: 12px;
  font-weight: 500;
}

.cloak-domain-pool-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #dbeafe;
  color: #1d4ed8;
  width: fit-content;
}

.cloak-domain-pool-tag.off {
  background: #f3f4f6;
  color: #6b7280;
}

.cloak-domain-modes {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #eef1f4;
  background: color-mix(in srgb, var(--border) 40%, var(--bg));
  box-sizing: border-box;
}
.field.cloak-domain-field > .cloak-domain-modes {
  width: fit-content;
  max-width: 100%;
}
.cloak-domain-mode-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 6px 12px !important;
  border: 0 !important;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  box-shadow: none !important;
  user-select: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.cloak-domain-mode-btn.is-on,
.cloak-domain-mode-btn:has(input:checked) {
  background: var(--bg, #fff);
  color: var(--text, #111827);
}
/* 必须压过 .field input 的 width/height，否则会变成竖排大输入框 */
.field .cloak-domain-mode-btn input,
.cloak-domain-mode-btn input,
.field.cloak-domain-field .cloak-domain-modes input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
}
.cloak-domain-pool-row,
.cloak-domain-own-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.cloak-domain-own-row {
  grid-template-columns: 1fr;
}
.cloak-domain-pool-row.hidden,
.cloak-domain-own-row.hidden {
  display: none;
}
.cloak-domain-pool-row select,
.cloak-domain-pool-row input,
.cloak-domain-own-row input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--text);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.cloak-domain-pool-row select:focus,
.cloak-domain-pool-row input:focus,
.cloak-domain-own-row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 127, 81, .12);
}
.cloak-domain-preview:empty {
  display: none;
}
.cloak-domain-preview {
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .cloak-domain-pool-row {
    grid-template-columns: 1fr;
  }
}

.cloak-pref-url {
  margin-top: 4px;
  max-width: 360px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  word-break: break-all;
}
.cloak-copy-pair {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.cloak-copy-pair .cloak-copy-link-block {
  width: auto;
}

.cloak-edit-meta {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #f8fafc;
  font-size: 12px;
}

.cloak-edit-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 4px 0;
}

.cloak-edit-meta-row > span:first-child {
  color: var(--text-secondary);
  min-width: 72px;
}

.cloak-edit-meta-row a {
  color: var(--primary);
  word-break: break-all;
}

.cloak-edit-meta-copy .cloak-copy-link {
  margin-top: 0;
}

.cloak-edit-modal {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.cloak-edit-modal::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.cloak-edit-modal .cloak-section {
  max-height: none;
  overflow: visible;
}

.history-cloak-edit {
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

.history-cloak-edit:hover {
  text-decoration: underline;
}

.cloak-global-blacklist-edit {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  resize: vertical;
}

.modal-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 20px 0 16px;
}

.modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

#changePasswordModal {
  z-index: 110;
}

#userPackModal {
  z-index: 120;
}

#chargeModal {
  z-index: 130;
}

.modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 400px;
  max-height: min(90vh, 720px);
  overflow-y: auto;
  padding: 20px;
}

.modal-card-wide {
  max-width: 640px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}

.modal-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.modal-header h3 { font-size: 16px; }

.modal-tip {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.modal-tip code {
  font-size: 11px;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}

.add-user-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-field span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.add-user-form input,
.modal-field input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  box-sizing: border-box;
}

.add-user-form .btn {
  width: 100%;
  margin-top: 4px;
}

.modal-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.stats-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.stats-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.stats-filter input[type="date"] {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  flex: 1;
  min-width: 120px;
}

.stats-filter-sep {
  font-size: 12px;
  color: var(--text-secondary);
}

.stats-summary {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.stats-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.stats-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 0.6fr 0.6fr 0.6fr;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.stats-row .cost-val { color: #d97706; font-weight: 700; }

/* 成本统计卡片 */
.cost-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.cost-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.cost-card .cost-label { font-size: 11px; color: var(--text-secondary); display: block; }
.cost-card .cost-num { font-size: 17px; font-weight: 800; color: var(--text); }
.cost-card .cost-sub { font-size: 10px; color: var(--text-secondary); display: block; margin-top: 2px; }
.cost-card.cost-total { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fde68a; }
.cost-card.cost-total .cost-num { color: #b45309; }

.fixed-costs {
  margin: 10px 0;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.fixed-costs .fixed-row { display: flex; justify-content: space-between; padding: 2px 0; }

.rates-config { margin: 12px 0; }
.rates-config summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); user-select: none; }
.rates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.rates-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.rates-grid input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}

/* 用户端：我的用量 */
.usage-panel { margin-bottom: 16px; }
.usage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  gap: 8px;
}

.stats-row:last-child { border-bottom: none; }

.stats-row-head {
  background: #f9fafb;
  font-weight: 600;
  color: var(--text-secondary);
}

.stats-row b { color: var(--primary); }

.stats-log-title {
  margin-top: 16px;
}

.stats-logs {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}

.stats-log-row {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.8fr 1fr 0.55fr 0.45fr 1.1fr;
  gap: 8px;
  padding: 8px 10px;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  min-width: 720px;
}

.stats-log-row.is-unpaid {
  background: color-mix(in srgb, #f59e0b 8%, transparent);
}

.stats-log-events {
  display: block;
  color: #2563eb;
  font-size: 10px;
  margin-top: 2px;
}
.stats-log-events.is-empty {
  color: var(--muted, #94a3b8);
}

.stats-log-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.stats-log-action-cell {
  text-align: right;
}

.stats-log-row:last-child { border-bottom: none; }

.stats-log-row-head {
  background: #f9fafb;
  font-weight: 600;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}

.stats-log-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.stats-status-success { color: var(--success); }
.stats-status-failed { color: var(--error); }
.stats-status-building { color: var(--primary); }

.history-scope-hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin: -6px 0 10px;
}

.user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.users-table-head,
.user-item-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.5fr 0.4fr 0.55fr 0.55fr 0.95fr minmax(168px, auto);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  font-size: 12px;
}

.users-admin-card {
  max-width: min(1280px, 98vw);
}

.users-admin-page {
  margin-top: 0;
}

.users-admin-page .users-admin-main.page-card,
.users-admin-page .users-side-card.page-card {
  margin: 0;
}

.admin-settings-card .admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px 18px;
}

.admin-settings-card .billing-settings {
  margin: 0;
}

#viewAdminPackStats .cloak-audit-section,
#viewAdminPackStats .stats-section {
  margin-bottom: 16px;
}

.users-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: start;
  margin-bottom: 8px;
}

.users-table-wrap {
  overflow: visible;
  margin: 0;
  padding: 0;
}

.users-table-wrap .users-table-head,
.users-table-wrap .users-list {
  min-width: 0;
}

.users-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #fff);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-card-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.user-card-id {
  min-width: 0;
  flex: 1 1 220px;
}

.user-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
  line-height: 1.35;
}

.user-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.user-card-pwd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.user-card-type select,
.user-card-type .user-role-select {
  height: 30px;
  min-width: 88px;
  font-size: 12px;
}

.user-card-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  flex: 0 1 auto;
}

.user-card-bal {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.user-card-exp {
  font-size: 12px;
}

.user-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 2px;
  border-top: 1px solid var(--border);
}

.user-card-actions .user-cloak-setdays,
.user-card-actions .user-credit,
.user-card-actions .user-cloak-charge,
.user-card-actions .user-reset-pwd,
.user-card-actions .user-del {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg, #f8fafc);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.2;
}

.user-card-actions .user-cloak-setdays {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.user-card-actions .user-credit {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

.user-card-actions .user-cloak-charge {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #6d28d9;
}

.user-card-actions .user-del {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

@media (max-width: 960px) {
  .users-admin-layout {
    grid-template-columns: 1fr;
  }
}

.users-admin-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 10px;
}

.users-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.users-filter-bar input[type="search"],
.users-filter-bar input[type="date"],
.users-filter-bar input[type="number"],
.users-filter-bar select {
  height: 36px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  background: #fff;
  color: var(--text, #111);
}

.users-filter-bar input[type="search"] {
  flex: 1 1 160px;
  min-width: 140px;
}

.users-filter-bar select {
  flex: 0 0 auto;
  min-width: 108px;
}

.users-filter-bar input[type="date"] {
  flex: 0 0 auto;
  width: 138px;
}

.users-filter-bar input[type="number"] {
  flex: 0 0 auto;
  width: 88px;
}

.users-search-wrap {
  flex: 1;
}

.users-search-wrap input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
}

.users-search-meta {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
  align-self: flex-end;
}

.users-side-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 12px;
  background: #fafafa;
  margin-bottom: 12px;
}

.users-side-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.add-user-form-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-user-form-compact .btn {
  width: 100%;
}

.user-card-paylater { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  user-select: none;
}

.paylater-switch .paylater-label {
  color: var(--text-secondary, #64748b);
  font-weight: 500;
  white-space: nowrap;
}

.paylater-switch input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary, #0E7F51);
}

.paylater-switch:has(input:checked) {
  color: #b45309;
}

.paylater-switch:has(input:checked) .paylater-label,
.paylater-switch:has(input:checked) .paylater-state {
  color: #b45309;
  font-weight: 600;
}

.user-pack-detail {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--primary, #0E7F51);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.user-pack-detail:hover {
  opacity: 0.85;
}

.user-cloak-links,
.user-cloak-trial {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--primary, #0E7F51);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.user-cloak-links:hover,
.user-cloak-trial:hover {
  opacity: 0.85;
}

.user-cloak-trial.is-expired {
  color: #b45309;
}

.user-cloak-trial.is-live {
  color: var(--primary, #0E7F51);
}

.user-pack-list {
  max-height: min(60vh, 520px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.user-pack-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 72px 88px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.user-pack-row:last-child {
  border-bottom: none;
}

.user-pack-row.user-pack-head {
  position: sticky;
  top: 0;
  background: #f8fafc;
  font-weight: 600;
  color: var(--text-secondary);
  z-index: 1;
}

.user-pack-row.is-unpaid {
  background: color-mix(in srgb, #f59e0b 8%, transparent);
}

.user-pack-time {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.user-pack-app {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-pack-app strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-pack-pkg {
  color: var(--text-secondary);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-pack-type {
  font-size: 11px;
  color: var(--text-secondary);
}

.user-pack-ok { color: #15803d; }
.user-pack-fail { color: #b91c1c; }
.user-pack-pending { color: #a16207; }

.user-pack-billed {
  color: var(--text-secondary);
  font-size: 12px;
}

.user-pack-bill-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.user-pack-na {
  color: var(--text-secondary);
}

.user-pack-bill {
  text-align: right;
}

@media (max-width: 720px) {
  .user-pack-row,
  .user-pack-row.user-pack-head {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .user-pack-time { grid-column: 1 / -1; }
  .user-pack-app { grid-column: 1; }
  .user-pack-status { grid-column: 2; text-align: right; }
  .user-pack-bill { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 900px) {
  .users-admin-layout {
    grid-template-columns: 1fr;
  }
}

.users-table-wrap {
  overflow: visible;
  margin: 0;
  padding: 0;
}

.users-table-wrap .users-table-head,
.users-table-wrap .users-list {
  min-width: 0;
}

.billing-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.login-hint {
  font-size: 12px;
  color: var(--warning);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  text-align: left;
}
.login-hint.hidden { display: none; }

.users-table-head {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.user-item-row {
  border-bottom: 1px solid var(--border);
  padding: 10px;
}

.user-item-row:last-child {
  border-bottom: none;
}

.users-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
}

.user-col-password {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
  color: var(--text);
}
.user-col-password .user-pwd-empty {
  color: var(--text-secondary);
}
.user-col-password .user-pwd-copy {
  margin-left: 6px;
  padding: 0 4px;
  font-size: 11px;
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}

.user-col-balance {
  color: var(--primary);
  font-weight: 600;
}

.user-col-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

button.user-cloak-days {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
}
button.user-cloak-days .cloak-exp-at {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
button.user-cloak-days .cloak-exp-days {
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  opacity: 0.85;
}
button.user-cloak-days:hover { opacity: 0.75; }

.cloak-review-country-wrap {
  margin-top: 10px;
}
.cloak-review-country-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.cloak-review-country-create {
  margin: 0 0 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cloak-review-country-create .cloak-country-grid {
  max-height: 200px;
}
.cloak-review-url-wrap {
  margin-top: 10px;
}
.cloak-review-url-label,
.cloak-review-custom-label,
.cloak-real-label {
  font-size: 12px;
  color: #c62828;
  margin-bottom: 6px;
}

.cloak-real-label {
  font-size: inherit;
  margin-bottom: 0;
}

.modal-field span.cloak-real-label {
  color: #c62828;
}
.cloak-review-url-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}
.cloak-review-url-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated, #fff);
  cursor: pointer;
}
.cloak-review-url-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cloak-review-url-chip .cloak-chip-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.cloak-review-url-chip.is-on,
.cloak-review-url-chip:has(input:checked) {
  border-color: var(--primary, #1a7f4e);
  background: color-mix(in srgb, var(--primary, #1a7f4e) 10%, #fff);
}
.cloak-review-url-open {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--primary, #1a7f4e);
  text-decoration: none;
}
.cloak-review-url-open:hover {
  text-decoration: underline;
}
.app-confirm-msg {
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 16px;
}

.user-no-action {
  color: var(--text-secondary);
}

.list-pager {
  margin-top: 10px;
}

.list-pager-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.list-pager-info {
  font-size: 12px;
  color: var(--text-secondary);
}

.list-pager-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.list-pager-btn.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.list-pager-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.user-del {
  color: var(--error);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}

.user-del:hover {
  background: #fef2f2;
}

.user-reset-pwd {
  color: var(--primary-hover);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}
.user-reset-pwd:hover { background: var(--primary-soft); }

/* ---------- 充值 / 计费 ---------- */
#balanceBadge { color: var(--primary); font-weight: 700; }

.recharge-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.recharge-balance-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.recharge-user-line {
  font-size: 13px;
  color: var(--text-secondary);
}
.recharge-user-line b {
  color: var(--text);
  font-weight: 600;
  margin-left: 4px;
}
.recharge-bal-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.recharge-bal-row > span { color: var(--text-secondary); font-size: 13px; }
.recharge-bal-row > b { font-size: 22px; color: var(--text); }
.recharge-fee-list {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.recharge-fee b { color: var(--error); font-weight: 700; }
.recharge-fee.cloak-fee b { color: #7c3aed; }
.recharge-cloak-status { font-size: 11px; }
.recharge-cloak-status.ok { color: #16a34a; }
.recharge-cloak-status.warn { color: var(--error); }
.recharge-price { margin-left: auto; color: var(--text-secondary); font-size: 12px; }
.recharge-price b { color: var(--error); }
.cloak-enable-row.cloak-locked { opacity: 0.72; cursor: not-allowed; }
.cloak-enable-row.cloak-locked input[type=checkbox] { cursor: not-allowed; }
.cloak-preview-btn { flex-shrink: 0; }
.cloak-preview-notice {
  color: #6d28d9;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.recharge-cloak-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* 我的账户弹窗 Tab */
#rechargeModal .modal-card {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 720px);
  overflow: hidden;
  padding-bottom: 16px;
}
.account-modal-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.account-modal-tabs::-webkit-scrollbar { display: none; }
.account-modal-tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.account-modal-tab:hover {
  background: #f1f5f9;
  color: var(--text);
}
.account-modal-tab.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.account-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.account-modal-panel { min-height: 120px; }
.account-overview-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.account-ledger-list {
  max-height: none;
  overflow: visible;
}
#rechargeModal .withdraw-panel { margin-top: 0; }
#rechargeModal .recharge-balance { margin-bottom: 12px; }

.cloak-subscribe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.cloak-sub-card {
  max-width: 420px;
}
.cloak-sub-plans {
  display: grid;
  gap: 8px;
  margin: 4px 0 16px;
}
.cloak-sub-plan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
}
.cloak-sub-plan:hover { border-color: var(--primary-border); }
.cloak-sub-plan.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(14, 127, 81, .16);
  background: var(--primary-soft);
}
.cloak-sub-plan.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}
.cloak-sub-plan-name { font-size: 14px; font-weight: 600; }
.cloak-sub-plan-price { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cloak-sub-plan-old {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: line-through;
}

.recharge-pay {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.recharge-qr img {
  width: 132px;
  height: 132px;
  display: block;
  border-radius: 8px;
  background: #fff;
}
.recharge-addr-box { flex: 1; min-width: 0; }
.recharge-addr-label { font-size: 12px; color: var(--text-secondary); }
.recharge-addr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
}
.recharge-addr-row code {
  flex: 1;
  min-width: 0;
  word-break: break-all;
  font-size: 13px;
  background: #f1f5f9;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: ui-monospace, Consolas, monospace;
}

.recharge-form {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}
.recharge-form .btn { height: 40px; }

.ledger-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
#viewFinanceLedger .ledger-list {
  max-height: none;
  overflow: visible;
}
.ledger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ledger-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ledger-main > span:first-child {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ledger-row .ledger-time { color: var(--text-secondary); font-size: 11px; }
.usage-report-bar { margin-bottom: 12px; flex-wrap: wrap; }
.usage-report-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 8px 0 14px;
}
.usage-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .usage-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .usage-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
button.usage-report-kpi:hover { border-color: var(--primary, #3b82f6); }
.page-head-actions { display: flex; align-items: center; gap: 8px; }
.page-head-actions .btn { display: inline-flex; align-items: center; gap: 4px; }
.usage-drill { margin: 0 0 12px; }
.usage-drill-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 8px;
}
.usage-drill-head h3 { margin: 0; font-size: 15px; }
.usage-account-detail > td {
  white-space: normal;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 10px 16px;
  overflow-x: auto;
}
.usage-report-user.active { font-weight: 700; }
.promo-mode-tabs { margin: 8px 0 12px; }
.capture-link-title { margin: 12px 0 0; font-size: 13px; }
.capture-link-title-input { width: 100%; margin: 12px 0 0; }
.capture-link-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}
.capture-link-row input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  padding: 0 10px;
}
.capture-landing-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.capture-item-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.capture-assign-line { margin-top: 6px; font-size: 13px; }
.capture-link-stats { margin-top: 4px; font-size: 13px; line-height: 1.5; }
.capture-log-panel { margin-top: 8px; }
.capture-log-panel .cloak-access-logs { max-height: 360px; overflow: auto; }
.capture-edit-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  gap: 12px;
  align-items: end;
  margin-top: 8px;
}
.capture-edit-meta label span { display: block; margin-bottom: 6px; font-size: 13px; }
.capture-edit-meta input { width: 100%; height: 40px; }
.assign-picker { position: relative; }
.assign-picker-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow: auto;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: #141820;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.assign-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #f7f8fa;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.assign-picker-item:hover,
.assign-picker-item.active { background: rgba(255, 255, 255, .08); }
.assign-picker-empty { margin: 0; padding: 8px 10px; color: #9aa3ae; }
html.theme-light .assign-picker-list {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
html.theme-light .assign-picker-item { color: inherit; }
html.theme-light .assign-picker-item:hover,
html.theme-light .assign-picker-item.active { background: rgba(0, 0, 0, .06); }
@media (max-width: 720px) {
  .capture-edit-meta { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .capture-link-row { grid-template-columns: 1fr; }
}
.usage-report-kpi {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
button.usage-report-kpi {
  text-align: left;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  width: 100%;
}
button.usage-report-kpi.active { border-color: var(--primary, #3b82f6); }
.usage-pager { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.usage-page-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.usage-page-btn:disabled { opacity: 0.35; cursor: default; }
.usage-report-kpi span { display: block; font-size: 12px; color: var(--text-secondary); }
.usage-report-kpi b { font-size: 16px; font-variant-numeric: tabular-nums; }
.usage-report-wrap { overflow: auto; }
.usage-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.usage-report-table th,
.usage-report-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.usage-report-table th { color: var(--text-secondary); font-weight: 600; font-size: 12px; }
.usage-report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-report-table .name { white-space: normal; word-break: break-all; min-width: 160px; }
.usage-report-user {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.usage-report-detail { margin-top: 16px; }
.usage-report-h { margin: 14px 0 6px; font-size: 13px; }
.usage-cash { margin: 4px 0 16px; }
.usage-cash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-bottom: 10px; }
.usage-cash-card {
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: transparent;
  color: inherit;
  font: inherit;
}
.usage-cash-card span { display: block; font-size: 12px; color: var(--text-secondary); }
.usage-cash-card b { display: block; margin-top: 4px; font-size: 16px; font-variant-numeric: tabular-nums; }
.usage-cash-card.active { border-color: var(--primary, #3b82f6); }
.usage-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.usage-filter-row input[type="search"] {
  height: 34px;
  min-width: 180px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  padding: 0 10px;
}
.usage-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.usage-tab {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.usage-tab.active { color: var(--text); border-color: var(--primary, #3b82f6); }
.usage-report-lines { margin: 0 0 12px; padding-left: 18px; line-height: 1.65; }
.usage-report-lines li { margin: 2px 0; }
.usage-neg { color: #e11d48; }
.usage-pos { color: #059669; }
.ledger-amt { font-size: 14px; }
.ledger-amt-plus { color: #16a34a; font-weight: 700; }
.ledger-amt-minus { color: var(--error); font-weight: 700; }
.ledger-empty { color: var(--text-secondary); font-size: 13px; padding: 8px 0; }

.withdraw-panel { margin-top: 18px; }
.withdraw-row { display:flex; gap: 10px; align-items:flex-end; flex-wrap:wrap; }
.withdraw-row .modal-field { flex: 1; min-width: 240px; }
.withdraw-actions { display:flex; gap: 10px; }
.amount-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.amount-input-wrap input {
  width: 100%;
  padding-right: 56px;
  box-sizing: border-box;
}
.amount-input-max {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  line-height: 1.2;
}
.amount-input-max:hover {
  background: var(--primary);
  color: #fff;
}
.amount-input-max:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 充值订单（唯一金额自动到账） */
.recharge-create {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.recharge-create .recharge-amount-field {
  width: 100%;
  margin: 0;
}
.recharge-create .recharge-amount-field input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
}
.recharge-create-btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.recharge-create-hint {
  margin: 0;
  line-height: 1.45;
}

.recharge-warn {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #dc2626;
  font-weight: 600;
}

.recharge-warn strong {
  font-weight: 700;
}

.recharge-warn-sub {
  margin: 6px 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #b91c1c;
}

.pay-amount-label {
  font-size: 13px;
  color: #dc2626;
  font-weight: 600;
}

.recharge-order {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fafafa;
}
.pay-amount-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pay-amount-box b {
  font-size: 26px;
  color: var(--primary, #0E7F51);
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}
.pay-amount-hint { margin: 0; }
.recharge-order .recharge-pay {
  margin-bottom: 12px;
  background: #fff;
}
.order-status {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  background: #eef2ff;
  color: #3730a3;
}
.order-status-ok { background: #dcfce7; color: #166534; }
.order-status-warn { background: #fef3c7; color: #92400e; }
.order-actions { display: flex; gap: 8px; margin-top: 10px; }

.manual-verify { margin-bottom: 16px; }
.manual-verify summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  user-select: none;
}
.manual-verify[open] summary { margin-bottom: 10px; }

/* 扣费弹窗 / 默认单价设置 */
.charge-actions { display: flex; gap: 10px; margin-top: 16px; }
.charge-actions .btn { flex: 1; }
.charge-balance-tip { margin: 0 0 10px; color: var(--primary); font-weight: 500; }
.charge-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.charge-presets .btn { min-width: 48px; }
.charge-save-default {
  margin: 4px 0 8px;
  font-size: 13px;
}
#chargeAmount {
  font-size: 18px;
  font-weight: 600;
  height: 44px;
}

.billing-settings {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.billing-settings-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.billing-settings-row { display: flex; gap: 8px; margin: 6px 0; }
.billing-settings-row input,
.billing-settings-row select {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.register-trial-switch {
  margin-top: 4px;
}
.recharge-notify-box {
  margin-top: 10px;
}
.recharge-notify-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
  max-height: 160px;
  overflow: auto;
}
.recharge-notify-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  font-size: 13px;
}
.recharge-notify-item .rn-meta {
  color: var(--text-secondary);
  font-size: 12px;
}
.recharge-notify-item .rn-del {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.user-role-select {
  width: 100%;
  max-width: 104px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface, #111);
  color: inherit;
  font-size: 12px;
}

.history-charge {
  background: #1e40af;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}
.history-event-brief {
  font-size: 12px;
  color: #2563eb;
  margin-top: 2px;
}
.history-event-brief.is-empty {
  color: var(--muted, #94a3b8);
}
.user-pack-events {
  display: block;
  font-size: 11px;
  color: #2563eb;
  margin-top: 2px;
}
.user-pack-events.is-empty {
  color: var(--muted, #94a3b8);
}
.history-transfer {
  background: #0f766e;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.history-transfer:hover { background: #0d9488; }
.user-cloak-charge {
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.user-cloak-charge:hover { background: #6d28d9; }
.user-credit {
  background: #059669;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.user-credit:hover { background: #047857; }

.deposits-section { margin-top: 20px; }

.login-logs-section {
  margin-top: 20px;
}
.login-logs-filter { margin-bottom: 12px; }
.login-logs-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(70vh, 720px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.login-log-row {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 0.7fr 0.85fr 0.9fr 0.75fr 0.65fr 0.5fr;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.login-log-row:last-child { border-bottom: none; }
.login-log-row.head {
  background: #f8fafc;
  font-weight: 600;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}
.login-log-time { color: var(--text-secondary); white-space: nowrap; }
.login-log-role { color: var(--text); cursor: help; white-space: nowrap; }
.ops-cloak-allow { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; }
.capture-vps-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.capture-vps-add input { flex: 1; min-width: 120px; }
.capture-vps-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.capture-vps-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; }
.login-log-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}
.login-log-loc { color: var(--text); }
.login-log-device { color: var(--text-secondary); }
.login-log-status.active { color: #16a34a; font-weight: 600; }
.login-log-status.replaced { color: #d97706; font-weight: 600; }
.login-log-status.idle { color: var(--text-secondary); }
.login-log-ua { cursor: help; }
.login-logs-empty {
  padding: 16px 12px;
  color: var(--text-secondary);
  font-size: 13px;
}
@media (max-width: 720px) {
  .login-log-row {
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
  }
  .login-log-row.head { display: none; }
}
.deposits-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.deposits-head-right { display: flex; align-items: center; gap: 10px; }
.deposits-addr-balance {
  font-size: 13px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.deposits-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.deposits-empty { color: var(--text-secondary); font-size: 13px; padding: 12px 0; }
.deposit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
}
.deposit-credited { background: #f0fdf4; }
.deposit-unmatched { background: var(--primary-soft); border-color: var(--primary-border); }
.deposit-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deposit-amt { font-size: 15px; font-weight: 700; color: #16a34a; font-variant-numeric: tabular-nums; }
.deposit-meta { font-size: 11px; color: var(--text-secondary); }
.deposit-status { font-size: 12px; white-space: nowrap; }
.deposit-status.ok { color: #16a34a; font-weight: 600; }
.deposit-assign { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.deposit-user-select,
.deposit-user-input {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  background: #fff;
  color: var(--text);
  max-width: 180px;
  min-width: 120px;
}
.deposit-tag-apk {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #1d4ed8;
  line-height: 1.6;
  white-space: nowrap;
}
.deposit-hint {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #b45309;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .deposit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .deposit-assign {
    width: 100%;
  }
  .deposit-user-input {
    flex: 1;
    max-width: none;
    min-width: 0;
    width: auto;
    font-size: 16px;
    height: 36px;
  }
  .deposit-assign .btn {
    flex-shrink: 0;
    min-height: 36px;
  }
  .deposit-status.ok,
  .deposit-status.pending {
    align-self: flex-start;
  }
  .finance-filter-bar input[type="date"],
  .finance-filter-bar input[type="text"],
  .finance-filter-bar select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    font-size: 16px;
  }
  .finance-filter-bar .btn {
    flex: 1 1 calc(50% - 4px);
  }
}

.cloak-sub-active { color: #16a34a; font-size: 12px; }
.cloak-sub-expired { color: var(--error); font-size: 12px; }
.cloak-subscription-hint.cloak-sub-ok { color: #16a34a; }
.cloak-subscription-hint.cloak-sub-warn { color: var(--error); }

.cloak-expiry-head,
.cloak-expiry-row {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 1.4fr 0.9fr;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  font-size: 12px;
}
.cloak-expiry-head {
  color: var(--text-secondary, #64748b);
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-weight: 600;
}
.cloak-expiry-row {
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.cloak-expiry-row:last-child { border-bottom: none; }
.cloak-expiry-at {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cloak-expiry-status.ok { color: #16a34a; font-weight: 600; }
.cloak-expiry-status.expired { color: var(--error); font-weight: 600; }
.cloak-expiry-status.none { color: var(--text-secondary, #64748b); }

.cloak-expiry-banner {
  margin: 0;
  padding: 12px 16px;
  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
  border-bottom: 1px solid #f59e0b;
  color: #92400e;
}
.cloak-expiry-banner.hidden { display: none; }
.cloak-expiry-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.cloak-expiry-banner-inner strong {
  font-size: 14px;
  white-space: nowrap;
}
#cloakExpiryBannerText {
  flex: 1;
  font-size: 13px;
  min-width: 200px;
}
.cloak-expiry-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.recharge-notify-card {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--surface-2, #f8fafc);
}
.recharge-tg-notify-switch {
  margin-top: 10px;
}
.history-billed { color: #16a34a; font-size: 12px; }

#transferUserSelect {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg, #fff);
  color: var(--text);
}

#transferUserSearch {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg, #fff);
  color: var(--text);
  box-sizing: border-box;
}
.transfer-user-results {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 6px 0 4px;
  background: var(--bg, #fff);
}
.transfer-user-results:empty { display: none; }
.transfer-user-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.transfer-user-item:last-child { border-bottom: none; }
.transfer-user-item:hover,
.transfer-user-item.is-active {
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
}
.transfer-user-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.transfer-user-picked {
  margin: 0 0 10px;
  color: #0f766e;
  font-weight: 500;
}
.balance-negative { color: #dc2626; font-weight: 600; }

.store-monitor-list { list-style: none; padding: 0; margin: 12px 0 0; }
.store-monitor-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--border, #e5e7eb); font-size: 13px;
}
.store-monitor-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
.store-monitor-add .modal-field { flex: 1; min-width: 160px; margin: 0; }
.store-status-live { color: #16a34a; font-weight: 600; }
.store-status-removed { color: var(--error, #dc2626); font-weight: 600; }
.store-status-unknown { color: #6b7280; }

.push-admin-tabs { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.push-tab {
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.push-tab.active { background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb); }
.push-tab-panel { margin-top: 8px; }
.push-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.push-filter-row select, .push-filter-row input { font-size: 13px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border, #e5e7eb); }
.push-subscribers-list { max-height: 360px; overflow: auto; font-size: 12px; }
.push-subs-table { width: 100%; border-collapse: collapse; }
.push-subs-table th, .push-subs-table td { padding: 6px 8px; border-bottom: 1px solid var(--border, #e5e7eb); text-align: left; }
.push-subs-table th { font-weight: 600; background: #f9fafb; position: sticky; top: 0; }
.push-uid { font-size: 11px; }
.push-templates-list { list-style: none; padding: 0; margin: 12px 0 0; }
.push-templates-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border, #e5e7eb); font-size: 13px;
}
.push-template-form, .push-manual-form { display: grid; gap: 8px; margin-bottom: 12px; }
.push-api-example {
  background: #1e1e1e; color: #d4d4d4; padding: 12px; border-radius: 8px;
  font-size: 12px; overflow-x: auto; white-space: pre-wrap;
}

.push-manual-count { font-weight: 600; margin: 8px 0; color: var(--primary, #2563eb); }
.push-timing-box { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; }
.push-timing-box legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.push-radio { display: block; margin: 6px 0; font-size: 13px; }
.push-delay-row { display: flex; gap: 8px; align-items: center; margin: 6px 0 10px 24px; font-size: 13px; flex-wrap: wrap; }
.push-fixed-at { margin: 6px 0 10px 24px; font-size: 13px; }
.push-check-row { display: flex; align-items: center; gap: 8px; }

.pixel-section h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-doc-link { font-size: 12px; font-weight: normal; color: var(--primary, #2563eb); text-decoration: none; }
.section-doc-link:hover { text-decoration: underline; }
.pixel-section-hint { margin: 0 0 10px; }

.feature-guide-card {
  grid-column: 1 / -1;
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 0;
  box-shadow: var(--shadow);
}
.feature-guide-card summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text, #111);
}
.feature-guide-body {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted, #555);
}
.feature-guide-body h3 {
  margin: 12px 0 6px;
  font-size: 14px;
}
.feature-guide-body ul,
.feature-guide-body ol {
  margin: 0;
  padding-left: 1.25rem;
}
.feature-guide-body li { margin-bottom: 4px; }

.user-item-balance { color: var(--primary); font-weight: 600; }

.standalone-cloak-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 14px;
}

.standalone-tab {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}

.standalone-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.standalone-cloak-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
}

.standalone-cloak-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.standalone-cloak-item:last-child { border-bottom: none; }

.standalone-cloak-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.standalone-cloak-link {
  font-size: 12px;
  color: var(--primary);
  word-break: break-all;
  display: block;
}

.standalone-cloak-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.standalone-cloak-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.standalone-cloak-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.standalone-type-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  vertical-align: middle;
}

.standalone-type-tag.solo {
  background: #dbeafe;
  color: #1d4ed8;
}

.standalone-type-tag.build {
  background: #f3f4f6;
  color: #6b7280;
}

.standalone-create-top {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.standalone-create-actions {
  margin-top: 12px;
  justify-content: flex-start;
}

.standalone-edit-extras {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}

.standalone-edit-extras.hidden { display: none; }

.standalone-cloak-section .cloak-mode-hint {
  margin: 0 0 2px;
  padding: 0;
  background: none;
  border: none;
}

.standalone-cloak-section .cloak-mode-hint:empty {
  display: none;
}

.standalone-cloak-section .cloak-mode-select {
  width: 100%;
}

.standalone-cloak-section .cloak-fields { margin-top: 0; }

.cloak-edit-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
}

.cloak-edit-quick-label {
  font-size: 12px;
  color: #0369a1;
  font-weight: 600;
}

.cloak-edit-quick .btn.is-active {
  background: var(--primary, #0e7f51);
  border-color: var(--primary, #0e7f51);
  color: #fff;
}

.cloak-edit-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.cloak-disable-btn {
  color: var(--error);
  border-color: #fecaca;
}

.cloak-disable-btn:hover {
  background: #fef2f2;
}

.cloak-audit-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cloak-audit-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.cloak-audit-filter input {
  flex: 1;
  min-width: 160px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}

.cloak-audit-logs {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
}

.cloak-audit-page-logs {
  max-height: min(62vh, 680px);
}

.cloak-audit-page-card .list-pager {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.cloak-audit-filters {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1.4fr) minmax(120px, 0.9fr) auto;
  gap: 10px;
  align-items: end;
}

.cloak-audit-row {
  display: grid;
  grid-template-columns: 108px 110px minmax(140px, 1.1fr) 88px minmax(140px, 1.3fr);
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  align-items: center;
  min-width: 720px;
}

.cloak-audit-row.with-user {
  grid-template-columns: 108px 88px 110px minmax(140px, 1.1fr) minmax(140px, 1.3fr);
}

.cloak-audit-row:last-child { border-bottom: none; }

.cloak-audit-row-head {
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  font-weight: 600;
  color: var(--text-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}

.cloak-audit-time {
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cloak-audit-action {
  font-weight: 600;
}

.cloak-audit-obj {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: wrap;
}

.cloak-audit-obj em {
  font-style: normal;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.cloak-audit-detail {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloak-audit-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.cloak-audit-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  background: color-mix(in srgb, #6366f1 12%, var(--bg));
  color: #4338ca;
}

.cloak-audit-tag.solo {
  background: color-mix(in srgb, #16a34a 12%, var(--bg));
  color: #15803d;
}

@media (max-width: 900px) {
  .cloak-audit-filters {
    grid-template-columns: 1fr 1fr;
  }
  .cloak-audit-filters .cloak-filter-actions {
    grid-column: 1 / -1;
  }
}

.cloak-audit-logs-side {
  max-height: 420px;
  overflow-y: auto;
}

.side-audit-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.side-audit-item:last-child { border-bottom: none; }

.side-audit-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.side-audit-meta {
  color: var(--text-secondary);
  margin-bottom: 2px;
  word-break: break-word;
}

.side-audit-user {
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 900px) {
  .standalone-cloak-item {
    flex-direction: column;
  }
  .standalone-cloak-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .recharge-pay { flex-direction: column; align-items: flex-start; }
  .recharge-form { grid-template-columns: 1fr; }
  .billing-settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  body, .app { overflow-x: hidden; }
  .main {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 0;
    gap: 12px;
  }
  .main > .form-card:not(.adjust-form-card),
  .main > .adjust-form-card,
  .main > .side-panel {
    grid-column: 1;
    grid-row: auto;
  }
  .form-grid { grid-template-columns: 1fr; }
  .adjust-extras-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .adjust-icon-upload {
    flex-direction: row;
  }
  .adjust-sandbox-card {
    padding: 12px 14px;
  }
  .form-card { padding: 20px 16px; max-width: 100%; overflow-x: hidden; }
  .history-card { padding: 16px; }
  .header-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
    gap: 10px;
  }
  .brand { min-width: 0; }
  .brand h1 { font-size: 16px; }
  .brand p { font-size: 12px; }
  .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
  }
  .header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .header-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .header-nav .btn-sm {
    width: 100%;
    height: 40px;
    padding: 0 8px;
    font-size: 12px;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-nav-recharge {
    grid-column: 1 / -1;
    height: 44px !important;
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    font-weight: 600;
    font-size: 14px !important;
  }
  .header-nav-recharge b {
    color: #fff;
    font-size: 15px;
  }
  .timezone-field { flex-direction: column; }
  .field .timezone-quick,
  .timezone-field .timezone-quick {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions .btn { width: 100%; }
  .modal {
    align-items: flex-end;
    padding: 0;
  }
  .modal-card {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    padding: 16px;
  }
  .modal-card-wide { max-width: 100%; }
  .modal-header h3 { font-size: 15px; }
  .push-admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .push-tab { flex-shrink: 0; font-size: 12px; padding: 6px 10px; }
  .push-filter-row select,
  .push-filter-row input { min-width: 0; flex: 1 1 120px; }
  .push-subs-table { display: block; overflow-x: auto; }
  .stats-filter { flex-direction: column; align-items: stretch; }
  .stats-filter input[type="date"] { width: 100%; }
  .stats-filter .btn { width: 100%; }
  .history-item {
    gap: 0;
  }
  .history-item-main {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .history-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .history-links { flex-wrap: wrap; }
  .cloak-edit-modal .cloak-section { max-height: none; }
  .feature-guide-card { margin-bottom: 0; }
  .upload-field { flex-wrap: wrap; }
  .list-pager-inner { flex-direction: column; align-items: stretch; }
  .list-pager-inner .btn { width: 100%; }
  .store-monitor-add { flex-direction: column; align-items: stretch; }
  .store-monitor-add .modal-field { min-width: 0; width: 100%; }
  .store-monitor-list li { flex-direction: column; align-items: flex-start; }
  .toast {
    left: 16px;
    right: 16px;
    transform: none;
    max-width: none;
    text-align: center;
  }
  .toast.show { transform: none; }
}

@media (max-width: 480px) {
  body { overflow-x: hidden; }
  .app { overflow-x: hidden; }
  .main { padding: 12px; }
  .header-inner { padding: 10px 12px; }
  .header-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .header-nav-recharge {
    grid-column: 1 / -1;
  }
  .brand-icon { width: 38px; height: 38px; font-size: 17px; }
  .form-section h2 { font-size: 14px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .modal-field input, .add-user-form input { font-size: 16px; }
  .login-card { padding: 28px 20px; }
  .users-table-wrap .users-table-head,
  .users-table-wrap .users-list { min-width: 0; }
  .user-card-actions { gap: 6px; }
  .billing-settings-row { flex-wrap: wrap; }
  .billing-settings-row input { flex: 1; min-width: 100px; }
  .adjust-event-head { flex-direction: column; align-items: flex-start; }
  .adjust-token-header {
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }
  .adjust-token-header .btn { flex-shrink: 0; }
  .adjust-bridge-mode {
    grid-template-columns: 1fr;
  }
  .adjust-token-bulk-input { max-width: 100%; }
  .pixel-section h2 { flex-direction: column; align-items: flex-start; }
}

/* Shell responsive */
@media (max-width: 1100px) {
  .cloak-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cloak-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,.2);
  }
  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    display: block;
  }
  .sidebar-backdrop[hidden] {
    display: none !important;
  }
  .sidebar-close { display: block; }
  .sidebar-brand { justify-content: space-between; align-items: flex-start; }
  .sidebar-logo-lockup { width: 72px; }
  .topbar { padding: 0 12px; }
  .topbar-title, #crumbCurrent { font-size: 16px; }
  #topbarUsername { display: none; }
  #topbarSupportTgLabel { display: none; }
  .topbar-support-tg { padding: 0; width: 36px; justify-content: center; }
  .topbar-menu { display: inline-flex; align-items: center; justify-content: center; }
  .shell-content {
    padding: 12px 12px calc(var(--tabbar-h) + 20px);
  }
  .mobile-tabbar {
    display: flex;
    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: #fff;
    border-top: 1px solid var(--border);
    z-index: 30;
  }
  .tabbar-item {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .tabbar-item.active { color: var(--primary); }
  .cloak-table-wrap { display: none; }
  .cloak-cards-mobile { display: block; }
  .main {
    grid-template-columns: 1fr !important;
  }
  .build-type-tabs {
    position: sticky;
    top: calc(var(--topbar-h) + 4px);
    z-index: 5;
    background: var(--bg);
    padding: 4px 0;
  }
}

@media (min-width: 901px) {
  .mobile-tabbar { display: none !important; }
}

@media (max-width: 900px) {
  .page-grid-2 { grid-template-columns: 1fr; }
  .stats-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nest-form-card .checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  height: auto;
}
.nest-form-card .checkbox-row > span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
}
.nest-form-card .checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex: 0 0 16px;
}

.nest-apk-upload {
  align-items: stretch;
}

.nest-apk-preview {
  width: auto;
  min-width: 160px;
  flex: 1;
  height: auto;
  min-height: 48px;
  border-radius: 10px;
  padding: 10px 12px;
  justify-content: flex-start;
}

.nest-apk-preview .upload-placeholder {
  font-size: 13px;
  color: var(--text-secondary);
  word-break: break-all;
}

.nest-apk-upload.has-file .nest-apk-preview {
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
}

.nest-apk-upload.has-file .upload-placeholder,
.nest-apk-preview .upload-placeholder.has-file {
  color: var(--text);
  font-weight: 600;
}

.nest-bridge-fields.hidden {
  display: none !important;
}

/* 事件统计 */
.event-stats-filter-card {
  margin-bottom: 12px;
}
.event-stats-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}
.event-stats-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 140px;
}
.event-stats-filter-item select,
.event-stats-filter-item input[type="date"] {
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text);
  min-width: 180px;
}
.event-stats-filter-app {
  min-width: min(100%, 520px);
  flex: 1 1 420px;
}
.event-stats-filter-app input[type="search"] {
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
  min-width: 0;
  margin-bottom: 6px;
}
.event-stats-filter-app select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.event-stats-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.event-stats-presets .btn.is-active {
  border-color: var(--primary);
  color: var(--primary-hover);
  background: rgba(249, 115, 22, 0.08);
}
.event-stats-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.event-stats-compare-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fafafa;
}
.event-stats-compare-row.is-active {
  border-color: rgba(14, 127, 81, 0.45);
  background: var(--primary-soft);
}
.event-stats-compare-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.event-stats-compare-label span {
  color: var(--text-secondary);
  font-size: 12px;
}
.event-stats-compare-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.event-stats-compare-metrics b {
  color: var(--text);
  font-weight: 600;
}
.event-stats-section-title {
  margin: 18px 0 8px;
}
.event-stats-trend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-stats-trend-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.event-stats-trend-day {
  color: var(--text-secondary);
}
.event-stats-trend-track {
  height: 8px;
  background: #f3f4f6;
  border-radius: 99px;
  overflow: hidden;
}
.event-stats-trend-fill {
  height: 100%;
  background: linear-gradient(90deg, #0E7F51, #1aa36a);
  border-radius: 99px;
}
.event-stats-trend-nums {
  color: var(--text-secondary);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .event-stats-compare {
    grid-template-columns: 1fr;
  }
  .event-stats-trend-row {
    grid-template-columns: 42px 1fr;
  }
  .event-stats-trend-nums {
    grid-column: 1 / -1;
  }
}

.event-stats-cards {
  margin-bottom: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.event-stats-cards .stat-mini-card span {
  font-size: 11px;
  letter-spacing: 0;
  word-break: break-all;
  line-height: 1.3;
}
.event-stats-cards .stat-mini-card .event-stats-token {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.65;
}
.event-stats-cards .event-stats-card-sub,
.event-stats-cards .event-stats-card-money {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  word-break: normal;
}
.event-stats-cards .event-stats-card-money {
  color: var(--primary-hover);
  font-weight: 600;
}
.event-stats-metric-sub,
.event-stats-metric-money {
  display: inline;
  margin-left: 2px;
  opacity: 0.75;
  font-weight: 500;
}
.event-stats-metric-money {
  color: var(--primary-hover);
  opacity: 1;
}
.event-stats-compare-metrics span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}
.event-stats-day-table th {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: nowrap;
}
.event-stats-cards .event-stats-money {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
}
.event-stats-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.event-stats-meta-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
}
.event-stats-table-wrap {
  overflow-x: auto;
}
.event-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.event-stats-table th,
.event-stats-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.event-stats-table th {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  background: #fafafa;
}
.event-stats-table .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-secondary);
}
.event-stats-empty {
  color: var(--text-secondary);
  font-size: 13px;
  padding: 12px 0;
  margin: 0;
}
.event-stats-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.event-stats-modal-body {
  padding: 4px 4px 8px;
  max-height: min(70vh, 640px);
  overflow: auto;
}
.landing-stats-modal-body {
  padding: 8px 4px 12px;
  max-height: min(78vh, 720px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.landing-stats-modal-card {
  width: min(960px, 96vw);
}
.landing-access-logs {
  max-height: min(46vh, 420px);
  overflow: auto;
}
.landing-access-row {
  grid-template-columns: 148px 88px minmax(220px, 1.6fr) 56px minmax(160px, 1.1fr);
  min-width: 720px;
}
.landing-stats-pager {
  justify-content: center;
  margin-top: 4px;
}
.landing-stats-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing-stats-head-title h2 {
  margin: 0;
}
.landing-stats-redirect-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 4px;
}
.landing-stats-redirect-field {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.landing-stats-redirect-field input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
}
.landing-stats-detail-meta {
  margin-bottom: 4px;
  align-items: center;
}
.landing-access-row-ip {
  grid-template-columns: minmax(140px, 1.1fr) 64px minmax(180px, 1.4fr) 56px 148px;
  min-width: 640px;
}
.landing-access-row-device {
  grid-template-columns: minmax(220px, 1fr) 72px;
  min-width: 320px;
}
.ls-num-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}
.ls-num-btn:hover {
  text-decoration: underline;
}
.landing-redirect-modal-card {
  max-width: min(440px, 94vw);
}
.landing-stats-redirect-field input[readonly] {
  background: #f8fafc;
  color: var(--text);
}
@media (max-width: 720px) {
  .landing-stats-redirect-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .landing-stats-redirect-bar .btn {
    width: 100%;
  }
  .landing-access-row,
  .landing-access-row-ip,
  .landing-access-row-device {
    min-width: 0;
    grid-template-columns: 1fr;
  }
  .landing-stats-detail-meta {
    flex-direction: column;
    align-items: stretch;
  }
  .landing-stats-detail-meta .btn {
    width: 100%;
  }
  .wheel-data-table td.col-ops {
    white-space: normal;
  }
  .wheel-data-table td.col-ops .btn {
    margin: 2px 0;
  }
}
.wheel-data-table td.col-device {
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-all;
  font-size: 12px;
  color: var(--text);
}
.history-event-stats {
  appearance: none;
  border: none;
  background: none;
  color: var(--primary);
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.history-event-stats:hover {
  text-decoration: underline;
}
.history-xiaomi {
  appearance: none;
  border: none;
  background: none;
  color: var(--primary);
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.store-channel-picks {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.store-channel-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.store-channel-pick:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, #fff);
}
.store-channel-pick input { margin: 0; }
.xiaomi-publish-card { max-width: 560px; width: min(560px, calc(100vw - 24px)); }
.xiaomi-publish-status { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.xiaomi-publish-status[data-status="submitting"],
.history-xiaomi[data-status="submitting"],
#resultXiaomiBtn[data-status="submitting"] { color: #b54708; }
.xiaomi-publish-status[data-status="live"],
.history-xiaomi[data-status="live"],
#resultXiaomiBtn[data-status="live"] { color: #12805a; }
.xiaomi-publish-status[data-status="failed"],
.xiaomi-publish-status[data-status="maybe_rejected"],
.history-xiaomi[data-status="failed"],
.history-xiaomi[data-status="maybe_rejected"],
#resultXiaomiBtn[data-status="failed"],
#resultXiaomiBtn[data-status="maybe_rejected"] { color: #b42318; }
@media (max-width: 720px) {
  .event-stats-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .event-stats-filter-item select,
  .event-stats-filter-item input[type="date"] {
    min-width: 0;
    width: 100%;
  }
  .event-stats-filter-item {
    flex: 1 1 140px;
  }
}

/* 转盘落地页：模板卡片 */
.wheel-cloak-gate {
  margin-bottom: 16px;
  border: 1px solid var(--primary-border);
  background: var(--primary-soft);
}
.wheel-cloak-gate strong { display: block; margin-bottom: 6px; }
.wheel-cloak-gate p { color: var(--text-secondary); font-size: 14px; }
.wheel-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.wheel-section-head h2 { margin: 0; }
.wheel-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.wheel-list-head .page-card-title { margin: 0; }
.wheel-list-scroll {
  overflow: auto;
  max-height: min(52vh, 520px);
  border: 1px solid var(--border);
  border-radius: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wheel-list-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.wheel-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 860px;
}
.wheel-data-table th,
.wheel-data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.wheel-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fafafa;
  color: var(--text-secondary);
  font-weight: 600;
}
.wheel-data-table tbody tr:hover td { background: #fffbf7; }
.wheel-data-table .col-name,
.wheel-data-table .col-tpl,
.wheel-data-table .col-url {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wheel-data-table .col-url { max-width: 280px; }
.wheel-data-table th.col-ops,
.wheel-data-table td.col-ops {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
  box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .08);
}
.wheel-data-table th.col-ops {
  background: #fafafa;
  z-index: 3;
}
.wheel-data-table .col-ops {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 148px;
}
.wheel-fail-reason {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #b91c1c;
  font-size: 12px;
}
.wheel-exp {
  font-size: 12px;
  color: var(--muted, #64748b);
  white-space: nowrap;
}
.wheel-exp.is-expired {
  color: #b91c1c;
}
.wheel-data-table .col-ops a {
  color: var(--primary);
  text-decoration: none;
}
.wheel-status {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.5;
  background: #f3f4f6;
  color: #4b5563;
}
.wheel-status.status-success { background: #ecfdf5; color: #047857; }
.wheel-status.status-failed { background: #fef2f2; color: #b91c1c; }
.wheel-status.status-building,
.wheel-status.status-queued { background: #eff6ff; color: #1d4ed8; }
.wheel-list-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
.wheel-pager-info {
  font-size: 12px;
  color: var(--text-secondary);
}
.wheel-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.wheel-tpl-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wheel-tpl-card:hover {
  border-color: var(--primary-border);
}
.wheel-tpl-card.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}
.wheel-tpl-thumb-wrap {
  aspect-ratio: 16 / 10;
  background: #120018;
  overflow: hidden;
}
.wheel-tpl-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.wheel-tpl-body {
  padding: 12px 12px 14px;
}
.wheel-tpl-body strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.wheel-tpl-body p {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  min-height: 2.8em;
}
.wheel-tpl-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wheel-tpl-pick {
  font-size: 12px;
  color: var(--text-secondary);
}
.wheel-tpl-card.is-selected .wheel-tpl-pick {
  color: var(--primary);
  font-weight: 600;
}
.wheel-form-locked .form-actions,
.wheel-form-locked .form-section:not(:first-of-type) {
  opacity: 0.55;
  pointer-events: none;
}
@media (max-width: 560px) {
  .wheel-tpl-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

.promo-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 440px);
  gap: 24px;
  align-items: start;
}
.promo-phone {
  position: sticky;
  top: 12px;
  height: calc(100vh - 40px);
  max-height: none;
  padding: 0;
  border-radius: 12px;
  background: #0c0807;
  border: 1px solid rgba(18, 12, 10, 0.1);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.promo-phone::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.promo-phone iframe {
  display: block;
  width: 100%;
  min-height: 100%;
  height: 100%;
  border: 0;
  background: #0c0807;
  overflow: hidden;
  pointer-events: auto;
}
@media (max-width: 1180px) {
  .promo-workbench {
    grid-template-columns: 1fr;
  }
  .promo-phone {
    position: relative;
    top: 0;
    width: min(100%, 440px);
    margin: 0 auto;
    height: min(78vh, 820px);
  }
}
@media (max-width: 560px) {
  .wheel-tpl-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}



/* Finance workspace */
.finance-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .finance-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.finance-kpi {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finance-kpi span {
  font-size: 12px;
  color: var(--text-secondary);
}
.finance-kpi strong {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.finance-chart-head {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.finance-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
  padding: 8px 4px 0;
}
.finance-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
  gap: 6px;
}
.finance-bar-fill {
  width: 100%;
  max-width: 28px;
  background: var(--primary, #16a34a);
  border-radius: 4px 4px 0 0;
  opacity: 0.85;
}
.finance-bar-label {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.finance-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.finance-toolbar select {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 13px;
  background: #fff;
}
.finance-invite-row { align-items: center; }
.deposit-status.pending { color: #b45309; font-weight: 600; }
.mobile-tabbar-finance { display: none; }
.app-shell.role-finance .mobile-tabbar:not(.mobile-tabbar-finance) { display: none !important; }
.app-shell.role-finance .mobile-tabbar-finance { display: flex !important; }
.app-shell.role-finance .finance-admin-only { display: none !important; }
.app-shell.role-agent .mobile-tabbar { display: none !important; }
.finance-totp-row { margin-top: 8px; }
.finance-totp-row input {
  max-width: 160px;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}
#trc20TotpSecretInput {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.finance-table-card { padding: 0; overflow: hidden; }
.finance-table-wrap { overflow-x: auto; }

.agent-users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-user-row {
  display: grid;
  grid-template-columns: minmax(100px, 1.2fr) minmax(120px, 1.4fr) 80px 80px 72px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  background: var(--surface);
}

.agent-promote-card {
  padding: 12px 16px;
}
.agent-invite-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
}
.agent-invite-compact .invite-label {
  color: var(--text-secondary);
  font-size: 12px;
}
.agent-invite-compact code {
  font-size: 12px;
  word-break: break-all;
}
.agent-invite-compact .invite-link-text {
  max-width: min(100%, 420px);
}
.agent-invite-sep {
  color: var(--text-secondary);
  opacity: 0.5;
}
.agent-ads-details {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.agent-ads-details > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  list-style: none;
}
.agent-ads-details > summary::-webkit-details-marker { display: none; }
.agent-ads-block {
  margin-top: 0.75rem;
  padding-top: 0;
  border-top: none;
}
.agent-ads-title {
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 0.4rem;
}
.agent-ads-tip {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 0.9rem;
}
.agent-ads-official {
  font-size: 12px;
  color: var(--text);
  margin: 0 0 0.75rem;
  line-height: 1.45;
}
.agent-ads-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 0 0 0.75rem;
  cursor: pointer;
}
.agent-ads-check input {
  margin: 0;
}
.agent-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.agent-kpi-strip b {
  color: var(--text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.agent-promo-cards {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.agent-promo-cards .stat-mini-card {
  cursor: pointer;
}
.agent-promo-cards .stat-mini-card.is-active {
  border-color: var(--primary, #16a34a);
  box-shadow: 0 0 0 1px var(--primary, #16a34a);
}

.stat-metric {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.stat-metric span {
  font-size: 12px;
  line-height: 1.2;
  color: inherit;
}
.stat-metric b {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.stat-metric:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  color: var(--text);
}
.stat-metric.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
  color: var(--text);
}
.stat-metric.is-active b {
  color: var(--primary-hover, var(--primary));
}

.stat-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.stat-chip span {
  color: inherit;
  font-size: 12px;
}
.stat-chip b {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.stat-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: var(--text);
}
.stat-chip.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--text);
}
.stat-chip.is-active b {
  color: var(--primary-hover, var(--primary));
}

.agent-stats-table td.col-device,
.agent-stats-table th:nth-child(3) {
  max-width: none;
}
.agent-stats-table td.col-device {
  white-space: normal;
  word-break: break-all;
  overflow: visible;
  text-overflow: unset;
  font-size: 12px;
  color: var(--text);
  min-width: 160px;
}
.agent-ads-agent-filter {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.agent-ads-agent-filter input {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

@media (max-width: 1100px) {
  .agent-promo-cards,
  .landing-stats-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  .agent-promo-cards,
  .landing-stats-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.agent-ads-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
}
.agent-ads-field {
  margin: 0;
}
.agent-ads-field > span,
.agent-ads-events .finance-field > span {
  font-size: 12px;
  margin-bottom: 2px;
}
.agent-ads-field input,
.agent-ads-events .finance-field input {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}
.agent-ads-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.agent-ads-events .finance-field {
  margin: 0;
}
#agentAwIdInput.is-readonly,
.agent-ads-events input.is-readonly {
  background: #f8fafc;
  color: var(--text-secondary);
  cursor: default;
}

.landing-stats-cards {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.landing-stats-cards .stat-metric {
  width: 100%;
}
.landing-stats-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.landing-stats-tabbar .btn.is-active {
  background: var(--accent, #22c55e);
  border-color: transparent;
  color: #fff;
}
.agent-byday-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.agent-stats-table td.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.agent-stats-kpi {
  margin: 12px 0 8px;
}

.finance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.finance-table th,
.finance-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.finance-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(0,0,0,0.02);
}
.finance-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.finance-td-sub { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.finance-td-actions { white-space: nowrap; }
.commission-rates-row {
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.commission-rates-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}
.commission-rates-row label input {
  width: 72px;
  height: 32px;
}

/* 财务筛选 / 设置 */
.finance-filter-card { padding: 16px; }
.finance-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.finance-filter-bar input[type="text"],
.finance-filter-bar input[type="date"],
.finance-filter-bar select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.finance-filter-bar input[type="text"] {
  flex: 1 1 140px;
  max-width: 220px;
}
.finance-filter-bar input[type="date"] {
  width: 148px;
}
.finance-filter-bar select {
  min-width: 110px;
}
.finance-list-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.finance-rates-line,
.finance-mono-line {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 12px;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.finance-rates-line:empty,
.finance-mono-line:empty { display: none; }
.finance-settings-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
}
.finance-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.finance-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finance-field > span {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.finance-field input[type="text"] {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}

.finance-agent-create-bar input {
  min-width: 140px;
  flex: 1;
}

.finance-agent-pwd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-right: 6px;
}
.finance-otp-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 200px;
}
.finance-otp-wrap input {
  height: 44px;
  letter-spacing: 0.28em;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
  padding: 0 8px;
}
.finance-otp-wrap em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-secondary);
}
.finance-settings-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.finance-modal-settings {
  margin-bottom: 16px;
  max-width: none;
}
.finance-rates-card {
  max-width: 720px;
}
.finance-rates-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.finance-rates-head .finance-card-title { margin: 0; }
.finance-rates-edit .commission-rates-row {
  margin-top: 4px;
}
.finance-page-rates {
  margin-bottom: 8px;
}
.finance-invite-detail .invite-list {
  max-height: min(50vh, 420px);
  overflow-y: auto;
}
.finance-address-logs {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.finance-address-logs .finance-chart-head {
  margin-bottom: 8px;
}
.finance-address-logs-filter {
  margin-bottom: 10px;
}
.finance-address-logs-list {
  max-height: min(52vh, 480px);
  overflow-y: auto;
}
.finance-addr-log-row .ledger-main {
  gap: 4px;
}
.finance-addr-log-who {
  font-size: 0.92rem;
}
.finance-addr-log-addrs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 6px;
  margin: 2px 0;
}
.finance-addr-full {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.35;
  word-break: break-all;
  white-space: normal;
  color: var(--text);
  background: transparent;
}
.finance-addr-arrow {
  flex: 0 0 auto;
  opacity: 0.55;
  line-height: 1.35;
}
.finance-address-logs .list-pager {
  margin-top: 10px;
}
.finance-td-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .finance-filter-bar input[type="text"],
  .finance-filter-bar input[type="date"],
  .finance-filter-bar select {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }
  .finance-filter-bar .btn {
    flex: 1 1 calc(50% - 4px);
    min-height: 36px;
  }
}

/* ========== Mobile polish (全后台) ========== */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .app-shell,
  .shell-main,
  .shell-content,
  .view-page,
  .page-card,
  .form-card,
  .modal-card {
    max-width: 100%;
    min-width: 0;
  }

  .topbar {
    height: 56px;
    gap: 10px;
    padding: 0 12px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .topbar-crumb { flex: 1; min-width: 0; }
  .topbar-title,
  #crumbCurrent {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .topbar-meta { gap: 6px; flex-shrink: 0; }
  .topbar-user {
    max-width: none;
    padding: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
    border-radius: 999px;
  }
  .topbar-avatar { margin: 0; }
  #envStatus,
  #myBuildStat {
    display: none !important;
  }

  .shell-content {
    padding: 12px 12px calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .app-shell.role-finance .shell-content,
  .app-shell.role-finance .shell-content:has(.view-wide:not(.hidden)) {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .app-shell.role-agent .shell-content,
  .app-shell.role-agent .shell-content:has(.view-wide:not(.hidden)) {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .shell-content:has(.view-wide:not(.hidden)) {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .page-card {
    padding: 14px 14px;
    border-radius: 14px;
  }
  .page-head {
    align-items: flex-start;
    gap: 8px;
  }
  .page-head h2 { font-size: 17px; }
  .page-head-actions {
    width: 100%;
  }
  .page-head-actions .btn {
    flex: 1 1 auto;
    min-height: 36px;
  }

  .page-subtabs,
  .build-type-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    scrollbar-width: none;
  }
  .page-subtabs::-webkit-scrollbar,
  .build-type-tabs::-webkit-scrollbar {
    display: none;
  }
  .page-subtab,
  .build-type-tab {
    flex: 0 0 auto;
  }

  .event-stats-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-summary-cards > :nth-child(5) {
    grid-column: 1 / -1;
  }

  .cloak-filter-bar,
  .cloak-access-filters,
  .cloak-audit-filters {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  .cloak-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
  }
  .cloak-filter-actions .btn {
    flex: 1;
    min-height: 36px;
  }

  .event-stats-filter {
    gap: 10px;
  }
  .event-stats-filter-item {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
  .event-stats-filter-item select,
  .event-stats-filter-item input[type="date"] {
    min-width: 0;
    width: 100%;
  }
  .event-stats-filter-actions {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  .event-stats-filter-actions .btn {
    flex: 1;
    min-height: 36px;
  }
  .event-stats-presets {
    width: 100%;
  }
  .event-stats-presets .btn {
    flex: 1 1 calc(50% - 4px);
  }

  .history-actions,
  .history-links {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
  }
  .history-actions .btn,
  .history-links a,
  .history-links .btn {
    flex: 0 0 auto;
  }

  .deposit-row {
    align-items: stretch;
    flex-direction: column;
  }
  .deposit-assign {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .deposit-assign select {
    flex: 1;
    max-width: none;
  }

  .ledger-list {
    max-height: none;
    overflow: visible;
  }
  .recharge-balance {
    flex-direction: column;
    align-items: stretch;
  }
  .recharge-fee-list {
    margin-left: 0;
    align-items: flex-start;
  }
  .recharge-cloak-actions {
    justify-content: flex-start;
  }
  .account-overview-actions {
    justify-content: stretch;
  }
  .account-overview-actions .btn {
    width: 100%;
  }
  .account-modal-tab {
    padding: 8px 12px;
    font-size: 12px;
  }
  #rechargeModal .recharge-form {
    grid-template-columns: 1fr;
  }
  .withdraw-row {
    flex-direction: column;
    align-items: stretch;
  }
  .withdraw-row .modal-field {
    min-width: 0;
    width: 100%;
  }
  .withdraw-actions {
    flex-wrap: wrap;
  }
  .withdraw-actions .btn {
    width: 100%;
  }
  #viewFinanceLedger .ledger-list,
  #viewFinanceOrders .ledger-list,
  #viewFinanceInvites .ledger-list,
  #viewFinanceDeposits .deposits-list {
    max-height: none;
    overflow: visible;
  }

  .modal {
    padding: 0;
    align-items: flex-end;
  }
  .modal-card {
    max-height: min(92vh, calc(100dvh - env(safe-area-inset-bottom, 0px)));
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .billing-settings-row,
  .telegram-bind-row {
    flex-wrap: wrap;
  }
  .billing-settings-row input,
  .billing-settings-row select,
  .telegram-bind-row input {
    flex: 1 1 100%;
    min-width: 0;
  }
  .billing-settings-row .btn,
  .telegram-bind-row .btn {
    flex: 1 1 calc(50% - 4px);
  }

  .adjust-event-row {
    grid-template-columns: 1fr 1fr auto;
  }

  .cloak-review-modes {
    flex-wrap: wrap;
    white-space: normal;
  }

  .mobile-tabbar {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* 可横滑区域显示细滚动条 */
  .users-table-wrap,
  .wheel-list-scroll,
  .event-stats-table-wrap,
  .cloak-access-logs,
  .cloak-audit-logs,
  .finance-table-wrap {
    scrollbar-width: thin !important;
    -ms-overflow-style: auto !important;
  }
  .users-table-wrap::-webkit-scrollbar,
  .wheel-list-scroll::-webkit-scrollbar,
  .event-stats-table-wrap::-webkit-scrollbar,
  .cloak-access-logs::-webkit-scrollbar,
  .cloak-audit-logs::-webkit-scrollbar,
  .finance-table-wrap::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
    display: block !important;
  }
  .users-table-wrap::-webkit-scrollbar-thumb,
  .wheel-list-scroll::-webkit-scrollbar-thumb,
  .event-stats-table-wrap::-webkit-scrollbar-thumb,
  .cloak-access-logs::-webkit-scrollbar-thumb,
  .cloak-audit-logs::-webkit-scrollbar-thumb,
  .finance-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(64, 64, 64, 0.28);
    border-radius: 99px;
  }
}

@media (max-width: 720px) {
  .cloak-filter-bar,
  .cloak-access-filters,
  .cloak-audit-filters {
    grid-template-columns: 1fr !important;
  }
  .cloak-filter-bar label,
  .cloak-access-filters label,
  .cloak-audit-filters label {
    min-width: 0;
  }

  .finance-filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .finance-filter-bar input[type="text"],
  .finance-filter-bar select {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    flex: none;
  }
  .finance-filter-bar input[type="date"] {
    width: 100%;
    max-width: none;
    flex: none;
  }
  .finance-filter-bar .btn {
    width: 100%;
    flex: none;
    min-height: 36px;
  }

  /* 访问 / 操作日志：卡片化 */
  .cloak-access-logs,
  .cloak-audit-logs,
  .cloak-audit-page-logs {
    border: none;
    background: transparent;
    overflow: visible;
    max-height: none;
  }
  .cloak-access-row,
  .cloak-access-row.with-user,
  .cloak-audit-row,
  .cloak-audit-row.with-user {
    min-width: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    align-items: start;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
  }
  .cloak-access-row-head,
  .cloak-audit-row-head {
    display: none !important;
  }
  .cloak-access-row > *,
  .cloak-audit-row > * {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .cloak-access-row > *[data-label]::before,
  .cloak-audit-row > *[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-secondary);
    font-weight: 500;
  }
  .cloak-access-reason,
  .cloak-access-device,
  .cloak-audit-detail,
  .cloak-access-row > [data-label="对象"],
  .cloak-audit-row > [data-label="对象"],
  .cloak-audit-row > [data-label="说明"] {
    grid-column: 1 / -1;
  }
  .cloak-access-ip,
  .cloak-access-slug,
  .cloak-access-user,
  .cloak-access-device {
    white-space: normal;
    word-break: break-all;
  }
  .cloak-access-card .list-pager {
    position: static;
  }

  /* 财务邀请表：卡片化 */
  .finance-table-wrap {
    overflow: visible;
  }
  .finance-table,
  .finance-table tbody {
    display: block;
    width: 100%;
  }
  .finance-table thead {
    display: none;
  }
  .finance-table tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fff;
  }
  .finance-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border: none;
    padding: 6px 0;
    text-align: right;
  }
  .finance-table td::before {
    content: attr(data-label);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    flex: 0 0 auto;
  }
  .finance-table td[data-label=""]:empty {
    display: none;
  }
  .finance-table td.finance-td-actions {
    justify-content: flex-end;
    padding-top: 8px;
  }
  .finance-table td.finance-td-actions::before {
    display: none;
  }
  .finance-table td[data-label="推广人"] {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 4px;
  }
  .finance-table td[data-label="推广人"]::before {
    margin-bottom: 2px;
  }

  .wheel-data-table {
    min-width: 0;
  }
  .wheel-data-table th,
  .wheel-data-table td {
    white-space: normal;
  }
  .wheel-list-scroll {
    max-height: none;
  }

  .event-stats-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .users-table-wrap .users-table-head,
  .users-table-wrap .users-list {
    min-width: 0;
  }

  .login-log-row {
    grid-template-columns: 1fr;
  }

  .adjust-event-row {
    grid-template-columns: 1fr;
  }
  .adjust-event-row .adjust-event-del {
    width: 100%;
  }

  .agent-user-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }
  .agent-user-row > *[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 2px;
  }
  .agent-user-name { grid-column: 1 / -1; }

  .finance-kpi {
    padding: 12px 14px;
  }
  .finance-kpi strong {
    font-size: 18px;
  }

  .field input,
  .field select,
  .field textarea,
  .modal-field input,
  .modal-field select,
  .finance-field input,
  .finance-filter-bar input,
  .finance-filter-bar select,
  .cloak-filter-bar input,
  .cloak-filter-bar select {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .finance-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cloak-stats-cards,
  .event-stats-cards {
    gap: 8px;
  }
  .cloak-stat-card,
  .stat-mini-card {
    padding: 12px 14px;
  }
  .cloak-stat-card b,
  .stat-mini-card b {
    font-size: 18px;
  }
  .sidebar {
    width: min(var(--sidebar-w), 86vw);
  }
  .form-card {
    padding: 16px 14px;
  }
  .history-info .name {
    white-space: normal;
  }
}

.pwa-bill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.pwa-bill-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.pwa-pay-section {
  margin-bottom: 4px;
}
.pwa-promo-card {
  margin-bottom: 12px;
}
.pwa-promo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.pwa-promo-head h2 {
  margin: 0;
}
.pwa-wallet-bar {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pwa-wallet-bar strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pwa-promo-section h2 {
  margin-bottom: 10px;
}
.pwa-promo-target {
  margin: 0 0 10px;
}
.pwa-promo-target select {
  width: 100%;
  max-width: 420px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: var(--text);
}
.pwa-pay-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pwa-pay-custom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 220px;
}
.pwa-pay-custom span {
  font-size: 12px;
  color: var(--text-secondary);
}
.pwa-pay-custom input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}
.pwa-topup-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 4px 0 8px;
}
.pwa-topup-row .pwa-topup-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pwa-topup-row input[data-pwa-topup-amt] {
  width: 96px;
}
.pwa-promo-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.pwa-item-promo {
  display: grid;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fafbfc;
}
.pwa-item-promo-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-secondary);
}
.pwa-promo-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.pwa-promo-plan:hover { border-color: var(--primary-border); }
.pwa-promo-plan.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(14, 127, 81, .16);
  background: var(--primary-soft);
}
.pwa-promo-plan-main {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
}
.pwa-promo-plan-sub {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .pwa-promo-plans {
    grid-template-columns: 1fr;
  }
  .pwa-pay-custom {
    max-width: none;
  }
}
.pwa-promo-edit {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}
.pwa-promo-edit-row {
  display: grid;
  grid-template-columns: 40px 1fr 1fr;
  gap: 6px;
  align-items: center;
}
.pwa-promo-edit-label { font-size: 13px; }
.pwa-promo-edit-hint {
  grid-column: 2 / -1;
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  white-space: normal;
}
.pwa-promo-edit-row input {
  width: 100%;
  min-width: 0;
}
.billing-check-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.billing-settings-block {
  grid-column: 1 / -1;
}
.xiaomi-cert-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.xiaomi-cert-row a {
  font-size: 13px;
  color: var(--accent, #0E7F51);
}
.xiaomi-test-status {
  align-self: center;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.xiaomi-test-status.is-ok {
  color: #10b981;
}
.xiaomi-test-status.is-wait {
  color: var(--text-secondary);
}
.xiaomi-test-status.is-err {
  color: var(--error, #dc2626);
}
.store-privacy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.store-privacy-row select {
  flex: 1;
  min-width: 140px;
}
.privacy-legal-card {
  max-width: 840px;
  width: min(840px, calc(100vw - 24px));
}
.privacy-legal-card .modal-actions {
  margin-top: 12px;
}
.privacy-legal-frame {
  width: 100%;
  height: min(64vh, 560px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.privacy-legal-editor {
  width: 100%;
  min-height: min(64vh, 560px);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}
.xiaomi-settings-only .finance-card-title,
.xiaomi-settings-only .billing-settings:not(.xiaomi-settings-block) {
  display: none;
}
#viewAdminSettings:not(.xiaomi-settings-only) .xiaomi-settings-block {
  display: none;
}
.ops-flow-accounts {
  position: relative;
  margin: 6px 0 0;
}
.ops-flow-accounts > input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}
.ops-flow-suggest {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 220px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.ops-flow-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.ops-flow-suggest button:hover {
  background: var(--primary-soft);
}
.ops-flow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
.ops-flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 12px;
}
.ops-flow-chip button {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
}
.ops-flow-chip button:hover {
  color: var(--text);
}
.ops-flow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}
.ops-flow-row-label {
  flex: 0 0 72px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.ops-flow-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.ops-flow-checks .billing-check-row {
  margin: 0;
}
.ops-flow-pct {
  flex: 0 0 72px;
  width: 72px;
  max-width: 72px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}
.pwa-st-on {
  color: #15803d;
  background: #dcfce7;
}
.pwa-st-off {
  color: #b91c1c;
  background: #fee2e2;
}

.site-ads-card {
  max-width: 760px;
}
.site-ads-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-ads-event {
  display: grid;
  grid-template-columns: minmax(88px, 1.1fr) 118px minmax(110px, 1.2fr) 28px 28px;
  gap: 8px;
  align-items: center;
}
.site-ads-event input[type="text"],
.site-ads-event select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}
.site-ads-on {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.site-ads-on input {
  width: 16px;
  height: 16px;
}
@media (max-width: 700px) {
  .site-ads-event {
    grid-template-columns: 1fr 1fr 28px 28px;
  }
  .site-ads-event [data-k="name"] {
    grid-column: 1 / -2;
  }
}

.apk-domain-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 4px;
}
.apk-domain-picker > span:first-of-type {
  font-size: 13px;
  font-weight: 600;
}
.apk-domain-modes {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #eef1f4;
  background: color-mix(in srgb, var(--border) 40%, var(--bg));
  box-sizing: border-box;
}
.apk-domain-mode {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border: 0 !important;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  box-shadow: none !important;
  user-select: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.apk-domain-mode.is-on,
.apk-domain-mode:has(input:checked) {
  background: var(--bg, #fff);
  color: var(--text, #111827);
}
.field .apk-domain-mode input,
.apk-domain-mode input,
.apk-domain-modes input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
}
.apk-domain-pool-row,
.apk-domain-own-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8px;
}
.apk-domain-own-row {
  grid-template-columns: 1fr;
}
@media (max-width: 700px) {
  .apk-domain-pool-row {
    grid-template-columns: 1fr;
  }
}

/* 让 APK 域名选择器里的 select/input 外观与其它填写栏一致（原先不在 .field 下，所以不会继承样式） */
.apk-domain-pool-row select,
.apk-domain-pool-row input,
.apk-domain-own-row input,
.apk-domain-own-row select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
}

.apk-domain-pool-row select:focus,
.apk-domain-pool-row input:focus,
.apk-domain-own-row input:focus,
.apk-domain-own-row select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14,127,81,.12);
}

.apk-domain-pool-row input::placeholder,
.apk-domain-own-row input::placeholder {
  color: #9ca3af;
}

/* Telegram 广播 */
.tg-broadcast-card { max-width: 720px; }
.tg-broadcast-tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.tg-broadcast-tab {
  appearance: none;
  border: none;
  background: none;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
}
.tg-broadcast-tab.active {
  color: var(--primary);
  background: var(--primary-soft);
}
.tg-send-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.tg-send-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.tg-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}
.tg-schedule-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.tg-messages-list,
.tg-schedules-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.tg-msg-item,
.tg-sch-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.tg-msg-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 560px) {
  .tg-schedule-row { grid-template-columns: 1fr; }
}