/* VibeAPI 运维面板 — Anthropic-inspired Design System
   Fonts: Lora (serif headlines), Inter (sans UI), Fira Code (mono)
   Palette: warm parchment tones, terracotta accent, ring-based shadows */

/* ===== @font-face ===== */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/lora-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/lora-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/lora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/lora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/fira-code-latin-400-normal.woff2') format('woff2'); }

/* ===== Design Tokens (Light) ===== */
:root {
  --font-serif: 'Lora', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', 'SF Mono', Consolas, monospace;
  --near-black: #141413;
  --terracotta: #c96442;
  --coral: #d97757;
  --parchment: #f5f4ed;
  --ivory: #faf9f5;
  --pure-white: #ffffff;
  --warm-sand: #e8e6dc;
  --dark-surface: #30302e;
  --deep-dark: #141413;
  --charcoal-warm: #4d4c48;
  --olive-gray: #5e5d59;
  --stone-gray: #87867f;
  --dark-warm: #3d3d3a;
  --warm-silver: #b0aea5;
  --border-cream: #f0eee6;
  --border-warm: #e8e6dc;
  --border-dark: #30302e;
  --ring-warm: #d1cfc5;
  --ring-deep: #c2c0b6;
  --success: #2D6A4F; --success-bg: #e9f5ee;
  --warn: #B54708; --warn-bg: #fef3e5;
  --danger: #b53333; --danger-bg: #fef0ec;
  --info: #5C4B1F; --info-bg: #f5f0e0;
  --focus-blue: #3898ec;
  --tier-high: #6B4F1D; --tier-high-bg: #f5efe0;
  --tier-mid: #3D5A80; --tier-mid-bg: #e8eff5;
  --bg: var(--parchment);
  --fg: var(--near-black);
  --card: var(--ivory);
  --card-fg: var(--near-black);
  --primary: var(--near-black);
  --primary-fg: var(--ivory);
  --secondary: var(--parchment);
  --secondary-fg: var(--dark-warm);
  --muted: var(--border-cream);
  --muted-fg: var(--stone-gray);
  --border: var(--border-cream);
  --input-bg: var(--pure-white);
  --ring: var(--ring-warm);
  --shadow: rgba(61,61,58,.06);
}

/* ===== Dark Theme ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1a19; --fg: #c2c0b6; --card: #242422; --card-fg: #c2c0b6;
    --primary: var(--ivory); --primary-fg: var(--near-black);
    --secondary: #1f1e1d; --secondary-fg: #c2c0b6;
    --muted: #333330; --muted-fg: #9c9a92;
    --border: #3a3a37; --input-bg: #2a2a28;
    --ring: #555550; --shadow: rgba(0,0,0,.25);
    --success: #6FCF97; --success-bg: #1a2f23;
    --warn: #F5A623; --warn-bg: #332a17;
    --danger: #EB5757; --danger-bg: #331a1a;
    --info: #D4C98A; --info-bg: #2a2717;
    --tier-high: #D4C98A; --tier-high-bg: #2a2717;
    --tier-mid: #7EB8DA; --tier-mid-bg: #1a2530;
  }
}
[data-theme="dark"] {
  --bg: #1a1a19; --fg: #c2c0b6; --card: #242422; --card-fg: #c2c0b6;
  --primary: var(--ivory); --primary-fg: var(--near-black);
  --secondary: #1f1e1d; --secondary-fg: #c2c0b6;
  --muted: #333330; --muted-fg: #9c9a92;
  --border: #3a3a37; --input-bg: #2a2a28;
  --ring: #555550; --shadow: rgba(0,0,0,.25);
  --success: #6FCF97; --success-bg: #1a2f23;
  --warn: #F5A623; --warn-bg: #332a17;
  --danger: #EB5757; --danger-bg: #331a1a;
  --info: #D4C98A; --info-bg: #2a2717;
  --tier-high: #D4C98A; --tier-high-bg: #2a2717;
  --tier-mid: #7EB8DA; --tier-mid-bg: #1a2530;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.60;
  min-height: 100vh;
  transition: background .3s, color .3s;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.20; color: var(--fg); }

/* ===== Header ===== */
.header {
  background: var(--deep-dark);
  color: var(--ivory);
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-dark);
}
.header h1 { font-size: 22px; font-weight: 500; color: var(--ivory); letter-spacing: -0.3px; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header a { color: var(--warm-silver); text-decoration: none; font-size: 14px; transition: color .2s; }
.header a:hover { color: var(--ivory); }
.theme-toggle {
  background: none; border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  color: var(--warm-silver); padding: 6px 12px; font-size: 14px; cursor: pointer; transition: all .2s;
}
.theme-toggle:hover { border-color: rgba(255,255,255,.3); color: var(--ivory); }

/* ===== Top Nav ===== */
.topnav { background: var(--secondary); border-bottom: 1px solid var(--border); padding: 16px 32px; }
.topnav-cards { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.topnav-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; min-width: 160px; cursor: pointer; text-decoration: none;
  color: var(--fg); transition: all .2s; flex-shrink: 0;
}
.topnav-card:hover { box-shadow: var(--ring) 0px 0px 0px 1px; transform: translateY(-1px); }
.topnav-card .nav-cat {
  display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 8px;
  border-radius: 10px; background: var(--muted); color: var(--muted-fg);
  margin-bottom: 6px; letter-spacing: 0.3px; text-transform: uppercase;
}
.topnav-card .nav-label { font-family: var(--font-serif); font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.topnav-card .nav-desc { font-size: 12px; color: var(--muted-fg); line-height: 1.4; }

/* ===== Container ===== */
.container { max-width: 1400px; margin: 0 auto; padding: 0 32px 32px; }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 0; background: var(--card); border-bottom: 1px solid var(--border); padding: 0 32px; }
.tab {
  padding: 14px 24px; font-size: 15px; font-weight: 500; cursor: pointer;
  color: var(--muted-fg); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .2s;
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); border-bottom-color: var(--terracotta); }
.tab-content { display: none; padding-top: 28px; }
.tab-content.active { display: block; }

