:root {
  --color-bg: #131417;
  --color-surface-1: #1a1c20;
  --color-surface-2: #22252c;
  --color-surface-3: #2c3038;
  --color-input-bg: #0e1014;
  --color-overlay: rgba(0,0,0,0.72);
  --color-border-1: #363b44;
  --color-border-2: #282c34;
  --color-border-3: #1e2128;
  --color-text: #d0ccc8;
  --color-text-dim: #8a8880;
  --color-text-muted: #585450;
  --color-amber: #e07828;
  --color-amber-light: #f0b060;
  --color-amber-dark: #a84c10;
  --color-amber-dim: #6a2e08;
  --color-amber-glow: rgba(224,120,40,0.10);
  --color-blue: #38c8e8;
  --color-blue-dark: #1a90b0;
  --color-blue-dim: #0e5068;
  --color-blue-glow: rgba(56,200,232,0.10);
  --color-green: #5a9e6a;
  --color-red: #c05030;
  --color-yellow: #c8943a;
  --btn-p-bg: #0e5068;
  --btn-p-bg-hover: #1a7090;
  --btn-p-text: #a0e8f8;
  --btn-s-bg: #a84c10;
  --btn-s-bg-hover: #c05a18;
  --btn-s-text: #ffe0c0;
  --btn-d-bg: #7a1a10;
  --btn-d-bg-hover: #902018;
  --btn-d-text: #ffd0c8;
  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --r-sm: 3px; --r-md: 5px; --r-lg: 7px; --r-xl: 10px; --r-full: 999px;
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.65);
  --sidebar-w: 220px;
  --header-h: 58px;
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;
  --t-slow: 0.3s ease;
  --z-sticky: 200;
  --z-modal: 400;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--color-blue); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--color-blue-dark); }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }
input, select { font-family: var(--font-body); font-size: 13px; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-1); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-amber-dark); }
::selection { background: rgba(56,200,232,0.18); color: var(--color-blue); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 36px; padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap; border: none;
}
.btn-primary { background: var(--btn-p-bg); color: var(--btn-p-text); }
.btn-primary:hover { background: var(--btn-p-bg-hover); }
.btn-secondary { background: var(--btn-s-bg); color: var(--btn-s-text); }
.btn-secondary:hover { background: var(--btn-s-bg-hover); }
.btn-ghost {
  background: transparent; border: 1px solid var(--color-border-1); color: var(--color-text-dim);
  font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.btn-ghost:hover { border-color: var(--color-blue-dim); color: var(--color-blue); background: var(--color-blue-glow); }
.btn-danger { background: var(--btn-d-bg); color: var(--btn-d-text); }
.btn-danger:hover { background: var(--btn-d-bg-hover); }
.btn-sm { height: 28px; padding: 0 var(--sp-3); font-size: 11px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}
.badge-amber { background: rgba(224,120,40,0.18); border-color: var(--color-amber-dark); color: var(--color-amber); }
.badge-blue  { background: rgba(56,200,232,0.12); border-color: var(--color-blue-dark); color: var(--color-blue); }
.badge-green { background: rgba(50,120,60,0.25); border-color: #3a7040; color: var(--color-green); }
.badge-red   { background: rgba(192,80,48,0.20); border-color: #802828; color: var(--color-red); }
.badge-dim   { background: rgba(50,46,38,0.5); border-color: var(--color-border-1); color: var(--color-text-dim); }

.status-dot { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 11px; }
.status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-dot.online { color: var(--color-green); }
.status-dot.online::before { background: var(--color-green); box-shadow: 0 0 6px var(--color-green); }
.status-dot.offline { color: var(--color-text-muted); }
.status-dot.offline::before { background: var(--color-text-muted); }

.form-label { display: block; font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-1); }
.form-input, select.form-input {
  width: 100%; height: 36px; padding: 0 var(--sp-3);
  background: var(--color-input-bg); border: 1px solid var(--color-border-2);
  border-radius: var(--r-md); color: var(--color-text); font-size: 11px; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input::placeholder { color: var(--color-text-muted); }
.form-input:focus, select.form-input:focus { border-color: var(--color-blue-dark); box-shadow: 0 0 0 2px var(--color-blue-glow); }
.input-wrap { position: relative; }
.input-wrap .form-input { padding-right: 36px; }
.input-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted);
  font-size: 13px; transition: color var(--t-fast); border: none; background: none;
}
.input-eye:hover { color: var(--color-text-dim); }
.form-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-hint { font-size: 9px; color: var(--color-text-muted); margin-top: var(--sp-1); }
.context-label { font-size: 15px; font-weight: 500; color: var(--color-text-dim); margin-bottom: 16px; }

.pill-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pill-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 34px; padding: 0 var(--sp-4);
  border-radius: var(--r-md); border: 1px solid var(--color-border-2);
  background: var(--color-surface-1); color: var(--color-text-dim);
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  transition: all var(--t-base); white-space: nowrap;
}
.pill-tab:hover { border-color: var(--color-blue-dim); color: var(--color-text); background: var(--color-surface-2); }
.pill-tab.active { background: var(--btn-p-bg); border-color: var(--btn-p-bg); color: var(--btn-p-text); }
.pill-tab.active:hover { background: var(--btn-p-bg-hover); }
.limit-pill {
  display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px;
  border-radius: var(--r-full); border: 1px solid var(--color-border-1); background: var(--color-surface-2);
  color: var(--color-text-dim); font-size: 11px; font-family: var(--font-mono);
}
.limit-pill .used { color: var(--color-amber); }
.tabs-actions-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.tabs-right { display: flex; align-items: center; gap: 12px; }

.accordion-item { border: 1px solid var(--color-border-2); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-base); }
.accordion-item:hover { border-color: var(--color-border-1); }
.accordion-item.open { border-color: var(--color-amber-dim); border-left: 3px solid var(--btn-p-bg); }
.accordion-trigger {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-2); cursor: pointer; transition: background var(--t-fast); user-select: none;
}
.accordion-trigger:hover, .accordion-item.open .accordion-trigger { background: var(--color-surface-3); }
.acc-arrow { color: var(--color-text-muted); font-size: 9px; transition: transform var(--t-base); flex-shrink: 0; }
.accordion-item.open .acc-arrow { transform: rotate(90deg); }
.acc-name { font-size: 14px; font-weight: 500; color: var(--color-text); }
.acc-meta { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.acc-char-count {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; background: var(--color-surface-1);
  border: 1px solid var(--color-border-2); border-radius: var(--r-full); font-size: 10px; color: #7a7870;
}
.accordion-body { display: none; background: var(--color-surface-1); }
.accordion-item.open .accordion-body { display: block; }
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-sm);
  color: var(--color-text-muted); border: 1px solid transparent; font-size: 11px; background: none; transition: all var(--t-fast);
}
.copy-btn:hover { color: var(--color-blue); border-color: var(--color-blue-dim); background: var(--color-blue-glow); }
.reset-pw-btn {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #7a7870; cursor: pointer;
  border: none; background: none; font-family: var(--font-body); letter-spacing: 0.5px; transition: color var(--t-fast); white-space: nowrap;
}
.reset-pw-btn:hover { color: var(--color-amber); }
.danger-link:hover { color: var(--color-red); }

.char-table-wrap { padding: 0 var(--sp-2) var(--sp-2); }
.char-table { width: 100%; border-collapse: collapse; }
.char-table thead tr { background: rgba(0,0,0,0.18); }
.char-table th {
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--color-amber); padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--color-border-2);
}
.char-table td {
  padding: var(--sp-3) var(--sp-3); font-size: 11px; color: var(--color-text-dim);
  border-bottom: 1px solid var(--color-border-3); vertical-align: middle;
}
.char-table tr:last-child td { border-bottom: none; }
.char-table tbody tr:hover td { background: var(--color-surface-3); color: var(--color-text); }
.char-name-cell { color: var(--color-text); font-weight: 500; }
.no-chars-row td { text-align: center; color: var(--color-text-muted); font-style: italic; font-size: 11px; padding: var(--sp-5); }
.inline-error { margin: 0 var(--sp-3) var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: rgba(192,80,48,0.15); color: #ffcabf; border: 1px solid rgba(192,80,48,0.25); }

.empty-accounts {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px var(--sp-6); text-align: center;
  background: var(--color-surface-1); border: 1px dashed var(--color-border-1); border-radius: var(--r-xl);
}
.empty-accounts-icon { font-size: 38px; opacity: 0.2; margin-bottom: var(--sp-4); }
.empty-accounts-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: var(--sp-2); }
.empty-accounts-sub { font-size: 12px; color: var(--color-text-muted); max-width: 300px; line-height: 1.7; margin-bottom: var(--sp-5); }
.empty-accounts-actions { display: flex; gap: var(--sp-2); }
.account-list { display: flex; flex-direction: column; gap: 8px; }

.modal-overlay { position: fixed; inset: 0; background: var(--color-overlay); display: none; align-items: center; justify-content: center; z-index: var(--z-modal); padding: var(--sp-4); }
.modal-overlay.open { display: flex; }
.modal {
  width: min(100%, 480px); background: var(--color-surface-1); border: 1px solid var(--color-border-1);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border-2); background: var(--color-surface-2); }
.modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text); }
.modal-subtitle { font-size: 11px; color: var(--color-text-dim); margin-top: 4px; }
.modal-close { color: var(--color-text-muted); font-size: 18px; width: 30px; height: 30px; border-radius: var(--r-md); }
.modal-close:hover { background: var(--color-surface-3); color: var(--color-text); }
.modal-body { display: grid; gap: var(--sp-3); padding: var(--sp-5); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--color-border-2); background: var(--color-surface-2); }

.coin-widget {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); height: 38px;
  background: var(--color-surface-2); border: 1px solid var(--color-border-2); border-radius: var(--r-lg); transition: all var(--t-base); color: inherit;
}
.coin-widget:hover { border-color: var(--color-amber-dim); background: var(--color-surface-3); color: inherit; }
.coin-icon { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffb55f, var(--color-amber)); box-shadow: 0 0 10px rgba(224,120,40,0.45); flex-shrink: 0; }
.coin-amount { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1; color: var(--color-amber); letter-spacing: .5px; }
.coin-label { font-size: 9px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 1.3px; line-height: 1; margin-top: 3px; }
.download-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 38px; padding: 0 var(--sp-4);
  background: var(--color-surface-2); border: 1px solid var(--color-border-2); border-radius: var(--r-lg);
  font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--color-text-dim); transition: all var(--t-fast); white-space: nowrap;
}
.download-btn:hover { border-color: var(--color-blue-dim); color: var(--color-blue); background: var(--color-blue-glow); }
.download-btn-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--color-blue); font-size: 14px; }
.user-widget {
  display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); background: var(--color-surface-2); border: 1px solid var(--color-border-2);
  border-radius: var(--r-lg); cursor: pointer; transition: all var(--t-base); position: relative; height: 38px;
}
.user-widget:hover { border-color: var(--color-blue-dim); background: var(--color-surface-3); }
.user-avatar { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--btn-p-bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--btn-p-text); flex-shrink: 0; }
.user-info { display: flex; flex-direction: column; gap: 1px; }
.user-name { font-size: 12px; font-weight: 600; color: var(--color-text); line-height: 1; }
.user-email { font-size: 9px; color: var(--color-text-muted); font-family: var(--font-mono); line-height: 1; }
.user-chevron { color: var(--color-text-muted); font-size: 9px; margin-left: 2px; }
.user-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--color-surface-2); border: 1px solid var(--color-border-1); border-radius: var(--r-lg); min-width: 210px; box-shadow: var(--shadow-md); z-index: 300; display: none; overflow: hidden; }
.user-widget.open .user-dropdown { display: block; }
.user-dropdown-header { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border-2); }
.user-dropdown-name { font-weight: 600; font-size: 13px; color: var(--color-text); }
.user-dropdown-email { font-size: 9px; color: var(--color-text-muted); font-family: var(--font-mono); margin-top: 2px; }
.dropdown-link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); font-size: 12px; color: var(--color-text-dim); transition: all var(--t-fast); text-decoration: none; }
.dropdown-link:hover { background: var(--color-blue-glow); color: var(--color-text); }
.dropdown-link.danger { color: var(--color-red); }
.dropdown-link.danger:hover { background: rgba(192,80,48,0.1); }
.dropdown-link.admin-link { color: var(--color-amber); }
.dropdown-link.admin-link:hover { background: var(--color-amber-glow); }
.dropdown-divider { height: 1px; background: var(--color-border-2); margin: var(--sp-1) 0; }

.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); min-height: 100vh; background: var(--color-surface-1); border-right: 1px solid var(--color-border-2);
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: var(--z-sticky); transition: transform var(--t-slow);
}
.sidebar-logo { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); height: var(--header-h); border-bottom: 1px solid var(--color-border-2); text-decoration: none; }
.sidebar-logo img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; border-radius: var(--r-sm); }
.logo-text { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-amber); line-height: 1; }
.logo-sub { font-size: 9px; color: var(--color-text-muted); letter-spacing: 1.2px; text-transform: uppercase; margin-top: 2px; }
.sidebar-nav { flex: 1; padding: var(--sp-3) 0; overflow-y: auto; }
.nav-group-label { font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-muted); padding: var(--sp-3) var(--sp-4) var(--sp-1); margin-top: var(--sp-2); }
.nav-link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); font-size: 12px; font-weight: 500; color: var(--color-text-dim); border-left: 2px solid transparent; transition: all var(--t-fast); }
.nav-link:hover { color: var(--color-text); background: var(--color-blue-glow); border-left-color: var(--color-blue-dim); }
.nav-link.active { color: var(--color-blue); background: var(--color-blue-glow); border-left-color: var(--color-blue-dark); }
.nav-icon { width: 15px; text-align: center; font-size: 13px; flex-shrink: 0; opacity: 0.6; }
.nav-link.active .nav-icon { opacity: 1; }
.nav-badge { margin-left: auto; background: var(--color-blue-glow); color: var(--color-blue); font-size: 9px; font-family: var(--font-mono); padding: 1px 6px; border-radius: var(--r-full); border: 1px solid var(--color-blue-dim); }
.nav-sep { height: 1px; background: var(--color-border-2); margin: var(--sp-3) var(--sp-4); }
.sidebar-footer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-border-2); }
.srv-status-title { font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.srv-row { display: flex; align-items: center; justify-content: space-between; padding: 2px 0; }
.srv-label { font-size: 9px; color: var(--color-text-muted); }
.srv-val { font-size: 9px; font-family: var(--font-mono); }
.srv-val.on { color: var(--color-green); }
.srv-val.off { color: var(--color-red); }
.srv-val.count { color: var(--color-text-dim); }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--color-overlay); z-index: 190; }
.sidebar-overlay.open { display: block; }
.main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.header {
  height: var(--header-h); background: var(--color-surface-1); border-bottom: 1px solid var(--color-border-2); display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--sp-6); position: sticky; top: 0; z-index: var(--z-sticky); gap: var(--sp-4);
}
.header-left { display: flex; align-items: center; gap: var(--sp-3); }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-md); color: var(--color-text-dim); border: 1px solid var(--color-border-2); font-size: 16px; transition: all var(--t-fast); }
.menu-toggle:hover { color: var(--color-text); border-color: var(--color-border-1); }
.header-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-text); }
.header-right { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.page { flex: 1; padding: var(--sp-6); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-text); line-height: 1.1; }
.page-subtitle { font-size: 11px; color: var(--color-text-dim); margin-top: var(--sp-1); }

.flash-stack { display: grid; gap: 10px; margin-bottom: 16px; }
.alert { padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--color-border-1); }
.alert-success { background: rgba(50,120,60,0.20); border-color: #3a7040; color: #b8f0c3; }
.alert-error { background: rgba(192,80,48,0.20); border-color: #802828; color: #ffd0c8; }

.module-card { background: var(--color-surface-1); border: 1px solid var(--color-border-2); border-radius: var(--r-xl); padding: var(--sp-5); }
.module-card.compact { margin-bottom: 16px; }
.module-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.module-kicker { font-size: 10px; color: var(--color-amber); text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700; }
.module-heading { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.feature-list { display: grid; gap: var(--sp-2); }
.feature-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border-3); }
.feature-row:last-child { border-bottom: none; }
.feature-dot { color: var(--color-blue); font-weight: 700; }
.module-actions { margin-top: var(--sp-5); }

@media (max-width: 900px) {
  .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; }
  .menu-toggle { display: flex; }
  .header { padding: 0 var(--sp-3); }
  .page { padding: var(--sp-4); }
  .user-email { display: none; }
}

@media (max-width: 600px) {
  .header { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .header-title { font-size: 15px; letter-spacing: 1px; }
  .header-right { gap: var(--sp-2); }
  .coin-label { display: none; }
  .coin-widget { padding: var(--sp-2); }
  .user-name { font-size: 11px; }
  .page { padding: var(--sp-3); }
  .page-title { font-size: 20px; }
  .page-header { flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .tabs-actions-row { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .tabs-actions-row .pill-tabs { width: 100%; }
  .tabs-actions-row .pill-tab { flex: 1; justify-content: center; }
  .tabs-right { width: 100%; justify-content: space-between; }
  .context-label { font-size: 13px; margin-bottom: var(--sp-3); }
  .accordion-trigger { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3); }
  .acc-name { font-size: 13px; }
  .acc-meta { margin-left: auto; }
  .acc-char-count { display: none; }
  .char-table thead { display: none; }
  .char-table, .char-table tbody, .char-table tr, .char-table td { display: block; width: 100%; }
  .char-table tr { padding: var(--sp-3); border-bottom: 1px solid var(--color-border-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-3); align-items: center; }
  .char-table tr:last-child { border-bottom: none; }
  .char-table td { padding: 0; border: none; font-size: 11px; }
  .char-table td::before { content: attr(data-label); display: block; font-size: 8px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }
  .modal { width: 100%; }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; }
}


/* ============================================================
   v1.9 Reference Pages: Balance / Shop / Rankings / Support / Settings
   ============================================================ */
.card{background:var(--color-surface-1);border:1px solid var(--color-border-2);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-4);}
.card-header{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--color-border-2);background:var(--color-surface-2);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}
.card-title{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--color-text);}
.card-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4);}
.form-select{width:100%;height:36px;padding:0 var(--sp-8) 0 var(--sp-3);background:var(--color-input-bg);border:1px solid var(--color-border-2);border-radius:var(--r-md);color:var(--color-text);font-size:13px;outline:none;appearance:none;}
.form-textarea{width:100%;padding:var(--sp-3);background:var(--color-input-bg);border:1px solid var(--color-border-2);border-radius:var(--r-md);color:var(--color-text);font-size:12px;outline:none;resize:vertical;min-height:110px;line-height:1.6;}
.table-wrap{overflow-x:auto;}
.ref-table{width:100%;border-collapse:collapse;}
.ref-table th{font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-amber);padding:var(--sp-2) var(--sp-3);text-align:left;border-bottom:1px solid var(--color-border-2);}
.ref-table td{padding:var(--sp-3);font-size:11px;color:var(--color-text-dim);border-bottom:1px solid var(--color-border-3);}
.green{color:var(--color-green)!important;}

.balance-hero{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);background:linear-gradient(135deg,rgba(224,120,40,.12),rgba(56,200,232,.06));border:1px solid var(--color-border-2);border-radius:var(--r-xl);padding:var(--sp-6);margin-bottom:var(--sp-5);}
.balance-label-row{display:flex;align-items:center;gap:var(--sp-2);}
.balance-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--color-text-muted);font-weight:700;}
.balance-refresh{color:var(--color-blue);font-size:14px;}
.balance-amount{font-family:var(--font-display);font-size:44px;font-weight:700;color:var(--color-amber);line-height:1;margin-top:var(--sp-2);}
.balance-amount span{font-size:18px;margin-right:var(--sp-2);color:var(--color-text-dim);}
.balance-sub-row{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;margin-top:var(--sp-2);}
.balance-sub{font-size:12px;color:var(--color-text-dim);}
.balance-history-link{font-size:11px;color:var(--color-blue);}
.balance-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;}
.balance-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:var(--sp-4);}
.amount-row{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:flex-start;}
.amount-input{flex:0 0 150px;}
.price-display{text-align:right;}
.price-display span{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--color-text-muted);}
.price-display strong{font-family:var(--font-display);font-size:32px;color:var(--color-text);}
.quick-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);}
.amount-chip,.payment-option{border:1px solid var(--color-border-2);background:var(--color-surface-2);border-radius:var(--r-md);color:var(--color-text-dim);padding:var(--sp-3);text-align:center;}
.amount-chip.active,.payment-option.active{border-color:var(--color-blue-dim);background:var(--color-blue-glow);color:var(--color-blue);}
.payment-list{gap:var(--sp-2);}
.payment-option{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);text-align:left;}
.payment-option em{font-size:10px;color:var(--color-text-muted);font-style:normal;}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-2) 0;border-bottom:1px solid var(--color-border-3);}
.summary-row.total{border-bottom:0;font-size:16px;}

