/* UVPN reference presentation. No API, permissions, quota or VPN changes. */
:root {
  --bg-body: #f5f5f5; --surface: #fff; --surface-card: #fff;
  --surface-muted: #fafafa; --surface-subtle: #fafafa;
  --text-main: #252525; --text-secondary: #616161; --text-muted: #757575;
  --text-inverse: #fff; --border: #ddd; --border-subtle: #e5e5e5;
  --radius-sm: 3px; --radius-md: 3px; --radius-lg: 3px; --radius-xl: 4px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.07); --shadow-md: 0 2px 4px rgba(0,0,0,.1);
}
html, body { font-family: Roboto, Arial, sans-serif; font-weight: 400; background: #f5f5f5; }
body .topbar { position: fixed; inset: 0 0 auto; height: 72px; padding: 0 24px !important;
  background: var(--primary) !important; border: 0; border-radius: 0; z-index: 1100;
  box-shadow: 0 2px 4px #0005; }
.topbar .brand-logo-icon { width: 32px; height: 32px; border-radius: 50%; box-shadow: none; background: transparent; }
.topbar .brand-logo-icon .topbar-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
@media (max-width: 640px) { .topbar .brand-logo-icon { width: 36px; height: 36px; flex-shrink: 0; } }
#topbarBrandTitle { font-size: 16px !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.topbar-left { gap: 24px; }
body .topbar .mobile-menu-btn { display: flex !important; border: 0; background: transparent; border-radius: 50%; width: 24px; min-height: 36px; padding: 0; }
body .topbar .topbar-user-info { display: flex !important; }
.topbar-user-info #topbarUsername { display: none; }
.topbar .topbar-logout-btn { display: inline-flex !important; font-size: 12px; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body .sidebar { position: fixed; top: 72px; left: 0; bottom: 0; width: 278px; height: calc(100dvh - 72px);
  padding: 24px 0 0 !important; background: #fff !important; border-right: 1px solid #ddd;
  border-radius: 0 !important; box-shadow: none !important; z-index: 1050; overflow-y: auto; }
body .sidebar .brand-header { display: none !important; }
.sidebar .reference-menu-label { font-size: 18px !important; font-weight: 400 !important; color: #252525 !important;
  letter-spacing: 0 !important; text-transform: none !important; padding: 16px 24px 12px !important; }
.sidebar .reference-panel-label { border-top: 1px solid #e0e0e0; margin-top: 28px; padding-top: 28px !important; }
body .sidebar .nav-menu { gap: 0; padding: 0 12px; }
body .sidebar .nav-item { min-height: 44px; padding: 12px; gap: 16px; font-size: 14px; font-weight: 400;
  color: #616161; border-radius: 0; border: 0; box-shadow: none; }
body .sidebar .nav-item.active { background: #f2f2f2; color: #252525; font-weight: 500; border: 0; box-shadow: none; }
.sidebar .nav-item:hover { background: #eee; }
.sidebar .nav-icon { color: #757575; width: 20px; }
.sidebar .sidebar-footer { margin-top: auto !important; padding: 18px 24px !important; background: #f5f5f5; border-top: 1px solid #ddd; }
.sidebar-footer #currentUsername { font-size: 13px !important; }
.sidebar-footer #sidebarVersionBadge { background: var(--primary); color: var(--on-primary, #fff) !important; border-radius: 2px; padding: 2px 5px; font-family: inherit !important; }
.sidebar-footer .sidebar-logout-btn { border-radius: 3px !important; box-shadow: none; }
body .main-wrapper { margin-left: 278px; padding-top: 72px; height: auto; min-height: 100dvh; overflow: visible; width: calc(100% - 278px); }
body .app-container { height: auto; min-height: 100dvh; overflow: visible; width: 100%; display: block; }
body .content-body { padding: 28px 24px 48px !important; width: 100%; max-width: none; gap: 20px; }
body .tab-section { gap: 16px; min-width: 0; }
.reference-page-heading { margin-bottom: 8px; }
.reference-page-heading h1 { font-size: 24px; font-weight: 400; line-height: 1.3; margin: 0 0 4px; }
.reference-page-heading p { color: #757575; font-size: 13px; margin: 0; }
body .uvpn-dashboard-header { margin: 0; }
body .uvpn-dashboard-title { font-size: 24px; font-weight: 400; color: #252525; margin: 0 0 4px; }
body .uvpn-dashboard-subtitle { font-size: 13px; color: #757575; margin: 0; }
body .uvpn-actions-grid { display: flex; justify-content: flex-end; gap: 8px; margin: 0; }
body .uvpn-quick-actions-row { display: flex; gap: 8px; }
body .uvpn-actions-grid > .uvpn-btn-action { width: auto !important; }
body .uvpn-btn-action { min-height: 36px; border-radius: 2px; padding: 8px 12px; background: var(--primary); color: #173019;
  border: 0; font-size: 13px; font-weight: 500; box-shadow: 0 2px 3px #0002; }
body .uvpn-kpi-container { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0; }
body .uvpn-kpi-card { padding: 12px 16px; border-radius: 3px; background: #fff; box-shadow: none; border: 1px solid #ddd; border-left: 4px solid var(--primary); min-height: 86px; }
body .uvpn-kpi-val { font-size: 24px; font-weight: 400; line-height: 1.15; color: #252525; }
body .uvpn-kpi-title { font-size: 13px; font-weight: 400; color: #757575; }
body .uvpn-kpi-sub { font-size: 11px; font-weight: 400; color: #757575; }
body .uvpn-kpi-icon-badge { width: 42px; height: 42px; border-radius: 50%; }
body .kpi-users { border-left-color: #ffa000; }
body .kpi-resellers { border-left-color: #24622a; }
body .kpi-credits { border-left-color: #81c784; }
body .badge-green { background: var(--primary); color: #fff; }
body .badge-orange { background: #ffa000; color: #fff; }
body .badge-darkgreen { background: #24622a; color: #fff; }
body .badge-lightgreen { background: #81c784; color: #fff; }
body .panel-card, body .uvpn-card { border: 1px solid #d5d5d5; border-radius: 3px !important; box-shadow: none !important; min-width: 0; }
body .panel-card { padding: 16px !important; }
body .uvpn-card { padding: 0 !important; overflow: visible; }
body .uvpn-card-header { padding: 16px !important; min-height: 50px; background: var(--primary) !important;
  border-radius: 2px 2px 0 0; border: 0; color: #fff !important; }
body .uvpn-card-header :is(.uvpn-header-title, .uvpn-header-left, .uvpn-header-icon) { color: var(--text-main) !important; }
body .uvpn-header-title { font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; }
body .uvpn-header-icon { display: none; }
body .uvpn-card-body { padding: 16px !important; }
body .panel-card > .panel-header { background: var(--primary); color: #fff; margin: -16px -16px 16px;
  padding: 16px !important; border: 0 !important; border-radius: 2px 2px 0 0; min-height: 50px; }
body .panel-card > .panel-header :is(h2,h3,svg) { color: #fff !important; font-size: 16px !important; font-weight: 500 !important; }
body .panel-header h3 { margin: 0; }
body .uvpn-layout-container { display: grid; grid-template-columns: 247px minmax(0,1fr); gap: 16px; align-items: start; }
body .stat-grid-modern { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #fff; border: 1px solid #ddd; border-radius: 3px; }
body .stat-card-modern { display: flex; padding: 8px 10px; border-radius: 0; box-shadow: none; border: 1px solid #e5e5e5; background: #fafafa; min-height: 40px; gap: 8px; }
body .stat-icon-wrapper { width: 24px; height: 24px; border-radius: 50%; }
body .stat-icon-wrapper svg { width: 14px; height: 14px; }
body .stat-content { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 4px; }
body .stat-label { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
body .stat-value { font-size: 12px; font-weight: 700; color: var(--on-primary, #fff) !important; background: var(--primary); padding: 3px 8px; border-radius: 20px; }
body .stat-active .stat-value { background: #047857; color: #ffffff !important; }
body .stat-inactive .stat-value { background: #f59e0b; color: #0f172a !important; }
body .stat-expired .stat-value { background: #dc2626; color: #ffffff !important; }
body .btn, body .btn-sm, body .uvpn-btn-action { border-radius: 3px !important; font-family: inherit; font-weight: 500 !important; letter-spacing: .3px; }
body .btn-primary { background: var(--primary) !important; color: #173019; border: 0; box-shadow: 0 2px 3px #0002 !important; }
body .btn-secondary { background: #fff; border: 1px solid #ccc; box-shadow: none; }
body .btn { min-height: 36px; padding: 8px 14px; }
body .btn-sm { min-height: 30px; padding: 5px 10px; }
body .icon-btn-header { border-radius: 50%; background: #ffffff20; color: #fff; border: 0; }
body :is(.form-input,.form-select,.search-input) { border: 1px solid #aaa !important; background: #fff !important; border-radius: 4px !important;
  color: #333 !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; box-shadow: none; }
body .form-input, body .form-select { min-height: 50px; padding: 12px 14px !important; }
body .search-input { min-height: 38px; padding: 8px 12px; }
body .form-label { font-size: 12px !important; font-weight: 400 !important; color: #757575 !important; text-transform: none; letter-spacing: 0; }
body .form-label svg { display: none; }
body input[type=checkbox] { accent-color: var(--primary); }
body .form-group { margin-bottom: 16px; }
body .custom-table { width: 100%; border-collapse: collapse; border: 1px solid #ddd; }
body .custom-table th { background: #fff !important; color: #757575 !important; font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .4px; padding: 14px 12px; border: 1px solid #e0e0e0; }
body .custom-table td { font-size: 14px; padding: 14px 12px; border: 1px solid #e0e0e0; }
body .table-responsive { overflow-x: auto; border-radius: 3px; border: 0; max-width: 100%; }
body .settings-jump { border-bottom: 1px solid #ddd; background: #fff; padding: 0; border-radius: 0; gap: 0; box-shadow: none; }
body .settings-jump button { background: transparent; color: #616161; border-radius: 0; border: 0; border-bottom: 2px solid transparent;
  padding: 16px 20px; font-size: 14px; font-weight: 500; box-shadow: none; }
body .settings-jump button.is-active { color: var(--primary); background: transparent; border-bottom-color: var(--primary); }
body .modal-box { border-radius: 4px !important; box-shadow: 0 12px 40px #0003; }
body .modal-header { border-bottom: 1px solid #ddd; }
body .status-badge { font-size: 11px; font-weight: 500; }
body .duration-pill-btn { border-radius: 3px !important; font-weight: 400 !important; }
body #tab-overview { position: relative; }
body #tab-overview > .uvpn-card { order: 5; }
body #tab-overview > .reference-leaderboards { order: 4; gap: 12px !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.reference-leaderboards .uvpn-card-body { min-height: 230px; }
@media (min-width: 1200px) {
  #tab-overview .uvpn-actions-grid { position: absolute; right: 0; top: 5px; }
}
@media (min-width: 993px) {
  body.reference-sidebar-collapsed .sidebar { display: none; }
  body.reference-sidebar-collapsed .main-wrapper { margin-left: 0; width: 100%; }
  body .sidebar-backdrop { display: none !important; }
}
@media (max-width: 1199px) and (min-width: 993px) {
  body .uvpn-layout-container { grid-template-columns: 230px minmax(0,1fr); }
  body .uvpn-kpi-container { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body #tab-overview > .reference-leaderboards { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 992px) {
  body .main-wrapper { margin-left: 0; width: 100%; padding-top: 64px; }
  body .topbar { height: 64px; padding: 0 16px !important; }
  body .sidebar { top: 64px !important; height: calc(100dvh - 64px) !important; width: min(278px,85vw) !important; padding: 12px 0 0 !important;
    transform: translateX(-100%); transition: transform .18s ease; }
  body .sidebar.mobile-open { transform: translateX(0); }
  body .sidebar-backdrop.active { display: block !important; top: 64px !important; z-index: 1040; }
  body .content-body { padding: 24px 16px 40px !important; }
  body .uvpn-layout-container { grid-template-columns: 1fr; gap: 16px; }
  body .uvpn-kpi-container { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body #tab-overview > .reference-leaderboards { grid-template-columns: 1fr !important; }
  body .uvpn-actions-grid { justify-content: flex-start; flex-wrap: wrap; }
  body .uvpn-quick-actions-row { flex-wrap: wrap; }
  body .panel-card, body .uvpn-card { margin: 0; }
  body .uvpn-card-header { padding: 16px !important; }
  body .uvpn-card-body { padding: 16px !important; }
  body .server-map-layout-grid { grid-template-columns: 1fr !important; }
  body .settings-jump { overflow-x: auto; flex-wrap: nowrap; }
  body .settings-jump button { flex-shrink: 0; white-space: nowrap; }
  body .stat-grid-modern { margin-top: 12px; }
}
@media (max-width: 420px) {
  body .uvpn-kpi-container { grid-template-columns: 1fr; }
  body .topbar-left { gap: 16px; }
  body .topbar .topbar-logout-btn { font-size: 0; padding: 6px; }
  body .uvpn-card-body { padding: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body .sidebar { transition: none; }
}
/* Login shares the reference's flat form and outlined controls. */
body .login-wrapper { min-height: 100dvh; padding: 32px 16px; }
body .login-card { max-width: 420px; border: 0; box-shadow: none; border-radius: 0; background: transparent; padding: 24px; }
body .login-brand-icon { background: var(--primary); color: #ffffff; border-radius: 14px; box-shadow: 0 4px 14px var(--primary-soft); margin-bottom: 24px; }
body .login-brand-icon:has(img) { background: transparent; box-shadow: none; }
body .login-brand-icon :is(i, svg) { color: #ffffff !important; stroke: #ffffff !important; }
body .login-title { font-size: 24px; font-weight: 400; letter-spacing: 0; }
body .login-sub { font-size: 13px; }
body .login-card #submitBtn { width: 100%; text-transform: uppercase; }
body #loginAvailableAppsCard { border-radius: 10px !important; border-color: var(--border) !important; background: var(--surface-card) !important; }
body #tab-settings .settings-card { background: #fff; border: 1px solid #ddd !important; border-radius: 3px !important; box-shadow: none !important; padding: 20px !important; }
body #tab-settings .settings-card-header { background: transparent; border-radius: 0; padding: 0 0 16px !important; border-bottom: 1px solid #ddd; }
body #tab-settings .settings-card-title { font-size: 16px !important; font-weight: 500 !important; }
body #tab-settings .settings-card-title > div:first-child { border-radius: 3px; }
body #tab-settings > div:has(> h3) { display: none !important; }
/* Override legacy !important component declarations from the original theme. */
body .uvpn-actions-grid { flex-direction: row; }
body .uvpn-btn-action { font-weight: 500 !important; color: #173019 !important; letter-spacing: 0 !important; padding: 8px 12px !important; }
body .uvpn-kpi-card { padding: 12px 16px !important; border-radius: 3px !important; box-shadow: none !important; }
body .uvpn-kpi-card.kpi-online { border-left: 4px solid var(--primary) !important; }
body .uvpn-kpi-card.kpi-users { border-left: 4px solid #ffa000 !important; }
body .uvpn-kpi-card.kpi-resellers { border-left: 4px solid #24622a !important; }
body .uvpn-kpi-card.kpi-credits { border-left: 4px solid #81c784 !important; }
body .uvpn-kpi-val { font-size: 24px !important; font-weight: 400 !important; color: #252525 !important; letter-spacing: 0 !important; }
body .uvpn-kpi-title { font-size: 13px !important; font-weight: 400 !important; color: #757575 !important; }
body .uvpn-kpi-sub { font-size: 11px !important; font-weight: 400 !important; color: #757575 !important; }
body .uvpn-kpi-icon-badge.badge-green { background: var(--primary) !important; color: #fff !important; }
body .uvpn-kpi-icon-badge.badge-orange { background: #ffa000 !important; color: #fff !important; }
body .uvpn-kpi-icon-badge.badge-darkgreen { background: #24622a !important; color: #fff !important; }
body .uvpn-kpi-icon-badge.badge-lightgreen { background: #81c784 !important; color: #fff !important; }
body #tab-settings .settings-jump { top: 72px; padding: 0; gap: 0; background: #fff; }
body #tab-settings .settings-jump button { min-height: 48px; padding: 0 20px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #616161; font-weight: 500; }
body #tab-settings .settings-jump button.is-active { background: transparent; color: var(--primary); border-bottom-color: var(--primary); }
body #formCreateUserUvpn > div:last-child { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 8px !important; }
body #formCreateUserUvpn > div:last-child .btn { min-width: 0; width: 100%; padding: 8px !important; font-size: 12px; white-space: normal; }
body #formCreateUserUvpn .duration-quick-pills { display: none !important; }
body #uvpnDurationCostBadge { font-size: 10px !important; padding: 2px 5px !important; }
body #tab-bulk > .uvpn-card { width: 100%; max-width: none !important; margin: 0 !important; }
@media (max-width: 992px) {
  body #tab-settings .settings-jump { top: 64px; }
  body .uvpn-actions-grid { position: static; }
}
body .vip-card-mobile, body .vip-reseller-card { border: 1px solid #ddd !important; border-radius: 3px !important; background: #fff; box-shadow: none !important; }
body #tab-users .uvpn-card-header { min-height: 54px; }
body .reference-leaderboards .uvpn-card-header > span {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: var(--surface-muted) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
}
body .reference-leaderboards .uvpn-card-header { min-height: 54px; padding: 12px 16px !important; }
body .reference-leaderboards .uvpn-card-header > div > div:first-child { background: transparent !important; width: 24px !important; height: 24px !important; }
body .reference-leaderboards .uvpn-card-header > div > div:last-child > div:first-child { font-size: 14px !important; font-weight: 500 !important; text-transform: none; }
/* Floating outlined labels on the narrow Create card. The Random action remains below. */
body #formCreateUserUvpn .form-group { position: relative; margin-top: 8px; margin-bottom: 18px !important; }
body #formCreateUserUvpn .form-label { position: absolute; top: -7px; left: 12px; z-index: 1; background: #fff; padding: 0 4px; margin: 0 !important; line-height: 14px; }
body #formCreateUserUvpn .form-group > div:has(> .form-label) { height: 0; margin: 0 !important; }
body #formCreateUserUvpn .form-group > div > button { display: none; }
body #uvpnDurationCostBadge { display: none; }


/* RabbitNet concept: presentation only. Existing handlers and role gates remain authoritative. */
html:root {
  --bg-body:#f3f6fa; --surface:#fff; --surface-card:#fff; --surface-raised:#fff;
  --surface-muted:#edf2f7; --surface-subtle:#f8fafc;
  --text-main:#162338; --text-secondary:#40516a; --text-muted:#607086;
  --border:#dce4ed; --border-subtle:#e8edf3; --divider:#e8edf3;
  --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:16px;
  --shadow-sm:0 2px 6px #14263e06; --shadow-md:0 8px 24px #14263e09;
  --rn-sidebar:#101e30; --rn-sidebar-text:#cbd5e1;
}
html[data-mode="dark"] {
  color-scheme:dark;
  --bg-body:#0b1420; --surface:#142131; --surface-card:#142131; --surface-raised:#1a2a3c;
  --surface-muted:#1c2b3d; --surface-subtle:#112030;
  --text-main:#edf3fa; --text-secondary:#c5d1df; --text-muted:#a3b2c5;
  --border:#2a3b4f; --border-subtle:#213246; --divider:#26374a;
  --rn-sidebar:#0b1725; --shadow-sm:0 2px 6px #0002; --shadow-md:0 8px 24px #0002;
}
html body { background:var(--bg-body) !important; color:var(--text-main); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
html body .topbar { background:var(--surface-card) !important; border-bottom:1px solid var(--border); box-shadow:none !important; height:72px; }
html body .topbar, html body .topbar :is(button,a,span,div,i,svg) { color:var(--text-main) !important; }
html body #topbarBrandTitle { font-weight:750 !important; font-size:19px !important; }
html body .topbar :is(.mobile-menu-btn,.topbar-logout-btn,.icon-btn-header), html body #pzModeToggle { border:1px solid var(--border) !important; border-radius:9px !important; background:var(--surface-subtle) !important; min-width:40px; min-height:40px; box-shadow:none !important; }
html body .sidebar { background:var(--rn-sidebar) !important; border-right:1px solid #ffffff0c; width:248px; padding:18px 0 !important; }
html body .sidebar .brand-header { display:flex !important; padding:12px 20px 24px; border-bottom:1px solid #ffffff12; margin-bottom:14px; }
html body .sidebar :is(.brand-title,.brand-subtitle,#currentUsername,.sidebar-footer) { color:#edf3fa !important; }
html body .sidebar .brand-title { font-size:20px; font-weight:750; }
html body .sidebar .brand-subtitle { color:#94a8bf !important; font-size:11px; margin-top:5px; }
html body .sidebar .reference-menu-label { color:#8397b1 !important; font-size:10px !important; letter-spacing:1.5px !important; text-transform:uppercase !important; font-weight:700 !important; padding:12px 24px 8px !important; }
html body .sidebar .reference-panel-label { border-color:#ffffff12; margin-top:16px; }
html body .sidebar .nav-menu { gap:5px; padding:0 12px; }
html body .sidebar .nav-item { color:var(--rn-sidebar-text); border-radius:8px; padding:12px; font-size:13px; font-weight:550; gap:12px; min-height:44px; }
html body .sidebar .nav-item .nav-icon { color:inherit; }
html body .sidebar .nav-item:hover { background:#ffffff0c; color:#fff; }
html body .sidebar .nav-item.active { background:var(--primary); color:var(--on-primary); box-shadow:0 3px 8px #0002; font-weight:650; }
html body .sidebar .sidebar-footer { background:transparent; border-color:#ffffff12; padding:18px !important; }
html body .sidebar .sidebar-logout-btn { background:#ffffff0c !important; border-color:#ffffff20 !important; color:#e2e8f0 !important; }
html body .main-wrapper { margin-left:248px; width:calc(100% - 248px); }
html body .content-body { padding:28px 30px 48px !important; }
html body .tab-section { gap:22px; }
html body :is(.uvpn-dashboard-title,.reference-page-heading h1) { color:var(--text-main); font-weight:750; font-size:26px; letter-spacing:-.6px; }
html body :is(.uvpn-dashboard-subtitle,.reference-page-heading p) { color:var(--text-muted); }
html body :is(.panel-card,.uvpn-card,.vip-card-mobile,.vip-reseller-card), html body #tab-settings .settings-card {
  background:var(--surface-card) !important; border:1px solid var(--border) !important; border-radius:12px !important; box-shadow:var(--shadow-sm) !important;
}
html body .panel-card { padding:20px !important; }
html body :is(.uvpn-card-header,.panel-card > .panel-header) { background:var(--surface-card) !important; border-bottom:1px solid var(--border) !important; border-radius:12px 12px 0 0; padding:18px 20px !important; }
html body .panel-card > .panel-header { margin:-20px -20px 20px; }
html body :is(.uvpn-card-header,.panel-card > .panel-header),
html body :is(.uvpn-card-header,.panel-card > .panel-header) :is(h2,h3,.uvpn-header-title,.uvpn-header-left,.uvpn-header-icon) { color:var(--text-main) !important; }
html body :is(.uvpn-header-title,.panel-header h3) { font-size:15px !important; font-weight:700 !important; text-transform:none; letter-spacing:0; }
html body .uvpn-header-icon { display:inline-flex; }
html body .uvpn-card-body { padding:20px !important; }
html body .uvpn-kpi-container { gap:16px; }
html body .uvpn-kpi-card { background:var(--surface-card) !important; border:1px solid var(--border) !important; border-left:1px solid var(--border) !important; border-radius:12px !important; box-shadow:var(--shadow-sm) !important; padding:22px 20px !important; min-height:112px; gap:10px; }
html body .uvpn-kpi-card:is(.kpi-online,.kpi-users,.kpi-resellers,.kpi-credits) { border-left:1px solid var(--border) !important; }
html body .uvpn-kpi-val { color:var(--text-main) !important; font-size:30px !important; font-weight:750 !important; letter-spacing:-.6px !important; }
html body :is(.uvpn-kpi-title,.uvpn-kpi-sub,.form-label,.custom-table th) { color:var(--text-muted) !important; }
html body .uvpn-kpi-title { font-size:12px !important; margin-top:7px; }
html body .uvpn-kpi-sub { font-size:10px !important; margin-top:4px; }
html body .uvpn-kpi-icon-badge { width:44px; height:44px; border-radius:12px; flex-shrink:0; }
html body .uvpn-kpi-icon-badge.badge-green { background:#10b9811a !important; color:#10b981 !important; }
html body .uvpn-kpi-icon-badge.badge-orange { background:#3b82f61a !important; color:#3b82f6 !important; }
html body .uvpn-kpi-icon-badge.badge-darkgreen { background:#8b5cf61a !important; color:#a78bfa !important; }
html body .uvpn-kpi-icon-badge.badge-lightgreen { background:#f59e0b1a !important; color:#d9950b !important; }
html body :is(.btn,.btn-sm,.uvpn-btn-action,.duration-pill-btn) { border-radius:8px !important; letter-spacing:0; font-weight:600 !important; }
html body .btn-primary, html body .uvpn-btn-action { background:var(--primary) !important; color:var(--on-primary) !important; box-shadow:0 2px 4px #0001 !important; }
html body .btn-primary:hover, html body .uvpn-btn-action:hover { background:var(--primary-hover) !important; color:var(--on-primary-hover) !important; }
html body .sidebar .brand-header { background:transparent; border:0; border-bottom:1px solid #ffffff12; border-radius:0; box-shadow:none; }
html body .btn-secondary, html body .uvpn-card-header .btn-secondary { background:var(--surface-subtle) !important; border:1px solid var(--border) !important; color:var(--text-main) !important; }
html body .uvpn-card-header .btn-secondary :is(span,i,svg) { color:inherit !important; }
html body :is(.form-input,.form-select,.search-input) { background:var(--surface-subtle) !important; color:var(--text-main) !important; border:1px solid var(--border) !important; border-radius:8px !important; font-weight:450 !important; min-height:44px; }
html body :is(.form-input,.form-select,.search-input):focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-soft) !important; outline:none; }
html body .form-label { font-size:12px !important; font-weight:600 !important; }
html body :is(input,textarea)::placeholder { color:var(--text-muted); opacity:.85; }
html body .custom-table { border:0; }
html body .custom-table th { background:var(--surface-subtle) !important; border:0; border-bottom:1px solid var(--border); padding:15px 16px; text-transform:none; font-size:11px; letter-spacing:.2px; }
html body .custom-table td { border:0; border-bottom:1px solid var(--border-subtle); padding:16px; font-size:13px; }
html body .custom-table tbody tr:hover { background:var(--surface-subtle); }
html body .table-responsive { border-radius:9px; }
html body .stat-grid-modern { background:var(--surface-card); border-color:var(--border); border-radius:10px; gap:8px; }
html body .stat-card-modern { background:var(--surface-subtle); border-color:var(--border-subtle); border-radius:7px; min-height:46px; }
html body .modal-box { background:var(--surface-card); border:1px solid var(--border); border-radius:16px !important; box-shadow:0 24px 80px #0005; }
html body .modal-header { border-color:var(--border); }
html body #tab-settings :is(.settings-jump,.settings-card-header) { background:var(--surface-card); border-color:var(--border); }
html body #tab-settings .settings-jump { border-radius:10px; padding:4px; gap:4px; }
html body #tab-settings .settings-jump button { color:var(--text-muted); border-radius:7px; }
html body #tab-settings .settings-jump button.is-active { background:var(--primary-soft); color:var(--text-main) !important; }
html body #formCreateUserUvpn .form-label { background:var(--surface-card); }
/* Keep every original action in its original row and order. Short labels make mobile actions discoverable. */
html body .uvpn-actions-row { justify-content:flex-start !important; padding:4px 1px !important; gap:6px !important; scrollbar-width:thin !important; }
html body .uvpn-act-btn { width:auto !important; max-width:none !important; min-width:38px !important; height:36px !important; max-height:36px !important; padding:0 9px !important; border-radius:6px !important; gap:5px; background:var(--rn-action,#2563eb) !important; border-color:transparent !important; color:var(--rn-action-ink,#fff) !important; font-size:11px; }
html body .uvpn-act-btn:hover { filter:brightness(1.12); transform:none; }
html body .uvpn-act-btn:disabled { opacity:.5; cursor:default !important; }
html body .uvpn-act-btn:is(.uvpn-act-edit,.uvpn-act-settings,.uvpn-act-reset,.uvpn-act-deduct,.uvpn-act-lock) { --rn-action:#f5b844; --rn-action-ink:#322006; }
html body .uvpn-act-btn:is(.uvpn-act-renew,.uvpn-act-active,.uvpn-act-unblock,.uvpn-act-add,.uvpn-act-restart) { --rn-action:#168357; }
html body .uvpn-act-btn:is(.uvpn-act-del,.uvpn-act-block) { --rn-action:#dc3545; }
html body .uvpn-act-btn:is(.uvpn-act-power,.uvpn-act-device) { --rn-action:#536780; }
html body .uvpn-act-btn.uvpn-act-power.is-off { --rn-action:#168357; }
html body .uvpn-act-btn.uvpn-act-loginas { --rn-action:#7054c6; }
html body .rn-action-label { color:inherit !important; white-space:nowrap; }
html body :is(button,a,[role="button"]):focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
@media(min-width:993px) {
  html body .sidebar { top:0; height:100dvh; z-index:1120; }
  html body .topbar { left:248px; }
  html body.reference-sidebar-collapsed .topbar { left:0; }
  html body.reference-sidebar-collapsed .main-wrapper { margin-left:0; width:100%; }
  html body .sidebar .drawer-close-btn { display:none; }
}
@media(max-width:1199px) { html body .content-body { padding:24px 20px 40px !important; } }
@media(max-width:992px) {
  html body .main-wrapper { margin-left:0; width:100%; }
  html body .topbar { height:64px; padding:0 14px !important; }
  html body .sidebar { top:64px !important; height:calc(100dvh - 64px) !important; }
  html body .sidebar .brand-header { padding:12px 20px 20px; }
  html body .content-body { padding:22px 14px 36px !important; }
  html body .tab-section { gap:16px; }
  html body .uvpn-kpi-card { min-height:110px; padding:16px 12px !important; }
  html body .uvpn-kpi-val { font-size:26px !important; }
  html body .uvpn-kpi-container { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  html body .uvpn-kpi-icon-badge { width:34px; height:34px; border-radius:9px; }
  html body .uvpn-kpi-icon-badge svg { width:18px !important; height:18px !important; }
  html body .uvpn-actions-grid { gap:8px; }
  html body .uvpn-quick-actions-row { flex-direction:row; flex-wrap:wrap; }
  html body .uvpn-btn-action { font-size:11px; padding:10px !important; }
  html body :is(.uvpn-card-header,.uvpn-card-body) { padding:16px !important; }
  html body .topbar-left { gap:10px; }
  html body #topbarBrandTitle { font-size:17px !important; }
  html body .modal-box { max-width:calc(100vw - 24px); }
}
@media(prefers-reduced-motion:reduce) { html:root body *, html:root body *::before, html:root body *::after { scroll-behavior:auto !important; transition:none !important; } }

/* Compact navy drawer: override the legacy mobile gradient and edge-to-edge menu. */
html body .sidebar {
  scrollbar-width: thin;
  scrollbar-color: #42546b var(--rn-sidebar);
}
html body .sidebar::-webkit-scrollbar { width: 5px; }
html body .sidebar::-webkit-scrollbar-track { background: var(--rn-sidebar); }
html body .sidebar::-webkit-scrollbar-thumb { background: #42546b; border-radius: 8px; }
html body .sidebar .brand-header {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #ffffff12 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 16px 18px !important;
  margin: 0 0 12px !important;
  gap: 10px;
}
html body .sidebar .brand-header > div { min-width: 0; flex: 1; }
html body .sidebar .brand-header > div > div:last-child { min-width: 0; }
html body .sidebar .brand-header .brand-logo-icon {
  width: 38px !important; height: 38px !important;
  flex: 0 0 38px !important; border-radius: 10px !important;
  background: var(--primary) !important; color: #ffffff !important;
  border: 0 !important; box-shadow: 0 3px 10px var(--primary-soft) !important;
}
html body .sidebar .brand-header .brand-logo-icon:has(img) {
  background: transparent !important; box-shadow: none !important;
}
html body .sidebar .brand-header .brand-logo-icon :is(i, svg) {
  color: #ffffff !important; stroke: #ffffff !important;
}
html body .sidebar .brand-header .brand-logo-icon img { width: 100%; height: 100%; object-fit: contain; }
html body .sidebar .brand-header .brand-title {
  font-size: 17px !important; line-height: 1.3; overflow-wrap: anywhere;
}
html body .sidebar .brand-header .brand-subtitle {
  font-size: 10px !important; line-height: 1.45;
  color: #9caec4 !important; font-weight: 500 !important;
  letter-spacing: .2px !important; text-transform: none;
  margin-top: 4px; overflow-wrap: anywhere;
}
html body .sidebar .drawer-close-btn {
  width: 32px; height: 32px; min-width: 32px; flex-shrink: 0;
  border-radius: 8px !important; background: #ffffff09 !important;
  border: 1px solid #ffffff14 !important; color: #cbd5e1 !important;
}
html body .sidebar .nav-menu { padding: 0 12px !important; gap: 5px !important; }
html body .sidebar .nav-item { border: 0 !important; border-radius: 8px !important; }
html body .sidebar .nav-item.active {
  background: rgba(var(--primary-rgb), .16) !important;
  color: #edf3fa !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}
html body .sidebar .nav-item.active .nav-icon { color: var(--accent) !important; }

/* Branding belongs in the drawer; keep the header focused on controls. */
html body .topbar-left > div:has(> #topbarLogoContainer) { display: none !important; }

/* Match the drawer to the chosen surface mode, including the default light mode. */
html:not([data-mode="dark"]) { --rn-sidebar: #ffffff; --rn-sidebar-text: #40516a; }
html:not([data-mode="dark"]) body .sidebar {
  border-right-color: var(--border);
  scrollbar-color: #b7c3d2 #ffffff;
}
html:not([data-mode="dark"]) body .sidebar::-webkit-scrollbar-thumb { background: #b7c3d2; }
html:not([data-mode="dark"]) body .sidebar :is(.brand-title,#currentUsername,.sidebar-footer) { color: var(--text-main) !important; }
html:not([data-mode="dark"]) body .sidebar .brand-header .brand-subtitle,
html:not([data-mode="dark"]) body .sidebar .reference-menu-label { color: var(--text-muted) !important; }
html:not([data-mode="dark"]) body .sidebar :is(.brand-header,.reference-panel-label,.sidebar-footer) { border-color: var(--border) !important; }
html:not([data-mode="dark"]) body .sidebar .nav-item:hover { background: var(--surface-muted); color: var(--text-main); }
html:not([data-mode="dark"]) body .sidebar .nav-item.active {
  color: var(--primary-ink) !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}
html:not([data-mode="dark"]) body .sidebar .nav-item.active .nav-icon { color: var(--primary-ink) !important; }
html:not([data-mode="dark"]) body .sidebar :is(.drawer-close-btn,.sidebar-logout-btn) {
  background: var(--surface-subtle) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}

/* Explicit slogan colors outrank the legacy grouped brand rule with an ID selector. */
html body .sidebar .brand-header #sidebarRoleSubtitle {
  color: #a8b8cc !important;
  opacity: 1 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
html:not([data-mode="dark"]) body .sidebar .brand-header #sidebarRoleSubtitle {
  color: #526176 !important;
}


/* ================================================================
   ULTRA-PREMIUM DASHBOARD UPGRADES & CLEAN MINIMAL UI (2026-10)
   ================================================================ */

/* 1. Hero Live Telemetry & Command Strip */
.uvpn-hero-telemetry-strip {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
    border-radius: 14px;
    padding: 13px 18px;
    color: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.uvpn-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.uvpn-hero-health-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.42);
    color: #34d399;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.uvpn-hero-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: uvpnHeroPulse 1.8s infinite;
}

@keyframes uvpnHeroPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.uvpn-hero-metric-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    color: #cbd5e1;
    font-weight: 600;
    padding-left: 12px;
    border-left: 1px solid rgba(148, 163, 184, 0.22);
}

.uvpn-hero-metric-item strong {
    color: #ffffff;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}

.uvpn-proto-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.68rem;
    font-weight: 700;
    color: #e2e8f0;
}

.uvpn-proto-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.uvpn-hero-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.uvpn-hero-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    cursor: pointer;
    transition: all 0.15s ease;
}

.uvpn-hero-sync-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.uvpn-hero-sync-btn.uvpn-hero-sync-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* 2. Upgraded KPI Cards with Progress Bars & Sub-Breakdowns */
.uvpn-kpi-card {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 1.1rem 1.25rem !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}

.uvpn-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(15, 23, 42, 0.1) !important;
}

.uvpn-kpi-card.kpi-accent-emerald { border-top: 3px solid #10b981 !important; }
.uvpn-kpi-card.kpi-accent-blue    { border-top: 3px solid #3b82f6 !important; }
.uvpn-kpi-card.kpi-accent-purple  { border-top: 3px solid #8b5cf6 !important; }
.uvpn-kpi-card.kpi-accent-amber   { border-top: 3px solid #f59e0b !important; }

.uvpn-kpi-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.uvpn-kpi-bottom-row {
    width: 100%;
}

.uvpn-kpi-progress-track {
    width: 100%;
    height: 5px;
    background: var(--surface-muted);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 7px;
}

.uvpn-kpi-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.45s ease;
}

.uvpn-kpi-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    gap: 6px;
}

/* 3. Ranked Leaderboard Progress Bars */
.uvpn-lb-progress-track {
    width: 100%;
    height: 4px;
    background: var(--surface-muted);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 5px;
}

.uvpn-lb-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

html body .reference-leaderboards .uvpn-card-header > span {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    background: var(--surface-muted) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
}

/* 4. Hide redundant verbose subtitles inside Dashboard cards */
#tab-overview .uvpn-card-subtitle {
    display: none !important;
}


/* Mobile dashboard overflow safeguards: keep desktop layout and controls intact. */
@media (max-width: 992px) {
  html body #tab-overview,
  html body #tab-overview > *,
  html body #tab-overview .uvpn-card,
  html body #tab-overview .uvpn-card-body,
  html body #tab-overview .uvpn-overview-insights-grid,
  html body #tab-overview .reference-leaderboards {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  html body #tab-overview > .uvpn-overview-insights-grid,
  html body #tab-overview > .reference-leaderboards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body #tab-overview .uvpn-actions-row {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
  }
  html body #tab-overview :is(canvas, svg, img) {
    max-width: 100%;
  }
}
@media (max-width: 420px) {
  html body #tab-overview .uvpn-kpi-container {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Suspicious-user actions: two full-width rows on phones, no clipped buttons. */
@media (max-width: 600px) {
  html body #uvpnSuspiciousUsersCard,
  html body #uvpnSuspiciousUsersList,
  html body #uvpnSuspiciousUsersList .uvpn-suspicious-row {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  html body #uvpnSuspiciousUsersList .uvpn-suspicious-row > div:first-child,
  html body #uvpnSuspiciousUsersList .uvpn-suspicious-row > div:first-child > div:first-child,
  html body #uvpnSuspiciousUsersList .uvpn-suspicious-row > div:first-child > div:first-child > div {
    min-width: 0;
    max-width: 100%;
  }
  html body #uvpnSuspiciousUsersList .uvpn-suspicious-row span {
    overflow-wrap: anywhere;
  }
  html body #uvpnSuspiciousUsersList .uvpn-actions-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box;
  }
  html body #uvpnSuspiciousUsersList .uvpn-actions-row .uvpn-act-btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
  }
}


/* ================================================================
   COMPREHENSIVE DARK / LIGHT MODE & THEME TEXT CONTRAST FIXES
   ================================================================ */
/* 1. Never let topbar or card-header generic text rules override primary buttons, action buttons, or colored status badges */
html body :is(.btn-primary, .uvpn-btn-action, #submitBtn),
html body :is(.btn-primary, .uvpn-btn-action, #submitBtn) :is(span, i, svg),
html body :is(.topbar, .uvpn-card-header, .panel-header) :is(.btn-primary, .uvpn-btn-action) :is(span, i, svg) {
  color: var(--on-primary) !important;
}
html body :is(.btn-primary, .uvpn-btn-action, #submitBtn):hover,
html body :is(.btn-primary, .uvpn-btn-action, #submitBtn):hover :is(span, i, svg),
html body :is(.topbar, .uvpn-card-header, .panel-header) :is(.btn-primary, .uvpn-btn-action):hover :is(span, i, svg) {
  color: var(--on-primary-hover) !important;
}
html body .uvpn-act-btn,
html body .uvpn-act-btn :is(span, i, svg),
html body :is(.uvpn-card-header, .panel-header) .uvpn-act-btn :is(span, i, svg) {
  color: var(--rn-action-ink, #ffffff) !important;
}
html body :is(.uvpn-card-header, .panel-header) #uvpnSuspiciousCountBadge {
  color: #ffffff !important;
}
html:not([data-mode="dark"]) body #uvpnSuspiciousPolicyPill {
  color: #b91c1c !important;
}
html[data-mode="dark"] body #uvpnSuspiciousPolicyPill {
  color: #fca5a5 !important;
}

/* 2. Native select options, tables, modals, and inputs in Dark & Light modes */
html body :is(select, .form-select) option {
  background-color: var(--surface-card) !important;
  color: var(--text-main) !important;
}
html body .custom-table td {
  color: var(--text-main) !important;
}
html body .uvpn-badge-balance,
html body .uvpn-badge-balance :is(span, i, svg) {
  color: var(--primary-ink, var(--primary)) !important;
}
html[data-mode="dark"] body .kpi-micro-tag.tag-green,
html[data-mode="dark"] body .badge-app-active,
html[data-mode="dark"] body .cf-probe-banner.clean,
html[data-mode="dark"] body .hestia-status[data-phase="ready"] {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
html[data-mode="dark"] body .kpi-micro-tag.tag-cyan {
  background: rgba(20, 184, 166, 0.16) !important;
  color: #5eead4 !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
}
html[data-mode="dark"] body .kpi-micro-tag.tag-blue {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #93c5fd !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}
html[data-mode="dark"] body .kpi-micro-tag.tag-purple {
  background: rgba(168, 85, 247, 0.16) !important;
  color: #d8b4fe !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
}
html[data-mode="dark"] body .kpi-micro-tag.tag-orange,
html[data-mode="dark"] body .btn-warning {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html[data-mode="dark"] body .btn-danger,
html[data-mode="dark"] body .cf-probe-banner.error,
html[data-mode="dark"] body .hestia-status[data-phase="failed"] {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
html[data-mode="dark"] body .badge-proto-v2ray {
  background: rgba(14, 165, 233, 0.16) !important;
  color: #7dd3fc !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
}
html[data-mode="dark"] body .badge-proto-ovpn {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
html[data-mode="dark"] body .badge-proto-hy2 {
  background: rgba(236, 72, 153, 0.16) !important;
  color: #f9a8d4 !important;
  border-color: rgba(236, 72, 153, 0.35) !important;
}
html[data-mode="dark"] body .badge-proto-suite {
  background: rgba(99, 102, 241, 0.16) !important;
  color: #a5b4fc !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
}
html body .modal-box,
html body .modal-box :is(h1, h2, h3, h4, strong, th, td, label) {
  color: var(--text-main);
}

/* 3. Dark Mode deep overrides for hardcoded light backgrounds & dark text */
html[data-mode="dark"] body [style*="background:#fff"],
html[data-mode="dark"] body [style*="background: #fff"],
html[data-mode="dark"] body [style*="background:#FFF"],
html[data-mode="dark"] body [style*="background: #FFF"],
html[data-mode="dark"] body [style*="background: rgb(255, 255, 255)"],
html[data-mode="dark"] body [style*="background-color: rgb(255, 255, 255)"] {
  background-color: var(--surface-card) !important;
}
html[data-mode="dark"] body [style*="background:#f8fafc"],
html[data-mode="dark"] body [style*="background: #f8fafc"],
html[data-mode="dark"] body [style*="background:#F8FAFC"],
html[data-mode="dark"] body [style*="background: #F8FAFC"],
html[data-mode="dark"] body [style*="background:#f1f5f9"],
html[data-mode="dark"] body [style*="background: #f1f5f9"],
html[data-mode="dark"] body [style*="background:#F1F5F9"],
html[data-mode="dark"] body [style*="background: #F1F5F9"],
html[data-mode="dark"] body [style*="background:#fafafa"],
html[data-mode="dark"] body [style*="background: #fafafa"] {
  background-color: var(--surface-subtle) !important;
}
html[data-mode="dark"] body [style*="color:#0f172a"],
html[data-mode="dark"] body [style*="color: #0f172a"],
html[data-mode="dark"] body [style*="color:#0F172A"],
html[data-mode="dark"] body [style*="color: #0F172A"],
html[data-mode="dark"] body [style*="color:#1e293b"],
html[data-mode="dark"] body [style*="color: #1e293b"],
html[data-mode="dark"] body [style*="color:#1E293B"],
html[data-mode="dark"] body [style*="color: #1E293B"],
html[data-mode="dark"] body [style*="color:#111827"],
html[data-mode="dark"] body [style*="color: #111827"],
html[data-mode="dark"] body [style*="color:#252525"],
html[data-mode="dark"] body [style*="color: #252525"],
html[data-mode="dark"] body [style*="color:#333"],
html[data-mode="dark"] body [style*="color: #333"],
html[data-mode="dark"] body [style*="color: rgb(15, 23, 42)"],
html[data-mode="dark"] body [style*="color: rgb(30, 41, 59)"] {
  color: var(--text-main) !important;
}
html[data-mode="dark"] body [style*="color:#334155"],
html[data-mode="dark"] body [style*="color: #334155"],
html[data-mode="dark"] body [style*="color:#475569"],
html[data-mode="dark"] body [style*="color: #475569"],
html[data-mode="dark"] body [style*="color: rgb(51, 65, 85)"],
html[data-mode="dark"] body [style*="color: rgb(71, 85, 105)"] {
  color: var(--text-secondary) !important;
}
html[data-mode="dark"] body [style*="color:#64748b"],
html[data-mode="dark"] body [style*="color: #64748b"],
html[data-mode="dark"] body [style*="color:#64748B"],
html[data-mode="dark"] body [style*="color: #64748B"],
html[data-mode="dark"] body [style*="color:#757575"],
html[data-mode="dark"] body [style*="color: #757575"],
html[data-mode="dark"] body [style*="color:#616161"],
html[data-mode="dark"] body [style*="color: #616161"] {
  color: var(--text-muted) !important;
}
html[data-mode="dark"] body .uvpn-suspicious-row {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}
html[data-mode="dark"] body .uvpn-suspicious-row span[style*="color: #ef4444"] {
  color: #fca5a5 !important;
}
html body .uvpn-badge-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.32);
  white-space: nowrap;
}
html[data-mode="dark"] body .uvpn-badge-green {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.38);
}
html body .uvpn-badge-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.32);
  white-space: nowrap;
}
html[data-mode="dark"] body .uvpn-badge-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.38);
}

html body .server-map-country,
html body .server-map-connected {
  color: var(--primary-ink, var(--primary)) !important;
}
html body .server-map-marker {
  color: var(--on-primary, #ffffff) !important;
}
html:not([data-mode="dark"]) body [style*="color: #10b981"]:not(.btn):not(.status-badge),
html:not([data-mode="dark"]) body [style*="color:#10b981"]:not(.btn):not(.status-badge),
html:not([data-mode="dark"]) body [style*="color: #10B981"]:not(.btn):not(.status-badge),
html:not([data-mode="dark"]) body [style*="color:#10B981"]:not(.btn):not(.status-badge) {
  color: #047857 !important;
}

/* ================================================================
   THEME-COLORED MENUBAR, TOP BRAND CARD, TOP KPI CARD &
   CLOUDFLARE MOBILE VIEW DRAWER ON/OFF TOGGLE (2026-10)
   ================================================================ */

/* 1. Top Menubar (.topbar) in Dynamic Theme Color */
html body .topbar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent, var(--primary)) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16) !important;
}
html body .topbar,
html body .topbar :is(button, a, span, div, i, svg, #topbarBrandTitle, #topbarUsername) {
  color: var(--on-primary, #ffffff) !important;
  stroke: var(--on-primary, #ffffff) !important;
}
html body .topbar :is(.mobile-menu-btn, .topbar-logout-btn, .icon-btn-header),
html body #pzModeToggle {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: var(--on-primary, #ffffff) !important;
}
html body .topbar :is(.mobile-menu-btn, .topbar-logout-btn, .icon-btn-header):hover,
html body #pzModeToggle:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}
@media (min-width: 993px) {
  html body.reference-sidebar-collapsed .topbar-left > div:has(> #topbarLogoContainer) {
    display: flex !important;
  }
}

/* 2. Desktop Sidebar Top Brand Card (.sidebar .brand-header) in Dynamic Theme Color */
html body .sidebar .brand-header,
html:not([data-mode="dark"]) body .sidebar .brand-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent, var(--primary)) 100%) !important;
  border-radius: 12px !important;
  margin: 4px 12px 14px 12px !important;
  padding: 13px 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}
html body .sidebar .brand-header :is(.brand-title, .brand-subtitle, #sidebarBrandTitle, #sidebarRoleSubtitle),
html:not([data-mode="dark"]) body .sidebar .brand-header :is(.brand-title, .brand-subtitle, #sidebarBrandTitle, #sidebarRoleSubtitle) {
  color: var(--on-primary, #ffffff) !important;
}
html body .sidebar .brand-header .brand-logo-icon,
html:not([data-mode="dark"]) body .sidebar .brand-header .brand-logo-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: var(--on-primary, #ffffff) !important;
}
html body .sidebar .brand-header .drawer-close-btn,
html:not([data-mode="dark"]) body .sidebar .brand-header .drawer-close-btn {
  background: rgba(255, 255, 255, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: var(--on-primary, #ffffff) !important;
}

/* 3. Mobile View (<= 992px): Single Brand Logo & Name in Topbar, NO Duplicate Brand Header in Drawer */
@media (max-width: 992px) {
  html body .topbar {
    z-index: 10002 !important;
  }
  html body .topbar-left > div:has(> #topbarLogoContainer) {
    display: flex !important;
  }
  html body .sidebar,
  html:not([data-mode="dark"]) body .sidebar {
    top: 64px !important;
    height: calc(100dvh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    padding: 8px 0 0 !important;
    z-index: 10000 !important;
  }
  html body .sidebar-backdrop,
  html body .sidebar-backdrop.active {
    top: 64px !important;
    height: calc(100dvh - 64px) !important;
    z-index: 9999 !important;
  }
  html body .sidebar .brand-header,
  html:not([data-mode="dark"]) body .sidebar .brand-header {
    display: none !important;
  }
}

/* 4. Top Dashboard KPI Card (.uvpn-kpi-card.kpi-online) in Dynamic Theme Color */
html body .uvpn-kpi-card.kpi-online {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent, var(--primary)) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16) !important;
}
html body .uvpn-kpi-card.kpi-online :is(.uvpn-kpi-title, .uvpn-kpi-val, .uvpn-kpi-sub, .uvpn-kpi-meta-row, .uvpn-kpi-meta-row span, #kpiSubOnlineLeft, #kpiSubOnlineRight),
html:not([data-mode="dark"]) body .uvpn-kpi-card.kpi-online :is(.uvpn-kpi-title, .uvpn-kpi-val, .uvpn-kpi-sub, .uvpn-kpi-meta-row, .uvpn-kpi-meta-row span, #kpiSubOnlineLeft, #kpiSubOnlineRight) {
  color: var(--on-primary, #ffffff) !important;
}
html body .uvpn-kpi-card.kpi-online .uvpn-kpi-icon-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: var(--on-primary, #ffffff) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
}
html body .uvpn-kpi-card.kpi-online .uvpn-kpi-icon-badge :is(i, svg) {
  color: var(--on-primary, #ffffff) !important;
  stroke: var(--on-primary, #ffffff) !important;
}
html body .uvpn-kpi-card.kpi-online .uvpn-kpi-progress-track {
  background: rgba(255, 255, 255, 0.26) !important;
}
html body .uvpn-kpi-card.kpi-online .uvpn-kpi-progress-fill {
  background: var(--on-primary, #ffffff) !important;
}