/* ===== Section Header ===== */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.section-header h2 { font-size: 24px; font-weight: 500; }

/* ===== Filter Bar ===== */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.filter-btn {
  padding: 6px 16px; border: 1px solid var(--border); border-radius: 20px;
  font-size: 13px; cursor: pointer; background: var(--card); color: var(--muted-fg); transition: all .2s;
}
.filter-btn:hover { border-color: var(--ring-deep); color: var(--fg); }
.filter-btn.active { background: var(--near-black); color: var(--ivory); border-color: var(--near-black); }
[data-theme="dark"] .filter-btn.active { background: var(--ivory); color: var(--near-black); border-color: var(--ivory); }

/* ===== Cards Grid ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 32px; }
.card {
  background: var(--card); border-radius: 12px; padding: 22px;
  border: 1px solid var(--border); transition: box-shadow .2s;
}
.card:hover { box-shadow: rgba(0,0,0,0.05) 0px 4px 24px; }
.card.hidden { display: none; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card-title { font-family: var(--font-serif); font-size: 15px; font-weight: 500; color: var(--card-fg); }

/* ===== Badges ===== */
.badge { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.1px; }
.badge-ok { background: var(--success-bg); color: var(--success); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-err { background: var(--muted); color: var(--muted-fg); }

/* ===== Metrics ===== */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric-label { font-size: 11px; color: var(--muted-fg); margin-bottom: 2px; letter-spacing: 0.1px; }
.metric-value { font-size: 18px; font-weight: 700; color: var(--card-fg); font-variant-numeric: tabular-nums; }
.metric-value.warn { color: var(--warn); }

/* ===== Progress Bar ===== */
.bar-wrap { margin-top: 14px; }
.bar-bg { height: 5px; background: var(--muted); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.bar-label { font-size: 11px; color: var(--muted-fg); margin-top: 4px; text-align: right; }

/* ===== Burn Rate ===== */
.burn-rate {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted-fg); line-height: 1.6;
}
.burn-rate .burn-row {
  display: flex; justify-content: space-between; align-items: center; padding: 2px 0;
}
.burn-rate .burn-label { color: var(--muted-fg); }
.burn-rate .burn-value { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--card-fg); }
.burn-rate .burn-eta {
  margin-top: 6px; padding: 6px 10px; border-radius: 8px;
  background: var(--info-bg); color: var(--info);
  font-size: 13px; font-weight: 600; text-align: center;
}
.burn-rate .burn-eta.warn { background: var(--warn-bg); color: var(--warn); }
.burn-rate .burn-eta.danger { background: var(--danger-bg); color: var(--danger); }
.burn-rate .burn-no-data { color: var(--muted-fg); font-style: italic; text-align: center; padding: 4px 0; }