.shop-toolbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4);}
.shop-search{max-width:220px;}
.cat-tabs{display:flex;gap:2px;border-bottom:1px solid var(--color-border-2);flex-wrap:wrap;margin-bottom:var(--sp-5);}
.cat-tab{display:inline-flex;align-items:center;padding:var(--sp-2) var(--sp-4);font-size:12px;font-weight:500;color:var(--color-text-dim);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--t-fast);}
.cat-tab:hover{color:var(--color-text);}
.cat-tab.active{color:var(--color-blue);border-bottom-color:var(--color-blue);}
.shop-section{margin-bottom:var(--sp-6);}
.shop-section-title{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--color-amber);margin-bottom:var(--sp-4);}
.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);}
.catalog-card{background:var(--color-surface-1);border:1px solid var(--color-border-2);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all var(--t-fast);}
.catalog-card:hover{border-color:var(--color-blue-dim);transform:translateY(-2px);}
.catalog-preview{height:110px;background:var(--color-surface-2);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);padding:var(--sp-3);}
.catalog-preview-slot{display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border-2);background:var(--color-input-bg);border-radius:var(--r-md);font-size:24px;}
.catalog-preview-slot.more{font-family:var(--font-display);font-size:18px;color:var(--color-blue);}
.catalog-card-body{padding:var(--sp-4);}
.catalog-name{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--color-text);}
.catalog-count{font-size:11px;color:var(--color-text-muted);margin-top:2px;}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);}
.product-card{display:flex;align-items:center;gap:var(--sp-3);background:var(--color-surface-1);border:1px solid var(--color-border-2);border-radius:var(--r-lg);padding:var(--sp-4);}
.product-icon{width:42px;height:42px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;background:var(--color-surface-2);font-size:20px;}
.product-card strong{display:block;font-size:14px;color:var(--color-text);}
.product-card span{display:block;font-size:11px;color:var(--color-text-muted);}

.rankings-controls{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4);}
.rankings-select{width:180px;}
.rankings-search{max-width:220px;}
.rankings-table-wrap{background:var(--color-surface-1);border:1px solid var(--color-border-2);border-radius:var(--r-lg);overflow:hidden;}
.rtable{width:100%;border-collapse:collapse;}
.rtable th{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-amber);background:rgba(0,0,0,.16);padding:var(--sp-3);text-align:left;border-bottom:1px solid var(--color-border-2);}
.rtable td{padding:var(--sp-3);font-size:12px;color:var(--color-text-dim);border-bottom:1px solid var(--color-border-3);}
.rtable tr:hover td{background:var(--color-surface-3);color:var(--color-text);}
.rank-medal{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-family:var(--font-mono);font-size:10px;font-weight:700;}
.rank-medal.gold{background:rgba(240,192,64,.15);color:#f0c040;}
.rank-medal.silver{background:rgba(168,184,200,.15);color:#a8b8c8;}
.rank-medal.bronze{background:rgba(200,120,64,.15);color:#c87840;}

.support-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:var(--sp-4);}
.ticket-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4);flex-wrap:wrap;}
.ticket-list{min-width:0;}
.ticket-item{background:var(--color-surface-1);border:1px solid var(--color-border-2);border-radius:var(--r-lg);padding:var(--sp-4);margin-bottom:var(--sp-3);}
.ticket-item.active{border-left:3px solid var(--color-blue-dark);}
.ticket-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2);}
.ticket-item p{font-size:12px;color:var(--color-text-dim);}

.settings-card{background:var(--color-surface-1);border:1px solid var(--color-border-2);border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--sp-4);}
.settings-card-header{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border-2);background:var(--color-surface-2);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}
.settings-card-title{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--color-text);}
.settings-card-sub{font-size:11px;color:var(--color-text-muted);margin-top:2px;}
.settings-card-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);}
.info-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--color-surface-2);border:1px solid var(--color-border-2);border-radius:var(--r-md);}
.info-label{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:var(--color-text-muted);font-weight:700;}
.info-value{font-size:13px;color:var(--color-text);margin-top:2px;}
.info-value.masked{font-family:var(--font-mono);letter-spacing:2px;color:var(--color-text-dim);}
.session-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);background:var(--color-surface-2);border:1px solid var(--color-border-2);border-radius:var(--r-md);}
.session-icon{width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;background:var(--color-input-bg);}
.session-info{flex:1;}
.session-device{font-size:13px;color:var(--color-text);font-weight:600;}
.session-meta{font-size:11px;color:var(--color-text-muted);}
.session-current{font-size:10px;color:var(--color-green);}
.danger-zone{border-color:rgba(192,80,48,.3);}

@media (max-width: 980px){
  .balance-layout,.support-layout{grid-template-columns:1fr;}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .product-grid{grid-template-columns:1fr;}
}
@media (max-width: 600px){
  .balance-hero{align-items:flex-start;flex-direction:column;}
  .quick-amounts{grid-template-columns:repeat(2,1fr);}
  .catalog-grid{grid-template-columns:1fr;}
  .info-row{align-items:flex-start;flex-direction:column;}
}


/* ============================================================
   v1.9a Logo / Sidebar exact reference fix
   ============================================================ */
.sidebar-logo {
  gap: 10px !important;
  padding: 0 16px !important;
}
.sidebar-logo-mark {
  width: 30px !important;
  height: 30px !important;
  border-radius: 5px !important;
  background: linear-gradient(135deg, #9a4818, #6a3010) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #f0d090 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.logo-text {
  font-size: 15px !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
}
.logo-sub {
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  line-height: 1 !important;
  margin-top: 4px !important;
}
.header-title {
  line-height: 1 !important;
}


/* ============================================================
   v2.0 Real Rankings
   ============================================================ */
.rank-context {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
    color: var(--color-text-dim);
    font-size: 12px;
}
.rank-context strong {
    color: var(--color-amber);
}
.rank-refresh-form {
    display: inline-flex;
    align-items: center;
}
.rankings-controls {
    align-items: center;
}
.rtable .rank-medal:not(.gold):not(.silver):not(.bronze) {
    background: rgba(50,46,38,0.5);
    color: var(--color-text-dim);
}


/* ============================================================
   v2.1 Real Balance
   ============================================================ */
.mono-cell {
    font-family: var(--font-mono);
    font-size: 10px;
}
.ref-table td[colspan] {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--sp-6);
}
.balance-hero .btn-secondary {
    background: var(--btn-s-bg);
    color: var(--btn-s-text);
}
.balance-hero .btn-secondary:hover {
    background: var(--btn-s-bg-hover);
}


/* ============================================================
   v2.2 Real Shop Base
   ============================================================ */
.shop-search-form {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.product-buy-card .catalog-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.single-preview {
    grid-template-columns: 1fr !important;
}
.single-preview .catalog-preview-slot {
    font-size: 40px;
}
.product-desc {
    color: var(--color-text-dim);
    font-size: 11px;
    line-height: 1.5;
    min-height: 34px;
}
.product-buy-card .btn {
    align-self: flex-start;
    margin-top: var(--sp-1);
}
@media (max-width: 600px) {
    .shop-search-form {
        width: 100%;
    }
    .shop-search-form .shop-search {
        max-width: none;
    }
}


/* ============================================================
   v2.3 Shop Delivery Queue
   ============================================================ */
.admin-action-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.delivery-error {
    color: var(--color-red) !important;
    font-size: 11px !important;
    background: rgba(192,80,48,0.10);
}
.muted-cell {
    color: var(--color-text-muted);
    font-size: 11px;
}


/* ============================================================
   v2.4 Admin Ref Pages
   ============================================================ */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.admin-stat-card {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-2);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
}
.admin-stat-card.warn {
    border-color: rgba(200,148,58,.3);
}
.admin-stat-card span {
    display: block;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.admin-stat-card strong {
    display: block;
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--color-text);
    line-height: 1;
    margin: var(--sp-2) 0;
}
.admin-stat-card em {
    color: var(--color-text-dim);
    font-style: normal;
    font-size: 11px;
}
.admin-grid-2,
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
}
.admin-card {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: var(--sp-4);
}
.admin-card-header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--color-border-2);
    background: var(--color-surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.admin-card-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text);
}
.admin-card-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.admin-search {
    max-width: 320px;
}
.admin-tabs {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}
.chart-placeholder {
    min-height: 260px;
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-text-dim);
}
.log-console {
    background: var(--color-input-bg);
    padding: var(--sp-4);
    max-height: 620px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 11px;
}
.log-line {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
    color: var(--color-text-dim);
    white-space: pre-wrap;
    word-break: break-word;
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
}
.team-card {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-2);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    text-align: center;
}
.team-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--btn-p-bg);
    color: var(--btn-p-text);
    display: grid;
    place-items: center;
    margin: 0 auto var(--sp-3);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
}
.team-name {
    font-weight: 700;
    color: var(--color-text);
}
.team-email {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-text-muted);
    margin: 4px 0 10px;
}
@media (max-width: 1100px) {
    .admin-stat-grid,
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-grid-2,
    .analytics-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .admin-stat-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }
    .admin-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .admin-search {
        max-width: none;
    }
}


/* ============================================================
   v2.5 Real Support Tickets
   ============================================================ */
.ticket-item{display:block;color:inherit}.ticket-thread{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);max-height:520px;overflow:auto}.ticket-message{background:var(--color-surface-2);border:1px solid var(--color-border-2);border-radius:var(--r-lg);padding:var(--sp-4)}.ticket-message.admin-msg{border-left:3px solid var(--color-blue-dark);background:rgba(56,200,232,.06)}.ticket-message-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2);font-size:11px}.ticket-message-head strong{color:var(--color-text)}.ticket-message-head span{color:var(--color-text-muted);font-family:var(--font-mono)}.ticket-message-body{color:var(--color-text-dim);line-height:1.6;font-size:12px}.ticket-reply-form{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border-top:1px solid var(--color-border-2)}.ticket-admin-actions{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border-2);background:var(--color-surface-2)}.ticket-admin-actions form{display:flex;align-items:center;gap:var(--sp-3)}.ticket-admin-actions .form-input{max-width:180px}


/* ============================================================
   v2.6 Admin Shop CRUD
   ============================================================ */
