/* ==========================================================================
   TITAN-MESH ENTERPRISE DESIGN SYSTEM
   Zero-Breakage, Modern SaaS UI/UX, Centralized Design Tokens, Rock-Solid Mobile
   ========================================================================== */

:root {
  /* Dynamic Primary Accent Tokens */
  --primary: #059669;
  --primary-hover: #047857;
  --primary-active: #065F46;
  --primary-rgb: 5, 150, 105;
  --primary-soft: rgba(5, 150, 105, 0.10);
  --primary-border: rgba(5, 150, 105, 0.25);
  --primary-focus: rgba(5, 150, 105, 0.18);

  /* Dynamic Accent Tokens */
  --accent: #10B981;
  --accent-hover: #059669;
  --accent-rgb: 16, 185, 129;
  --accent-soft: rgba(16, 185, 129, 0.12);
  --accent-border: rgba(16, 185, 129, 0.28);
  --topbar-bg: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);

  /* Centralized High-Contrast Text Tokens (100% Readability across all themes) */
  --text-main: #0F172A;
  --text-secondary: #1E293B;
  --text-muted: #475569;
  --text-subtle: #64748B;
  --text-inverse: #FFFFFF;
  --text-on-primary: #FFFFFF;

  /* Surfaces & Canvas */
  --bg-body: #F8FAFC;
  --surface: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-subtle: #F8FAFC;
  --surface-muted: #F1F5F9;
  --surface-raised: #FFFFFF;

  /* Borders & Dividers */
  --border: #E2E8F0;
  --border-subtle: #F1F5F9;
  --border-focus: var(--primary);
  --divider: #E2E8F0;

  /* Shadows (Tailwind-Calibrated SaaS Shadows) */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

  /* Status Colors */
  --success: #10B981;
  --success-soft: #ECFDF5;
  --success-border: #A7F3D0;
  --warning: #F59E0B;
  --warning-soft: #FFFBEB;
  --warning-border: #FDE68A;
  --danger: #EF4444;
  --danger-soft: #FEF2F2;
  --danger-border: #FECACA;
  --info: #0284C7;
  --info-soft: #F0F9FF;
  --info-border: #BAE6FD;

  /* Typography & Radii */
  --font-sans: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset & Typography */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  color: var(--text-main);
  min-height: 100%;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-main) !important;
  font-weight: 800;
  line-height: 1.25;
}

p, span, label {
  color: inherit;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Custom Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-muted); }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

html.is-reseller .admin-only-item,
body.is-reseller .admin-only-item {
  display: none !important;
}

html:not(.is-reseller) .reseller-only-item,
body:not(.is-reseller) .reseller-only-item {
  display: none !important;
}

/* ==========================================================================
   DESKTOP VIEW (min-width: 993px)
   ========================================================================== */