/* Sparkline */
.sparkline-wrap { margin-top: 10px; }
.sparkline-label { font-size: 11px; color: var(--muted-fg); margin-bottom: 4px; }
.sparkline { width: 100%; height: 40px; display: block; }
.sparkline-range { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-fg); margin-top: 2px; }

/* ===== Card Topup ===== */
.card-topup { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.card-topup input {
  flex: 1; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; min-width: 0; background: var(--input-bg); color: var(--fg);
}
.card-topup input:focus { outline: none; border-color: var(--focus-blue); box-shadow: 0 0 0 3px rgba(56,152,236,.12); }
.card-topup button {
  padding: 7px 16px; border: none; border-radius: 8px; font-size: 13px; cursor: pointer;
  font-weight: 500; background: var(--terracotta); color: var(--ivory); white-space: nowrap; transition: opacity .2s;
}
.card-topup button:hover { opacity: .85; }
.card-topup button:disabled { opacity: .4; cursor: not-allowed; }
.card-topup-msg { font-size: 12px; margin-top: 6px; }
.card-topup-msg.ok { color: var(--success); }
.card-topup-msg.err { color: var(--danger); }

/* ===== Buttons ===== */
.btn {
  padding: 9px 20px; border: none; border-radius: 8px; font-size: 14px; cursor: pointer;
  font-weight: 500; transition: all .2s; display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary {
  background: var(--terracotta); color: var(--ivory);
  box-shadow: var(--terracotta) 0px 0px 0px 0px, var(--terracotta) 0px 0px 0px 1px;
}
.btn-primary:hover { opacity: .88; }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px; }
.btn-refresh {
  padding: 7px 16px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; cursor: pointer; background: var(--card); color: var(--muted-fg);
  display: inline-flex; align-items: center; gap: 6px; transition: all .2s;
}
.btn-refresh:hover { border-color: var(--ring-deep); color: var(--fg); }
.btn-refresh.loading { opacity: .5; pointer-events: none; }
.btn-refresh .spin { display: inline-block; }
.btn-refresh.loading .spin { animation: spin .8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== Forms ===== */
.form-section {
  background: var(--card); border-radius: 12px; padding: 24px;
  border: 1px solid var(--border); margin-bottom: 20px;
}
.form-section h2 { font-size: 20px; font-weight: 500; margin-bottom: 16px; color: var(--card-fg); }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 13px; color: var(--muted-fg); font-weight: 500; }
.form-group select, .form-group input {
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--font-sans); font-size: 14px; background: var(--input-bg); color: var(--fg);
  transition: border-color .2s, box-shadow .2s;
}
.form-group select:focus, .form-group input:focus {
  outline: none; border-color: var(--focus-blue); box-shadow: 0 0 0 3px rgba(56,152,236,.12);
}
.form-group input { min-width: 0; }
.threshold-presets { display: flex; gap: 6px; margin-top: 4px; }
.threshold-presets button {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; cursor: pointer; background: var(--card); color: var(--muted-fg); transition: all .2s;
}
.threshold-presets button:hover, .threshold-presets button.active {
  background: var(--near-black); color: var(--ivory); border-color: var(--near-black);
}

/* ===== Flash ===== */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash-ok { background: var(--success-bg); color: var(--success); }
.flash-err { background: var(--danger-bg); color: var(--danger); }