.admin-form-grid {
    padding: var(--sp-5);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
}
.admin-form-wide {
    grid-column: 1 / -1;
}
.admin-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}
.admin-inline-form {
    padding: var(--sp-4);
    display: grid;
    grid-template-columns: 1fr 1fr 120px auto;
    gap: var(--sp-3);
    align-items: center;
    border-bottom: 1px solid var(--color-border-2);
}
@media (max-width: 1000px) {
    .admin-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-inline-form {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   v2.7 Admin Accounts Tools
   ============================================================ */
.ref-table td .badge {
    margin-left: 4px;
}
.admin-action-row form {
    display: inline-flex;
}
.admin-action-row button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* v3.2 Real Settings System */
.settings-page{width:100%;}
.settings-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;}
.settings-grid{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:start;}
.settings-subnav{position:sticky;top:78px;background:var(--color-surface-1,#1a1c20);border:1px solid var(--color-border-2,#282c34);border-radius:10px;padding:10px;}
.settings-subnav a{display:block;padding:8px 10px;border-radius:6px;color:var(--color-text-dim,#8a8880);font-size:12px;text-decoration:none;}
.settings-subnav a:hover{background:rgba(56,200,232,.08);color:var(--color-blue,#38c8e8);}
.settings-content{display:flex;flex-direction:column;gap:18px;}
.settings-section{background:var(--color-surface-1,#1a1c20);border:1px solid var(--color-border-2,#282c34);border-radius:10px;overflow:hidden;}
.settings-section-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--color-border-2,#282c34);}
.settings-section-head h2{font-family:var(--font-display,'Rajdhani',sans-serif);font-size:16px;text-transform:uppercase;letter-spacing:1px;margin:0;color:var(--color-text,#d0ccc8);}
.settings-section-head p{font-size:11px;color:var(--color-text-muted,#585450);margin:2px 0 0;}
.settings-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border-1,#363b44);background:var(--color-surface-2,#22252c);}
.settings-icon.amber{border-color:rgba(224,120,40,.35);background:rgba(224,120,40,.10);}
.settings-icon.blue{border-color:rgba(56,200,232,.35);background:rgba(56,200,232,.10);}
.settings-icon.green{border-color:rgba(90,158,106,.35);background:rgba(90,158,106,.10);}
.settings-icon.purple{border-color:rgba(120,80,180,.35);background:rgba(120,80,180,.10);}
.settings-icon.gray{border-color:var(--color-border-1,#363b44);background:var(--color-surface-3,#2c3038);}
.settings-row{display:grid;grid-template-columns:220px minmax(260px,1fr) auto;gap:14px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--color-border-3,#1e2128);}
.settings-row:last-child{border-bottom:0;}
.settings-row:hover{background:rgba(255,255,255,.015);}
.settings-key{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:11px;color:var(--color-text-dim,#8a8880);font-weight:600;}
.settings-desc{font-size:10px;color:var(--color-text-muted,#585450);line-height:1.35;margin-top:2px;}
.settings-control{display:flex;align-items:center;gap:8px;}
.settings-control .form-input{width:100%;}
.settings-select{max-width:220px;}
.settings-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.settings-time{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:9px;color:var(--color-text-muted,#585450);white-space:nowrap;}
.settings-toggle{position:relative;width:36px;height:20px;display:inline-block;}
.settings-toggle input{opacity:0;width:0;height:0;position:absolute;}
.settings-toggle span{position:absolute;inset:0;border-radius:999px;background:var(--color-surface-3,#2c3038);border:1px solid var(--color-border-1,#363b44);}
.settings-toggle span:after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;left:2px;top:2px;background:var(--color-text-muted,#585450);transition:.15s;}
.settings-toggle input:checked+span{background:rgba(56,200,232,.25);border-color:var(--color-blue-dark,#1a90b0);}
.settings-toggle input:checked+span:after{transform:translateX(16px);background:var(--color-blue,#38c8e8);}
.toggle-state{font-size:11px;color:var(--color-text-muted,#585450);}
.server-box{padding:16px 18px;border-bottom:1px solid var(--color-border-3,#1e2128);}
.server-box:last-child{border-bottom:0;}
.server-box-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;color:var(--color-text-dim,#8a8880);}
.server-box-head strong{font-family:var(--font-display,'Rajdhani',sans-serif);font-size:15px;text-transform:uppercase;color:var(--color-text,#d0ccc8);letter-spacing:.8px;}
.server-box-head label{font-size:11px;color:var(--color-text-dim,#8a8880);display:flex;gap:5px;align-items:center;}
.settings-form-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:12px;}
.settings-form-grid label{font-size:10px;color:var(--color-text-muted,#585450);}
.settings-form-grid .form-input{margin-top:4px;}
.server-box-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px;}
.server-box-actions span{margin-right:auto;font-size:10px;color:var(--color-text-muted,#585450);}
@media(max-width:1000px){.settings-grid{grid-template-columns:1fr}.settings-subnav{position:static}.settings-row{grid-template-columns:1fr}.settings-actions{justify-content:flex-start}.settings-form-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.settings-form-grid{grid-template-columns:1fr}.settings-page-head{flex-direction:column}}

.module-alert-warning{background:rgba(200,148,58,.10);border:1px solid rgba(200,148,58,.35);color:var(--color-text,#d0ccc8);border-radius:10px;padding:12px 14px;font-size:12px;}
.module-alert-warning code{color:var(--color-amber,#e07828);font-family:var(--font-mono,'JetBrains Mono',monospace);}

/* v3.2e settings action polish */
.settings-head-action{margin-left:auto;}
.settings-eye{height:32px;min-width:32px;border:1px solid var(--color-border-1,#363b44);background:var(--color-surface-3,#2c3038);border-radius:6px;color:var(--color-text-muted,#585450);cursor:pointer;}
.settings-eye:hover{color:var(--color-blue,#38c8e8);border-color:var(--color-blue-dim,#0e5068);}
.btn.dirty,.save-btn.dirty{border-color:var(--color-amber-dim,#6a2e08)!important;color:var(--color-amber,#e07828)!important;background:rgba(224,120,40,.10)!important;}
.server-box-new{background:rgba(56,200,232,.04);border-bottom:1px solid var(--color-blue-dim,#0e5068);}
.btn-danger{background:rgba(122,26,16,.6);border:1px solid rgba(192,80,48,.35);color:#ffd0c8;}
.btn-danger:hover{background:rgba(144,32,24,.85);border-color:rgba(192,80,48,.65);}
.settings-section-head .btn{white-space:nowrap;}
.server-box-actions .btn[disabled]{opacity:.45;cursor:not-allowed;}


/* v3.2f settings design alignment */
.settings-page{max-width:none;}
.settings-page-head{margin-bottom:20px;align-items:flex-start;}
.settings-page-head .btn{height:32px;padding:0 12px;font-size:11px;}
.page-subtitle{font-size:11px;color:var(--color-text-muted,#585450);margin-top:4px;}
.settings-grid{grid-template-columns:170px minmax(0,1fr);gap:18px;}
.settings-subnav{padding:12px 0;overflow:hidden;}
.settings-subnav a{padding:7px 18px;border-left:2px solid transparent;border-radius:0;font-size:11px;color:var(--color-text-muted,#585450);transition:all .15s ease;}
.settings-subnav a:hover{background:rgba(56,200,232,.08);color:var(--color-text,#d0ccc8);border-left-color:var(--color-blue-dim,#0e5068);}
.settings-subnav a.active{background:rgba(56,200,232,.10);color:var(--color-blue,#38c8e8);border-left-color:var(--color-blue-dark,#1a90b0);}
.settings-content{gap:20px;}
.settings-section{border-radius:10px;overflow:hidden;}
.settings-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--color-border-2,#282c34);}
.settings-section-copy{display:flex;align-items:center;gap:12px;min-width:0;}
.settings-section-copy h2{font-size:15px;line-height:1;}
.settings-section-copy p{font-size:10px;line-height:1.4;color:var(--color-text-muted,#585450);margin-top:2px;}
.settings-row{grid-template-columns:200px minmax(280px,1fr) auto;gap:14px;padding:11px 18px;}
.settings-key{font-size:11px;font-weight:500;}
.settings-desc{font-size:10px;line-height:1.35;}
.settings-control{min-width:0;}
.settings-control .form-input{height:36px;}
.settings-actions{gap:10px;}
.settings-time{font-size:9px;opacity:.9;}
.save-btn{height:28px;padding:0 12px;background:var(--color-surface-3,#2c3038);border:1px solid var(--color-border-1,#363b44);border-radius:5px;font-family:var(--font-display,'Rajdhani',sans-serif);font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--color-text-muted,#585450);cursor:pointer;transition:all .15s ease;white-space:nowrap;}
.save-btn:hover{border-color:var(--color-blue-dim,#0e5068);color:var(--color-blue,#38c8e8);background:rgba(56,200,232,.10);}
.save-btn.dirty{border-color:var(--color-amber-dim,#6a2e08)!important;color:var(--color-amber,#e07828)!important;background:rgba(224,120,40,.10)!important;}
.section-toggle-form{margin-left:auto;}
.section-toggle{display:flex;align-items:center;gap:8px;}
.toggle-label{font-size:10px;color:var(--color-text-muted,#585450);}
.toggle{position:relative;width:36px;height:20px;display:inline-block;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{position:absolute;inset:0;background:var(--color-surface-3,#2c3038);border:1px solid var(--color-border-1,#363b44);border-radius:999px;transition:all .15s ease;}
.toggle-track:after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--color-text-muted,#585450);transition:all .15s ease;}
.toggle input:checked + .toggle-track{background:var(--color-blue-dim,#0e5068);border-color:var(--color-blue-dark,#1a90b0);}
.toggle input:checked + .toggle-track:after{transform:translateX(16px);background:var(--color-blue,#38c8e8);}
.settings-eye{height:32px;min-width:32px;font-size:12px;}
.server-box{padding:16px 18px;}
.server-box-head{margin-bottom:12px;align-items:center;}
.server-box-head strong{font-size:13px;letter-spacing:.8px;}
.server-box-head span{font-size:10px;color:var(--color-text-muted,#585450);}
.settings-form-grid{grid-template-columns:repeat(5,minmax(120px,1fr));gap:12px;}
.settings-form-grid label{font-size:10px;color:var(--color-text-muted,#585450);display:block;}
.server-box-actions{margin-top:12px;}
.settings-head-action{height:28px;}
@media (max-width: 1100px){
  .settings-grid{grid-template-columns:1fr;}
  .settings-subnav{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px;gap:6px;}
  .settings-subnav a{border-left:0;border-radius:6px;padding:8px 10px;}
  .settings-row{grid-template-columns:1fr;}
  .settings-actions{justify-content:flex-start;}
  .section-toggle-form{margin-left:0;}
  .settings-section-head{align-items:flex-start;flex-wrap:wrap;}
}
@media (max-width: 700px){
  .settings-subnav{grid-template-columns:1fr 1fr;}
  .settings-form-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 520px){
  .settings-subnav{grid-template-columns:1fr;}
  .settings-form-grid{grid-template-columns:1fr;}
}


/* ============================================================
   v3.2g Settings final visual match
   Target: uploaded settings.html reference
   ============================================================ */

/* Full width settings page, no inner navigation card */
.settings-grid.settings-grid-full,
.settings-grid {
    display: block !important;
}
.settings-grid.settings-grid-full .settings-content,
.settings-content {
    width: 100%;
    max-width: none;
}

/* Page heading */
.settings-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4, 16px);
    margin-bottom: var(--sp-6, 24px);
}
.settings-page-head .page-title {
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text, #d0ccc8);
    line-height: 1;
}
.settings-page-head .page-subtitle {
    font-size: 11px;
    color: var(--color-text-muted, #585450);
    margin-top: 6px;
}
.settings-page-head .btn-primary {
    height: 32px;
    padding: 0 14px;
    font-size: 11px;
}

/* Card sections */
.settings-section {
    background: var(--color-surface-1, #1a1c20) !important;
    border: 1px solid var(--color-border-2, #282c34) !important;
    border-radius: var(--r-xl, 10px) !important;
    overflow: hidden;
    margin-bottom: var(--sp-5, 20px);
}
.settings-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: var(--sp-4, 16px) var(--sp-5, 20px) !important;
    border-bottom: 1px solid var(--color-border-2, #282c34) !important;
    min-height: 64px;
}
.settings-section-copy {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    min-width: 0;
}
.settings-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--r-md, 5px) !important;
    flex-shrink: 0;
    font-size: 15px;
}
.settings-section-copy h2,
.settings-section-head h2 {
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text, #d0ccc8);
    line-height: 1;
}
.settings-section-copy p,
.settings-section-head p {
    font-size: 10px !important;
    color: var(--color-text-muted, #585450);
    margin-top: 3px;
    line-height: 1.35;
}

/* Rows */
.settings-row {
    display: grid !important;
    grid-template-columns: 220px minmax(260px, 1fr) auto !important;
    align-items: center;
    gap: var(--sp-4, 16px) !important;
    padding: var(--sp-3, 12px) var(--sp-5, 20px) !important;
    border-bottom: 1px solid var(--color-border-3, #1e2128) !important;
    min-height: 58px;
}
.settings-row:last-child {
    border-bottom: none !important;
}
.settings-row:hover {
    background: rgba(255,255,255,0.015);
}
.settings-key {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px !important;
    color: var(--color-text-dim, #8a8880) !important;
    font-weight: 500 !important;
}
.settings-desc {
    font-size: 10px !important;
    color: var(--color-text-muted, #585450) !important;
    margin-top: 2px;
    line-height: 1.35;
}
.settings-control {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: var(--sp-2, 8px);
    min-width: 0;
}
.settings-control .form-input {
    height: 36px !important;
    flex: 1;
}
.settings-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
}
.settings-time {
    font-size: 9px !important;
    color: var(--color-text-muted, #585450) !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    white-space: nowrap;
    min-width: 130px;
    text-align: right;
}

/* Save buttons exactly closer to ref */
.save-btn {
    height: 28px !important;
    padding: 0 var(--sp-3, 12px) !important;
    background: var(--color-surface-3, #2c3038) !important;
    border: 1px solid var(--color-border-1, #363b44) !important;
    border-radius: var(--r-md, 5px) !important;
    font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase;
    color: var(--color-text-muted, #585450) !important;
    cursor: pointer;
    transition: all var(--t-fast, .15s ease);
    white-space: nowrap;
}
.save-btn:hover {
    border-color: var(--color-blue-dim, #0e5068) !important;
    color: var(--color-blue, #38c8e8) !important;
    background: var(--color-blue-glow, rgba(56,200,232,0.10)) !important;
}

/* Header toggles */
.section-toggle-form {
    margin-left: auto;
}
.section-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
}
.toggle-label {
    font-size: 10px;
    color: var(--color-text-muted, #585450);
}
.toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    display: inline-block;
}
.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--color-surface-3, #2c3038);
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: var(--r-full, 999px);
    cursor: pointer;
    transition: all var(--t-fast, .15s ease);
}
.toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-text-muted, #585450);
    transition: all var(--t-fast, .15s ease);
}
.toggle input:checked + .toggle-track {
    background: var(--color-blue-dim, #0e5068);
    border-color: var(--color-blue-dark, #1a90b0);
}
.toggle input:checked + .toggle-track::after {
    transform: translateX(16px);
    background: var(--color-blue, #38c8e8);
}

/* DB blocks */
.server-box {
    padding: var(--sp-4, 16px) var(--sp-5, 20px) !important;
    border-bottom: 1px solid var(--color-border-3, #1e2128) !important;
}
.server-box:last-child {
    border-bottom: none !important;
}
.server-box-head {
    display: flex !important;
    align-items: center !important;
    gap: var(--sp-2, 8px) !important;
    margin-bottom: var(--sp-3, 12px) !important;
}
.server-box-head strong {
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--color-text, #d0ccc8);
}
.server-box-head span,
.server-box-head label {
    font-size: 10px !important;
    color: var(--color-text-muted, #585450);
}
.settings-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 80px 1fr 1fr 1fr 60px !important;
    gap: var(--sp-3, 12px) !important;
    align-items: end;
}
.settings-form-grid label {
    display: block;
    font-size: 10px !important;
    color: var(--color-text-muted, #585450);
}
.settings-form-grid label .form-input,
.settings-form-grid label select.form-input {
    margin-top: 4px;
}
.server-pass-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    margin-top: 4px;
}
.server-pass-wrap .form-input {
    margin-top: 0 !important;
}
.server-eye {
    height: 36px !important;
    width: 32px !important;
    margin-top: 0 !important;
}
.server-box-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2, 8px);
    margin-top: var(--sp-3, 12px);
}
.server-box-actions span {
    margin-right: auto;
    font-size: 10px;
    color: var(--color-text-muted, #585450);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* Section footer like SMTP ref */
.settings-section-footer {
    padding: var(--sp-3, 12px) var(--sp-5, 20px);
    border-top: 1px solid var(--color-border-2, #282c34);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3, 12px);
}
.settings-section-footer span {
    margin-right: auto;
    font-size: 10px;
    color: var(--color-text-muted, #585450);
}

/* Sidebar settings subnav when layout patch is present */
.settings-sidebar-subnav {
    max-height: 420px;
    padding: 2px 0 6px;
}
.settings-sidebar-subnav a {
    display: block;
    padding: 4px var(--sp-4, 16px) 4px calc(var(--sp-4, 16px) + 20px);
    font-size: 11px;
    color: var(--color-text-muted, #585450);
    border-left: 2px solid transparent;
}
.settings-sidebar-subnav a:hover,
.settings-sidebar-subnav a.active {
    color: var(--color-blue, #38c8e8);
    background: var(--color-blue-glow, rgba(56,200,232,0.10));
    border-left-color: var(--color-blue-dark, #1a90b0);
}

/* Hide old inner subnav if any browser cache still has it */
.settings-subnav {
    display: none !important;
}

/* responsive */
@media(max-width: 1200px) {
    .settings-form-grid {
        grid-template-columns: repeat(3, minmax(120px,1fr)) !important;
    }
}
@media(max-width: 900px) {
    .settings-row {
        grid-template-columns: 1fr !important;
        align-items: stretch;
    }
    .settings-time {
        min-width: auto;
        text-align: left;
    }
    .settings-actions {
        justify-content: flex-end;
    }
    .settings-section-head {
        align-items: flex-start !important;
        flex-wrap: wrap;
    }
    .section-toggle-form {
        margin-left: 44px;
    }
}
@media(max-width: 600px) {
    .settings-form-grid {
        grid-template-columns: 1fr !important;
    }
    .settings-page-head {
        flex-direction: column;
    }
}


/* ============================================================
   v3.2h Settings sidebar submenu
   ============================================================ */
.settings-sidebar-subnav {
    display: block;
    padding: 2px 0 8px;
    background: rgba(0,0,0,0.06);
}

.settings-sidebar-subnav a {
    display: block;
    padding: 5px 18px 5px 38px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--color-text-muted, #585450);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all var(--t-fast, .15s ease);
}

.settings-sidebar-subnav a:hover {
    color: var(--color-text, #d0ccc8);
    background: var(--color-blue-glow, rgba(56,200,232,0.10));
    border-left-color: var(--color-blue-dim, #0e5068);
}

.settings-sidebar-subnav a.active {
    color: var(--color-blue, #38c8e8);
    background: var(--color-blue-glow, rgba(56,200,232,0.10));
    border-left-color: var(--color-blue-dark, #1a90b0);
}

.settings-grid-full {
    display: block !important;
}

.settings-grid-full .settings-content {
    width: 100% !important;
}

.settings-subnav {
    display: none !important;
}


/* ============================================================
   v3.2i Settings scrollspy active highlight
   ============================================================ */
.settings-section {
    scroll-margin-top: 92px;
}

.settings-sidebar-subnav a.active {
    color: var(--color-blue, #38c8e8) !important;
    background: var(--color-blue-glow, rgba(56,200,232,0.10)) !important;
    border-left-color: var(--color-blue-dark, #1a90b0) !important;
}

.settings-sidebar-subnav a.active::before {
    opacity: 1;
}

.settings-sidebar-subnav a {
    position: relative;
}


/* ============================================================
   v3.2j Gameplay visual match
   ============================================================ */
.settings-row-coords {
    grid-template-columns: 220px minmax(260px, 1fr) auto !important;
}

.coord-group {
    display: flex;
    align-items: end;
    gap: var(--sp-3, 12px);
}

.coord-item {
    display: flex;
    flex-direction: column;
    width: 100px;
}

.coord-label {
    font-size: 9px;
    color: var(--color-text-muted, #585450);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.coord-item .form-input {
    height: 28px !important;
    padding: 0 10px !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px !important;
}

#section-gameplay .settings-row {
    min-height: 56px;
}

#section-gameplay .settings-control .form-input[type="number"] {
    max-width: none;
}

@media(max-width: 900px) {
    .settings-row-coords {
        grid-template-columns: 1fr !important;
    }
    .coord-group {
        flex-wrap: wrap;
    }
}


/* ============================================================
   v3.2m Compact server layout safe
   ============================================================ */
.compact-server-card {
    padding: 16px 20px !important;
}
.compact-db-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}
.compact-db-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.compact-db-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) 80px minmax(180px, 1.25fr) minmax(160px, 1fr) minmax(180px, 1.15fr) 60px;
    gap: 12px;
    align-items: end;
}
.compact-db-field {
    display: block;
}
.compact-db-field .field-key {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--color-text-muted, #585450);
    text-transform: lowercase;
}
.compact-db-field .form-input {
    width: 100%;
    height: 36px;
}
.compact-port .form-input {
    text-align: center;
}
.compact-ssl {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.compact-ssl .field-key {
    align-self: flex-start;
}
.compact-toggle {
    margin-top: 5px;
}
.compact-db-footer {
    margin-top: 12px !important;
}
.compact-db-footer .field-timestamp {
    margin-right: auto;
}
.compact-advanced-row {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--color-border-2, #282c34);
    border-radius: 8px;
    background: rgba(0,0,0,.08);
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
    align-items: end;
}
.compact-advanced-row label {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted, #585450);
}
.compact-advanced-row .form-input {
    margin-top: 4px;
    width: 100%;
}
.compact-server-card .db-server-name {
    font-size: 13px !important;
}
.compact-server-card .db-server-rates {
    font-size: 10px;
    color: var(--color-text-muted, #585450);
}
@media (max-width: 1250px) {
    .compact-db-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}
@media (max-width: 760px) {
    .compact-db-grid,
    .compact-advanced-row {
        grid-template-columns: 1fr;
    }
    .compact-db-label {
        align-items: flex-start !important;
        flex-direction: column;
    }
    .compact-db-actions {
        margin-left: 0;
    }
}


/* ============================================================
   v3.2p Add Server modal exact visual match
   ============================================================ */
body.settings-modal-open {
    overflow: hidden;
}

.settings-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(1px);
    padding: 24px;
}

.settings-modal-overlay.is-open {
    display: flex;
}

.settings-modal {
    width: 480px;
    max-width: calc(100vw - 32px);
    background: #202329;
    border: 1px solid #3a4150;
    border-radius: 9px;
    box-shadow: 0 18px 80px rgba(0,0,0,.65);
    overflow: hidden;
    color: var(--color-text, #d0ccc8);
}

.settings-modal-head {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #303641;
}

.settings-modal-head h3 {
    margin: 0;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #dedbd6;
}

.settings-modal-close {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #6d737e;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.settings-modal-close:hover {
    color: #d0ccc8;
}

.settings-modal-body {
    padding: 20px;
}

.modal-field {
    display: block;
    min-width: 0;
}

.modal-field span,
.modal-checkbox span {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #646a74;
}

.modal-field .form-input {
    width: 100%;
    height: 36px;
    background: #0d1016;
    border: 1px solid #343b49;
    border-radius: 5px;
    color: #d8d5d0;
    padding: 0 12px;
    font-size: 13px;
}

.modal-field .form-input::placeholder {
    color: #5d626b;
}

.modal-field .form-input:focus {
    outline: none;
    border-color: #3a6d80;
    box-shadow: 0 0 0 1px rgba(56,200,232,.12);
}

.modal-field-full {
    margin-bottom: 14px;
}

.modal-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.modal-host-port {
    grid-template-columns: minmax(0, 1fr) 90px;
}

.modal-port .form-input {
    text-align: center;
}

.modal-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    cursor: pointer;
}

.modal-checkbox input {
    width: 14px;
    height: 14px;
    accent-color: #38c8e8;
}

.modal-checkbox span {
    display: inline;
    margin: 0;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #a3a6ad;
}

.settings-modal-footer {
    height: 58px;
    padding: 0 20px;
    background: #1b1e24;
    border-top: 1px solid #303641;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.settings-modal-footer .btn {
    height: 34px;
    padding: 0 16px;
}

.settings-modal-footer .btn-primary {
    background: #137895;
    border-color: #137895;
    color: #eafcff;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.settings-modal-footer .btn-primary:hover {
    background: #1591b4;
    border-color: #1591b4;
}

.settings-modal-footer .btn-ghost {
    background: transparent;
    border: 1px solid #3a4150;
    color: #9ba0aa;
}

.settings-modal-footer .btn-ghost:hover {
    border-color: #5a6371;
    color: #d0ccc8;
}

@media (max-width: 560px) {
    .settings-modal {
        width: 100%;
    }

    .modal-two-col,
    .modal-host-port {
        grid-template-columns: 1fr;
    }

    .settings-modal-footer {
        justify-content: stretch;
    }

    .settings-modal-footer .btn {
        flex: 1;
    }
}

.sidebar-logo-mark img{width:100%;height:100%;object-fit:contain;display:block;}


/* v3.2s UI Customisation exact visual match */
#section-ui .settings-row.ui-row{display:grid;grid-template-columns:220px minmax(420px,1fr) auto;gap:18px;align-items:center;}
#section-ui .settings-row.ui-row + .settings-row.ui-row{border-top:1px solid rgba(255,255,255,.04);}
#section-ui .settings-row.ui-row:hover{background:rgba(255,255,255,.01);}
#section-ui .settings-meta{align-self:center;}
#section-ui .settings-key{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:12px;color:#b8b3aa;letter-spacing:.02em;}
#section-ui .settings-desc{font-size:12px;line-height:1.4;color:#6f6c66;max-width:220px;}
#section-ui .settings-control{width:100%;}
#section-ui .settings-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:112px;}
#section-ui .settings-time{white-space:nowrap;}

#section-ui .ui-theme-control{padding:2px 0;}
#section-ui .ui-theme-picker{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
#section-ui .ui-theme-card{appearance:none;-webkit-appearance:none;border:1px solid #394151;border-radius:9px;background:rgba(18,22,28,.75);padding:10px 12px;width:74px;height:54px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;cursor:pointer;color:#7d7b76;transition:border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;}
#section-ui .ui-theme-card:hover{border-color:#586174;color:#d6d0c6;background:rgba(22,26,33,.9);}
#section-ui .ui-theme-card.is-active{border-color:#b45b14;background:rgba(120,52,10,.16);box-shadow:inset 0 0 0 1px rgba(224,120,40,.12);color:#f08b39;}
#section-ui .ui-theme-swatches{display:flex;overflow:hidden;border-radius:2px;border:1px solid rgba(255,255,255,.06);}
#section-ui .ui-theme-swatch{display:block;width:14px;height:14px;}
#section-ui .ui-theme-label{font-family:var(--font-display,'Rajdhani',sans-serif);font-size:10px;font-weight:700;letter-spacing:.03em;line-height:1;}

#section-ui .ui-font-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:14px;align-items:end;}
#section-ui .ui-font-field{display:flex;flex-direction:column;gap:8px;}
#section-ui .ui-font-field span{font-family:var(--font-display,'Rajdhani',sans-serif);font-size:12px;color:#bab5ac;letter-spacing:.02em;}
#section-ui .ui-font-field .form-input{width:100%;}

#section-ui .ui-upload-control{padding:4px 0;}
#section-ui .ui-upload-stack{display:flex;align-items:flex-start;gap:16px;}
#section-ui .ui-logo-preview,
#section-ui .ui-bg-preview{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background:rgba(255,255,255,.02);border:1px dashed #3a3f48;color:#6f6c66;}
#section-ui .ui-logo-preview{width:58px;height:58px;border-radius:8px;font-family:var(--font-display,'Rajdhani',sans-serif);font-size:34px;font-weight:700;color:#f08b39;}
#section-ui .ui-logo-preview img{display:block;width:100%;height:100%;object-fit:contain;background:#0b0d11;}
#section-ui .ui-bg-preview{width:112px;height:56px;border-radius:8px;font-family:var(--font-display,'Rajdhani',sans-serif);font-size:12px;}
#section-ui .ui-bg-preview img{display:block;width:100%;height:100%;object-fit:cover;}
#section-ui .ui-upload-buttons{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
#section-ui .ui-inline-upload-form{margin:0;display:block;}
#section-ui .ui-hidden-file{display:none !important;visibility:hidden;width:0;height:0;overflow:hidden;position:absolute;left:-9999px;}
#section-ui .ui-upload-buttons .save-btn{min-width:92px;justify-content:center;}
#section-ui .save-btn.danger{border-color:rgba(181,76,42,.45);background:rgba(94,28,14,.25);color:#ef7447;}
#section-ui .save-btn.danger:hover{border-color:rgba(208,93,55,.65);background:rgba(112,34,17,.35);color:#ff885f;}
#section-ui .save-btn[disabled]{opacity:.45;cursor:not-allowed;}

@media (max-width: 1200px){
  #section-ui .settings-row.ui-row{grid-template-columns:1fr;}
  #section-ui .settings-actions{justify-content:flex-start;}
  #section-ui .ui-font-grid{grid-template-columns:1fr;}
}


/* ============================================================
   v3.2t UI Customisation pixel match
   Target: uploaded UI Customisation reference
   ============================================================ */

/* Section shell */
#section-ui.settings-section {
    border-radius: 10px !important;
    overflow: hidden !important;
}

#section-ui .settings-section-head {
    height: 66px !important;
    min-height: 66px !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
}

#section-ui .settings-section-copy {
    gap: 12px !important;
}

#section-ui .settings-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
}

#section-ui .settings-section-copy h2 {
    font-size: 15px !important;
    letter-spacing: 1.1px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

#section-ui .settings-section-copy p {
    font-size: 10px !important;
    margin-top: 6px !important;
    line-height: 1 !important;
}

/* Rows */
#section-ui .settings-row.ui-row {
    display: grid !important;
    grid-template-columns: 220px minmax(520px, 1fr) 120px !important;
    gap: 18px !important;
    align-items: center !important;
    min-height: 82px !important;
    padding: 14px 18px 14px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.035) !important;
}

#section-ui .settings-row.ui-theme-row {
    min-height: 86px !important;
}

#section-ui .settings-row.ui-row:last-child {
    border-bottom: 0 !important;
}

#section-ui .settings-meta {
    align-self: center !important;
}

#section-ui .settings-key {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
    color: #b0aaa2 !important;
    line-height: 1.1 !important;
}

#section-ui .settings-desc {
    margin-top: 7px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    color: #5d5a55 !important;
    max-width: 222px !important;
}

/* Theme row */
#section-ui .ui-theme-control {
    width: 100% !important;
    min-width: 0 !important;
}

#section-ui .ui-theme-picker {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

#section-ui .ui-theme-card {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 76px !important;
    height: 54px !important;
    padding: 8px 7px 7px !important;
    border-radius: 7px !important;
    border: 1px solid #373f4d !important;
    background: rgba(14,17,22,.65) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #6d6a66 !important;
    cursor: pointer !important;
    transition: border-color .12s ease, background .12s ease, color .12s ease !important;
}

#section-ui .ui-theme-card:hover {
    border-color: #525d70 !important;
    color: #d4d0c8 !important;
    background: rgba(20,24,31,.86) !important;
}

#section-ui .ui-theme-card.is-active {
    border-color: #b85e18 !important;
    background: rgba(224,120,40,.08) !important;
    color: #f07c22 !important;
    box-shadow: inset 0 0 0 1px rgba(224,120,40,.08) !important;
}

#section-ui .ui-theme-swatches {
    width: 42px !important;
    height: 14px !important;
    display: flex !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.07) !important;
}

#section-ui .ui-theme-swatch {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    flex: 0 0 14px !important;
}

#section-ui .ui-theme-label {
    display: block !important;
    font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Fonts row */
#section-ui .ui-fonts-control {
    width: 100% !important;
}

#section-ui .ui-font-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: end !important;
}

#section-ui .ui-font-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    min-width: 0 !important;
}

#section-ui .ui-font-field span {
    font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #aaa59d !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
}

#section-ui .ui-font-field .form-input {
    height: 36px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 12px !important;
}

/* Upload rows */
#section-ui .ui-upload-control {
    width: 100% !important;
}

#section-ui .ui-upload-stack {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#section-ui .ui-logo-preview {
    width: 56px !important;
    height: 56px !important;
    border-radius: 8px !important;
    border: 1px dashed #3b414c !important;
    background: rgba(255,255,255,.018) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex: 0 0 56px !important;
    font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #ff7a1b !important;
}

#section-ui .ui-logo-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    background: #0b0d11 !important;
}

#section-ui .ui-bg-preview {
    width: 112px !important;
    height: 56px !important;
    border-radius: 8px !important;
    border: 1px dashed #3b414c !important;
    background: rgba(255,255,255,.018) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex: 0 0 112px !important;
    font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #66625d !important;
}

#section-ui .ui-bg-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

#section-ui .ui-upload-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
}

#section-ui .ui-inline-upload-form {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#section-ui .ui-hidden-file {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -99999px !important;
    opacity: 0 !important;
}

/* Save buttons */
#section-ui .settings-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 120px !important;
}

#section-ui .settings-time {
    font-size: 9px !important;
    color: #514f4b !important;
    min-width: 118px !important;
    text-align: right !important;
}

#section-ui .save-btn {
    height: 28px !important;
    min-width: 64px !important;
    padding: 0 12px !important;
    border-radius: 5px !important;
    font-size: 10px !important;
}

#section-ui .save-btn.accent {
    border-color: rgba(224,120,40,.5) !important;
    color: #f07c22 !important;
    background: rgba(224,120,40,.07) !important;
}

#section-ui .save-btn.accent:hover {
    border-color: rgba(224,120,40,.75) !important;
    background: rgba(224,120,40,.12) !important;
}

#section-ui .save-btn.danger {
    width: 86px !important;
    min-width: 86px !important;
    border-color: rgba(190,76,42,.44) !important;
    background: rgba(90,26,13,.28) !important;
    color: #ff7444 !important;
}

#section-ui .save-btn.danger:hover {
    border-color: rgba(210,93,55,.65) !important;
    background: rgba(115,34,18,.38) !important;
    color: #ff8a62 !important;
}

#section-ui .ui-upload-buttons .save-btn:not(.danger) {
    width: 88px !important;
    min-width: 88px !important;
}

#section-ui .save-btn[disabled] {
    opacity: .44 !important;
    cursor: not-allowed !important;
}

/* Match screenshot vertical rhythm near bottom */
#section-ui .settings-row.ui-row:nth-of-type(3),
#section-ui .settings-row.ui-row:nth-of-type(4) {
    min-height: 84px !important;
}

/* Responsive fallback */
@media (max-width: 1280px) {
    #section-ui .settings-row.ui-row {
        grid-template-columns: 200px minmax(0, 1fr) auto !important;
    }

    #section-ui .ui-font-grid {
        grid-template-columns: 1fr !important;
    }

    #section-ui .ui-theme-picker {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 900px) {
    #section-ui .settings-row.ui-row {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    #section-ui .settings-actions {
        justify-content: flex-start !important;
    }

    #section-ui .settings-time {
        text-align: left !important;
        min-width: 0 !important;
    }
}


/* ============================================================
   v3.2u UI Customisation full functions
   ============================================================ */
body {
    background: var(--color-bg, #131417);
    color: var(--color-text, #d0ccc8);
}

.sidebar-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: inherit;
}

.auth-page,
.auth-shell,
.auth-layout {
    background-image: var(--login-bg-image, none);
    background-size: cover;
    background-position: center;
}

.theme-nova-light {
    color-scheme: light;
}

.theme-nova-light .sidebar,
.theme-nova-light .topbar,
.theme-nova-light .settings-section,
.theme-nova-light .card,
.theme-nova-light .panel {
    background-color: var(--color-surface-1, #ffffff);
}

.theme-nova-light .form-input {
    background-color: var(--color-input, #ffffff);
    color: var(--color-text, #20242c);
}

.theme-nova-light .sidebar-logo-mark {
    color: var(--color-accent, #d47420);
}


/* ============================================================
   v3.2v Custom theme color functions
   ============================================================ */
#section-ui .ui-theme-control {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#section-ui .ui-custom-colors-panel {
    display: none;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px 22px;
    padding: 14px 14px;
    margin-top: 2px;
    background: rgba(32, 35, 41, .78);
    border: 1px solid rgba(54, 59, 68, .72);
    border-radius: 7px;
}

#section-ui .ui-custom-colors-panel.is-visible {
    display: grid;
}

#section-ui .ui-color-field {
    display: block;
    min-width: 0;
}

#section-ui .ui-color-title {
    display: block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: #a9a49d;
    margin-bottom: 6px;
}

#section-ui .ui-color-desc {
    display: block;
    font-size: 10px;
    color: #5e5b56;
    margin-bottom: 9px;
    line-height: 1.2;
}

#section-ui .ui-color-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

#section-ui .ui-color-picker {
    width: 30px;
    height: 30px;
    padding: 3px;
    border: 1px solid #3b414c;
    border-radius: 3px;
    background: #0b0d11;
    cursor: pointer;
}

#section-ui .ui-color-hex {
    width: 88px !important;
    height: 30px !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px !important;
}

@media (max-width: 1350px) {
    #section-ui .ui-custom-colors-panel {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 720px) {
    #section-ui .ui-custom-colors-panel {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   v3.2ac DB test details
   ============================================================ */
.db-test-message {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    border: 1px solid rgba(190, 76, 42, .35);
    background: rgba(70, 20, 12, .18);
    color: #bfb7ad;
    font-size: 11px;
    line-height: 1.45;
    word-break: break-word;
}

.db-test-message.ok {
    border-color: rgba(76, 160, 88, .35);
    background: rgba(20, 70, 28, .16);
}

.db-test-message strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-amber, #e07828);
}

.db-test-message.ok strong {
    color: #57b66a;
}

.db-test-message span {
    display: block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    color: inherit;
}

/* ============================================================
   v3.2ad Game Accounts multi-server final
   ============================================================ */
.pill-tab{display:inline-flex;align-items:center;gap:7px}.pill-tab small{font-size:10px;opacity:.58;font-weight:700}.pill-tab em{min-width:18px;height:18px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(56,200,232,.12);border:1px solid rgba(56,200,232,.22);color:var(--color-blue,#38c8e8);font-style:normal;font-size:10px;font-weight:800}.pill-tab.active em{background:rgba(0,0,0,.18);color:#fff;border-color:rgba(255,255,255,.18)}.server-summary-strip{margin:10px 0 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.server-summary-strip>div{min-width:180px;padding:10px 12px;border:1px solid var(--color-border-2,#282c34);border-radius:8px;background:rgba(255,255,255,.018)}.server-summary-strip span{display:block;margin-bottom:4px;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--color-text-muted,#585450)}.server-summary-strip strong{display:block;font-size:13px;color:var(--color-text,#d0ccc8)}.modal select.form-input{height:38px}

/* ============================================================
   v3.2ae Game server auth mapping
   ============================================================ */
.compact-auth-map-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin: 10px 0 12px;
}

.compact-auth-select {
    min-width: 280px;
    max-width: 380px;
}

.compact-auth-hint {
    font-size: 11px;
    color: var(--color-text-muted, #585450);
    padding-bottom: 8px;
}

.compact-auth-map-row select.form-input {
    height: 36px;
}

@media (max-width: 900px) {
    .compact-auth-map-row {
        align-items: stretch;
        flex-direction: column;
    }
    .compact-auth-select {
        max-width: none;
        width: 100%;
    }
}

/* ============================================================
   v3.2af Auth selector visibility fix
   ============================================================ */
.compact-auth-map-row select.form-input option {
    background: #11141a;
    color: #d0ccc8;
}

.compact-auth-map-row select.form-input option:disabled {
    color: #777;
}


/* ============================================================
   v3.2ag Create Game Account modal ref match
   ============================================================ */
.create-account-modal-card {
    width: 480px;
    max-width: calc(100vw - 32px);
}

.create-account-modal-card .modal-header {
    min-height: 64px;
    padding-bottom: 16px;
}

.create-account-modal-card .modal-title {
    letter-spacing: 1px;
}

.create-account-modal-card .modal-body {
    padding-top: 18px;
}

.create-account-modal-card .form-group {
    margin-bottom: 18px;
}

.create-prefix-login-group {
    margin-top: 2px;
}

.create-login-row {
    display: grid;
    grid-template-columns: 88px 42px 1fr;
    gap: 10px;
    align-items: center;
}

.create-prefix-select {
    height: 38px !important;
    padding-right: 26px !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
}

.create-random-btn {
    width: 42px;
    height: 38px;
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 6px;
    background: rgba(255, 255, 255, .025);
    color: var(--color-text-muted, #706d68);
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}

.create-random-btn:hover {
    border-color: rgba(56, 200, 232, .42);
    color: var(--color-blue, #38c8e8);
    background: rgba(56, 200, 232, .06);
}

.create-login-input {
    height: 38px !important;
}

.create-login-help {
    margin-top: 8px !important;
    font-size: 11px !important;
    color: var(--color-text-muted, #585450);
}

.create-login-help strong {
    color: var(--color-blue, #38c8e8);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.password-field .form-input {
    padding-right: 42px !important;
}

@media (max-width: 560px) {
    .create-login-row {
        grid-template-columns: 1fr;
    }

    .create-random-btn {
        width: 100%;
    }
}


/* ============================================================
   v3.2ah Create Account modal pixel polish
   ============================================================ */
#createModal.modal-overlay {
    background: rgba(0, 0, 0, .76) !important;
    backdrop-filter: blur(3px) !important;
}

#createModal .modal.create-account-modal-card {
    width: 480px !important;
    max-width: 480px !important;
    border-radius: 8px !important;
    border: 1px solid #3b4656 !important;
    background: #22262d !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .58) !important;
    overflow: hidden !important;
}

#createModal .modal-header {
    min-height: 80px !important;
    padding: 21px 20px 18px !important;
    border-bottom: 1px solid #303640 !important;
    background: #22262d !important;
}

#createModal .modal-title {
    margin: 0 0 9px !important;
    font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: #e2ded7 !important;
}

#createModal .modal-subtitle {
    font-size: 12px !important;
    line-height: 1 !important;
    color: #8a8580 !important;
}

#createModal .modal-close {
    top: 20px !important;
    right: 18px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 21px !important;
    color: #776f6a !important;
    opacity: .95 !important;
}

#createModal .modal-body {
    padding: 21px 20px 3px !important;
    background: #22262d !important;
}

#createModal .form-group {
    margin-bottom: 19px !important;
}

#createModal .form-label {
    display: block !important;
    margin-bottom: 9px !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #6f6a66 !important;
}

#createModal .create-login-row {
    display: grid !important;
    grid-template-columns: 88px 42px 1fr !important;
    gap: 10px !important;
    align-items: center !important;
}

#createModal .form-input,
#createModal select.form-input {
    height: 36px !important;
    border-radius: 5px !important;
    border: 1px solid #151a22 !important;
    background: #070a0f !important;
    color: #d0ccc8 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.018) !important;
    font-size: 12px !important;
}

#createModal .form-input::placeholder {
    color: #56514d !important;
}

#createModal .create-prefix-select {
    width: 88px !important;
    padding-left: 13px !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-weight: 800 !important;
    color: #e4ded5 !important;
}

#createModal .create-random-btn {
    width: 42px !important;
    height: 36px !important;
    border-radius: 5px !important;
    border: 1px solid #313844 !important;
    background: #242a33 !important;
    color: #77706a !important;
    font-size: 15px !important;
}

#createModal .create-random-btn:hover {
    border-color: rgba(56, 200, 232, .4) !important;
    color: #38c8e8 !important;
}

#createModal .create-login-input {
    height: 36px !important;
    padding-left: 13px !important;
}

#createModal .create-login-help {
    margin-top: 9px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: #68625d !important;
}

#createModal .create-login-help strong {
    color: #24bce5 !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-weight: 800 !important;
}

#createModal .input-wrap,
#createModal .password-field {
    position: relative !important;
}

#createModal .input-wrap .form-input {
    width: 100% !important;
    padding-left: 13px !important;
    padding-right: 40px !important;
}

#createModal .input-eye {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    background: transparent !important;
    color: #5b5651 !important;
    font-size: 12px !important;
}

#createModal .modal-footer {
    height: 68px !important;
    padding: 16px 20px !important;
    border-top: 1px solid #303640 !important;
    background: #252a32 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

#createModal .modal-footer .btn {
    height: 36px !important;
    border-radius: 5px !important;
    padding: 0 18px !important;
    font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#createModal .modal-footer .btn-ghost {
    min-width: 70px !important;
    border: 1px solid #39414d !important;
    background: transparent !important;
    color: #9a948d !important;
}

#createModal .modal-footer .btn-primary {
    min-width: 136px !important;
    border: 1px solid #0d7890 !important;
    background: #117c96 !important;
    color: #d8f7ff !important;
    box-shadow: none !important;
}

#createModal .modal-footer .btn-primary:hover {
    background: #1590ad !important;
}

@media (max-width: 560px) {
    #createModal .modal.create-account-modal-card {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }

    #createModal .create-login-row {
        grid-template-columns: 1fr !important;
    }

    #createModal .create-prefix-select,
    #createModal .create-random-btn {
        width: 100% !important;
    }
}


/* ============================================================
   v3.3 Balance page edit/add/fix
   ============================================================ */
.wallet-hero {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(360px, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.wallet-balance-card,
.wallet-stat-card,
.wallet-panel {
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 8px;
    background: var(--color-surface-1, #1a1c20);
}

.wallet-balance-card {
    padding: 20px 22px;
    min-height: 168px;
}

.wallet-balance-top,
.wallet-balance-foot,
.wallet-panel-header,
.wallet-action-row,
.wallet-custom-topup,
.wallet-pending-item,
.wallet-note-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wallet-balance-top span,
.wallet-stat-card span,
.wallet-panel-header p,
.wallet-note-row span,
.wallet-pending-item span {
    color: var(--color-text-muted, #585450);
}

.wallet-balance-top span,
.wallet-stat-card span {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.wallet-refresh,
.wallet-balance-foot button {
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 5px;
    background: rgba(255,255,255,.02);
    color: var(--color-text-dim, #8a8880);
    height: 30px;
    padding: 0 10px;
}

.wallet-refresh:hover,
.wallet-balance-foot button:hover {
    border-color: rgba(56, 200, 232, .35);
    color: var(--color-blue, #38c8e8);
}

.wallet-balance-main {
    margin: 18px 0 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.wallet-balance-main span {
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 54px;
    line-height: .9;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-text, #d0ccc8);
}

.wallet-balance-main em {
    font-style: normal;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    color: var(--color-amber, #e07828);
    font-weight: 800;
    letter-spacing: 1px;
}

.wallet-balance-foot {
    color: var(--color-text-muted, #585450);
    font-size: 12px;
}

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

.wallet-stat-card {
    padding: 16px;
    min-height: 78px;
}

.wallet-stat-card strong {
    display: block;
    margin-top: 8px;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 24px;
    line-height: 1;
    color: var(--color-text, #d0ccc8);
}

.wallet-action-row {
    justify-content: flex-end;
    margin: 0 0 16px;
}

.wallet-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

.wallet-main-column,
.wallet-side-column {
    display: grid;
    gap: 16px;
}

.wallet-panel {
    overflow: hidden;
}

.wallet-panel-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border-2, #282c34);
}

.wallet-panel-header h2 {
    margin: 0 0 4px;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wallet-panel-header p {
    margin: 0;
    font-size: 12px;
}

.wallet-package-grid {
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.wallet-package {
    min-height: 78px;
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 7px;
    background: rgba(255,255,255,.018);
    color: var(--color-text, #d0ccc8);
    text-align: left;
    padding: 13px;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.wallet-package:hover,
.wallet-package.is-active {
    border-color: rgba(224,120,40,.75);
    background: rgba(224,120,40,.08);
    transform: translateY(-1px);
}

.wallet-package strong {
    display: block;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 24px;
    line-height: 1;
}

.wallet-package span {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--color-text-muted, #585450);
}

.wallet-custom-topup {
    padding: 0 18px 18px;
}

.wallet-custom-topup label {
    flex: 1;
}

.wallet-custom-topup label span {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-text-muted, #585450);
}

.wallet-custom-topup .form-input {
    height: 38px;
}

.wallet-history-table td {
    white-space: nowrap;
}

.wallet-amount-plus {
    color: #58c976 !important;
    font-weight: 700;
}

.wallet-amount-minus {
    color: #e08368 !important;
    font-weight: 700;
}

.wallet-empty-note {
    padding: 18px;
    color: var(--color-text-muted, #585450);
}

.wallet-pending-list {
    display: grid;
}

.wallet-pending-item {
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-border-2, #282c34);
}

.wallet-pending-item:last-child {
    border-bottom: 0;
}

.wallet-pending-item strong,
.wallet-pending-item span {
    display: block;
}

.wallet-pending-item strong {
    margin-bottom: 4px;
}

.wallet-pending-item em {
    font-style: normal;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 18px;
}

.wallet-info-panel {
    background: linear-gradient(180deg, rgba(224,120,40,.04), rgba(255,255,255,.01));
}

.wallet-note-row {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border-2, #282c34);
}

.wallet-note-row strong {
    font-size: 12px;
    color: var(--color-text-dim, #8a8880);
}

.wallet-modal {
    width: 480px;
    max-width: calc(100vw - 24px);
}

@media (max-width: 1200px) {
    .wallet-hero,
    .wallet-layout {
        grid-template-columns: 1fr;
    }

    .wallet-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .wallet-side-column {
        grid-template-columns: 1fr;
    }

    .wallet-custom-topup,
    .wallet-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .wallet-action-row .btn,
    .wallet-custom-topup .btn {
        width: 100%;
    }
}


/* ============================================================
   v3.3b Balance page visual match
   ============================================================ */
.balance-ref-hero {
    min-height: 145px;
    margin: 20px 0;
    padding: 26px 24px;
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 8px;
    background: var(--color-surface-1, #1a1c20);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.balance-ref-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-muted, #585450);
}

.balance-ref-label button {
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 4px;
    background: rgba(255,255,255,.025);
    color: var(--color-text-muted, #585450);
}

.balance-ref-amount {
    margin-top: 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-amber, #e07828);
}

.balance-ref-amount span {
    color: var(--color-text-dim, #8a8880);
    font-weight: 500;
}

.balance-ref-sub {
    margin-top: 10px;
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-muted, #585450);
}

.balance-ref-sub button {
    border: 0;
    background: transparent;
    color: var(--color-blue, #38c8e8);
    font-size: 11px;
}

.balance-ref-hero-actions {
    display: flex;
    gap: 12px;
}

.balance-ref-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.balance-ref-main {
    display: grid;
    gap: 16px;
}

.balance-ref-card {
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 7px;
    background: var(--color-surface-1, #1a1c20);
    overflow: hidden;
}

.balance-ref-card-head {
    min-height: 44px;
    padding: 13px 17px;
    border-bottom: 1px solid var(--color-border-2, #282c34);
    background: var(--color-surface-2, #22252c);
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text, #d0ccc8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.balance-ref-card-head em {
    font-style: normal;
    font-size: 11px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 400;
    color: var(--color-text-muted, #585450);
    text-transform: none;
    letter-spacing: 0;
}

.balance-ref-card-body {
    padding: 18px;
}

.balance-ref-field-label {
    display: block;
    margin-bottom: 9px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text-muted, #585450);
}

.balance-ref-amount-input {
    width: 140px;
    height: 36px;
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 5px;
    background: var(--color-input-bg, #0e1014);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.balance-ref-amount-input input {
    width: 95px;
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--color-text, #d0ccc8);
    font-weight: 700;
}

.balance-ref-amount-input span {
    flex: 1;
    text-align: center;
    font-size: 10px;
    color: var(--color-text-muted, #585450);
}

.balance-ref-slider-wrap {
    margin: 36px 0 20px;
}

.balance-ref-range {
    width: 100%;
    accent-color: var(--color-blue, #38c8e8);
}

.balance-ref-range-labels {
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--color-text-muted, #585450);
}

.balance-ref-package-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.balance-ref-package {
    min-width: 80px;
    height: 70px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 5px;
    background: var(--color-surface-2, #22252c);
    color: var(--color-text, #d0ccc8);
    text-align: center;
}

.balance-ref-package:hover,
.balance-ref-package.is-active {
    border-color: rgba(56, 200, 232, .55);
    background: rgba(56, 200, 232, .08);
}

.balance-ref-package strong,
.balance-ref-package span,
.balance-ref-package em {
    display: block;
}

.balance-ref-package strong {
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 16px;
}

.balance-ref-package span {
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-text-muted, #585450);
}

.balance-ref-package em {
    margin-top: 2px;
    font-style: normal;
    font-size: 10px;
    color: #4cc76a;
}

.balance-ref-payments {
    padding: 15px 16px;
    display: grid;
    gap: 9px;
}

.balance-ref-payment {
    width: 100%;
    min-height: 60px;
    padding: 12px 16px;
    border: 1px solid var(--color-border-2, #282c34);
    border-radius: 6px;
    background: var(--color-surface-2, #22252c);
    display: grid;
    grid-template-columns: 18px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    color: var(--color-text, #d0ccc8);
    text-align: left;
}

.balance-ref-payment.is-active {
    border-color: var(--color-blue, #38c8e8);
    background: rgba(56, 200, 232, .09);
}

.balance-radio {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
}

.balance-ref-payment.is-active .balance-radio {
    border-color: var(--color-blue, #38c8e8);
    background: transparent;
    box-shadow: inset 0 0 0 3px var(--color-surface-2, #22252c);
}

.pay-icon {
    height: 24px;
    min-width: 32px;
    padding: 0 7px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
}

.pay-icon.stripe { background: #6652f5; }
.pay-icon.paypal { background: #0067d8; }
.pay-icon.apple { background: #050507; font-size: 17px; }
.pay-icon.google { background: #fff; color: #111; }
.pay-icon.crypto { background: #1d70f0; }

.balance-ref-payment strong,
.balance-ref-payment em {
    display: block;
}

.balance-ref-payment strong {
    font-size: 14px;
}

.balance-ref-payment em {
    margin-top: 3px;
    font-style: normal;
    font-size: 11px;
    color: var(--color-text-muted, #585450);
}

.balance-ref-payment small {
    border: 1px solid rgba(56,200,232,.4);
    border-radius: 4px;
    padding: 3px 7px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--color-blue, #38c8e8);
}

.balance-ref-deposit {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.balance-ref-deposit button {
    height: 36px;
    border: 1px solid var(--color-border-2, #282c34);
    border-radius: 4px;
    background: var(--color-surface-2, #22252c);
    color: var(--color-text-dim, #8a8880);
    font-weight: 700;
}

.balance-ref-deposit button.is-active {
    border-color: rgba(56,200,232,.5);
    background: var(--color-blue-dim, #0e5068);
    color: #a0e8f8;
}

.balance-ref-deposit-note,
.balance-ref-character {
    padding: 0 18px 18px;
    color: var(--color-text-muted, #585450);
    font-size: 12px;
}

.balance-ref-character p {
    margin-top: 8px;
}

.balance-ref-summary {
    position: sticky;
    top: calc(var(--header-h, 58px) + 18px);
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 7px;
    background: var(--color-surface-1, #1a1c20);
    overflow: hidden;
}

.balance-ref-summary-head {
    padding: 17px;
    border-bottom: 1px solid var(--color-border-2, #282c34);
    background: var(--color-surface-2, #22252c);
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.balance-ref-summary-body {
    padding: 17px;
}

.summary-line,
.summary-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--color-text-muted, #585450);
}

.summary-line strong,
.summary-total strong {
    color: var(--color-text, #d0ccc8);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.summary-total strong {
    color: var(--color-amber, #e07828);
}

.balance-ref-summary hr {
    border: 0;
    border-top: 1px solid var(--color-border-2, #282c34);
    margin: 4px 0 18px;
}

.bonus-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.bonus-row .form-input {
    height: 36px;
}

.bonus-row button {
    width: 58px;
    border: 1px solid var(--color-border-1, #363b44);
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-dim, #8a8880);
}

.balance-proceed-btn {
    height: 46px;
    margin-top: 4px;
}

.summary-foot {
    margin-top: 14px;
    color: var(--color-text-muted, #585450);
    font-size: 11px;
    line-height: 1.5;
}

.balance-history-card {
    margin-top: 20px;
}

.balance-ref-history td,
.balance-ref-history th {
    white-space: nowrap;
}

.history-plus {
    color: #43c878 !important;
    font-weight: 700;
}

.history-minus {
    color: #e05938 !important;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .balance-ref-layout {
        grid-template-columns: 1fr;
    }

    .balance-ref-summary {
        position: static;
    }
}

@media (max-width: 760px) {
    .balance-ref-hero,
    .balance-ref-hero-actions,
    .balance-ref-sub {
        flex-direction: column;
        align-items: stretch;
    }

    .balance-ref-deposit,
    .balance-ref-payment {
        grid-template-columns: 1fr;
    }
}


/* v3.3c Select Amount visual polish */
.balance-ref-select-body {
    display: grid;
    gap: 18px;
}

.balance-ref-select-top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
}

.balance-ref-live-price {
    min-width: 180px;
    text-align: right;
    padding-top: 10px;
}

.balance-ref-live-price-main {
    font-family: var(--font-display, 'Rajdhani', sans-serif);
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: #e8e2da;
}

.balance-ref-live-price-meta {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.balance-ref-live-price-meta span {
    font-size: 14px;
    color: var(--color-text-muted, #585450);
    text-decoration: line-through;
}

.balance-ref-live-price-meta em {
    min-width: 38px;
    height: 20px;
    padding: 0 7px;
    border: 1px solid rgba(76,199,106,.25);
    border-radius: 4px;
    background: rgba(76,199,106,.12);
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: #72d889;
}

.balance-ref-slider-wrap {
    margin: 2px 0 6px;
}

.balance-ref-range {
    width: 100%;
    height: 4px;
}

.balance-ref-package-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 760px) {
    .balance-ref-select-top {
        flex-direction: column;
    }

    .balance-ref-live-price {
        width: 100%;
        text-align: left;
    }

    .balance-ref-live-price-meta {
        justify-content: flex-start;
    }
}


/* ============================================================
   v3.3d Deposit To visual match
   ============================================================ */
.balance-deposit-card {
    margin-top: 0;
}

.balance-deposit-tabs {
    padding: 18px 16px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
}

.balance-deposit-tabs button {
    height: 36px !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    background: #242930 !important;
    color: #b7b2ac !important;
    font-weight: 800 !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 12px !important;
    text-align: center !important;
}

.balance-deposit-tabs button.is-active {
    background: #115f75 !important;
    border-color: #147f9b !important;
    color: #d6f7ff !important;
}

.balance-character-picker {
    margin: 8px 16px 16px !important;
    padding: 17px !important;
    border: 1px solid var(--color-border-2, #282c34) !important;
    border-radius: 6px !important;
    background: #22252c !important;
}

.balance-character-picker .balance-ref-field-label {
    margin: 0 0 9px !important;
}

.balance-character-picker .balance-ref-field-label:not(:first-child) {
    margin-top: 15px !important;
}

.balance-ref-select {
    width: 100% !important;
    height: 36px !important;
    border: 1px solid #12171f !important;
    border-radius: 5px !important;
    background: #080b10 !important;
    color: #f1eee8 !important;
    padding: 0 12px !important;
}

.balance-ref-select:focus {
    border-color: #1598b9 !important;
    box-shadow: 0 0 0 1px rgba(21, 152, 185, .32) !important;
}

.balance-manual-character {
    margin-top: 12px !important;
    height: 36px !important;
    display: none;
}

.balance-ref-deposit-note {
    padding: 2px 16px 18px !important;
    font-size: 11px !important;
    color: var(--color-text-muted, #585450) !important;
}

@media (max-width: 760px) {
    .balance-deposit-tabs {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}


/* ============================================================
   v3.3e Link Existing password verification
   ============================================================ */
#linkModal .password-field {
    position: relative;
}

#linkModal .password-field .form-input {
    padding-right: 42px;
}

#linkModal .form-hint {
    margin-top: 7px;
    color: var(--color-text-muted, #585450);
    font-size: 11px;
}


/* ============================================================
   v3.3f Game Accounts clan / last login / unstuck
   ============================================================ */
.inline-action-form {
    display: inline-flex;
    margin: 0;
}

.char-table td[data-label="Last Login"],
.char-table td[data-label="Clan"] {
    white-space: nowrap;
}

.char-table td[data-label="Actions"] {
    text-align: right;
}

.char-table .link-action {
    border: 0;
    background: transparent;
    color: var(--color-text-muted, #585450);
    font-size: 11px;
    cursor: pointer;
}

.char-table .link-action:hover {
    color: var(--color-blue, #38c8e8);
}


/* ============================================================
   v3.3g Game Accounts character table reference match
   ============================================================ */
.game-account-char-table-wrap {
  padding: 0;
}

.game-account-char-table {
  width: 100%;
  border-collapse: collapse;
}

.game-account-char-table thead tr {
  background: rgba(0,0,0,0.16);
}

.game-account-char-table th {
  padding: 12px 22px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--color-amber);
  border-bottom: 1px solid var(--color-border-2);
}

.game-account-char-table th.actions-col {
  width: 220px;
}

.game-account-char-table td {
  padding: 14px 22px;
  font-size: 11px;
  color: #b6b0aa;
  border-bottom: 1px solid rgba(255,255,255,.035);
  background: transparent;
}

.game-account-char-table tbody tr:hover td {
  background: rgba(255,255,255,0.015);
  color: var(--color-text);
}

.game-account-char-table .char-name-cell {
  color: #a6c6f7;
  font-weight: 500;
}

.game-account-char-table .char-last-login {
  color: #90867a;
  white-space: nowrap;
}

.game-account-char-table .char-actions-cell {
  text-align: right;
}

.char-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.table-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(95, 112, 138, 0.45);
  background: rgba(19, 25, 35, 0.35);
  color: #b2b8c2;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s ease;
}

.table-action-btn:hover {
  border-color: rgba(120, 146, 181, 0.8);
  color: #e3e6ea;
  background: rgba(30, 38, 50, 0.55);
}

.accordion-trigger {
  padding: 12px 18px;
}

.acc-name {
  font-size: 13px;
}

.acc-char-count {
  padding: 2px 9px;
  background: rgba(87, 46, 140, 0.18);
  border-color: rgba(118, 78, 176, 0.24);
  color: #b89cf4;
}

.acc-meta {
  gap: 12px;
}

.reset-pw-btn {
  color: #80786f;
}

.reset-pw-btn:hover {
  color: #c7c0b8;
}

@media (max-width: 900px) {
  .game-account-char-table thead {
    display: none;
  }

  .game-account-char-table,
  .game-account-char-table tbody,
  .game-account-char-table tr,
  .game-account-char-table td {
    display: block;
    width: 100%;
  }

  .game-account-char-table tr {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border-3);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    align-items: center;
  }

  .game-account-char-table tr:last-child {
    border-bottom: none;
  }

  .game-account-char-table td {
    padding: 0;
    border: none;
  }

  .game-account-char-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .game-account-char-table .char-actions-cell {
    grid-column: 1 / -1;
    text-align: left;
    margin-top: 6px;
  }
}


/* ============================================================
   v3.3h Game Accounts character table hard fix
   ============================================================ */
.game-account-char-table-wrap {
    padding: 0 !important;
}

.game-account-char-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

.game-account-char-table thead tr {
    background: rgba(0, 0, 0, .20) !important;
}

.game-account-char-table th {
    padding: 12px 22px !important;
    border-bottom: 1px solid var(--color-border-2, #282c34) !important;
    color: var(--color-amber, #e07828) !important;
    font-family: var(--font-display, 'Rajdhani', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

.game-account-char-table th:nth-child(1) { width: 20% !important; }
.game-account-char-table th:nth-child(2) { width: 20% !important; }
.game-account-char-table th:nth-child(3) { width: 10% !important; }
.game-account-char-table th:nth-child(4) { width: 14% !important; }
.game-account-char-table th:nth-child(5) { width: 18% !important; }
.game-account-char-table th:nth-child(6) { width: 18% !important; text-align: right !important; }

.game-account-char-table td {
    padding: 14px 22px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .035) !important;
    background: transparent !important;
    color: #aaa69f !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

.game-account-char-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.game-account-char-table tbody tr:hover td {
    background: rgba(255,255,255,.018) !important;
    color: #d0ccc8 !important;
}

.game-account-char-table .char-name-cell {
    color: #a8c0e8 !important;
    font-weight: 500 !important;
}

.game-account-char-table .char-last-login {
    white-space: nowrap !important;
    color: #8f857c !important;
}

.game-account-char-table .char-actions-cell {
    text-align: right !important;
}

.char-actions-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.inline-action-form {
    display: inline-flex !important;
    margin: 0 !important;
}

.table-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 70px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(95, 112, 138, .48) !important;
    border-radius: 6px !important;
    background: rgba(16, 22, 31, .45) !important;
    color: #b7b4ad !important;
    font-size: 11px !important;
    cursor: pointer !important;
}

.table-action-btn:hover {
    border-color: rgba(126, 150, 184, .85) !important;
    background: rgba(30, 39, 52, .65) !important;
    color: #f0eee9 !important;
}

.accordion-item.open {
    border-color: var(--color-amber-dim, rgba(224,120,40,.35)) !important;
    border-left: 3px solid var(--btn-p-bg, #e07828) !important;
}

.accordion-trigger {
    padding: 12px 18px !important;
    background: var(--color-surface-2, #22252c) !important;
}

.accordion-item.open .accordion-trigger {
    background: var(--color-surface-3, #2a2e36) !important;
}

.acc-name {
    font-size: 13px !important;
    font-weight: 700 !important;
}

.acc-char-count {
    padding: 2px 9px !important;
    background: rgba(87, 46, 140, .18) !important;
    border-color: rgba(118, 78, 176, .24) !important;
    color: #b89cf4 !important;
}


/* ============================================================
   v3.4a Nova Shop reference-style redesign
   ============================================================ */
.nova-shop-topbar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 22px;
}

.nova-shop-server-tabs,
.nova-shop-filter-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nova-shop-server-pill,
.nova-shop-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 15px;
  border-radius: 7px;
  border: 1px solid var(--color-border-1);
  background: rgba(255,255,255,.015);
  color: #9c988f;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  transition: all var(--t-fast);
}

.nova-shop-server-pill small {
  font-size: 11px;
  color: #7f7a72;
}

.nova-shop-server-pill:hover,
.nova-shop-filter-pill:hover {
  color: #d7d3cf;
  border-color: #36404a;
  background: rgba(255,255,255,.03);
}

.nova-shop-server-pill.active,
.nova-shop-filter-pill.active {
  background: #0f6483;
  border-color: #0f6483;
  color: #dff5fb;
}

.nova-shop-server-pill.active small,
.nova-shop-filter-pill.active small {
  color: rgba(223,245,251,.78);
}

.nova-shop-search-form {
  width: 100%;
  max-width: 212px;
}

.nova-shop-search-input {
  width: 100%;
  height: 34px;
  border-radius: 7px;
}

.nova-shop-section {
  margin: 0 0 26px;
}

.nova-shop-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(57, 63, 74, .7);
}

.nova-shop-section-mark {
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-amber);
  box-shadow: 0 0 0 1px rgba(224,120,40,.18);
}

.nova-shop-section-header h2 {
  margin: 0;
  color: #c7b79c;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nova-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.nova-shop-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 260px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(44, 51, 62, .95);
  background: linear-gradient(180deg, rgba(35,39,47,.96) 0%, rgba(24,27,33,.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.nova-shop-card:hover {
  transform: translateY(-2px);
  border-color: rgba(68, 82, 101, .95);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.nova-shop-card-media {
  position: relative;
  min-height: 168px;
  background: #262a33;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nova-shop-card-icon {
  font-size: 34px;
  line-height: 1;
  filter: saturate(1.08);
}

.nova-shop-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nova-shop-tag.badge-red { background: rgba(141, 39, 29, .16); color: #f06754; border-color: rgba(214, 74, 57, .45); }
.nova-shop-tag.badge-blue { background: rgba(12, 97, 126, .18); color: #54d4f4; border-color: rgba(32, 155, 196, .35); }
.nova-shop-tag.badge-green { background: rgba(44, 112, 61, .16); color: #75d68c; border-color: rgba(77, 158, 91, .35); }
.nova-shop-tag.badge-amber { background: rgba(138, 75, 22, .16); color: #ff9f42; border-color: rgba(224, 120, 40, .35); }

.nova-shop-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px 14px 14px;
  text-align: left;
  background: linear-gradient(180deg, rgba(25,28,34,.2) 0%, rgba(18,20,24,.94) 100%);
}

.nova-shop-card-name {
  color: #efeae2;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.nova-shop-card-meta {
  color: #666156;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2px;
}

.nova-shop-card-price {
  margin-top: 6px;
  color: var(--color-amber);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
}

.nova-shop-card-price span {
  margin-left: 2px;
  color: #705c47;
  font-size: 16px;
  font-weight: 700;
}

.shop-history-card {
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .nova-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 700px) {
  .nova-shop-search-form {
    max-width: 100%;
  }

  .nova-shop-card {
    min-height: 236px;
  }

  .nova-shop-card-media {
    min-height: 142px;
  }

  .nova-shop-section-header h2 {
    font-size: 18px;
  }
}


/* ============================================================
   v3.4b Admin Shop ref-style redesign
   ============================================================ */
.admin-inline-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid rgba(180, 86, 52, .42);
  background: rgba(139, 60, 34, .22);
  color: #d76d3d;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: middle;
}
.admin-shop-headline{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:4px 0 18px}.admin-shop-headline h2{margin:0;color:#efeae2;font-family:var(--font-display);font-size:25px;letter-spacing:2px;text-transform:uppercase}.admin-shop-headline p{margin:6px 0 0;color:#7f7a72;font-size:12px}.admin-shop-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-shop-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:12px 0 12px;padding:4px;border-radius:8px;border:1px solid var(--color-border-2);background:linear-gradient(90deg,rgba(40,45,54,.96),rgba(28,31,39,.96))}.admin-shop-mode-tab{height:34px;border:0;border-radius:6px;background:transparent;color:#635e58;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.admin-shop-mode-tab.active{background:rgba(82,88,100,.32);color:#3fcbf0}
.admin-shop-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.admin-shop-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--color-border-2);background:rgba(255,255,255,.02);color:#9c988f;font-size:11px}.admin-shop-chip em{font-style:normal;opacity:.7}.admin-shop-chip.active{background:#0f6483;border-color:#0f6483;color:#dff5fb}
.admin-shop-filter-card{padding:12px 14px;margin-bottom:14px}.admin-shop-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.admin-shop-filters .form-input{height:34px}.admin-shop-filters>#shopAdminSearch{width:220px}.admin-shop-filter-spacer{flex:1 1 auto}.admin-shop-filter-summary{color:#6c665e;font-size:11px}.admin-shop-filter-summary span{color:#a5a19a}
.admin-shop-table-wrap{overflow-x:auto}.admin-shop-table th:last-child,.admin-shop-table td:last-child{text-align:right}.admin-shop-table td{vertical-align:middle}.admin-shop-item-icon{width:34px;height:34px;border-radius:7px;border:1px solid rgba(60,65,76,.95);background:#2b3039;display:grid;place-items:center;color:#fff;font-size:18px}.admin-shop-item-name{font-weight:600;color:#e7e0d7}.admin-shop-category-cell{display:inline-flex;align-items:center;gap:6px;color:#948e84}.admin-shop-price-cell{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--color-amber)}.admin-shop-price-cell span{font-size:12px;color:#705c47}.admin-shop-server-badges{display:flex;gap:5px;flex-wrap:wrap}.server-mini-badge{display:inline-flex;align-items:center;justify-content:center;min-height:16px;padding:0 7px;border-radius:3px;border:1px solid rgba(59,93,105,.62);background:rgba(13,76,98,.2);color:#4fd7ff;font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.9px;text-transform:uppercase}.admin-shop-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}.btn-xs{min-height:24px;padding:0 10px;font-size:10px;letter-spacing:.8px}.btn-danger-lite{color:#a89f93;border-color:var(--color-border-2)}.btn-danger-lite:hover{color:#f18c78;border-color:rgba(209,92,63,.4);background:rgba(209,92,63,.08)}
.admin-shop-footerbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-top:1px solid var(--color-border-2);background:rgba(18,21,27,.78)}.admin-shop-page-size,.admin-shop-page-info{display:flex;align-items:center;gap:8px;color:#6d675f;font-size:11px}.form-input-compact{width:62px;min-width:62px;height:30px;padding-right:26px}.pagination{display:flex;align-items:center;gap:6px}.page-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--color-border-2);background:rgba(255,255,255,.02);color:#8e8a82;font-size:11px}.page-btn.active{background:#0f6483;border-color:#0f6483;color:#dff5fb}
.modal-wide{max-width:860px}.hidden{display:none !important}.text-blue{color:#42d4ff !important}.text-amber{color:var(--color-amber)!important}
@media (max-width: 900px){.admin-shop-headline{flex-direction:column}.admin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-shop-mode-tabs{grid-template-columns:1fr}.admin-shop-filters>#shopAdminSearch{width:100%}.admin-shop-filter-spacer{display:none}.admin-shop-footerbar{flex-direction:column;align-items:flex-start}}
@media (max-width: 560px){.admin-stat-grid{grid-template-columns:1fr}}

/* v3.4c admin shop header alignment */
.admin-shop-headline{margin-top:2px}


/* ============================================================
   v3.4d Admin Shop filter + table exact ref polish
   ============================================================ */
.admin-shop-section{margin-top:0}
.admin-shop-mode-tabs{
  margin:14px 0 14px;
  padding:4px;
  border-radius:10px;
  border:1px solid rgba(57,63,75,.92);
  background:linear-gradient(90deg,rgba(47,53,64,.96),rgba(31,35,43,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.admin-shop-mode-tab{
  height:30px;
  border-radius:6px;
  font-size:11px;
  letter-spacing:1.2px;
}
.admin-shop-mode-tab.active{
  background:rgba(86,92,104,.34);
  color:#37c7ef;
}
.admin-shop-chip-row{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin:2px 0 14px;
}
.admin-shop-chip{
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(57,63,75,.88);
  background:rgba(36,40,49,.72);
  color:#908b82;
  font-size:11px;
  line-height:1;
}
.admin-shop-chip em{
  opacity:.72;
  font-weight:700;
}
.admin-shop-chip.active{
  background:#0f6483;
  border-color:#0f6483;
  color:#e5f7fd;
}
.admin-shop-filter-card{
  margin-bottom:18px;
  padding:12px 16px;
  border-radius:8px;
  border:1px solid rgba(52,58,69,.95);
  background:linear-gradient(90deg,rgba(25,29,37,.96),rgba(31,35,43,.96));
}
.admin-shop-filters{
  display:grid;
  grid-template-columns: 240px 120px 124px 1fr auto auto;
  align-items:center;
  gap:12px;
}
.admin-shop-filters .form-input{
  height:36px;
  min-height:36px;
}
.admin-shop-filters>#shopAdminSearch{
  width:100%;
}
.admin-shop-filter-spacer{
  min-width:0;
}
.admin-shop-filter-summary{
  justify-self:end;
  color:#777169;
  font-size:11px;
  white-space:nowrap;
}
.admin-shop-filter-summary span{
  color:#8f897f;
}
#shopAdminClearBtn{
  min-height:36px;
  padding:0 14px;
}
.admin-shop-table-wrap{
  overflow-x:auto;
}
.admin-shop-table{
  width:100%;
  table-layout:fixed;
}
.admin-shop-table thead tr{
  background:linear-gradient(180deg,rgba(48,54,65,.88),rgba(32,36,44,.92));
}
.admin-shop-table th{
  padding:11px 16px;
  font-size:10px;
  letter-spacing:1.25px;
  color:#ff8517;
}
.admin-shop-table td{
  padding:12px 16px;
}
.admin-shop-table th:nth-child(1), .admin-shop-table td:nth-child(1){width:34px}
.admin-shop-table th:nth-child(2), .admin-shop-table td:nth-child(2){width:102px}
.admin-shop-table th:nth-child(4), .admin-shop-table td:nth-child(4){width:175px}
.admin-shop-table th:nth-child(5), .admin-shop-table td:nth-child(5){width:138px}
.admin-shop-table th:nth-child(6), .admin-shop-table td:nth-child(6){width:180px}
.admin-shop-table th:nth-child(7), .admin-shop-table td:nth-child(7){width:108px}
.admin-shop-table th:nth-child(8), .admin-shop-table td:nth-child(8){width:88px}
.admin-shop-table th:nth-child(9), .admin-shop-table td:nth-child(9){width:168px}
.admin-shop-item-icon{
  width:32px;
  height:32px;
  border-radius:6px;
  background:#2d313a;
}
.admin-shop-actions{
  gap:6px;
}
@media (max-width: 1200px){
  .admin-shop-filters{
    grid-template-columns:1fr 140px 140px auto auto;
  }
  .admin-shop-filter-spacer{display:none}
}
@media (max-width: 900px){
  .admin-shop-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .admin-shop-filters>*{
    flex:0 0 auto;
  }
  .admin-shop-filters>#shopAdminSearch{
    flex:1 1 100%;
    width:100%;
  }
  .admin-shop-filter-summary{
    margin-left:auto;
  }
}


/* ============================================================
   v3.4e Admin Shop list area exact card alignment
   ============================================================ */
.admin-shop-filter-card{
  padding:12px 14px;
  margin:0 0 12px;
  border-radius:10px;
  border:1px solid rgba(49,55,67,.96);
  background:linear-gradient(90deg,rgba(24,28,35,.98),rgba(31,35,43,.98));
}
.admin-shop-filters{
  display:grid;
  grid-template-columns: 210px 102px 116px 1fr auto auto;
  align-items:center;
  gap:12px;
}
.admin-shop-filters .form-input{
  height:34px;
  min-height:34px;
  padding:0 12px;
}
.admin-shop-filters #shopAdminSearch{width:100%}
.admin-shop-filter-spacer{min-width:0}
.admin-shop-filter-summary{
  justify-self:end;
  color:#726c63;
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}
.admin-shop-filter-summary span{color:#9a948a}
#shopAdminClearBtn{
  min-height:34px;
  height:34px;
  padding:0 12px;
  border-color:rgba(62,67,79,.96);
}
.admin-shop-list-card{
  padding:0;
  overflow:hidden;
  border-radius:10px;
}
.admin-shop-table-wrap{
  overflow-x:auto;
  border-top:0;
}
.admin-shop-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.admin-shop-table thead tr{
  background:linear-gradient(180deg,rgba(50,55,66,.88),rgba(35,39,47,.96));
}
.admin-shop-table th{
  padding:12px 14px;
  font-size:10px;
  letter-spacing:1.2px;
  color:#ff7f1f;
  text-transform:uppercase;
  border-bottom:1px solid rgba(49,55,67,.96);
}
.admin-shop-table td{
  padding:11px 14px;
  vertical-align:middle;
  border-bottom:1px solid rgba(35,40,49,.72);
}
.admin-shop-table tbody tr:hover td{background:rgba(34,39,47,.28)}
.admin-shop-table th:nth-child(1), .admin-shop-table td:nth-child(1){width:32px}
.admin-shop-table th:nth-child(2), .admin-shop-table td:nth-child(2){width:92px}
.admin-shop-table th:nth-child(3), .admin-shop-table td:nth-child(3){width:280px}
.admin-shop-table th:nth-child(4), .admin-shop-table td:nth-child(4){width:165px}
.admin-shop-table th:nth-child(5), .admin-shop-table td:nth-child(5){width:126px}
.admin-shop-table th:nth-child(6), .admin-shop-table td:nth-child(6){width:168px}
.admin-shop-table th:nth-child(7), .admin-shop-table td:nth-child(7){width:118px}
.admin-shop-table th:nth-child(8), .admin-shop-table td:nth-child(8){width:92px}
.admin-shop-table th:nth-child(9), .admin-shop-table td:nth-child(9){width:122px}
.admin-shop-table th:last-child,.admin-shop-table td:last-child{text-align:right}
.admin-shop-item-icon{
  width:32px;
  height:32px;
  border-radius:6px;
  border:1px solid rgba(54,59,70,.92);
  background:#303540;
  display:grid;
  place-items:center;
  font-size:16px;
}
.admin-shop-item-name{font-weight:700;color:#ebe2d7}
.mono-cell{color:#35d7ff;font-weight:700}
.admin-shop-category-cell{display:inline-flex;align-items:center;gap:6px;color:#9b9489;font-size:13px}
.admin-shop-price-cell{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--color-amber)}
.admin-shop-price-cell span{font-size:11px;color:#816347}
.admin-shop-server-badges{display:flex;gap:4px;flex-wrap:wrap}
.server-mini-badge{min-height:16px;padding:0 6px;font-size:8px;letter-spacing:.8px}
.admin-shop-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:nowrap}
.admin-shop-actions .btn-xs{min-height:22px;height:22px;padding:0 9px;font-size:9px;letter-spacing:.8px}
.admin-shop-footerbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
  border-top:1px solid rgba(49,55,67,.96);
}
@media (max-width: 1280px){
  .admin-shop-filters{grid-template-columns: 1fr 120px 120px auto auto}
  .admin-shop-filter-spacer{display:none}
}
@media (max-width: 980px){
  .admin-shop-filters{display:flex;flex-wrap:wrap;gap:10px}
  .admin-shop-filters > *{flex:0 0 auto}
  .admin-shop-filters #shopAdminSearch{flex:1 1 100%;width:100%}
  .admin-shop-filter-summary{margin-left:auto}
}


/* ============================================================
   v4.5 Rankings reference-match refresh
   ============================================================ */
.rankings-controls{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:nowrap;
  margin:0 0 16px;
}
.rankings-select{
  width:180px;
  max-width:180px;
  flex:0 0 180px;
}
.rankings-search{
  width:240px;
  max-width:240px;
  flex:0 0 240px;
}
.rankings-controls .form-input{
  height:36px;
  min-height:36px;
  padding:0 12px;
}
.rank-refresh-form,.rank-context{display:none !important}
.rankings-table-shell{
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(24,28,35,.98),rgba(20,24,31,.98));
  border:1px solid rgba(47,53,63,.95);
}
.rankings-ref-table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
}
.rankings-ref-table thead tr{
  background:linear-gradient(180deg,rgba(53,58,69,.92),rgba(42,47,57,.98));
}
.rankings-ref-table th{
  padding:12px 16px;
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--color-amber);
  border-bottom:1px solid rgba(47,53,63,.95);
}
.rankings-ref-table td{
  padding:14px 16px;
  font-size:13px;
  color:#aea695;
  border-bottom:1px solid rgba(34,39,46,.78);
}
.rankings-ref-table tbody tr:nth-child(odd) td{background:rgba(255,255,255,.01)}
.rankings-ref-table tbody tr:hover td{background:rgba(41,47,56,.42);color:#e5ddd0}
.rankings-ref-table th:nth-child(1), .rankings-ref-table td:nth-child(1){width:54px}
.rankings-ref-table th:nth-child(2), .rankings-ref-table td:nth-child(2){width:220px}
.rankings-ref-table th:nth-child(3), .rankings-ref-table td:nth-child(3){width:230px}
.rankings-ref-table th:nth-child(4), .rankings-ref-table td:nth-child(4){width:120px}
.rankings-ref-table th:nth-child(5), .rankings-ref-table td:nth-child(5){width:210px}
.rankings-ref-table th:nth-child(6), .rankings-ref-table td:nth-child(6){width:170px}
.rankings-type-clan th:nth-child(1), .rankings-type-clan td:nth-child(1){width:54px}
.rankings-type-clan th:nth-child(2), .rankings-type-clan td:nth-child(2){width:250px}
.rankings-type-clan th:nth-child(3), .rankings-type-clan td:nth-child(3){width:260px}
.rankings-type-clan th:nth-child(4), .rankings-type-clan td:nth-child(4){width:120px}
.rankings-type-clan th:nth-child(5), .rankings-type-clan td:nth-child(5){width:140px}
.rankings-type-clan th:nth-child(6), .rankings-type-clan td:nth-child(6){width:170px}
.rankings-type-clan .rank-score-cell{color:#f1eadc}

.rankings-type-olympiad th:nth-child(1), .rankings-type-olympiad td:nth-child(1){width:220px}
.rankings-type-olympiad th:nth-child(2), .rankings-type-olympiad td:nth-child(2){width:230px}
.rankings-type-olympiad th:nth-child(3), .rankings-type-olympiad td:nth-child(3){width:190px}
.rankings-type-olympiad th:nth-child(4), .rankings-type-olympiad td:nth-child(4){width:210px}
.rankings-type-olympiad th:nth-child(5), .rankings-type-olympiad td:nth-child(5){width:140px}
.rankings-type-olympiad th:nth-child(6), .rankings-type-olympiad td:nth-child(6){width:120px}
.rankings-type-olympiad th:nth-child(7), .rankings-type-olympiad td:nth-child(7){width:150px}
.rankings-type-olympiad .rank-score-cell{color:#f1eadc;font-weight:800}
.olympiad-wl-cell{font-weight:800;white-space:nowrap}
.olympiad-wins{color:#58d28a}
.olympiad-losses{color:#ff8f62}
.olympiad-sep{color:#8a91a2;margin:0 5px}
.olympiad-winrate{color:#58d28a;font-weight:800}
.rankings-ref-table .rank-medal{
  width:28px;
  height:28px;
  font-size:11px;
  border:1px solid rgba(96,102,113,.9);
  background:rgba(46,51,60,.85);
  color:#d3ccc0;
}
.rankings-ref-table .rank-medal.gold{background:rgba(107,85,20,.24);border-color:#b99020;color:#ffd86a}
.rankings-ref-table .rank-medal.silver{background:rgba(103,110,119,.24);border-color:#8c98a5;color:#dce5f2}
.rankings-ref-table .rank-medal.bronze{background:rgba(121,71,38,.24);border-color:#a46438;color:#f1b07a}
.rank-character-cell strong{font-size:13px;font-weight:700;color:#f2eadc}
.rank-clan-cell{display:inline-flex;align-items:center;gap:8px;color:#b3ab9a}
.rank-clan-mark{
  width:20px;
  height:20px;
  border-radius:4px;
  border:1px solid rgba(69,74,85,.94);
  background:rgba(55,60,70,.74);
  color:#bab2a5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1;
}
.rank-score-cell{
  font-family:var(--font-display);
  font-weight:700;
  color:#f1eadc;
  letter-spacing:.4px;
}
.sort-arrow{font-size:10px;color:#b56a2a;margin-left:3px}
.pill-tabs{margin-bottom:18px !important}
.cat-tabs{margin-bottom:16px !important;display:flex;flex-wrap:wrap;gap:18px;border-bottom:1px solid rgba(46,52,62,.9)}
.cat-tab{
  padding:0 0 11px;
  border:none;
  border-bottom:2px solid transparent;
  background:transparent;
  border-radius:0;
  font-size:13px;
  color:#b1aa9c;
}
.cat-tab.active{color:#35d7ff;border-color:#2fbfe8;background:transparent;box-shadow:none}
.cat-tab:hover{color:#e7ded1;background:transparent}
@media (max-width: 1100px){
  .rankings-controls{
    flex-wrap:wrap;
  }
  .rankings-select,.rankings-search{
    width:100%;
    max-width:100%;
    flex:1 1 100%;
  }
  .rankings-ref-table{min-width:980px}
}


/* ============================================================
   v3.4k Rankings hover and click sorting
   ============================================================ */
.rankings-ref-table tbody tr {
    cursor: default;
    transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.rankings-ref-table tbody tr:hover td {
    background: rgba(47, 55, 68, .72) !important;
    color: #f0e8db !important;
}

.rankings-ref-table tbody tr:hover .rank-character-cell strong {
    color: #ffffff !important;
}

.rankings-ref-table tbody tr:hover .rank-clan-cell,
.rankings-ref-table tbody tr:hover .rank-score-cell {
    color: #f5eee2 !important;
}

.rankings-ref-table tbody tr:hover .rank-clan-mark {
    border-color: rgba(83, 94, 113, .95);
    background: rgba(65, 73, 88, .95);
    color: #ffffff;
}

.rank-sortable-head {
    cursor: pointer;
    user-select: none;
    transition: color .14s ease, background-color .14s ease;
}

.rank-sortable-head:hover {
    color: #38c8e8 !important;
    background: rgba(56, 200, 232, .045);
}

.rank-sortable-head.sorted-asc,
.rank-sortable-head.sorted-desc {
    color: #38c8e8 !important;
}

.js-sort-arrow {
    margin-left: 4px;
    color: #38c8e8;
    font-size: 10px;
}


/* ============================================================
   v3.4l Rankings all sections hover/sort final
   Applies to: PVP, PK, EXP, Clan, Castles, Clan Halls, Olympiad
   ============================================================ */
.rankings-sortable tbody tr {
    cursor: default;
    transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.rankings-sortable tbody tr:hover td {
    background: rgba(47, 55, 68, .72) !important;
    color: #f0e8db !important;
}

.rankings-sortable tbody tr:hover .rank-character-cell strong {
    color: #ffffff !important;
}

.rankings-sortable tbody tr:hover .rank-clan-cell,
.rankings-sortable tbody tr:hover .rank-score-cell,
.rankings-sortable tbody tr:hover .olympiad-winrate,
.rankings-sortable tbody tr:hover .olympiad-wl-cell {
    color: #f5eee2 !important;
}

.rankings-sortable tbody tr:hover .olympiad-wins {
    color: #7ef2a5 !important;
}

.rankings-sortable tbody tr:hover .olympiad-losses {
    color: #ff9d79 !important;
}

.rankings-sortable tbody tr:hover .rank-clan-mark {
    border-color: rgba(83, 94, 113, .95) !important;
    background: rgba(65, 73, 88, .95) !important;
    color: #ffffff !important;
}

.rankings-sortable .rank-sortable-head {
    cursor: pointer;
    user-select: none;
    transition: color .14s ease, background-color .14s ease;
}

.rankings-sortable .rank-sortable-head:hover {
    color: #38c8e8 !important;
    background: rgba(56, 200, 232, .045) !important;
}

.rankings-sortable .rank-sortable-head.sorted-asc,
.rankings-sortable .rank-sortable-head.sorted-desc {
    color: #38c8e8 !important;
}

.rankings-sortable .js-sort-arrow {
    margin-left: 4px;
    color: #38c8e8;
    font-size: 10px;
}

/* Generic widths for special tables so Castles / Clan Halls also look clean */
.rankings-type-castles th,
.rankings-type-castles td,
.rankings-type-clan_halls th,
.rankings-type-clan_halls td {
    white-space: nowrap;
}


/* ============================================================
   v3.5a Game Accounts character info drawer
   ============================================================ */
.character-info-row { cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.character-info-row:hover td { background: rgba(47,55,68,.72) !important; color: #f0e8db !important; }
.char-info-link {
  color: var(--color-text);
  font-weight: 600;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.character-info-row:hover .char-info-link { color: #fff; }

.character-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 390;
  display: none;
  background: rgba(3, 6, 12, .84);
  backdrop-filter: blur(7px);
}
.character-drawer-overlay.open { display: block; }

.character-info-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 410;
  width: min(420px, 96vw);
  height: 100vh;
  background: linear-gradient(180deg, #232834 0%, #1d212b 100%);
  border-left: 1px solid rgba(88, 97, 116, .42);
  box-shadow: -26px 0 56px rgba(0, 0, 0, .62);
  transform: translateX(104%);
  transition: transform .24s ease;
  display: flex;
  flex-direction: column;
}
.character-info-drawer.open { transform: translateX(0); }

.character-drawer-head {
  min-height: 82px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(88, 97, 116, .34);
  background: linear-gradient(180deg, #232834 0%, #212630 100%);
}
.character-drawer-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  color: #f0e6d6;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.character-drawer-sub {
  margin-top: 8px;
  color: #98a2b6;
  font-size: 12px;
  line-height: 1.45;
}
.character-drawer-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #7f8696;
  font-size: 24px;
  line-height: 1;
  transition: color var(--t-fast), background var(--t-fast);
}
.character-drawer-close:hover {
  color: var(--color-amber);
  background: rgba(255,255,255,.04);
}

.character-drawer-body {
  padding: 16px 18px 22px;
  overflow-y: auto;
}
.character-drawer-body::-webkit-scrollbar {
  width: 8px;
}
.character-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(110, 120, 138, .32);
  border-radius: 999px;
}
.character-drawer-body::-webkit-scrollbar-track {
  background: transparent;
}
.character-hero-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(79, 87, 104, .55);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  margin-bottom: 18px;
}
.character-avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #d7f8ff;
  background: linear-gradient(135deg, #116d8e, #1782a6);
  font-size: 18px;
  flex: 0 0 36px;
}
.character-hero-class {
  color: #efe4d4;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}
.character-hero-meta {
  margin-top: 3px;
  color: #8b95a8;
  font-size: 11px;
  line-height: 1.4;
}

.drawer-section-title {
  margin: 18px 0 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #70798e;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.vital-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  color: #9aa4b7;
  font-size: 11px;
}
.vital-row strong {
  min-width: 90px;
  text-align: right;
  color: #cec6ba;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2px;
}
.vital-bar {
  height: 4px;
  border-radius: 999px;
  background: #343947;
  overflow: hidden;
}
.vital-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #d86946;
}
.vital-row.mp .vital-bar i { background: #39d8f8; }
.vital-row.cp .vital-bar i { background: #e88b2f; }

.character-info-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  border-top: 1px solid rgba(255,255,255,.03);
}
.character-info-grid span,
.character-info-grid strong {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.045);
  font-size: 12px;
  line-height: 1.35;
}
.character-info-grid span {
  color: #737d90;
}
.character-info-grid strong {
  color: #ddd4c8;
  font-weight: 600;
  text-align: right;
}
.character-info-grid .blue-value { color: #27cbff; }
.character-info-grid .amber-value { color: var(--color-amber); }

.character-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drawer-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(79, 87, 104, .55);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  color: var(--color-text);
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.drawer-action-btn:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(91, 162, 196, .45);
  transform: translateY(-1px);
}
.drawer-action-btn > span {
  width: 22px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #f05390;
}
#drawerRepairForm .drawer-action-btn > span { color: #dad7e5; }
.drawer-action-btn em {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}
.drawer-action-btn strong {
  font-size: 13px;
  font-weight: 700;
  color: #ddd4c8;
}
.drawer-action-btn small {
  font-size: 10px;
  color: #70798e;
}

@media (max-width: 640px) {
  .character-info-drawer { width: 100vw; }
}


/* v3.6m email 2FA */
.twofa-settings-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}
.two-factor-code-input {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 8px;
  height: 46px;
}
@media (max-width: 680px) {
  .twofa-settings-form {
    grid-template-columns: 1fr;
  }
}


/* v3.6n support ticket wizard visual match */
.support-wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px);
}
.support-wizard-overlay.open {
  display: flex;
}
.support-wizard {
  width: min(100%, 720px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #24282f;
  border: 1px solid #3a414d;
  border-radius: 10px;
  box-shadow: 0 22px 70px rgba(0,0,0,.78);
  overflow: hidden;
}
.support-wizard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: #24282f;
}
.support-wizard-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e0d9d0;
}
.support-step-dots {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.support-step-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #3c4650;
}
.support-step-dots span.active {
  background: var(--color-blue);
  box-shadow: 0 0 8px rgba(56,200,232,.45);
}
.support-step-dots span:first-child.active {
  background: var(--color-green);
  box-shadow: 0 0 8px rgba(90,158,106,.45);
}
.support-wizard-close {
  width: 32px;
  height: 32px;
  color: #7c838e;
  font-size: 26px;
  line-height: 1;
  border-radius: 6px;
}
.support-wizard-close:hover {
  color: #d0ccc8;
  background: rgba(255,255,255,.05);
}
.support-wizard-step {
  display: none;
}
.support-wizard-step.active {
  display: block;
}
.support-wizard-body {
  padding: 22px 24px 24px;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}
.support-section-label {
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #696b70;
}
.support-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.support-type-card {
  min-height: 130px;
  padding: 22px 18px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #1a1d22;
  border: 1px solid #323843;
  border-radius: 7px;
  color: #b9b4ad;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.support-type-card:hover,
.support-type-card.active {
  border-color: var(--color-blue);
  background: rgba(56,200,232,.12);
  box-shadow: inset 0 0 0 1px rgba(56,200,232,.2);
}
.support-type-icon {
  font-size: 25px;
  line-height: 1;
  margin-bottom: 9px;
}
.support-type-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #d0ccc8;
}
.support-type-card small {
  display: block;
  max-width: 270px;
  margin-top: 7px;
  color: #696b70;
  font-size: 11px;
  line-height: 1.45;
}
.support-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.support-upload-box {
  position: relative;
  min-height: 118px;
  display: grid;
  place-items: center;
  gap: 5px;
  text-align: center;
  border: 1px dashed #333944;
  border-radius: 7px;
  background: rgba(0,0,0,.06);
  color: #7b7f87;
  font-size: 12px;
  margin-top: 2px;
}
.support-upload-box small {
  color: #555a62;
  font-size: 10px;
}
.support-upload-icon {
  font-size: 23px;
  opacity: .9;
}
.support-upload-box input {
  display: none;
}
.support-review-box {
  padding: 20px;
  display: grid;
  gap: 14px;
  border: 1px solid #323843;
  border-radius: 7px;
  background: #1a1d22;
}
.support-review-box div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
}
.support-review-box span {
  color: #696b70;
}
.support-review-box strong {
  color: #d0ccc8;
  font-weight: 600;
}
.support-review-note {
  margin-top: 18px;
  color: #9ed9e8;
  background: rgba(56,200,232,.10);
  border-color: rgba(56,200,232,.38);
  line-height: 1.6;
}
.support-wizard-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 24px;
  border-top: 1px solid rgba(255,255,255,.055);
  background: #24282f;
}
.support-wizard .form-label {
  letter-spacing: 2.5px;
}
.support-wizard .form-input,
.support-wizard .form-textarea {
  min-height: 42px;
  border-color: #323843;
  background: #0d1015;
  color: #d0ccc8;
}
.support-wizard .form-textarea {
  min-height: 124px;
}
.support-wizard .form-group {
  margin-bottom: 15px;
}
@media (max-width: 720px) {
  .support-type-grid,
  .support-two-col {
    grid-template-columns: 1fr;
  }
  .support-review-box div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .support-wizard-footer {
    flex-wrap: wrap;
  }
  .support-wizard-footer .btn {
    flex: 1;
  }
}


/* v3.6o support character select + real uploads */
.support-upload-box {
  cursor: pointer;
}
.support-upload-box.drag-over {
  border-color: var(--color-blue);
  background: rgba(56,200,232,.10);
  box-shadow: inset 0 0 0 1px rgba(56,200,232,.20);
}
.support-file-list {
  display: grid;
  gap: 8px;
  margin-top: -6px;
  margin-bottom: 12px;
}
.support-file-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(0,0,0,.16);
  color: var(--color-text-dim);
  font-size: 11px;
}
.support-file-item small {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.support-file-item.too-large {
  border-color: rgba(192,80,48,.45);
  color: #ffd0c8;
}
.ticket-attachments {
  margin: 14px 16px;
  padding: 14px;
  border: 1px solid var(--color-border-2);
  border-radius: var(--r-lg);
  background: rgba(0,0,0,.10);
}
.ticket-attachments-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-bottom: 10px;
}
.ticket-attachment-link {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--color-border-3);
  color: var(--color-blue);
  font-size: 12px;
}
.ticket-attachment-link:first-of-type {
  border-top: 0;
}
.ticket-attachment-link span {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}


/* v3.6p bug report support form */
#supportReasonGroup[style*="display: none"] {
  display: none !important;
}
.support-type-card.active[data-type="Bug Report"] {
  border-color: rgba(94, 234, 212, .75);
  background: rgba(94, 234, 212, .08);
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .18);
}
.support-type-card.active[data-type="Bug Report"] .support-type-icon {
  color: #5eead4;
}


/* v3.6q support server/character dropdown fallback */
.support-manual-character {
  display: none;
}
.support-wizard select.form-input option {
  background: #0d1015;
  color: #d0ccc8;
}
.support-wizard select.form-input option:disabled {
  color: #555a62;
}


/* v3.6r support page reference visual match */
.support-ref-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 2px 0 16px;
  border-bottom: 1px solid var(--color-border-2);
}
.support-ref-top .page-title {
  font-size: 24px;
  letter-spacing: 2.5px;
}
.support-new-ticket-ref {
  height: 40px;
  padding: 0 18px;
  background: var(--btn-s-bg);
  color: var(--btn-s-text);
}
.support-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  min-height: calc(100vh - 190px);
  border-top: 1px solid var(--color-border-2);
  margin: 0 -24px -24px;
}
.support-layout .ticket-list {
  border-right: 1px solid var(--color-border-2);
  background: rgba(26,28,32,.72);
  min-height: calc(100vh - 190px);
}
.support-ref-toolbar {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--color-border-2);
}
.support-ticket-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.support-ticket-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text);
}
.support-ticket-counts {
  font-size: 10px;
  color: var(--color-text-muted);
}
.support-search-wrap {
  position: relative;
}
.support-search-wrap span {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-blue);
  font-size: 12px;
  z-index: 1;
}
.support-search-wrap .form-input {
  padding-left: 34px;
}
.support-ref-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.support-ref-tabs .pill-tab {
  justify-content: center;
  height: 34px;
  font-size: 10px;
  letter-spacing: 1.5px;
}
.support-ref-tabs .pill-tab span {
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: var(--color-blue);
}
.ticket-list .ticket-item {
  display: block;
  padding: 14px 16px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,.035);
  background: transparent;
  transition: background .15s ease, border-color .15s ease;
}
.ticket-list .ticket-item:hover {
  background: rgba(56,200,232,.055);
}
.ticket-list .ticket-item.active {
  border-left-color: var(--color-blue);
  background: rgba(56,200,232,.075);
}
.ticket-list .ticket-head strong {
  display: block;
  max-width: 250px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-list .ticket-item p {
  margin-top: 7px;
  color: var(--color-text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-panel {
  min-height: calc(100vh - 190px);
  background: #121417;
}
.support-empty-detail {
  min-height: calc(100vh - 190px);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 13px;
  color: var(--color-text-muted);
}
.support-empty-icon {
  font-size: 31px;
  opacity: .45;
}
.support-empty-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.support-empty-text {
  max-width: 230px;
  font-size: 12px;
  line-height: 1.6;
}
.support-detail-card {
  border: 0;
  border-radius: 0;
  min-height: calc(100vh - 190px);
  background: transparent;
}
.support-detail-head {
  min-height: 82px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border-2);
  background: rgba(26,28,32,.42);
}
.support-detail-head .settings-card-title {
  font-size: 17px;
  letter-spacing: 1.5px;
}
.support-detail-head .settings-card-sub {
  margin-top: 8px;
  color: var(--color-text-muted);
}
.support-ref-thread {
  padding: 22px 28px;
  min-height: calc(100vh - 390px);
}
.ticket-message {
  max-width: 720px;
  margin-bottom: 22px;
}
.ticket-message.admin-msg {
  margin-left: auto;
}
.ticket-message-body {
  padding: 16px 18px;
  border-radius: 7px;
  border: 1px solid var(--color-border-2);
  background: var(--color-surface-2);
  color: var(--color-text);
  line-height: 1.7;
}
.ticket-message.admin-msg .ticket-message-body {
  background: var(--btn-p-bg);
  border-color: var(--btn-p-bg-hover);
  color: #d8fbff;
}
.ticket-message-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 10px;
  color: var(--color-text-muted);
}
.support-ref-reply {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: end;
  padding: 18px 24px;
  border-top: 1px solid var(--color-border-2);
  background: rgba(26,28,32,.8);
}
.support-ref-reply textarea {
  min-height: 82px;
  margin: 0;
  grid-column: 1 / -1;
}
.support-wizard {
  width: min(100%, 720px);
}
.support-wizard-head {
  padding: 22px 24px 18px;
}
.support-wizard-footer {
  padding: 18px 24px;
}
@media (max-width: 980px) {
  .support-layout {
    grid-template-columns: 1fr;
    margin: 0;
  }
  .support-layout .ticket-list {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-2);
  }
  .support-panel,
  .support-empty-detail,
  .support-detail-card {
    min-height: 420px;
  }
}

/* v3.6s support page no-ticket and thread refinement */
.support-layout-refined {
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr);
  min-height: calc(100vh - 190px);
  border-top: 1px solid var(--color-border-2);
  margin: 0 -24px -24px;
}
.support-layout-refined .ticket-list {
  min-height: calc(100vh - 190px);
  background: rgba(21, 24, 29, .88);
  border-right: 1px solid rgba(255,255,255,.07);
}
.support-layout-refined .support-panel {
  min-height: calc(100vh - 190px);
  background: #0d1014;
  position: relative;
}
.support-ticket-counts {
  letter-spacing: 1px;
  text-transform: lowercase;
}
.support-ref-tabs .pill-tab {
  background: rgba(23, 26, 31, .9);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--color-text-dim);
}
.support-ref-tabs .pill-tab.active {
  background: rgba(20, 112, 141, .92);
  color: #dffbff;
  border-color: rgba(38, 205, 245, .18);
}
.support-ref-tabs .pill-tab.active span {
  background: rgba(0,0,0,.22);
  color: #dffbff;
}
.support-list-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.support-list-item-top strong {
  display: block;
  flex: 1;
  min-width: 0;
  max-width: none;
  color: #f3efe9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-list-date {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--color-text-muted);
}
.support-list-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.support-ticket-ref-small {
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: .8px;
}
.ticket-list .ticket-item {
  padding: 14px 14px 13px;
  border-left-width: 3px;
}
.ticket-list .ticket-item.is-closed {
  opacity: .92;
}
.ticket-list .ticket-item p {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
}
.support-empty-detail {
  min-height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  color: var(--color-text-muted);
}
.support-empty-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  font-size: 26px;
  color: rgba(232, 183, 56, .5);
  background: transparent;
  border-radius: 12px;
  opacity: .7;
}
.support-empty-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(224, 214, 202, .86);
}
.support-empty-text {
  max-width: 280px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.65;
}
.support-detail-shell {
  min-height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
}
.support-detail-head-ref {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(20, 23, 28, .86);
}
.support-detail-head-main {
  min-width: 0;
}
.support-detail-title {
  color: #f0ebe4;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.2px;
  line-height: 1.25;
}
.support-detail-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
}
.support-top-action {
  height: 28px;
  padding: 0 12px;
  white-space: nowrap;
}
.support-ref-thread {
  flex: 1;
  min-height: 420px;
  padding: 24px 18px 20px;
}
.ticket-message {
  max-width: 760px;
  margin-bottom: 24px;
}
.ticket-message-head {
  margin-bottom: 8px;
  font-size: 10px;
  color: var(--color-text-muted);
}
.ticket-message-body {
  padding: 16px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(38, 42, 50, .92);
  color: #f3f0ea;
  line-height: 1.75;
}
.ticket-message.admin-msg {
  margin-left: auto;
}
.ticket-message.admin-msg .ticket-message-body {
  background: rgba(20, 112, 141, .95);
  border-color: rgba(39, 177, 221, .22);
  color: #eefcff;
}
.support-ref-reply {
  display: grid;
  gap: 10px;
  padding: 16px 18px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(20, 23, 28, .88);
}
.support-ref-reply textarea {
  min-height: 72px;
}
.support-reply-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.support-closed-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 18px 18px;
  padding: 14px 16px;
  border: 1px solid rgba(88, 196, 111, .2);
  border-radius: 8px;
  background: rgba(56, 122, 73, .14);
  color: #8dcc95;
}
.support-closed-banner > span {
  color: #7ed68a;
  font-weight: 800;
}
.support-closed-banner .btn {
  margin-left: auto;
}
@media (max-width: 980px) {
  .support-layout-refined {
    grid-template-columns: 1fr;
    margin: 0;
  }
  .support-layout-refined .ticket-list {
    min-height: auto;
  }
}

/* v3.6t support selected thread reference match */
.support-detail-meta-rich {
  align-items: center;
  gap: 10px 14px;
}
.support-detail-meta-rich > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.support-detail-meta-rich > span:not(:first-child)::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(135, 143, 156, .45);
  margin-right: 2px;
}
.support-meta-chip {
  padding: 0 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
}
.support-detail-meta-rich > .support-meta-chip::before,
.support-detail-meta-rich > .support-meta-ref::before {
  display: none;
}
.support-meta-chip-type.is-support { color: #e9c85a; }
.support-meta-chip-type.is-bug { color: #f0b447; }
.support-meta-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  opacity: .95;
}
.support-meta-ref { color: #ff7689; }

.support-ref-thread {
  padding: 22px 26px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.support-thread-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -2px 0 2px;
  color: rgba(143, 147, 155, .7);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.support-thread-divider::before,
.support-thread-divider::after {
  content: '';
  height: 1px;
  background: rgba(255,255,255,.07);
  flex: 1;
}
.support-thread-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: none;
  margin: 0;
}
.support-thread-message.admin-msg {
  justify-content: flex-end;
}
.support-msg-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: #175a7b;
  color: #e6fbff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  margin-top: 4px;
}
.support-msg-avatar.is-admin {
  background: #a75c1a;
  color: #fbe6d4;
}
.support-msg-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 760px;
}
.support-thread-message.admin-msg .support-msg-content {
  align-items: flex-end;
}
.support-msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 10px;
  color: var(--color-text-muted);
}
.support-msg-head strong {
  color: #c8cfda;
  font-weight: 700;
}
.support-msg-head.is-admin {
  justify-content: flex-end;
}
.support-msg-body {
  min-width: 420px;
  max-width: 760px;
  padding: 17px 18px;
  border-radius: 8px;
  line-height: 1.72;
}
.support-thread-message.user-msg .support-msg-body {
  background: rgba(38, 42, 50, .95);
  border-color: rgba(255,255,255,.07);
}
.support-thread-message.admin-msg .support-msg-body {
  background: rgba(16, 112, 141, .96);
  border-color: rgba(35, 174, 219, .16);
  color: #eefcff;
}
.support-ticket-attachments-inline {
  padding: 0 26px 8px;
}
.support-ref-reply-rich {
  gap: 0;
  padding: 14px 20px 16px;
  background: rgba(16, 19, 24, .92);
}
.support-ref-reply-rich textarea {
  min-height: 74px;
  margin: 0;
  border-radius: 8px 8px 0 0;
  border-bottom: 0;
  background: #080b11;
  resize: vertical;
}
.support-reply-actions-rich {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-top: 1px solid rgba(255,255,255,.06);
  border-radius: 0 0 8px 8px;
  background: rgba(30, 33, 39, .92);
}
.support-reply-actions-left,
.support-reply-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.support-attach-btn {
  padding-inline: 12px;
}
.support-attach-note {
  color: var(--color-text-muted);
  font-size: 10px;
}
.support-top-action {
  height: 30px;
  padding: 0 12px;
}
@media (max-width: 1100px) {
  .support-msg-body { min-width: 0; width: 100%; }
  .support-thread-message.admin-msg .support-msg-content,
  .support-msg-content { max-width: 100%; width: calc(100% - 40px); }
}
@media (max-width: 720px) {
  .support-detail-head-ref { flex-direction: column; align-items: stretch; }
  .support-thread-message,
  .support-thread-message.admin-msg { gap: 8px; }
  .support-reply-actions-rich { flex-direction: column; align-items: stretch; }
  .support-reply-actions-left,
  .support-reply-actions-right { justify-content: space-between; flex-wrap: wrap; }
}


/* ============================================================
   v3.6t2 Admin Dashboard Reference Match
   ============================================================ */
.admin-page-kicker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.admin-page-title-tight {
    margin: 0;
}
.admin-mode-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid rgba(200, 97, 48, .36);
    background: rgba(200, 97, 48, .12);
    color: var(--color-orange);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.admin-dash-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.admin-dash-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.admin-dash-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--color-text);
}
.admin-dash-subtitle {
    margin-top: 7px;
}
.admin-dash-hero-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.admin-dash-updated {
    color: var(--color-text-muted);
    font-size: 11px;
}
.admin-server-select {
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border-2);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
}
.admin-server-select span { opacity: .7; margin-left: 5px; }
.admin-dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.admin-dash-stat-card {
    background: linear-gradient(180deg, rgba(26, 29, 34, .98), rgba(20, 22, 27, .98));
    border: 1px solid var(--color-border-2);
    border-radius: 13px;
    padding: 15px 16px 14px;
    position: relative;
    overflow: hidden;
    min-height: 108px;
}
.admin-dash-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 2px;
    opacity: .95;
}
.admin-dash-stat-card.cyan::before { background: #4bd5ff; }
.admin-dash-stat-card.green::before { background: #62ce73; }
.admin-dash-stat-card.orange::before { background: #f38b32; }
.admin-dash-stat-card.red::before { background: #f06043; }
.admin-dash-stat-card.purple::before { background: #9f72ff; }
.admin-dash-stat-card.teal::before { background: #4fd6c8; }
.admin-dash-stat-label {
    color: rgba(170, 181, 197, .58);
    font-size: 10px;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}
.admin-dash-stat-value {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .4px;
    color: var(--color-text);
}
.admin-dash-stat-sub {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 11px;
}
.admin-dash-stat-meta {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
}
.admin-dash-stat-meta.positive,
.positive-cell {
    color: #58cf78;
}
.admin-dash-stat-meta.negative,
.negative-cell {
    color: #f06043;
}
.admin-dash-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(320px, .95fr);
    gap: 12px;
}
.admin-dash-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
    gap: 12px;
}
.admin-dash-card {
    margin-bottom: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(23, 25, 31, .985), rgba(20, 22, 28, .99));
}
.admin-dash-card-header {
    background: transparent;
    padding: 16px 18px;
}
.admin-dash-mini-tabs,
.admin-dash-toggle-pills {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--color-border-2);
    background: rgba(38, 42, 50, .74);
}
.admin-dash-mini-tabs span,
.admin-dash-toggle-pills span {
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(160, 170, 186, .78);
    font-size: 11px;
    font-weight: 600;
}
.admin-dash-mini-tabs .active,
.admin-dash-toggle-pills .active {
    background: rgba(55, 152, 255, .18);
    color: #61cfff;
}
.admin-dash-chart-card .admin-card-header {
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-dash-chart-area {
    position: relative;
    min-height: 360px;
    padding: 18px 18px 34px 54px;
}
.admin-dash-chart-grid {
    position: absolute;
    left: 54px;
    right: 20px;
    top: 30px;
    bottom: 44px;
    background-image:
        linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 100% calc(100% / 7), calc(100% / 24) 100%;
    pointer-events: none;
}
.admin-dash-chart-y {
    position: absolute;
    left: 18px;
    top: 30px;
    bottom: 44px;
    width: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: rgba(150, 160, 176, .58);
    font-size: 10px;
}
.admin-dash-chart-svg {
    position: relative;
    display: block;
    width: 100%;
    height: 250px;
    z-index: 2;
    margin-top: 36px;
}
.admin-dash-chart-x {
    position: absolute;
    left: 54px;
    right: 20px;
    bottom: 14px;
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 0;
    color: rgba(150, 160, 176, .52);
    font-size: 10px;
}
.admin-dash-chart-legend {
    position: absolute;
    top: 18px;
    right: 20px;
    display: flex;
    gap: 14px;
    color: var(--color-text-muted);
    font-size: 11px;
}
.admin-dash-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-dash-chart-legend i,
.admin-dash-race-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.admin-dash-chart-legend i.cyan,
.admin-dash-race-legend i.cyan { background: #46d7ff; }
.admin-dash-chart-legend i.orange,
.admin-dash-race-legend i.orange { background: #f38b32; }
.admin-dash-race-legend i.green { background: #70bc7f; }
.admin-dash-race-legend i.purple { background: #9467df; }
.admin-dash-race-legend i.gold { background: #d1a33a; }
.admin-dash-race-wrap {
    min-height: 360px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}
.admin-dash-donut {
    width: 176px;
    height: 176px;
    border-radius: 50%;
    background: conic-gradient(#48d2f7 0 34%, #69b078 34% 51%, #9467df 51% 77%, #ef8f2f 77% 91%, #d3a33a 91% 100%);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.admin-dash-donut span {
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(23,25,31,1), rgba(19,20,25,1));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.admin-dash-race-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--color-text-dim);
    font-size: 12px;
}
.admin-dash-race-legend div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.admin-dash-professions {
    padding: 18px 18px 20px;
}
.admin-dash-prof-row {
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr) 40px;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.admin-dash-prof-name {
    color: rgba(220, 226, 236, .88);
    font-size: 12px;
}
.admin-dash-prof-bar {
    height: 14px;
    border-radius: 999px;
    background: rgba(38, 55, 67, .55);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.admin-dash-prof-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(85, 198, 225, .78), rgba(73, 219, 250, .96));
}
.admin-dash-prof-value {
    text-align: right;
    color: rgba(160, 170, 186, .74);
    font-size: 11px;
}
.admin-dash-card-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-dash-count {
    color: var(--color-text-muted);
    font-size: 11px;
}
.admin-dash-activity-list {
    display: flex;
    flex-direction: column;
    padding: 0 0 4px;
}
.admin-dash-activity-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,.045);
}
.admin-dash-activity-item:nth-child(2) {
    background: rgba(255,255,255,.025);
}
.admin-dash-activity-main {
    color: var(--color-text-dim);
    font-size: 12px;
    line-height: 1.45;
}
.admin-dash-activity-main strong {
    color: var(--color-text);
    font-weight: 600;
}
.admin-dash-activity-time {
    color: rgba(140, 150, 166, .55);
    font-size: 10px;
    margin-left: 18px;
    margin-top: 4px;
}
.admin-dash-activity-main .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}
.admin-dash-activity-main .dot.orange { background: #ef6e3b; }
.admin-dash-activity-main .dot.gold { background: #d7a339; }
.admin-dash-activity-main .dot.blue { background: #46d7ff; }
.admin-dash-tag {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 22px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.admin-dash-tag.red {
    border-color: rgba(240, 96, 67, .42);
    background: rgba(240, 96, 67, .14);
    color: #f18263;
}
.admin-dash-tag.gold {
    border-color: rgba(211, 163, 58, .42);
    background: rgba(211, 163, 58, .13);
    color: #d9b25d;
}
.admin-dash-tag.blue {
    border-color: rgba(70, 215, 255, .40);
    background: rgba(70, 215, 255, .11);
    color: #60dfff;
}
.admin-dash-payment-wrap {
    overflow-x: auto;
}
.admin-dash-payments-table th,
.admin-dash-payments-table td {
    white-space: nowrap;
}
.admin-dash-acct-cell {
    color: var(--color-text);
    font-weight: 600;
}
.admin-dash-nc-cell {
    color: var(--color-orange) !important;
    font-weight: 600;
}
@media (max-width: 1480px) {
    .admin-dash-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 1180px) {
    .admin-dash-main-grid,
    .admin-dash-lower-grid {
        grid-template-columns: 1fr;
    }
    .admin-dash-race-wrap {
        min-height: 300px;
    }
}
@media (max-width: 900px) {
    .admin-dash-hero {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-dash-hero-right {
        justify-content: space-between;
        margin-top: 0;
    }
    .admin-dash-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-dash-chart-area {
        min-height: 320px;
        padding: 18px 10px 34px 42px;
    }
    .admin-dash-chart-grid,
    .admin-dash-chart-x {
        left: 42px;
    }
    .admin-dash-prof-row {
        grid-template-columns: 130px minmax(0, 1fr) 36px;
    }
    .admin-dash-activity-item {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 560px) {
    .admin-page-kicker-row {
        margin-bottom: 14px;
    }
    .admin-dash-title {
        font-size: 18px;
    }
    .admin-dash-stats-grid {
        grid-template-columns: 1fr;
    }
    .admin-dash-mini-tabs,
    .admin-dash-toggle-pills {
        display: none;
    }
    .admin-dash-race-wrap {
        flex-direction: column;
    }
    .admin-dash-prof-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .admin-dash-prof-value {
        text-align: left;
        margin-bottom: 8px;
    }
}

/* ============================================================
   v3.6t3 Admin Dashboard Full Functionality
   ============================================================ */
.admin-dash-hero-right select.admin-server-select {
    appearance: auto;
    min-width: 150px;
}
.admin-dash-mini-tabs a {
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(160, 170, 186, .78);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.admin-dash-mini-tabs a.active {
    background: rgba(55, 152, 255, .18);
    color: #61cfff;
}
.admin-dash-warning {
    border: 1px solid rgba(211, 163, 58, .35);
    background: rgba(211, 163, 58, .10);
    color: #d9b25d;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 12px;
    line-height: 1.5;
}
.admin-dash-warning a {
    margin-left: 8px;
    color: #61cfff;
    text-decoration: none;
}
.admin-dash-empty {
    color: var(--color-text-muted);
    padding: 18px;
    font-size: 12px;
}
.admin-dash-race-legend small {
    color: var(--color-text-muted);
    margin-left: 4px;
}
.admin-dash-race-legend i.race-color-0 { background: #48d2f7; }
.admin-dash-race-legend i.race-color-1 { background: #69b078; }
.admin-dash-race-legend i.race-color-2 { background: #9467df; }
.admin-dash-race-legend i.race-color-3 { background: #ef8f2f; }
.admin-dash-race-legend i.race-color-4 { background: #d3a33a; }
.admin-dash-race-legend i.race-color-5 { background: #4fd6c8; }
@media (max-width: 700px) {
    .admin-dash-hero-right {
        flex-wrap: wrap;
    }
    .admin-dash-hero-right select.admin-server-select {
        width: 100%;
    }
}


/* ============================================================
   v3.6t4 Admin Dashboard DB Detection Hotfix
   ============================================================ */
.admin-dash-warning-box {
    border: 1px solid rgba(211, 163, 58, .36);
    background: rgba(211, 163, 58, .10);
    color: #d9b25d;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 12px;
    line-height: 1.55;
}
.admin-server-select {
    appearance: auto;
    min-width: 160px;
}
.admin-dash-mini-tabs a {
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(160, 170, 186, .78);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.admin-dash-mini-tabs a.active {
    background: rgba(55, 152, 255, .18);
    color: #61cfff;
}
.admin-dash-race-legend em {
    color: var(--color-text-muted);
    font-style: normal;
    margin-left: 5px;
}
.admin-dash-donut.empty {
    background: #29313b !important;
}
.admin-dash-race-legend i.teal {
    background: #4fd6c8;
}
.admin-dash-empty {
    color: var(--color-text-muted);
    font-size: 12px;
    padding: 20px 18px;
}
.admin-dash-diagnostics {
    margin-top: 0;
}
.admin-dash-diag-list {
    padding: 14px 18px 18px;
    display: grid;
    gap: 7px;
}
.admin-dash-diag-list div {
    color: var(--color-text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.045);
}


/* ============================================================
   v3.6t8 Admin dashboard chart/race reference polish
   ============================================================ */
.admin-dash-chart-area {
    min-height: 355px;
    padding: 18px 18px 34px 54px;
}
.admin-dash-chart-grid {
    top: 40px;
    bottom: 46px;
    background-size: 100% calc(100% / 7), calc(100% / 24) 100%;
}
.admin-dash-chart-y {
    top: 40px;
    bottom: 46px;
    width: 30px;
}
.admin-dash-chart-y span {
    color: rgba(150, 160, 176, .52);
    font-size: 10px;
}
.admin-dash-chart-svg {
    height: 238px;
    margin-top: 28px;
}
.admin-dash-chart-x {
    bottom: 16px;
}
.admin-dash-chart-legend {
    top: 16px;
    right: 18px;
    gap: 12px;
}
.admin-dash-chart-legend span {
    color: rgba(188, 196, 210, .76);
}
.admin-dash-chart-card,
.admin-dash-race-card {
    min-height: 440px;
}
.admin-dash-race-wrap {
    min-height: 332px;
    gap: 34px;
}
.admin-dash-donut {
    width: 170px;
    height: 170px;
}
.admin-dash-donut span {
    inset: 30px;
}
.admin-dash-race-legend {
    gap: 10px;
}
.admin-dash-race-legend div {
    color: rgba(188, 196, 210, .76);
    font-size: 12px;
}
.admin-dash-race-legend em {
    display: none;
}
.admin-dash-toggle-pills span {
    min-width: 42px;
}
@media (max-width: 1180px) {
    .admin-dash-chart-card,
    .admin-dash-race-card {
        min-height: 0;
    }
}


/* ============================================================
   v3.6t9 Admin dashboard chart axis / low online fix
   ============================================================ */
.admin-dash-chart-y.is-small-scale {
    justify-content: space-between;
}
.admin-dash-chart-y.is-small-scale span {
    color: rgba(130, 184, 214, .78);
    font-size: 10px;
}
.admin-dash-chart-svg polyline {
    filter: drop-shadow(0 0 4px rgba(70, 215, 255, .16));
}
.admin-dash-chart-svg path {
    opacity: .9;
}


/* ============================================================
   v3.6u0 Admin dashboard trend + race filter fix
   ============================================================ */
.admin-dash-toggle-pills a {
    height: 24px;
    min-width: 42px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(160, 170, 186, .78);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.admin-dash-toggle-pills a.active {
    background: rgba(55, 152, 255, .18);
    color: #61cfff;
}
.admin-dash-toggle-pills a:hover {
    color: #61cfff;
}
.admin-dash-chart-svg polyline {
    filter: drop-shadow(0 0 5px rgba(70, 215, 255, .20));
}
.admin-dash-chart-svg path {
    opacity: .95;
}


/* ============================================================
   v3.6u1 Admin dashboard race donut hover tooltip
   ============================================================ */
.admin-dash-race-chart {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-dash-race-svg {
    width: 190px;
    height: 190px;
    overflow: visible;
}
.admin-dash-race-hole {
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.admin-dash-race-segment {
    cursor: pointer;
    transition: opacity .16s ease, transform .16s ease, filter .16s ease, stroke-width .16s ease;
    transform-origin: 95px 95px;
    transform-box: fill-box;
}
.admin-dash-race-svg:hover .admin-dash-race-segment {
    opacity: .62;
}
.admin-dash-race-svg .admin-dash-race-segment:hover,
.admin-dash-race-svg .admin-dash-race-segment:focus {
    opacity: 1;
    filter: brightness(1.08);
    transform: scale(1.035);
    stroke-width: 34px;
}
.admin-dash-race-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 128px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(22, 24, 30, .98);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 16px 28px rgba(0,0,0,.42);
    color: #dbe7f2;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    z-index: 3;
    white-space: nowrap;
}
.admin-dash-race-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.admin-dash-race-tooltip .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #48d2f7;
}
.admin-dash-race-tooltip .label {
    color: #dbe7f2;
}
.admin-dash-race-tooltip .value {
    color: #ffffff;
    font-weight: 700;
    margin-left: 8px;
}


/* ============================================================
   v3.6u3 Admin dashboard chart real-level fix
   ============================================================ */
.admin-dash-chart-svg polyline {
    filter: drop-shadow(0 0 4px rgba(70, 215, 255, .16));
}
.admin-dash-chart-y.is-small-scale span {
    color: rgba(130, 184, 214, .78);
}


/* ============================================================
   v3.6u4 Admin dashboard chart zero-baseline fix
   ============================================================ */
.admin-dash-chart-zero-line {
    stroke: rgba(110, 128, 150, .26);
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.admin-dash-chart-svg polyline {
    vector-effect: non-scaling-stroke;
}


/* ============================================================
   v3.6u5 Admin dashboard small scale chart fix
   ============================================================ */
.admin-dash-chart-y.is-small-scale {
    top: 40px;
    bottom: 46px;
}
.admin-dash-chart-y.is-small-scale span {
    color: rgba(130, 184, 214, .86);
    font-size: 11px;
    line-height: 1;
}
.admin-dash-chart-grid {
    background-position: left top;
}
.admin-dash-chart-zero-line {
    stroke: rgba(120, 145, 168, .34);
}


/* ============================================================
   v3.6u6 Admin dashboard live chart point fix
   ============================================================ */
.admin-dash-chart-svg circle {
    filter: drop-shadow(0 0 5px rgba(70, 215, 255, .30));
}


/* ============================================================
   v3.6u7 Admin dashboard small-count exact line fix
   ============================================================ */
.admin-dash-small-exact-lines {
    position: absolute;
    left: 54px;
    right: 20px;
    top: 40px;
    bottom: 46px;
    z-index: 4;
    pointer-events: none;
}
.admin-dash-small-exact-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 999px;
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(70, 215, 255, .18);
}
.admin-dash-small-exact-line.orange {
    box-shadow: 0 0 8px rgba(243, 139, 50, .20);
}
.admin-dash-chart-svg {
    opacity: .38;
}


/* ============================================================
   v3.6u8 Admin dashboard JavaScript chart renderer
   ============================================================ */
.admin-dash-js-chart {
    position: absolute;
    left: 54px;
    right: 20px;
    top: 40px;
    bottom: 46px;
    width: calc(100% - 74px);
    height: calc(100% - 86px);
    z-index: 5;
    pointer-events: none;
}
.admin-dash-chart-svg,
.admin-dash-small-exact-lines {
    display: none !important;
}
.admin-dash-chart-grid {
    z-index: 1;
}
.admin-dash-chart-y,
.admin-dash-chart-x,
.admin-dash-chart-legend {
    z-index: 6;
}


/* ============================================================
   v3.6v2 Admin dashboard clean JS chart line fix
   ============================================================ */
.admin-dash-js-chart {
    opacity: 1;
}


/* ============================================================
   v3.6v5 Admin dashboard hourly collector status
   ============================================================ */
.admin-dash-collector-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 0 18px 14px;
    color: var(--color-text-muted);
    font-size: 11px;
}
.admin-dash-collector-status strong {
    color: var(--color-text-dim);
}
.admin-dash-collector-status code {
    color: var(--color-blue);
    font-family: var(--font-mono);
}
.admin-dash-collector-status span {
    color: var(--color-text-muted);
}


/* Webstat history chart legend toggle polish */
.admin-dash-chart-legend span {
    cursor: pointer !important;
    user-select: none;
    transition: opacity .16s ease, color .16s ease, filter .16s ease;
}
.admin-dash-chart-legend span:hover {
    color: #ffffff;
    filter: brightness(1.25);
}
.admin-dash-chart-legend span.is-disabled {
    opacity: .36 !important;
    color: rgba(150, 160, 176, .62) !important;
    text-decoration: line-through;
}
.admin-dash-chart-legend span.is-disabled i {
    background: #8a94a6 !important;
    filter: grayscale(1);
}


/* Webstat history chart readability polish */
.admin-dash-chart-x span.is-muted {
    color: transparent;
}
.admin-dash-chart-x {
    overflow: visible;
}


/* Webstat range history guard */
.admin-dash-chart-empty {
    position: absolute;
    inset: 46px 18px 42px 54px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 8;
    color: rgba(185, 198, 215, .72);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(18,22,30,.18), rgba(18,22,30,.04));
}


/* Fixed chart time-axis labels */
.admin-dash-chart-x {
    overflow: visible;
}
.admin-dash-chart-x span {
    white-space: nowrap;
    text-align: center;
}


/* Fixed time-axis visibility for 7d / 30d */
.admin-dash-chart-x {
    display: grid;
    align-items: start;
    min-height: 34px;
    overflow: visible !important;
    padding-top: 8px;
}
.admin-dash-chart-x span {
    display: block;
    white-space: nowrap;
    text-align: center;
    color: rgba(116, 139, 164, .86);
    font-size: 11px;
    line-height: 1.1;
}
.admin-dash-chart-x.is-dense span {
    font-size: 10px;
    transform: rotate(-28deg);
    transform-origin: top center;
}
.admin-dash-chart-x.is-ultra-dense {
    min-height: 48px;
}
.admin-dash-chart-x.is-ultra-dense span {
    font-size: 9px;
    transform: rotate(-45deg);
}
.admin-dash-chart-empty {
    z-index: 5;
}


/* 7d/30d fixed peak axis polish */
.admin-dash-chart-x.is-ultra-dense span {
    font-size: 9px;
    transform: rotate(-45deg);
}
.admin-dash-chart-x.is-ultra-dense span:nth-child(even) {
    opacity: .55;
}


/* ============================================================
   Admin Tickets sidebar unread counter
   ============================================================ */
.nav-ticket-link {
    position: relative;
}
.nav-ticket-link .nav-ticket-label {
    display: inline-flex;
    align-items: center;
}
.nav-ticket-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff2020;
    box-shadow: 0 0 8px rgba(255, 32, 32, .75);
    margin-left: -4px;
    margin-right: 4px;
    transform: translateY(-8px);
    flex: 0 0 auto;
}
.nav-ticket-new {
    margin-left: auto;
    color: #27e6ff;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;
    white-space: nowrap;
}
.nav-ticket-link.active .nav-ticket-new {
    color: #27e6ff;
}
.nav-ticket-link.active .nav-ticket-dot {
    background: #ff1e1e;
}