@media (min-width: 993px) {
  .app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .sidebar {
    width: 270px;
    height: 100vh;
    background: #FFFFFF;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    flex-shrink: 0;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02);
  }

  .main-wrapper {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
  }

  .mobile-menu-btn, .drawer-close-btn, .sidebar-backdrop {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE & TABLET VIEW (max-width: 992px)
   ========================================================================== */

@media (max-width: 992px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  .app-container {
    display: block;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
  }

  .main-wrapper {
    width: 100%;
    min-height: 100vh;
    display: block;
    overflow-x: hidden;
    overflow-y: visible;
    background: var(--bg-body);
  }

  .mobile-menu-btn {
    display: flex !important;
  }

  .drawer-close-btn {
    display: flex !important;
  }

  /* Full Screen Overlay Backdrop */
  .sidebar-backdrop {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 9998 !important;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.22s ease !important;
  }

  .sidebar-backdrop.active {
    display: block !important;
    opacity: 1 !important;
  }

  /* Pure White Slide-in Navigation Drawer (Responsive min(88vw, 320px)) */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 320px) !important;
    max-width: 320px !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: #FFFFFF !important;
    border-right: 1px solid var(--border) !important;
    z-index: 9999 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 10px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.25) !important;
  }

  /* Compact, clean, premium vertical spacing for drawer items */
  .sidebar .brand-header {
    margin-bottom: 12px !important;
    padding: 10px 12px !important;
    background: var(--topbar-bg) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    flex-shrink: 0 !important;
    color: #FFFFFF !important;
  }

  .sidebar .brand-header .brand-title {
    color: #FFFFFF !important;
    font-size: 1.05rem !important;
  }

  .sidebar .brand-header .brand-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.70rem !important;
  }

  .sidebar .brand-header .brand-logo-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }

  .sidebar .nav-menu {
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sidebar .nav-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 7px 10px !important;
    min-height: 38px !important;
    font-size: 0.88rem !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .sidebar .nav-icon {
    font-size: 16px !important;
    width: 20px !important;
    min-width: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .sidebar .drawer-close-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  .sidebar .drawer-close-btn:active {
    background: rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    transform: scale(0.92) !important;
  }

  .sidebar .sidebar-footer {
    margin-top: 14px !important;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  /* Mobile topbar cleanup: hide username & topbar logout button so brand title has plenty of room */
  .topbar .topbar-user-info,
  .topbar .topbar-logout-btn {
    display: none !important;
  }

  .topbar {
    padding: 8px 12px !important;
  }

  .content-body {
    padding: 8px 6px 50px 6px !important;
    gap: 10px !important;
  }

  .panel-card, .uvpn-card {
    padding: 12px 10px !important;
    border-radius: var(--radius-md) !important;
    margin: 0 !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   SIDEBAR & BRAND COMPONENTS
   ========================================================================== */

.sidebar .brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--topbar-bg);
  border-radius: 12px;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sidebar .brand-header .brand-title {
  color: #FFFFFF;
}

.sidebar .brand-header .brand-subtitle {
  color: rgba(255, 255, 255, 0.88);
}

.sidebar .brand-header .brand-logo-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 4px;
}

.brand-logo-icon {
  width: 38px;
  height: 38px;
  background: var(--topbar-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.brand-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.brand-subtitle {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
}

.drawer-close-btn {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: all var(--transition-fast);
}

.drawer-close-btn:active {
  background: var(--border);
}

.nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  user-select: none;
}

.nav-item:hover, .nav-item:active {
  background: var(--surface-muted);
  color: var(--text-main);
}

.nav-item.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  border-left: 3px solid var(--primary);
}

.nav-icon {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--topbar-bg);
  color: var(--text-inverse);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background var(--transition-fast);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-menu-btn {
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
  color: var(--text-inverse);
  font-size: 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-menu-btn:active {
  transform: scale(0.95);
}

.content-body {
  padding: 24px 28px 60px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   CARDS & KPI SUMMARY
   ========================================================================== */

.panel-card, .uvpn-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.panel-card:hover, .uvpn-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #CBD5E1;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

/* KPI Summary Cards */
.kpi-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  box-shadow: var(--shadow-sm);
  color: var(--text-main);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kpi-card-cyan { border-top: 3px solid #00BCD4; }
.kpi-card-green { border-top: 3px solid #10B981; }
.kpi-card-blue { border-top: 3px solid var(--primary); }
.kpi-card-orange { border-top: 3px solid #F59E0B; }

.kpi-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.uvpn-stat-pill {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  transition: all var(--transition-fast);
}

.uvpn-stat-pill:hover {
  background: var(--primary-soft);
  border-color: var(--primary-border);
}

/* ==========================================================================
   BUTTONS & CONTROLS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  min-height: 40px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--primary) !important;
  color: var(--on-primary, #FFFFFF) !important;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.30);
}

.btn-primary *,
.btn-primary i,
.btn-primary svg,
.btn-primary span {
  color: var(--on-primary, #FFFFFF) !important;
  stroke: var(--on-primary, #FFFFFF) !important;
}

.btn-primary:hover {
  background: var(--primary-hover) !important;
  color: var(--on-primary-hover, #FFFFFF) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.40);
}

.btn-primary:hover *,
.btn-primary:hover i,
.btn-primary:hover svg,
.btn-primary:hover span {
  color: var(--on-primary-hover, #FFFFFF) !important;
  stroke: var(--on-primary-hover, #FFFFFF) !important;
}

.btn-secondary {
  background: var(--surface);
  border-color: #CBD5E1;
  color: var(--text-secondary);
}

.btn-secondary:hover {
  background: var(--surface-muted);
  color: var(--text-main);
}

.btn-sm {
  padding: 6px 12px;
  min-height: 32px;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
}

.btn-danger {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.btn-danger:hover {
  background: #DC2626;
  color: var(--text-inverse);
}

.btn-warning {
  background: #FFFBEB;
  color: #D97706;
  border: 1px solid #FDE68A;
}

.btn-warning:hover {
  background: #D97706;
  color: var(--text-inverse);
}

/* Sleek SaaS Icon Buttons (UVPN & Modern SaaS Design) */
.btn-icon {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s ease);
  flex-shrink: 0;
  text-decoration: none;
}

.btn-icon:hover {
  background: var(--surface-muted);
  color: var(--text-main);
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

.btn-icon-danger:hover {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border-color: #FECACA !important;
}

.btn-icon-primary:hover {
  background: rgba(var(--primary-rgb), 0.1) !important;
  color: var(--primary) !important;
  border-color: var(--primary-border) !important;
}

/* ==========================================================================
   UVPN SOLID SQUARE ACTION BUTTONS (Servers & PINs)
   Matches uvpnpro.xyz colored square action buttons
   ========================================================================== */
.uvpn-actions-row {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  margin: 0 auto !important;
  padding: 2px 0 !important;
}

.uvpn-actions-row::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.uvpn-act-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  border: 1px solid var(--act-bd, var(--border)) !important;
  cursor: pointer !important;
  background: var(--act-bg, var(--surface-muted)) !important;
  color: var(--act-fg, var(--text-muted)) !important;
  font-weight: 700;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .1s ease;
  box-shadow: none;
  flex-shrink: 0 !important;
}

.uvpn-act-btn:hover {
  background: var(--act-fg, var(--text-main)) !important;
  color: #fff !important;
  border-color: var(--act-fg, var(--text-main)) !important;
  transform: translateY(-1px);
}

.uvpn-act-btn:active {
  transform: scale(0.94);
}

.uvpn-act-btn:focus-visible {
  outline: 3px solid var(--act-bd, var(--primary-focus));
  outline-offset: 2px;
}

.uvpn-act-btn svg,
.uvpn-act-btn i {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2;
  color: currentColor !important;
  stroke: currentColor !important;
  pointer-events: none;
}

/* Green: Copy, Settings, Device, Renew, Diagnostics, Add, Unblock, Active */
.uvpn-act-green,
.uvpn-act-btn.uvpn-act-copy,
.uvpn-act-btn.uvpn-act-settings,
.uvpn-act-btn.uvpn-act-device,
.uvpn-act-btn.uvpn-act-renew,
.uvpn-act-btn.uvpn-act-details,
.uvpn-act-btn.uvpn-act-diag,
.uvpn-act-btn.uvpn-act-add,
.uvpn-act-btn.uvpn-act-unblock,
.uvpn-act-btn.uvpn-act-active {
  --act-fg: #059669;
  --act-bg: rgba(16, 185, 129, 0.12);
  --act-bd: rgba(16, 185, 129, 0.28);
}

/* Darker Green: Server Stats / Links / Usage */
.uvpn-act-darkgreen,
.uvpn-act-btn.uvpn-act-stats,
.uvpn-act-btn.uvpn-act-links {
  --act-fg: #15803D;
  --act-bg: rgba(22, 163, 74, 0.12);
  --act-bd: rgba(22, 163, 74, 0.28);
}

/* Amber: Reset HWID, Lock/Block, Restart, Deduct */
.uvpn-act-orange,
.uvpn-act-btn.uvpn-act-reset,
.uvpn-act-btn.uvpn-act-lock,
.uvpn-act-btn.uvpn-act-restart,
.uvpn-act-btn.uvpn-act-deduct {
  --act-fg: #D97706;
  --act-bg: rgba(245, 158, 11, 0.14);
  --act-bd: rgba(245, 158, 11, 0.30);
}

/* Red: Delete / Block (destructive) */
.uvpn-act-red,
.uvpn-act-btn.uvpn-act-del,
.uvpn-act-btn.uvpn-act-block {
  --act-fg: #DC2626;
  --act-bg: rgba(239, 68, 68, 0.10);
  --act-bd: rgba(239, 68, 68, 0.26);
}

/* Sky Blue: DNS / View / Cloudflare */
.uvpn-act-blue,
.uvpn-act-btn.uvpn-act-dns,
.uvpn-act-btn.uvpn-act-view {
  --act-fg: #0284C7;
  --act-bg: rgba(2, 132, 199, 0.12);
  --act-bd: rgba(2, 132, 199, 0.26);
}

/* Indigo: Edit / Login As */
.uvpn-act-purple,
.uvpn-act-btn.uvpn-act-edit,
.uvpn-act-btn.uvpn-act-loginas {
  --act-fg: #6366F1;
  --act-bg: rgba(99, 102, 241, 0.12);
  --act-bd: rgba(99, 102, 241, 0.26);
}

/* Slate: Power toggle (off state turns green = "turn on") */
.uvpn-act-slate,
.uvpn-act-btn.uvpn-act-power {
  --act-fg: #475569;
  --act-bg: rgba(71, 85, 105, 0.10);
  --act-bd: rgba(71, 85, 105, 0.24);
}

.uvpn-act-btn.uvpn-act-power.is-off {
  --act-fg: #059669;
  --act-bg: rgba(16, 185, 129, 0.12);
  --act-bd: rgba(16, 185, 129, 0.28);
}

/* Sleek Protocol Badges (UVPN style) */
.badge-proto {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.badge-proto-v2ray {
  background: rgba(14, 165, 233, 0.1);
  color: #0284C7;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.badge-proto-ovpn {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge-proto-hy2 {
  background: rgba(236, 72, 153, 0.1);
  color: #DB2777;
  border: 1px solid rgba(236, 72, 153, 0.25);
}

.badge-proto-suite {
  background: rgba(99, 102, 241, 0.1);
  color: #4F46E5;
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.badge-proto-default {
  background: var(--surface-muted);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Form Controls */
.search-input, .form-input, .form-select {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #0F172A;
  font-weight: 600;
  padding: 10px 14px;
  min-height: 42px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  width: 100%;
}

.search-input:focus, .form-input:focus, .form-select:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-focus);
}

.search-input:disabled, .form-input:disabled, .form-select:disabled,
.search-input[readonly], .form-input[readonly] {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary) !important;
}

/* Theme Swatches in Settings */
.theme-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.theme-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform var(--transition-fast);
}

.theme-swatch:hover, .theme-swatch:active { transform: scale(1.15); }
.theme-swatch.is-selected {
  outline: 3px solid var(--text-main);
  outline-offset: 2px;
  transform: scale(1.1);
}

.theme-swatch[data-theme="pink"] { background: #C2185B; }
.theme-swatch[data-theme="emerald"] { background: #059669; }
.theme-swatch[data-theme="blue"] { background: #1D4ED8; }
.theme-swatch[data-theme="purple"] { background: #6D28D9; }
.theme-swatch[data-theme="red"] { background: #B91C1C; }
.theme-swatch[data-theme="orange"] { background: #C2410C; }
.theme-swatch[data-theme="gold"] { background: #B45309; }
.theme-swatch[data-theme="cyan"] { background: #0369A1; }
.theme-swatch[data-theme="teal"] { background: #0F766E; }
.theme-swatch[data-theme="indigo"] { background: #4F46E5; }
.theme-swatch[data-theme="slate"] { background: #334155; }
.theme-swatch[data-theme="rose"] { background: #E11D48; }
.theme-swatch[data-theme="amber"] { background: #D97706; }
.theme-swatch[data-theme="midnight"] { background: #0F2B48; }
.theme-swatch[data-theme="pure_white"] { background: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 100%); border: 1px solid #94A3B8; }
.theme-swatch[data-theme="frost_white"] { background: linear-gradient(135deg, #F0F9FF 0%, #BAE6FD 100%); border: 1px solid #38BDF8; }
.theme-swatch[data-theme="cyber_neon"] { background: linear-gradient(135deg, #00D2FF 0%, #0072FF 100%); }
.theme-swatch[data-theme="deep_cyber"] { background: linear-gradient(135deg, #0A58CA 0%, #0D6EFD 100%); }
.theme-swatch[data-theme="neon_mint"] { background: linear-gradient(135deg, #10B981 0%, #34D399 100%); }
.theme-swatch[data-theme="olive_emerald"] { background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%); }
.theme-swatch[data-theme="obsidian_black"] { background: linear-gradient(135deg, #0F172A 0%, #020617 100%); border: 1px solid #475569; }

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
  min-width: 600px;
}

.custom-table th {
  background: var(--surface-subtle) !important;
  color: var(--text-muted) !important;
  padding: 12px 14px;
  font-weight: 800 !important;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.custom-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main) !important;
  vertical-align: middle;
}

.custom-table tr:hover td {
  background: rgba(var(--primary-rgb), 0.04) !important;
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  padding: 16px;
}

.modal-overlay.active {
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: var(--surface-card);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: var(--radius-xl);
  padding: 24px;
  width: 100%;
  max-width: 580px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--transition-normal);
}

.modal-overlay.active .modal-box {
  transform: translateY(0) scale(1);
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: #1E293B;
  color: var(--text-inverse);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tenant-method-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }.tenant-method-option { display:flex; align-items:center; gap:7px; padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; color:var(--text-secondary); background:var(--surface-elevated); }.tenant-method-option small { margin-left:auto; color:var(--text-muted); }.tenant-card { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-elevated); }.tenant-meta { color:var(--text-muted); font-size:.78rem; margin-top:2px; }.tenant-methods { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }.tenant-methods span { font-size:.75rem; padding:3px 7px; border-radius:var(--radius-full); color:var(--primary); background:var(--primary-soft); } @media(max-width:640px){.tenant-card{align-items:flex-start;flex-direction:column}.tenant-methods{justify-content:flex-start}}

/* ==========================================================================
   PRINTABLE VOUCHER & RECHARGE CARD STYLES
   ========================================================================== */

.voucher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.voucher-card {
  background: #FFFFFF;
  border: 2px dashed #CBD5E1;
  border-radius: 12px;
  padding: 16px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  color: #0F172A;
  font-family: var(--font-sans);
  page-break-inside: avoid;
  break-inside: avoid;
}

.voucher-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.voucher-brand-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 6px;
}

.voucher-vip-tag {
  background: var(--primary);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.voucher-pin-box {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.voucher-pin-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.voucher-pin-value {
  font-size: 1.4rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: #0F172A;
  letter-spacing: 0.08em;
}

.voucher-pass-value {
  font-size: 1rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--primary);
}

.voucher-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #475569;
  margin-bottom: 4px;
}

.voucher-footer {
  border-top: 1px dashed #E2E8F0;
  margin-top: 10px;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: #94A3B8;
}

@media print {
  body * {
    visibility: hidden !important;
  }
  #printableVoucherArea, #printableVoucherArea * {
    visibility: visible !important;
  }
  #printableVoucherArea {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10mm !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    z-index: 999999 !important;
    overflow: visible !important;
  }
  .no-print {
    display: none !important;
  }
  .voucher-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8mm !important;
  }
  .voucher-card {
    border: 1.5px dashed #000000 !important;
    box-shadow: none !important;
    color: #000000 !important;
    background: #FFFFFF !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .voucher-pin-box {
    border: 1px solid #000000 !important;
    background: #FAFAFA !important;
  }
  .voucher-vip-tag {
    background: #000000 !important;
    color: #FFFFFF !important;
  }
}

/* ==========================================================================
   POLISHED PREMIUM USER & PIN MANAGEMENT (MOBILE-FIRST SAAS UI)
   ========================================================================== */

.uvpn-layout-container {
  display: grid;
  grid-template-columns: 370px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1024px) {
  .uvpn-layout-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Card container & Header */
.uvpn-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.uvpn-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
}

.uvpn-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.uvpn-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.uvpn-header-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.uvpn-header-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-main);
}

.uvpn-badge-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.84rem;
}

.uvpn-card-body {
  padding: 20px;
}

@media (max-width: 768px) {
  .uvpn-card-header {
    padding: 12px 16px;
  }
  .uvpn-card-body {
    padding: 16px 14px;
  }
}

/* 4-Stat 2x2 Responsive Grid */
.stat-grid-modern {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.stat-card-modern {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.stat-card-modern:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

.stat-icon-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-total .stat-icon-wrapper { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.stat-active .stat-icon-wrapper { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.stat-inactive .stat-icon-wrapper { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.stat-expired .stat-icon-wrapper { background: rgba(239, 68, 68, 0.12); color: #EF4444; }

.stat-content {
  min-width: 0;
  flex: 1;
}

.stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.stat-total .stat-value { color: #2563EB; }
.stat-active .stat-value { color: #059669; }
.stat-inactive .stat-value { color: #D97706; }
.stat-expired .stat-value { color: #DC2626; }

.stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dual Responsive View (Desktop Table vs Mobile Cards) */
@media (max-width: 768px) {
  .desktop-only-table {
    display: none !important;
  }
  .users-mobile-cards-list {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }
}

@media (min-width: 769px) {
  .desktop-only-table {
    display: block !important;
  }
  .users-mobile-cards-list {
    display: none !important;
  }
}

/* VIP Mobile PIN Card Styling (Polished & Gorgeous) */
.vip-pin-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 15px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.vip-pin-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.vip-pin-card.selected {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.03);
}

.vpc-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.vpc-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vpc-serial {
  font-family: monospace;
  font-weight: 800;
  color: var(--accent);
  font-size: 0.95rem;
}

.vpc-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Credentials Voucher Block */
.vpc-creds-voucher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-subtle);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
}

.vpc-cred-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vpc-cred-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vpc-cred-val {
  font-family: monospace;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-main);
  letter-spacing: 0.04em;
  user-select: all;
  cursor: pointer;
}

.vpc-cred-val.pass-color {
  color: var(--primary);
}

.vpc-cred-separator {
  width: 1px;
  height: 32px;
  background: var(--border);
  margin: 0 8px;
}

/* Meta Chips Bar */
.vpc-meta-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.vpc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Actions Suite Bar */
.vpc-actions-bar {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.vpc-btn-copy {
  font-weight: 800;
  padding: 9px 8px;
  font-size: 0.84rem;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.vpc-btn-edit, .vpc-btn-block {
  font-weight: 700;
  padding: 9px 6px;
  font-size: 0.82rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.vpc-btn-del {
  padding: 9px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Header Refresh Icon Button */
.icon-btn-header {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn-header:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface-muted);
}

/* VIP Mobile Reseller Card Styling */
.vip-reseller-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 15px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vip-reseller-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.vip-reseller-card.is-blocked {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.02);
}

.vrc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.vrc-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.vrc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vrc-username {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}

.vrc-upline-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 600;
}

.vrc-notice-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vrc-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}

.vrc-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.vrc-stat-val {
  font-family: monospace;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-main);
  line-height: 1.2;
}

.vrc-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.vrc-actions-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.vrc-actions-primary {
  display: flex;
  gap: 6px;
  align-items: center;
}

.vrc-actions-secondary {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.vrc-btn {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

/* Cloudflare Domains Mobile Cards */
.cf-domain-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 15px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.cf-domain-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.cf-domain-card.is-active-domain {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, var(--surface-card) 100%);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.09);
}

.cf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.cf-card-title {
  font-family: monospace;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-all;
}

.cf-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cf-zone-pill {
  font-family: monospace;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cf-zone-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.cf-probe-banner {
  font-size: 0.74rem;
  padding: 7px 10px;
  border-radius: 8px;
  line-height: 1.35;
  word-break: break-word;
}
.cf-probe-banner.clean {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.cf-probe-banner.error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

.cf-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}

/* DNS Records Mobile Cards */
.dns-record-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.dns-record-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Super Dynamic High-Contrast KPI Micro Badges */
.kpi-micro-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.kpi-micro-tag.tag-green {
  background: #ECFDF5 !important;
  color: #047857 !important;
  border: 1px solid #A7F3D0 !important;
}
.kpi-micro-tag.tag-cyan {
  background: #F0FDFA !important;
  color: #0F766E !important;
  border: 1px solid #99F6E4 !important;
}
.kpi-micro-tag.tag-blue {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
}
.kpi-micro-tag.tag-purple {
  background: #FAF5FF !important;
  color: #7E22CE !important;
  border: 1px solid #E9D5FF !important;
}
.kpi-micro-tag.tag-orange {
  background: #FFFBEB !important;
  color: #B45309 !important;
  border: 1px solid #FDE68A !important;
}

/* Responsive Dual View for Nodes & API Hub (Desktop Table vs Mobile Cards) */
@media (max-width: 992px) {
  #nodesTableContainer,
  .nodes-desktop-table,
  #apiHubTableContainer,
  .api-desktop-table {
    display: none !important;
  }
  #nodesCardsMobile,
  .nodes-mobile-cards-list,
  #apiHubCardsMobile,
  .api-mobile-cards-list {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 993px) {
  #nodesTableContainer,
  .nodes-desktop-table,
  #apiHubTableContainer,
  .api-desktop-table {
    display: block !important;
  }
  #nodesCardsMobile,
  .nodes-mobile-cards-list,
  #apiHubCardsMobile,
  .api-mobile-cards-list {
    display: none !important;
  }
}

/* Modern Ultra-High-Contrast Developer Code Viewer */
.code-viewer-box {
  background: #0B132B !important;
  color: #38BDF8 !important;
  border: 1.5px solid #1E293B !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-family: 'SF Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.83rem !important;
  line-height: 1.55 !important;
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
#singlePayloadUriBox {
  color: #34D399 !important;
  font-weight: 600 !important;
}
#singlePayloadJsonBox, #outputJsonContent {
  color: #38BDF8 !important;
}
#outputEncryptedContent {
  color: #FBBF24 !important;
  font-weight: 600 !important;
}

/* Probe Search Form Responsive Grid (Intelligent Bug Host) */
.probe-search-grid {
  display: grid;
  grid-template-columns: 1fr 130px 200px auto;
  gap: 12px;
  align-items: flex-end;
}
@media (max-width: 992px) {
  .probe-search-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .probe-search-grid > div {
    width: 100% !important;
  }
  .probe-search-grid button {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
  }
}

/* Payloads & Telemetry Responsive Dual View (Mobile Cards vs Desktop Table) */
@media (max-width: 992px) {
  .payloads-desktop-table,
  #payloadsTableContainer,
  #customPayloadsTable {
    display: none !important;
  }

  .payloads-mobile-cards-list,
  #payloadsCardsMobile {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
  }

  .carrier-telemetry-mobile-list,
  #carrierTelemetryCardsMobile {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }
}

@media (min-width: 993px) {
  .payloads-desktop-table,
  #payloadsTableContainer {
    display: block !important;
  }
  .payloads-mobile-cards-list,
  #payloadsCardsMobile,
  .carrier-telemetry-mobile-list,
  #carrierTelemetryCardsMobile {
    display: none !important;
  }
}

/* VIP Mobile Card Styling */
.vip-card-mobile {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* ==========================================================================
   PREMIUM SAAS SETTINGS & INLINE FAST-SAVE SYSTEM
   ========================================================================== */

.settings-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-card {
  background: var(--surface-card, #FFFFFF);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--radius-lg, 14px);
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.settings-card:hover {
  border-color: rgba(var(--primary-rgb), 0.35);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.settings-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle, #F1F5F9);
  flex-wrap: wrap;
  gap: 10px;
}

.settings-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main, #0F172A);
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-card-title i {
  color: var(--primary);
  width: 18px;
  height: 18px;
}

.settings-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.settings-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

/* Premium Element Item & Inline Save */
.setting-item-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setting-item-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary, #334155);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setting-control-row {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  width: 100%;
}

.setting-control-row .form-input,
.setting-control-row .form-select {
  flex: 1;
  min-width: 0;
  background: var(--surface, #FFFFFF);
  border: 1.5px solid var(--border, #CBD5E1);
  border-radius: 9px;
  font-size: 0.86rem;
  padding: 8px 12px;
  min-height: 38px;
  transition: all 0.2s ease;
}

.setting-control-row .form-input:focus,
.setting-control-row .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.setting-control-row textarea.form-input {
  min-height: 56px;
  resize: vertical;
}

/* Premium Inline Save Button */
.btn-item-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--primary) !important;
  border: 1.5px solid var(--primary) !important;
  color: var(--on-primary, #FFFFFF) !important;
  border-radius: 8px;
  padding: 0 14px;
  min-height: 34px;
  height: 34px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  user-select: none;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.35);
}

.btn-item-save *,
.btn-item-save i,
.btn-item-save svg,
.btn-item-save span {
  color: var(--on-primary, #FFFFFF) !important;
  stroke: var(--on-primary, #FFFFFF) !important;
}

.btn-item-save:hover {
  background: var(--primary-hover) !important;
  color: var(--on-primary-hover, #FFFFFF) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.45);
  transform: translateY(-1px);
}

.btn-item-save:active {
  transform: scale(0.96);
}

/* Saved State Animation (Emerald Radiant Glow) */
.btn-item-save.is-saved {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.5) !important;
  transform: scale(1.02);
}

.btn-item-save.is-saved *,
.btn-item-save.is-saved i,
.btn-item-save.is-saved svg,
.btn-item-save.is-saved span {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.btn-item-save.is-saving {
  opacity: 0.8;
  pointer-events: none;
}

/* Quota Quick-Select Pills */
.quota-pill {
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-main);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.quota-pill:hover {
  background: var(--primary);
  color: var(--on-primary, #FFF);
  border-color: var(--primary);
}
.quota-pill.active {
  background: var(--primary) !important;
  color: var(--on-primary, #FFF) !important;
  border-color: var(--primary) !important;
}

@media (max-width: 768px) {
  .appconfig-mobile-cards {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
}
@media (min-width: 769px) {
  .appconfig-mobile-cards {
    display: none !important;
  }
}

/* =========================================================
   DYNAMIC CONTEXTUAL SAVE BARS & FLOATING UNSAVED DOCK
   ========================================================= */
.card-dynamic-save-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(var(--primary-rgb), 0.06);
  border: 1.5px dashed var(--primary);
  border-radius: 9px;
  animation: slideDownFade 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 14px;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.save-bar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}

.save-bar-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}

.save-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.save-bar-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  display: inline-block;
  animation: pulseDotAnim 1.5s infinite;
  flex-shrink: 0;
}

.save-bar-pulse-dot.amber {
  background: #F59E0B;
  box-shadow: 0 0 8px #F59E0B;
}

@keyframes pulseDotAnim {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

/* Floating Save Dock (Fixed at bottom of viewport) */
.floating-save-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  pointer-events: auto;
  animation: floatDockUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes floatDockUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.floating-save-dock-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  background: var(--surface);
  border: 1.5px solid var(--primary);
  border-radius: 50px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3), 0 0 20px rgba(var(--primary-rgb), 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.floating-save-info {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.floating-save-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 10px #F59E0B;
  display: inline-block;
  animation: pulseDotAnim 1.2s infinite;
  flex-shrink: 0;
}

.floating-save-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 600px) {
  .floating-save-dock {
    width: calc(100% - 24px);
    bottom: 12px;
  }
  .floating-save-dock-inner {
    width: 100%;
    padding: 8px 12px;
    gap: 8px;
  }
  #floatingSaveMessage {
    font-size: 0.76rem !important;
  }
}

/* Mobile Smooth Touch Scrolling */
.vip-card-mobile,
.vip-reseller-card,
.nodes-mobile-cards-list,
.payloads-mobile-cards-list {
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}


/* UI polish: presentation only; existing events, routes and values remain intact. */
:root {
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --shadow-sm: 0 2px 8px rgba(15,23,42,.045);
  --shadow-md: 0 10px 28px rgba(15,23,42,.065), 0 2px 6px rgba(15,23,42,.035);
}
.content-body { max-width: 1700px; margin-inline: auto; }
.panel-card, .uvpn-card, .kpi-card, .stat-card-modern {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel-card:hover, .uvpn-card:hover, .kpi-card:hover, .stat-card-modern:hover {
  box-shadow: var(--shadow-md);
}
.panel-header { border-bottom-color: var(--border-subtle); }
.sidebar .nav-item { border-radius: 11px; transition: background-color .18s ease, color .18s ease; }
.sidebar .nav-item.active { box-shadow: inset 3px 0 0 var(--accent); }
.btn, .btn-icon, .vrc-btn, .icon-btn-header {
  border-radius: 11px;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:focus-visible, .btn-icon:focus-visible, .nav-item:focus-visible,
.icon-btn-header:focus-visible, .search-input:focus-visible,
.form-input:focus-visible, .form-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn-primary { box-shadow: 0 4px 12px rgba(var(--primary-rgb), .18); }
.btn-primary:hover { box-shadow: 0 7px 18px rgba(var(--primary-rgb), .25); }
.btn-secondary { border-color: var(--border); background: var(--surface); }
.btn-danger { box-shadow: none; }
.btn-sm { min-height: 34px; padding-inline: 12px; }
.search-input, .form-input, .form-select {
  border-radius: 11px;
  background: var(--surface);
  min-height: 42px;
}
.custom-table { border-collapse: separate; border-spacing: 0; }
.custom-table th { background: var(--surface-subtle) !important; letter-spacing: .035em; }
.custom-table td { transition: background-color .15s ease; }
.custom-table tbody tr:last-child td { border-bottom: 0; }
.modal-box { border-radius: 22px; box-shadow: 0 24px 70px rgba(15,23,42,.18); }
.badge-proto, .status-badge { border-radius: 999px; }
@media (max-width: 992px) {
  .content-body { max-width: 100%; }
  .panel-card, .uvpn-card { border-radius: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-card, .uvpn-card, .kpi-card, .stat-card-modern,
  .btn, .btn-icon, .nav-item { transition: none; }
}

/* Settings visual refresh. Scoped to this tab; preserve visibility and handlers. */
#tab-settings {
  --settings-shadow: 0 8px 28px rgba(15, 23, 42, .045);
}
#tab-settings .settings-container { gap: 24px !important; }
#tab-settings .settings-card {
  min-width: 0;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: var(--settings-shadow) !important;
}
#tab-settings .settings-card:hover { border-color: var(--border) !important; }
#tab-settings .settings-card-header {
  gap: 16px !important;
  flex-wrap: wrap;
  padding-bottom: 18px !important;
  margin-bottom: 20px !important;
  border-bottom-color: var(--border-subtle) !important;
}
#tab-settings .settings-card-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  gap: 12px !important;
  line-height: 1.5;
}
#tab-settings .settings-card-title > div:first-child {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}
#tab-settings .settings-grid-2,
#tab-settings .settings-grid-3 { gap: 18px !important; }
#tab-settings .settings-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
#tab-settings .settings-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
#tab-settings .setting-item-box {
  min-width: 0;
  padding: 16px !important;
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
}
#tab-settings .setting-item-label {
  font-size: .85rem !important;
  font-weight: 600 !important;
  line-height: 1.5;
  margin-bottom: 9px !important;
  gap: 8px;
  flex-wrap: wrap;
}
#tab-settings .setting-control-row { min-width: 0; }
#tab-settings .form-input,
#tab-settings .form-select {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background-color: var(--surface-card);
  color: var(--text-main);
  font-size: .9rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}
#tab-settings textarea.form-input {
  min-height: 108px;
  padding: 12px 14px;
  resize: vertical;
}
#tab-settings .form-input:focus,
#tab-settings .form-select:focus {
  border-color: var(--primary);
  outline: 3px solid var(--primary-focus);
  outline-offset: 1px;
}
#tab-settings .btn {
  min-height: 40px;
  border-radius: 9px !important;
  font-weight: 600 !important;
  font-size: .85rem;
  gap: 7px;
  white-space: normal;
  line-height: 1.4;
}
#tab-settings .btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border: 1px solid var(--primary);
  box-shadow: 0 3px 8px var(--primary-soft);
}
#tab-settings .btn-primary:hover { background: var(--primary-hover); }
#tab-settings .btn-secondary {
  background: var(--surface-card);
  color: var(--text-main);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
#tab-settings .btn:focus-visible,
#tab-settings .quota-pill:focus-visible,
#tab-settings .theme-swatch:focus-visible {
  outline: 3px solid var(--primary-focus);
  outline-offset: 3px;
}
#tab-settings .btn:disabled { opacity: .55; cursor: not-allowed; }
#tab-settings .settings-card > div:last-child:has(> .btn-item-save) {
  margin-top: 22px !important;
  padding-top: 18px !important;
  gap: 12px !important;
}
#tab-settings .quota-pill {
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 7px;
  font-weight: 600;
}
#tab-settings .theme-swatches { gap: 12px; padding: 8px 2px; flex-wrap: wrap; }
#tab-settings .theme-swatch { width: 30px; height: 30px; border-radius: 50%; }
#tab-settings #logoPreviewContainer {
  width: 42px !important;
  height: 42px !important;
  border-radius: 9px !important;
}
@media (max-width: 640px) {
  #tab-settings .settings-container { gap: 16px !important; }
  #tab-settings .settings-card { padding: 16px; border-radius: 14px !important; }
  #tab-settings .setting-item-box { padding: 12px !important; }
  #tab-settings .settings-card-title { font-size: .96rem !important; }
  #tab-settings .settings-grid-2,
  #tab-settings .settings-grid-3 { grid-template-columns: minmax(0, 1fr); gap: 12px !important; }
  #tab-settings .setting-control-row { flex-wrap: wrap; }
  #tab-settings .btn-item-save { width: 100%; height: auto !important; padding: 10px 14px !important; justify-content: center; }
}

/* Mobile: keep document scrolling instead of nested overflow containers. */
@media (max-width: 992px) {
  html { scroll-behavior: auto; }
  .app-container,
  .main-wrapper {
    overflow: visible;
    height: auto;
    min-height: 100%;
  }
  /* clip prevents horizontal overflow without creating a scroll container. */
  @supports (overflow: clip) {
    html, body { overflow-x: clip; }
    .app-container,
    .main-wrapper { overflow-x: clip; overflow-y: visible; }
  }
  .floating-save-dock-inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .12);
  }
}
@media (max-width: 992px) and (hover: none) {
  .panel-card, .uvpn-card, .kpi-card, .stat-card-modern,
  .settings-card, .vip-card-mobile, .vip-reseller-card {
    transition: none !important;
  }
  .panel-card:hover, .uvpn-card:hover, .kpi-card:hover,
  .stat-card-modern:hover, .settings-card:hover,
  .vip-card-mobile:hover, .vip-reseller-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }
}

/* ==========================================================================
   UVPN PRO DASHBOARD CARDS & ACTION BUTTONS
   ========================================================================== */
.uvpn-dashboard-header {
  margin-bottom: 16px;
}
.uvpn-dashboard-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
.uvpn-dashboard-subtitle {
  font-size: 0.86rem;
  color: #6B7280;
  margin: 0;
  font-weight: 500;
}

.uvpn-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.uvpn-quick-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.uvpn-btn-action {
  background: var(--primary, #3BA755) !important;
  color: var(--on-primary, #FFFFFF) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  text-decoration: none !important;
}
.uvpn-btn-action:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}
.uvpn-btn-action:active {
  transform: scale(0.98);
}

.uvpn-kpi-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .uvpn-kpi-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (min-width: 1200px) {
  .uvpn-kpi-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

.uvpn-kpi-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
}
.uvpn-kpi-card.kpi-online {
  border-left: 4.5px solid #10B981 !important;
}
.uvpn-kpi-card.kpi-users {
  border-left: 4.5px solid #F59E0B !important;
}
.uvpn-kpi-card.kpi-resellers {
  border-left: 4.5px solid #15803D !important;
}
.uvpn-kpi-card.kpi-credits {
  border-left: 4.5px solid #4ADE80 !important;
}

.uvpn-kpi-val {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #111827 !important;
  line-height: 1.1 !important;
  margin-bottom: 3px !important;
  letter-spacing: -0.02em !important;
}
.uvpn-kpi-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
  margin-bottom: 2px !important;
}
.uvpn-kpi-sub {
  font-size: 0.76rem !important;
  color: #6B7280 !important;
  font-weight: 500 !important;
}

.uvpn-kpi-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.uvpn-kpi-icon-badge.badge-green {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
}
.uvpn-kpi-icon-badge.badge-orange {
  background: #FEF3C7 !important;
  color: #D97706 !important;
}
.uvpn-kpi-icon-badge.badge-darkgreen {
  background: #DCFCE7 !important;
  color: #15803D !important;
}
.uvpn-kpi-icon-badge.badge-lightgreen {
  background: #E8F5E9 !important;
  color: #388E3C !important;
}


/* Settings: tab bar + flatter, shorter layout. One section shown at a time. */
#tab-settings .settings-jump {
  position: sticky;
  top: 56px;
  z-index: 20;
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg-body);
}
#tab-settings .settings-jump::-webkit-scrollbar { display: none; }
#tab-settings .settings-jump button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--text-main);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
#tab-settings .settings-jump button.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary, #fff);
}
#tab-settings .settings-jump button:focus-visible {
  outline: 3px solid var(--primary-focus);
  outline-offset: 2px;
}
#tab-settings .settings-card,
#tab-settings #settingsCardApps { scroll-margin-top: 112px; }

/* One container per section: fields sit directly in the card. */
#tab-settings .settings-card .setting-item-box {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Quota pills and theme swatches already drive these selects; hide the duplicate control. */
#tab-settings #settingDefaultQuota,
#tab-settings #themeSelector { display: none !important; }
#tab-settings .setting-control-row:has(> #themeSelector) { display: none !important; }

/* On/off switch (drives a hidden two-option select). */
#tab-settings .settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  min-height: 40px;
}
#tab-settings .settings-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
#tab-settings .settings-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  transition: background .18s ease, border-color .18s ease;
}
#tab-settings .settings-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  transition: transform .18s ease;
}
#tab-settings .settings-toggle input:checked + .settings-toggle-track {
  background: var(--primary);
  border-color: var(--primary);
}
#tab-settings .settings-toggle input:checked + .settings-toggle-track .settings-toggle-thumb {
  transform: translateX(20px);
}
#tab-settings .settings-toggle input:focus-visible + .settings-toggle-track {
  outline: 3px solid var(--primary-focus);
  outline-offset: 2px;
}
#tab-settings .settings-toggle-text { font-size: .9rem; font-weight: 600; color: var(--text-main); }
#tab-settings .settings-toggle-hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  #tab-settings .settings-toggle-track,
  #tab-settings .settings-toggle-thumb { transition: none; }
}