/* ===== Summary Cards ===== */
.vip-summary { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.summary-card {
  background: var(--card); border-radius: 12px; padding: 18px 24px;
  border: 1px solid var(--border); flex: 1; min-width: 180px;
}
.summary-card .label { font-size: 12px; color: var(--muted-fg); margin-bottom: 6px; letter-spacing: 0.1px; }
.summary-card .value { font-size: 28px; font-weight: 700; color: var(--card-fg); font-variant-numeric: tabular-nums; }
.summary-card .value.alert-count { color: var(--danger); }

/* ===== Tables ===== */
.vip-table-wrap { background: var(--card); border-radius: 12px; border: 1px solid var(--border); overflow-x: auto; }
.vip-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vip-table th {
  background: var(--secondary); padding: 12px 16px; text-align: left;
  font-weight: 600; font-size: 12px; color: var(--muted-fg); border-bottom: 1px solid var(--border);
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px;
}
.vip-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--card-fg); }
.vip-table tr:last-child td { border-bottom: none; }
.vip-table tr:hover { background: var(--secondary); }
.vip-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sort indicators */
th[data-sort] { position: relative; padding-right: 24px !important; }
th[data-sort]::after { content: '⇅'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: .3; font-size: 11px; }
th[data-sort].sort-asc::after { content: '↑'; opacity: .8; color: var(--terracotta); }
th[data-sort].sort-desc::after { content: '↓'; opacity: .8; color: var(--terracotta); }

/* ===== Tier / VIP ===== */
.tier-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.tier-3000 { background: var(--tier-high-bg); color: var(--tier-high); }
.tier-1000 { background: var(--tier-mid-bg); color: var(--tier-mid); }
.tier-none { background: var(--muted); color: var(--muted-fg); }
.vip-rules {
  margin-top: 20px; padding: 18px 22px; background: var(--secondary); border-radius: 12px;
  border: 1px solid var(--border); font-size: 13px; color: var(--muted-fg); line-height: 1.7;
}
.vip-rules strong { color: var(--fg); }

/* ===== Batch Bar ===== */
.batch-bar {
  display: flex; gap: 12px; align-items: center; padding: 12px 16px;
  background: var(--info-bg); border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.batch-bar .count { font-size: 14px; font-weight: 600; color: var(--info); }
.batch-bar select, .batch-bar input {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; background: var(--input-bg); color: var(--fg);
}

/* ===== Checkbox ===== */
.plat-cb { width: 16px; height: 16px; cursor: pointer; accent-color: var(--terracotta); }

/* ===== Batch Topup ===== */
.batch-topup h2 { font-size: 20px; font-weight: 500; margin-bottom: 16px; color: var(--card-fg); }
.batch-topup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.batch-topup-textarea {
  width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 8px; font-family: var(--font-mono); font-size: 13px; resize: vertical;
  background: var(--input-bg); color: var(--fg); line-height: 1.5;
}
.batch-topup-textarea:focus { outline: none; border-color: var(--focus-blue); box-shadow: 0 0 0 3px rgba(56,152,236,.12); }
.batch-topup-accounts { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.batch-topup-accounts label {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px;
  cursor: pointer; font-size: 13px; color: var(--card-fg); transition: background .15s;
}
.batch-topup-accounts label:hover { background: var(--secondary); }
.batch-topup-accounts label.disabled { opacity: .4; pointer-events: none; }
.batch-match { font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-top: 10px; }
.batch-match.ok { background: var(--success-bg); color: var(--success); }
.batch-match.warn { background: var(--warn-bg); color: var(--warn); }
.batch-match.info { background: var(--info-bg); color: var(--info); }
.batch-results { margin-top: 16px; }
.batch-result-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); font-size: 13px; color: var(--card-fg);
}
.batch-result-item:last-child { border-bottom: none; }
.batch-result-item .icon { font-size: 16px; }
.batch-result-item .icon.ok { color: var(--success); }
.batch-result-item .icon.err { color: var(--danger); }

/* ===== Monitor Sub-tabs ===== */
.log-subtabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.log-subtab {
  padding: 10px 20px; font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--muted-fg); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .2s;
}
.log-subtab:hover { color: var(--fg); }
.log-subtab.active { color: var(--fg); border-bottom-color: var(--terracotta); }

