:root {
  --primary: #6366f1;
  --secondary: #a855f7;
  --accent: #ec4899;
  --glass: rgba(15, 23, 42, 0.72);
  --glass-border: rgba(255,255,255,.10);
  --text-main: #f8fafc;
  --text-dim: #94a3b8;
  --page-bg: #0f172a;
}

html, body { min-height: 100%; }
body {
  background: var(--page-bg) !important;
  color: var(--text-main) !important;
  font-family: 'Outfit', sans-serif !important;
  position: relative;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-color: #0f172a;
  background-image:
    radial-gradient(at 0% 0%, rgba(99,102,241,.18) 0, transparent 50%),
    radial-gradient(at 100% 0%, rgba(168,85,247,.18) 0, transparent 50%),
    radial-gradient(at 100% 100%, rgba(236,72,153,.15) 0, transparent 50%),
    radial-gradient(at 0% 100%, rgba(99,102,241,.15) 0, transparent 50%);
}
body::before {
  content: ''; position: fixed; width: 420px; height: 420px; left: -140px; top: -140px;
  border-radius: 50%; filter: blur(90px); opacity: .35; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
#content { max-width: 1420px !important; padding-top: 28px !important; }
main { min-height: calc(100vh - 90px); }

/* Exact reference glass treatment for existing component names */
.panel-card, .kpi-card, .stat-card, .settings-card, .modal-card, .auth-card,
.search-form-container, .status-wrap, .keys-header, .otp-card {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.panel-head, .panel-body { background: transparent !important; border-color: var(--glass-border) !important; }
.panel-head { padding: 22px 26px !important; }
.panel-body { padding: 24px 26px !important; }
.title, .page-title, .section-subtitle, .panel-head h1, .panel-head h2, .panel-head h3,
.kpi-val, .stat-value, .modal-title-custom { color: #fff !important; font-family: 'Outfit', sans-serif !important; }
.title, .page-title { font-weight: 700 !important; letter-spacing: -.02em; }
.kpi-lbl, .stat-label, .form-label, .form-text-custom, .text-muted, small { color: var(--text-dim) !important; }

.form-control-custom, .input-field, .form-select, input.form-control, select.form-control,
textarea.form-control, .form-control, .input-glass {
  width: 100%; color: #fff !important; background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--glass-border) !important; border-radius: 14px !important;
  min-height: 48px; padding: 13px 16px !important; font-family: 'Outfit', sans-serif !important;
}
.form-control-custom:focus, .input-field:focus, .form-select:focus, .form-control:focus,
.input-glass:focus {
  background: rgba(255,255,255,.07) !important; border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,.16) !important; outline: none !important;
}
.form-label { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 8px !important; }
::placeholder { color: #64748b !important; opacity: 1; }

.btn-custom, .btn-primary, .btn-primary-full, .btn-save, .btn-action, .btn-extend, .btn-success,
.btn-info, .btn-glass, .approve-btn, .btn-action-approve, .btn-action-edit {
  border: 0 !important; border-radius: 14px !important; color: #fff !important;
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  box-shadow: 0 10px 15px -3px rgba(99,102,241,.30) !important;
  font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; transition: .3s ease !important;
}
.btn-custom:hover, .btn-primary:hover, .btn-primary-full:hover, .btn-save:hover, .btn-action:hover,
.btn-extend:hover, .btn-success:hover, .btn-info:hover, .btn-glass:hover, .approve-btn:hover,
.btn-action-approve:hover, .btn-action-edit:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-danger, .btn-danger-custom, .btn-action-delete, .decline-btn, .btn-action-decline {
  border: 0 !important; border-radius: 14px !important; color: #fff !important;
  background: linear-gradient(135deg, #ec4899, #ef4444) !important;
}

.table-responsive { border-radius: 18px; overflow-x: auto; }
table, .table { color: var(--text-main) !important; border-color: var(--glass-border) !important; }
.table thead th { color: var(--text-dim) !important; background: rgba(255,255,255,.04) !important; border-color: var(--glass-border) !important; }
.table tbody td { color: #e2e8f0 !important; border-color: var(--glass-border) !important; background: transparent !important; }
.table-hover tbody tr:hover { background: rgba(99,102,241,.09) !important; }
.badge, .badge-neon, .badge-neon-info, .badge-reseller, .badge-admin, .badge-owner,
.badge-active, .badge-expired, .badge-banned { border-radius: 999px !important; }
.alert-custom, .alert-success-custom, .alert-danger-custom, .alert-warning-custom, .alert-info-custom,
.cyber-alert-wrapper { background: rgba(15,23,42,.76) !important; border: 1px solid var(--glass-border) !important; border-radius: 14px !important; color: #e2e8f0 !important; }

/* Shared navigation converted to the reference glass language */
.top-nav { background: rgba(15,23,42,.72) !important; border-color: var(--glass-border) !important; backdrop-filter: blur(20px) !important; }
.nav-brand { font-family: 'Outfit', sans-serif !important; }
.nav-brand span { background: linear-gradient(to right,#fff,var(--text-dim)) !important; }
.theme-btn, .ham-btn { border-color: var(--glass-border) !important; background: rgba(255,255,255,.03) !important; border-radius: 14px !important; }
.slide-menu { background: rgba(15,23,42,.82) !important; border-color: var(--glass-border) !important; backdrop-filter: blur(24px) !important; }
.menu-links a { border-radius: 14px !important; }
.bottom-nav { background: rgba(15,23,42,.76) !important; border-color: var(--glass-border) !important; }
footer { background: rgba(15,23,42,.7) !important; border-color: var(--glass-border) !important; }

@media (max-width: 768px) {
  #content { padding-left: 14px !important; padding-right: 14px !important; }
  .panel-card, .kpi-card, .stat-card, .settings-card { border-radius: 18px !important; }
  .panel-head, .panel-body { padding: 18px !important; }
}

/* Reference auth-page composition */
body.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 20px; overflow-x: hidden; }
body.auth-page .top-nav, body.auth-page .nav-spacer, body.auth-page .menu-overlay,
body.auth-page .slide-menu, body.auth-page .bottom-dock-wrapper, body.auth-page footer { display: none !important; }
body.auth-page main { width: 100%; min-height: 0; }
body.auth-page #content { padding: 0 !important; max-width: 100% !important; }
.auth-wrap { width: 100%; max-width: 450px; margin: auto; position: relative; z-index: 2; animation: cardEntrance .8s cubic-bezier(.16,1,.3,1); }
.auth-card { padding: 0 !important; overflow: hidden; }
.auth-top { padding: 34px 40px 20px !important; border-bottom: 0 !important; text-align: center; }
.auth-logo { width: auto !important; height: auto !important; margin: 0 auto 8px !important; background: none !important; border: 0 !important; }
.auth-logo svg { width: 32px !important; height: 32px !important; fill: var(--primary) !important; filter: drop-shadow(0 0 10px rgba(99,102,241,.55)); }
.auth-title { color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 28px !important; font-weight: 700 !important; background: linear-gradient(to right,#fff,var(--text-dim)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-sub { color: var(--text-dim) !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; margin-top: 5px !important; }
.auth-body { padding: 20px 40px 28px !important; }
.auth-body .security-badge { background: rgba(99,102,241,.08) !important; border: 1px solid rgba(99,102,241,.20) !important; border-radius: 12px !important; color: var(--text-dim) !important; }
.form-label { color: var(--text-dim) !important; text-transform: none !important; letter-spacing: 0 !important; font-family: 'Outfit', sans-serif !important; }
.mb-field { margin-bottom: 22px !important; }
.auth-page .input-field { background: rgba(255,255,255,.03) !important; border: 1px solid var(--glass-border) !important; border-radius: 14px !important; padding: 14px 16px !important; min-height: 52px; }
.auth-page .input-field:focus { background: rgba(255,255,255,.07) !important; border-color: var(--primary) !important; box-shadow: 0 0 0 4px rgba(99,102,241,.15) !important; }
.pass-toggle { top: 39px !important; color: var(--text-dim) !important; }
.btn-primary-full { padding: 16px !important; border-radius: 14px !important; background: linear-gradient(135deg,var(--primary),var(--secondary)) !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; }
.auth-foot { padding: 14px 40px 30px !important; border-top: 0 !important; color: var(--text-dim) !important; }
.auth-foot p { color: var(--text-dim) !important; font-size: 14px !important; }
.auth-foot a { color: var(--primary) !important; }
.err-msg, .invalid-feedback { color: var(--accent) !important; }
@keyframes cardEntrance { from { opacity: 0; transform: scale(.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@media (max-width: 520px) { .auth-top { padding-left: 24px !important; padding-right: 24px !important; } .auth-body { padding-left: 24px !important; padding-right: 24px !important; } .auth-foot { padding-left: 24px !important; padding-right: 24px !important; } }

/* Targeted personalization and branding fixes; preserve the existing reference UI. */
.nav-brand .brand-icon { display: none !important; }
.nav-brand { gap: 0 !important; }
.nav-brand span {
  display: inline-block !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-shadow: 0 0 18px rgba(99,102,241,.35);
}

/* Every personalization swatch updates the same variables used by all pages. */
[data-accent="default"] {
  --accent-rgb: 99, 102, 241;
  --primary: #6366f1; --secondary: #a855f7; --accent: #ec4899;
  --secondary-rgb: 168, 85, 247;
}
[data-accent="cyan"] {
  --accent-rgb: 6, 182, 212;
  --primary: #06b6d4; --secondary: #2563eb; --accent: #22d3ee;
  --secondary-rgb: 37, 99, 235;
}
[data-accent="purple"] {
  --accent-rgb: 168, 85, 247;
  --primary: #a855f7; --secondary: #ec4899; --accent: #d946ef;
  --secondary-rgb: 236, 72, 153;
}
[data-accent="rose"] {
  --accent-rgb: 244, 63, 94;
  --primary: #f43f5e; --secondary: #f97316; --accent: #fb7185;
  --secondary-rgb: 249, 115, 22;
}
[data-accent="gold"] {
  --accent-rgb: 245, 158, 11;
  --primary: #f59e0b; --secondary: #ea580c; --accent: #fbbf24;
  --secondary-rgb: 234, 88, 12;
}

body::after {
  background-color: var(--page-bg) !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(var(--accent-rgb), .18) 0, transparent 50%),
    radial-gradient(at 100% 0%, rgba(var(--secondary-rgb), .18) 0, transparent 50%),
    radial-gradient(at 100% 100%, rgba(var(--accent-rgb), .14) 0, transparent 50%),
    radial-gradient(at 0% 100%, rgba(var(--secondary-rgb), .12) 0, transparent 50%) !important;
}

/* Theme toggle now affects every readable surface, not only the navigation. */
[data-theme="light"] {
  --page-bg: #eef2ff;
  --glass: rgba(255,255,255,.78);
  --glass-border: rgba(15,23,42,.12);
  --text-main: #0f172a;
  --text-dim: #64748b;
}
[data-theme="light"] body::after { background-color: #eef2ff !important; }
[data-theme="light"] .panel-card, [data-theme="light"] .kpi-card, [data-theme="light"] .stat-card,
[data-theme="light"] .settings-card, [data-theme="light"] .modal-card, [data-theme="light"] .auth-card,
[data-theme="light"] .search-form-container, [data-theme="light"] .status-wrap, [data-theme="light"] .keys-header,
[data-theme="light"] .otp-card, [data-theme="light"] .top-nav, [data-theme="light"] .slide-menu,
[data-theme="light"] .bottom-nav, [data-theme="light"] footer {
  background: var(--glass) !important;
  color: var(--text-main) !important;
  box-shadow: 0 20px 45px rgba(15,23,42,.12) !important;
}
[data-theme="light"] .title, [data-theme="light"] .page-title, [data-theme="light"] .section-subtitle,
[data-theme="light"] .panel-head h1, [data-theme="light"] .panel-head h2, [data-theme="light"] .panel-head h3,
[data-theme="light"] .kpi-val, [data-theme="light"] .stat-value, [data-theme="light"] .modal-title-custom,
[data-theme="light"] .auth-title, [data-theme="light"] .nav-brand span { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }
[data-theme="light"] .form-control-custom, [data-theme="light"] .input-field, [data-theme="light"] .form-select,
[data-theme="light"] input.form-control, [data-theme="light"] select.form-control, [data-theme="light"] textarea.form-control,
[data-theme="light"] .form-control, [data-theme="light"] .input-glass {
  color: #0f172a !important; background: rgba(255,255,255,.64) !important;
  border-color: rgba(15,23,42,.14) !important;
}
[data-theme="light"] .table tbody td, [data-theme="light"] .table, [data-theme="light"] table { color: #0f172a !important; }
[data-theme="light"] .table thead th { color: #475569 !important; background: rgba(15,23,42,.04) !important; }
[data-theme="light"] .menu-links a, [data-theme="light"] .menu-head .name, [data-theme="light"] .m-chip { color: #0f172a !important; }
[data-theme="light"] .nav-brand span { text-shadow: none; }

/* Make old page-specific green/blue accents inherit the active personalization. */
.btn-custom, .btn-primary, .btn-primary-full, .btn-save, .btn-action, .btn-extend, .btn-success,
.btn-info, .btn-glass, .approve-btn, .btn-action-approve, .btn-action-edit,
.kpi-icon, .stat-icon, .badge-neon, .badge-neon-info, .status-badge, .status-text,
.accent-dot, .cyber-alert-icon, .menu-links a:hover i, .b-nav-item:hover i { color: var(--accent) !important; }
.btn-custom, .btn-primary, .btn-primary-full, .btn-save, .btn-action, .btn-extend, .btn-success,
.btn-info, .btn-glass, .approve-btn, .btn-action-approve, .btn-action-edit { color: #fff !important; background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; }

/* Final screenshot-matched corrections. */
.nav-brand { min-width: max-content !important; overflow: visible !important; }
.nav-brand .brand-name {
  display: inline-block !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-shadow: 0 0 16px rgba(var(--accent-rgb), .45) !important;
}
[data-theme="light"] .nav-brand .brand-name { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; text-shadow: none !important; }

/* Success/info/error surfaces use the selected personalization color instead of old fixed green/blue. */
.alert-custom, .alert-success-custom, .alert-info-custom, .alert-warning-custom, .alert-danger-custom,
.cyber-alert-wrapper, .status-wrap {
  background: rgba(var(--accent-rgb), .12) !important;
  border: 1px solid rgba(var(--accent-rgb), .42) !important;
  color: var(--text-main) !important;
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), .16) !important;
}
.alert-custom *, .alert-success-custom *, .alert-info-custom *, .alert-warning-custom *, .alert-danger-custom *,
.cyber-alert-wrapper *, .status-wrap * { color: var(--text-main) !important; }
.alert-custom i, .alert-success-custom i, .alert-info-custom i, .alert-warning-custom i, .alert-danger-custom i,
.cyber-alert-icon, .cyber-alert-wrapper .bi-check-circle-fill, .cyber-alert-wrapper .bi-check-lg { color: var(--accent) !important; }

/* Global component-level inheritance for every view. */
.kpi-card, .stat-card, .panel-card, .settings-card, .modal-card, .keys-header, .search-form-container,
.auth-card, .otp-card { border-top-color: rgba(var(--accent-rgb), .55) !important; }
.kpi-icon, .stat-icon, .title-icon, .context-badge, .status-badge, .badge-neon, .badge-neon-info,
.badge-active, .badge-owner, .badge-admin, .badge-reseller { border-color: rgba(var(--accent-rgb), .45) !important; background-color: rgba(var(--accent-rgb), .14) !important; color: var(--accent) !important; }
.form-control-custom:focus, .input-field:focus, .form-select:focus, .form-control:focus, .input-glass:focus,
.search-form-container:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15) !important; }
.table-hover tbody tr:hover { background: rgba(var(--accent-rgb), .10) !important; }
.menu-links a:hover, .b-nav-item:hover { color: var(--accent) !important; background: rgba(var(--accent-rgb), .10) !important; }

/* Header correction: keep shield logo, show dynamic Master Settings name, remove day/night button only. */
.nav-brand { gap: 12px !important; min-width: max-content !important; overflow: visible !important; }
.nav-brand .brand-icon { display: block !important; width: 32px !important; height: 32px !important; fill: url(#grad) !important; }
.nav-brand .brand-name {
  display: inline-block !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
[data-theme="light"] .nav-brand .brand-name { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; background: none !important; opacity: 1 !important; visibility: visible !important; }
/* Keep personalization controls visibly tied to the active global accent. */
html[data-accent] .t-btn.active { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .28), 0 0 18px rgba(var(--accent-rgb), .45) !important; }
html[data-accent] .t-btn:hover { border-color: var(--accent) !important; }
html[data-accent] .progress-bar, html[data-accent] .progress-fill, html[data-accent] .loading-bar,
html[data-accent] .accent-line, html[data-accent] .active-line { background: var(--accent) !important; }
html[data-accent] .accent-text, html[data-accent] .text-accent, html[data-accent] .text-primary,
html[data-accent] .link-accent { color: var(--accent) !important; }