/* Long example URLs wrap instead of running off screen. */
#tab-settings code,
#tab-settings .settings-card [style*="monospace"] { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 640px) {
  #tab-settings .settings-jump { top: 52px; }
  #tab-settings .settings-card { padding: 16px 14px; }
  #tab-settings .settings-grid-2,
  #tab-settings .settings-grid-3 { gap: 14px 10px !important; }
  /* Short fields side by side: policy 2x2, DNS pair. */
  #settingsCardPolicy .settings-grid-3,
  #settingsCardCloudflare .settings-grid-3:has(#settingDnsPrimary) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #settingsCardCloudflare .settings-grid-3:has(#settingDnsPrimary) > .setting-item-box:has(#settingCfProxy) { grid-column: 1 / -1; }
}

/* Action row: "More" kebab button + overflow menu. */
.uvpn-act-btn.uvpn-act-more {
  --act-fg: #475569;
  --act-bg: var(--surface-muted);
  --act-bd: var(--border);
}
.uvpn-act-menu {
  position: fixed;
  z-index: 12000;
  min-width: 190px;
  max-width: 240px;
  padding: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  animation: uvpnMenuIn 0.12s ease;
}
@keyframes uvpnMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .uvpn-act-menu { animation: none; } }
.uvpn-act-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.uvpn-act-menu-item:hover { background: var(--surface-subtle); }
.uvpn-act-menu-item:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: -2px; }
.uvpn-act-menu-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-muted);
  flex-shrink: 0;
}
.uvpn-act-menu-ic svg, .uvpn-act-menu-ic i { width: 16px !important; height: 16px !important; }
.uvpn-act-menu-item[data-kind="del"],
.uvpn-act-menu-item[data-kind="block"] { color: #DC2626; }
.uvpn-act-menu-item[data-kind="del"] .uvpn-act-menu-ic,
.uvpn-act-menu-item[data-kind="block"] .uvpn-act-menu-ic { background: rgba(239,68,68,0.10); color: #DC2626; }
.uvpn-act-menu-item[data-kind="power"] .uvpn-act-menu-ic { background: rgba(71,85,105,0.10); color: #475569; }
.uvpn-act-menu-item[data-kind="restart"] .uvpn-act-menu-ic,
.uvpn-act-menu-item[data-kind="reset"] .uvpn-act-menu-ic,
.uvpn-act-menu-item[data-kind="deduct"] .uvpn-act-menu-ic { background: rgba(245,158,11,0.12); color: #D97706; }
.uvpn-act-menu-item[data-kind="dns"] .uvpn-act-menu-ic,
.uvpn-act-menu-item[data-kind="view"] .uvpn-act-menu-ic { background: rgba(2,132,199,0.12); color: #0284C7; }
.uvpn-act-menu-item[data-kind="edit"] .uvpn-act-menu-ic,
.uvpn-act-menu-item[data-kind="settings"] .uvpn-act-menu-ic,
.uvpn-act-menu-item[data-kind="loginas"] .uvpn-act-menu-ic { background: rgba(99,102,241,0.12); color: #6366F1; }


/* ==========================================================================
   UVPN PRO ULTRA-MODERN UI COMPONENTS (SERVER MAP & 2-TAB DEVICE INSPECTOR)
   ========================================================================== */

/* Leaflet Server Map Styles */
.leaflet-container {
  background: #0f172a !important;
  font-family: inherit !important;
}
.leaflet-popup-content-wrapper {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-tip {
  background: #1e293b !important;
}
.leaflet-popup-content {
  margin: 10px 14px !important;
  line-height: 1.4 !important;
}
.server-map-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.76rem;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  box-shadow: 0 0 14px rgba(0,0,0,0.45);
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.server-map-marker:hover {
  transform: scale(1.22);
}
.server-map-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  margin-bottom: 4px;
}
.server-map-row:hover, .server-map-row.is-active {
  background: rgba(var(--primary-rgb), 0.10);
  border-color: var(--primary);
}
.server-map-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.server-map-flag {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.server-map-name {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.server-map-ip {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-family: monospace;
}
.server-map-country {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 700;
}
.server-map-connected {
  font-weight: 800;
  font-size: 0.76rem;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  white-space: nowrap;
}

/* Country Flag Badges */
.session-route-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: -1px;
  margin-right: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  display: inline-block;
}

/* UVPN 2-Tab Device Modal */
.device-modal-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 18px;
}
.device-modal-tab-btn {
  padding: 10px 18px;
  font-weight: 800;
  font-size: 0.88rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.device-modal-tab-btn:hover {
  color: var(--text-main);
}
.device-modal-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.device-tab-pane {
  display: none;
}
.device-tab-pane.active {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}
.device-history-scroll {
  max-height: 290px;
  overflow-y: auto;
  padding-right: 4px;
}
.device-history-item {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}
.device-history-item.is-current {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.06);
}
.device-history-meta {
  display: flex;
  gap: 12px;
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  margin-top: 6px;
  border-top: 1px dashed var(--border);
  padding-top: 5px;
}

/* Dynamic Bandwidth Progress Bar */
.usage-progress-container {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.usage-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.usage-progress-fill.status-normal {
  background: var(--primary);
}
.usage-progress-fill.status-warning {
  background: #F59E0B;
}
.usage-progress-fill.status-danger {
  background: #EF4444;
}