/* ===== Log Viewer ===== */
.log-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.log-toolbar input {
  flex: 1; min-width: 200px; padding: 9px 14px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; background: var(--input-bg); color: var(--fg);
}
.log-toolbar input:focus { outline: none; border-color: var(--focus-blue); box-shadow: 0 0 0 3px rgba(56,152,236,.12); }
.log-toolbar select {
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; background: var(--input-bg); color: var(--fg);
}
.log-viewer {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px; max-height: 600px; overflow-y: auto;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
}
.log-viewer::-webkit-scrollbar { width: 6px; }
.log-viewer::-webkit-scrollbar-track { background: transparent; }
.log-viewer::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.log-line { padding: 2px 0; white-space: pre-wrap; word-break: break-all; color: var(--card-fg); }
.log-line.warn { color: var(--warn); }
.log-line.error { color: var(--danger); }
.log-line.info { color: var(--muted-fg); }
.log-empty { text-align: center; padding: 48px; color: var(--muted-fg); font-family: var(--font-sans); }
.log-stats { font-size: 12px; color: var(--muted-fg); margin-top: 10px; text-align: right; }

/* ===== Monitor Panels ===== */
.monitor-panel { display: none; }
.monitor-panel.active { display: block; }

/* ===== Links Management ===== */
.links-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.link-form-wrap {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px; margin-bottom: 20px;
}
.link-form-wrap h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 500; margin-bottom: 14px; color: var(--card-fg); }
.link-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ===== Modal ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(20,20,19,.5);
  z-index: 1000; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card); border-radius: 16px; border: 1px solid var(--border);
  width: 100%; max-width: 700px; max-height: 90vh; overflow-y: auto;
  padding: 28px; position: relative; box-shadow: rgba(0,0,0,0.12) 0px 20px 60px;
}
.modal-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none;
  font-size: 22px; color: var(--muted-fg); cursor: pointer; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: all .2s;
}
.modal-close:hover { background: var(--muted); color: var(--fg); }

/* ===== Misc ===== */
.currency-tag { font-size: 11px; color: var(--muted-fg); margin-left: 4px; font-weight: 400; }
.loading { text-align: center; padding: 48px; color: var(--muted-fg); font-size: 14px; }
.refresh-hint { text-align: center; color: var(--stone-gray); font-size: 12px; margin-top: 32px; letter-spacing: 0.2px; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .header { padding: 14px 16px; }
  .header h1 { font-size: 18px; }
  .topnav { padding: 12px 16px; }
  .topnav-cards { gap: 8px; }
  .topnav-card { padding: 10px 14px; min-width: 130px; }
  .topnav-card .nav-label { font-size: 13px; }
  .container { padding: 0 16px 20px; }
  .tabs { padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { padding: 12px 16px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-header h2 { font-size: 20px; }
  .filter-bar { gap: 6px; }
  .filter-btn { padding: 5px 12px; font-size: 12px; }
  .batch-bar { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .form-section { padding: 16px; }
  .form-section div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .link-form-grid { grid-template-columns: 1fr; }
  #report-grid { grid-template-columns: 1fr; }
  .vip-table-wrap { border-radius: 8px; }
  .vip-table { font-size: 12px; min-width: 600px; }
  .vip-table th, .vip-table td { padding: 8px 10px; }
  .vip-summary { gap: 8px; }
  .summary-card { padding: 14px 16px; min-width: 120px; }
  .summary-card .value { font-size: 22px; }
  .log-toolbar { flex-direction: column; }
  .log-toolbar input { min-width: 100%; }
  .log-viewer { max-height: 400px; padding: 14px; font-size: 11.5px; }
  .log-subtabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .log-subtab { padding: 8px 14px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
  .modal { padding: 20px; max-height: 85vh; border-radius: 12px; }
  .batch-topup-grid { grid-template-columns: 1fr; }
  .batch-topup-accounts { max-height: 200px; }
  .btn { padding: 10px 16px; font-size: 13px; }
  .btn-refresh { padding: 8px 12px; font-size: 12px; }
}
@media (max-width: 480px) {
  .header h1 { font-size: 16px; }
  .topnav-card { min-width: 110px; padding: 8px 12px; }
  .cards { gap: 10px; }
  .card { padding: 16px; }
  .metric-value { font-size: 16px; }
  .tab { padding: 10px 12px; font-size: 12px; }
  .summary-card { min-width: 90px; padding: 12px 14px; }
  .summary-card .value { font-size: 20px; }
}