/* ==========================================================================
   pp-ui.css — shared design system for the whole panel
   Carries the landing page's depth, contrast and motion into every screen:
   user panel · public pages (blog / faq / legal / auth) · admin.
   Loaded LAST on every page, after user-panel.css / seoclevers-theme.css.
   Palette: #1a1a1d page · #202024 card · #131313 input · #28cb69 / #0fac4e
   ========================================================================== */

:root {
  --ui-bg-1: #202024;
  --ui-bg-2: #1a1a1d;
  --ui-bg-3: #131313;
  --ui-bg-4: #1c2434;
  --ui-line: rgba(255, 255, 255, .075);
  --ui-line-2: rgba(255, 255, 255, .12);
  --ui-accent: #28cb69;
  --ui-accent-2: #0fac4e;
  --ui-accent-3: #7bf0a8;
  --ui-text: #ffffff;
  --ui-text-2: #c3c9d6;
  --ui-muted: #8b93a7;
  --ui-dim: #6f7789;
  --ui-green: #2fcd94;
  --ui-red: #e93e3e;
  --ui-gold: #ffd700;
  --ui-shadow: 0 18px 44px rgba(0, 0, 0, .42);
  --ui-shadow-sm: 0 10px 26px rgba(0, 0, 0, .32);
  --ui-inset: inset 0 1px 0 rgba(255, 255, 255, .055);
  --ui-glow: 0 12px 30px rgba(40, 203, 105, .34);
  --ui-r-card: 15px;
  --ui-r-ctl: 10px;
}

/* ======================================================================
   1. BASE
   ====================================================================== */
body {
  background-color: var(--ui-bg-2) !important;
  color: var(--ui-text-2) !important;
}
body h1, body h2, body h3, body h4, body h5, body h6,
.card-title, .section-title, .page-title {
  color: var(--ui-text) !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}
body p, body li { line-height: 1.9; }
::selection { background: var(--ui-accent); color: #fff; }

/* ======================================================================
   2. SURFACES
   ====================================================================== */
.card,
.stat-card,
.profit-card,
.blog-card,
.auth-card,
.error-card,
.metric-card,
.widget,
.panel,
.box {
  background: var(--ui-bg-1) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-card) !important;
  box-shadow: var(--ui-shadow), var(--ui-inset) !important;
  color: var(--ui-text-2) !important;
}
.card-header, .card-footer, .panel-heading, .panel-footer {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-text) !important;
}
/* interactive cards lift on hover */
.blog-card,
.service-item,
.service-pill-row,
.pkg-card,
.ticket-category-tile,
.country-item,
.login-pm {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.blog-card:hover,
.service-item:hover,
.service-pill-row:hover,
.pkg-card:hover,
.country-item:hover {
  border-color: rgba(40, 203, 105, .42) !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .5), var(--ui-inset) !important;
  transform: translateY(-3px);
}
/* the primary card on a screen gets a purple rim */
.auth-card,
.stat-card-points,
.user-panel-body .card.card-dark {
  border-color: rgba(40, 203, 105, .2) !important;
}

/* ======================================================================
   3. BUTTONS
   ====================================================================== */
.btn-primary,
.btn-gold,
.btn-signin-pill,
.btn-primary-panel,
.btn-submit,
.btn-admin-primary,
.btn-order,
.user-panel-body .btn-primary:not(.btn-keep-custom),
.admin-layout .btn-primary {
  background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-2) 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: var(--ui-r-ctl) !important;
  box-shadow: 0 10px 26px rgba(40, 203, 105, .34), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover,
.btn-gold:hover,
.btn-signin-pill:hover,
.btn-primary-panel:hover,
.btn-submit:hover,
.btn-order:hover,
.user-panel-body .btn-primary:not(.btn-keep-custom):hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 34px rgba(40, 203, 105, .48), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  color: #FFFFFF !important;
}
.btn-outline,
.btn-secondary {
  background: var(--ui-bg-1) !important;
  border: 1px solid var(--ui-line-2) !important;
  color: var(--ui-text-2) !important;
  border-radius: var(--ui-r-ctl) !important;
  transition: .18s ease;
}
.btn-outline:hover,
.btn-secondary:hover {
  border-color: var(--ui-accent) !important;
  color: #FFFFFF !important;
  background: rgba(40, 203, 105, .12) !important;
}

/* ======================================================================
   4. FORMS
   ====================================================================== */
input, select, textarea, .form-control, .form-select {
  background-color: var(--ui-bg-3) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  color: #FFFFFF !important;
  border-radius: var(--ui-r-ctl) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input::placeholder, textarea::placeholder { color: var(--ui-dim) !important; }
input:hover, select:hover, textarea:hover { border-color: rgba(40, 203, 105, .4) !important; }
input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px rgba(40, 203, 105, .18) !important;
  background-color: var(--ui-bg-3) !important;
  color: #fff !important;
}
select option { background: var(--ui-bg-3) !important; color: #fff !important; }
label, .form-label { color: var(--ui-text-2) !important; }

/* ======================================================================
   5. TABLES
   ====================================================================== */
.table { color: var(--ui-text-2) !important; border-color: var(--ui-line) !important; }
.table thead th,
.table > thead > tr > th {
  background: var(--ui-bg-3) !important;
  color: #FFFFFF !important;
  border-color: var(--ui-line) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.table tbody td,
.table > tbody > tr > td {
  border-color: rgba(255, 255, 255, .06) !important;
  color: var(--ui-text-2) !important;
  background: transparent !important;
}
.table tbody tr:hover td,
.table > tbody > tr:hover > td { background: rgba(40, 203, 105, .07) !important; }
.table tbody tr:last-child td { border-bottom: 0 !important; }

/* ======================================================================
   6. BADGES · ALERTS · PILLS
   ====================================================================== */
.badge, .pill, .tag, .label {
  background: rgba(40, 203, 105, .14) !important;
  color: var(--ui-accent-3) !important;
  border: 1px solid rgba(40, 203, 105, .28) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.badge-success, .badge-green { background: rgba(47, 205, 148, .14) !important; color: #6ff0be !important; border-color: rgba(47, 205, 148, .3) !important; }
.badge-danger, .badge-red { background: rgba(233, 62, 62, .14) !important; color: #ff9c9c !important; border-color: rgba(233, 62, 62, .3) !important; }
.badge-warning, .badge-yellow { background: rgba(247, 158, 27, .14) !important; color: #ffc97a !important; border-color: rgba(247, 158, 27, .3) !important; }

.alert { border-radius: 12px !important; border-width: 1px !important; }
.alert-success { background: rgba(47, 205, 148, .1) !important; border-color: rgba(47, 205, 148, .35) !important; color: #6ff0be !important; }
.alert-danger, .alert-error { background: rgba(233, 62, 62, .1) !important; border-color: rgba(233, 62, 62, .35) !important; color: #ff9c9c !important; }
.alert-warning { background: rgba(247, 158, 27, .1) !important; border-color: rgba(247, 158, 27, .35) !important; color: #ffc97a !important; }
.alert-info { background: rgba(40, 203, 105, .1) !important; border-color: rgba(40, 203, 105, .35) !important; color: #d9b8ff !important; }

/* ======================================================================
   7. NAVIGATION SHELLS
   ====================================================================== */
.site-header, .guest .header-wrapper, .admin-header, .user-topbar {
  background: rgba(23, 31, 46, .92) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* --- auth / guest header on small screens -----------------------------
   The pill header keeps 28px side padding and 15px gaps from the desktop
   design, which left only ~250px for the logo + link + currency + language
   on a 390px phone — the "create account" link wrapped onto three lines.
   Tighten the shell and forbid that link from wrapping. */
@media (max-width: 575.98px) {
  .guest .header-wrapper {
    padding: 6px 12px !important;
    gap: 6px !important;
    min-height: 52px !important;
  }
  .guest .navbar-brand {
    font-size: 17px !important;
    gap: 7px !important;
  }
  .guest .navbar-brand img { max-height: 30px !important; }
  .guest .header-wrapper > div { gap: 6px !important; }
  .guest .header-wrapper > div > a {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 2px !important;
  }
  .guest .header-wrapper .lang-button {
    min-width: 34px !important;
    padding: 6px 8px !important;
  }
}
.user-sidebar, .admin-sidebar {
  background: var(--ui-bg-3) !important;
  border-inline-end: 1px solid var(--ui-line) !important;
}
.user-sidebar-item.active a,
.admin-nav-item.active a,
.admin-nav-item.active {
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 22px rgba(40, 203, 105, .4) !important;
}
.user-sidebar-item a:hover,
.admin-nav-item:not(.active) a:hover {
  background: rgba(40, 203, 105, .12) !important;
  color: #fff !important;
}
footer, .user-panel-footer {
  background: var(--ui-bg-3) !important;
  border-top: 1px solid var(--ui-line) !important;
  color: var(--ui-muted) !important;
}
footer a { color: var(--ui-text-2) !important; }
footer a:hover { color: var(--ui-accent-3) !important; }

/* ======================================================================
   8. MOTION · FOCUS · SCROLLBAR
   ====================================================================== */
/* shine sweep on the primary actions */
.btn-primary, .btn-order, .btn-submit {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-order::after, .btn-submit::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  width: 38%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .55s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.btn-primary:hover::after, .btn-order:hover::after, .btn-submit:hover::after { inset-inline-start: 120%; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ui-bg-3); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ui-accent-2), var(--ui-accent));
  border-radius: 8px;
  border: 2px solid var(--ui-bg-3);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--ui-accent), var(--ui-accent-3)); }

/* top scroll-progress bar (injected by pp-ui.js) */
#ppUiProgress {
  position: fixed; top: 0; inset-inline: 0; height: 3px;
  z-index: 2000; pointer-events: none; background: transparent;
}
#ppUiProgress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #0fac4e, #28cb69, #e0c6ff);
  box-shadow: 0 0 14px rgba(40, 203, 105, .75);
  transition: width .1s linear;
}

/* subtle page-level ambient glow (panel + guest shells) */
.user-content-area { position: relative; }
.user-content-area::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: -40px;
  width: 520px; height: 340px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 30% 30%, rgba(40, 203, 105, .10), transparent 70%);
}
.user-content-area > * { position: relative; z-index: 1; }

/* ======================================================================
   9. EMPTY STATES & MISC
   ====================================================================== */
.text-muted, .muted { color: var(--ui-muted) !important; }
hr { border-color: var(--ui-line) !important; }
.dropdown-menu, .modal-content, .popover {
  background: var(--ui-bg-1) !important;
  border: 1px solid var(--ui-line-2) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important;
  color: var(--ui-text-2) !important;
}
.dropdown-item:hover { background: rgba(40, 203, 105, .12) !important; color: #fff !important; }
.progress { background: var(--ui-bg-3) !important; border-radius: 999px !important; }
.progress-bar { background: linear-gradient(90deg, var(--ui-accent-2), var(--ui-accent)) !important; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .btn-order::after, .btn-submit::after { display: none !important; }
  .blog-card:hover, .service-item:hover, .service-pill-row:hover, .pkg-card:hover { transform: none; }
}

/* ======================================================================
   10. USER PANEL — component-level match with the landing-page theme
   Same tokens as the landing page: 15px cards, #131313 inputs,
   purple gradient actions, deep shadows + top inset highlight.
   ====================================================================== */

/* ---------------------------------------------------------------- shell -- */
.user-panel-body { background: var(--ui-bg-2) !important; }
.user-panel-layout,
.user-main-wrapper { background: transparent !important; }
.user-content-area { background: transparent !important; padding-top: 24px; }

/* --------------------------------------------------------------- sidebar - */
.user-sidebar {
  background: var(--ui-bg-3) !important;
  border-inline-end: 1px solid var(--ui-line) !important;
  box-shadow: 14px 0 44px rgba(0, 0, 0, .38) !important;
}
.user-sidebar-header { border-bottom: 1px solid var(--ui-line) !important; }
.user-sidebar-menu { padding: 14px 12px !important; }

.user-sidebar-item > a,
.user-sidebar-item > button,
.user-sidebar-more-btn,
.user-sidebar-sub-menu a {
  border-radius: var(--ui-r-ctl) !important;
  padding: 12px 16px !important;
  color: var(--ui-text-2) !important;
  font-weight: 600 !important;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.user-sidebar-item > a:hover,
.user-sidebar-more-btn:hover,
.user-sidebar-sub-menu a:hover {
  background: rgba(40, 203, 105, .12) !important;
  color: #FFFFFF !important;
  transform: translateX(-3px);
}
.user-sidebar-item.active > a,
.user-sidebar-item.active > a:visited {
  background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-2) 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 26px rgba(40, 203, 105, .4) !important;
  transform: none;
}
.user-sidebar-item.active > a i,
.user-sidebar-item.active > a span { color: #FFFFFF !important; }
.user-sidebar-sub-menu { border-inline-start: 1px solid rgba(40, 203, 105, .28) !important; margin-inline-start: 14px !important; }

/* ---------------------------------------------------------------- topbar - */
.user-topbar {
  background: rgba(23, 31, 46, .94) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.user-topbar-pill {
  background: var(--ui-bg-1) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  box-shadow: var(--ui-inset) !important;
}
.user-topbar-search { position: relative; }
.user-topbar-search input {
  height: 46px !important;
  min-width: 240px;
  background: var(--ui-bg-3) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: var(--ui-r-ctl) !important;
  color: #FFFFFF !important;
  padding: 0 16px !important;
  box-shadow: var(--ui-inset);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.user-topbar-search input:focus {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px rgba(40, 203, 105, .18) !important;
}
.user-topbar-search i { color: var(--ui-muted) !important; }
.user-action-circle {
  background: var(--ui-bg-1) !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-text-2) !important;
  transition: border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.user-action-circle:hover {
  border-color: var(--ui-accent) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(40, 203, 105, .3) !important;
}

/* ------------------------------------------------------------ stat cards - */
.user-stats-grid { gap: 16px !important; }
.stat-card-white,
.stat-card-points,
.stat-card-status {
  position: relative;
  overflow: hidden;
  background: var(--ui-bg-1) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-card) !important;
  box-shadow: var(--ui-shadow), var(--ui-inset) !important;
}
.stat-card-white::before,
.stat-card-points::before,
.stat-card-status::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ui-accent), transparent);
  opacity: .7;
}
.stat-card-white .white-val,
.stat-card-points .points-val,
.stat-card-status .status-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 6px 22px rgba(40, 203, 105, .3);
}
.stat-card-white .white-label,
.stat-card-points .points-tag,
.stat-card-status .status-sub { color: var(--ui-muted) !important; }
.stat-card-points .btn-redeem {
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ui-r-ctl) !important;
  box-shadow: 0 10px 24px rgba(40, 203, 105, .34) !important;
}

/* --------------------------------------------------------- social grid --- */
.social-network-filter-section { margin-bottom: 24px !important; }
.social-net-circle {
  background: var(--ui-bg-1) !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-inset) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.social-net-item:hover .social-net-circle {
  border-color: rgba(40, 203, 105, .45) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45) !important;
}
.social-net-item.active .social-net-circle {
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(40, 203, 105, .28), 0 10px 26px rgba(40, 203, 105, .4) !important;
}
.social-net-name, .social-net-label { color: var(--ui-muted) !important; }
.social-net-item.active .social-net-name,
.social-net-item.active .social-net-label { color: var(--ui-accent-3) !important; }

/* ---------------------------------------------------------- filter bar --- */
.btn-toggle-filter {
  background: var(--ui-bg-1) !important;
  border: 1px solid var(--ui-line-2) !important;
  color: var(--ui-text-2) !important;
  border-radius: var(--ui-r-ctl) !important;
  transition: .18s ease;
}
.btn-toggle-filter:hover {
  border-color: var(--ui-accent) !important;
  color: #FFFFFF !important;
  background: rgba(40, 203, 105, .12) !important;
}

/* -------------------------------------------------------------- content -- */
.user-content-area .card { border-radius: var(--ui-r-card) !important; }
.user-content-area .card-title { color: #FFFFFF !important; font-weight: 700 !important; }

/* --------------------------------------------------------------- footer -- */
.user-panel-footer {
  background: var(--ui-bg-3) !important;
  border-top: 1px solid var(--ui-line) !important;
  color: var(--ui-muted) !important;
}
.user-footer-socials a {
  background: var(--ui-bg-1) !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-text-2) !important;
  transition: .18s ease;
}
.user-footer-socials a:hover {
  border-color: var(--ui-accent) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* --------------------------------------------------------- mobile drawer - */
.user-sidebar-backdrop { background: rgba(6, 9, 14, .7) !important; backdrop-filter: blur(4px); }

/* ----------------------------------------------------------------------
   The panel stylesheet forces a LIGHT body (`body.user-panel-body`,
   specificity 0-1-1). These rules out-rank it so the dark shell wins.
   ---------------------------------------------------------------------- */
html body.user-panel-body,
html body.user-panel-body.dark {
  background-color: var(--ui-bg-2) !important;
  color: var(--ui-text-2) !important;
}
html body.user-panel-body h1,
html body.user-panel-body h2,
html body.user-panel-body h3,
html body.user-panel-body h4,
html body.user-panel-body h5,
html body.user-panel-body h6 { color: var(--ui-text) !important; }

/* ---------------------------------------------------- panel refinements -- */
/* section titles inside the panel were rendering near-black */
.social-filter-title,
.social-filter-title span,
.social-network-title,
.user-content-area .card-title,
.user-content-area h1, .user-content-area h2, .user-content-area h3,
.user-content-area h4, .user-content-area h5, .user-content-area h6 {
  color: #FFFFFF !important;
}

/* make form borders actually visible on the dark surfaces */
html body.user-panel-body select,
html body.user-panel-body input:not([type="checkbox"]):not([type="radio"]),
html body.user-panel-body textarea,
html body.user-panel-body .form-control,
html body.user-panel-body .form-select {
  background-color: var(--ui-bg-3) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #FFFFFF !important;
  box-shadow: var(--ui-inset) !important;
}
html body.user-panel-body select:hover,
html body.user-panel-body input:not([type="checkbox"]):not([type="radio"]):hover,
html body.user-panel-body .form-control:hover,
html body.user-panel-body .form-select:hover { border-color: rgba(40, 203, 105, .45) !important; }
html body.user-panel-body select:focus,
html body.user-panel-body input:not([type="checkbox"]):not([type="radio"]):focus,
html body.user-panel-body .form-control:focus,
html body.user-panel-body .form-select:focus {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px rgba(40, 203, 105, .18) !important;
}
html body.user-panel-body select option { background: var(--ui-bg-3) !important; color: #fff !important; }

/* the legacy gold-bordered toggle */
.btn-toggle-filter {
  border-color: var(--ui-line-2) !important;
  background: var(--ui-bg-1) !important;
  color: var(--ui-text-2) !important;
}
.btn-toggle-filter:hover { border-color: var(--ui-accent) !important; color: #fff !important; }

/* helper panels inside the order form */
.user-content-area .alert,
.user-content-area .info-box,
.user-content-area .hint-box {
  background: rgba(40, 203, 105, .08) !important;
  border: 1px solid rgba(40, 203, 105, .28) !important;
  color: #d9b8ff !important;
  border-radius: 12px !important;
}

/* the topbar search was stretching across the whole bar */
.user-topbar-search { flex: 0 1 auto !important; }
.user-topbar-search input { width: 300px !important; max-width: 100% !important; }
@media (max-width: 1199.98px) { .user-topbar-search input { width: 200px !important; } }
@media (max-width: 767.98px) { .user-topbar-search input { width: 100% !important; } }

/* ======================================================================
   11. THEME TOKEN OVERRIDE — the single source of truth for colour
   `style.min.css` still ships the legacy palette (`--primary: #28cb69`,
   a cyber yellow) and `admin.css` an admin blue. These `:root` / `[data-*]`
   declarations are loaded last, so every `var(--primary)`, `var(--info)`,
   `var(--admin-blue)` … across the whole script resolves to the theme.
   ====================================================================== */
:root,
html {
  /* --- brand ------------------------------------------------------- */
  --primary: #28cb69;
  --primary-hover: #0fac4e;
  --primary-light: #7bf0a8;
  --primary-glow: rgba(40, 203, 105, .38);
  --primary-rgb: 40, 203, 105;
  --primary-text: #ffffff;
  --secondary: #0fac4e;
  --accent: #7bf0a8;

  /* --- semantic ---------------------------------------------------- */
  --info: #28cb69;
  --info-bg: rgba(40, 203, 105, .12);
  --success: #2fcd94;
  --success-bg: rgba(47, 205, 148, .12);
  --warning: #f79e1b;
  --warning-bg: rgba(247, 158, 27, .12);
  --danger: #e93e3e;
  --danger-bg: rgba(233, 62, 62, .12);
  --error: #e93e3e;

  /* --- surfaces ---------------------------------------------------- */
  --bg-base: #1a1a1d;
  --bg-surface: #202024;
  --bg-surface-elevated: #1c2434;
  --bg-input: #131313;
  --bg-dark: #131313;
  --bg-surface-dark: #202024;
  --bg-card-dark: #202024;
  --bg-input-dark: #131313;
  --bg-light: #202024;
  --bg-card-light: #202024;
  --bg-input-light: #131313;

  /* --- lines & text ------------------------------------------------ */
  --border-color: rgba(255, 255, 255, .08);
  --border-highlight: rgba(40, 203, 105, .45);
  --border-dark: rgba(255, 255, 255, .08);
  --border-light: rgba(255, 255, 255, .08);
  --text-primary: #ffffff;
  --text-secondary: #c3c9d6;
  --text-muted: #8b93a7;
  --text-dim: #6f7789;
  --text-dark: #ffffff;
  --text-light: #ffffff;
  --text-gray: #8b93a7;

  /* --- shape & shadow ---------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 15px;
  --shadow-card: 0 18px 44px rgba(0, 0, 0, .42);
}

/* admin palette: blue -> purple */
:root,
html,
html[data-admin-theme="light"],
html[data-admin-theme="dark"] {
  --admin-blue: #28cb69;
  --admin-blue-hover: #0fac4e;
  --admin-blue-dark: #0fac4e;
  --admin-blue-light: rgba(40, 203, 105, .14);
  --admin-blue-glow: rgba(40, 203, 105, .35);
  --admin-yellow: #28cb69;
  --admin-yellow-hover: #0fac4e;
  --admin-bg-base: #1a1a1d;
  --admin-bg-sidebar: #131313;
  --admin-bg-card: #202024;
  --admin-bg-elevated: #202024;
  --admin-bg-subtle: #131313;
  --admin-border: rgba(255, 255, 255, .08);
  --admin-border-subtle: rgba(255, 255, 255, .06);
  --admin-black: #202024;
  --admin-black-soft: #c3c9d6;
  --admin-black-surface: #131313;
  --admin-text-main: #ffffff;
  --admin-text-muted: #8b93a7;
  --admin-text-dim: #6f7789;
  --admin-shadow-card: 0 18px 44px rgba(0, 0, 0, .42);
}

/* ==========================================================================
   Section 12 — root-level horizontal overflow guard
   --------------------------------------------------------------------------
   Off-canvas overlays (mobile drawer, sidebar drawer, ambient glow spheres)
   are position:fixed and parked outside the viewport via translateX(±100%).
   Chrome still counts a fixed element that extends past the viewport edge
   toward the scrollable area when neither <html> nor <body> clips overflow.
   That produced a phantom ~130px of horizontal scroll on pages whose body
   class is NOT `.guest` / not covered by the seoclevers guard.
   Clipping on the root is safe: nothing legitimately scrolls sideways at
   this level (horizontal scrollers use their own overflow-x:auto containers).
   ========================================================================== */
html {
  overflow-x: hidden;
  max-width: 100%;
}
html body {
  overflow-x: hidden;
  max-width: 100%;
}
/* Keep sticky / pinned elements working after clipping the root */
html body.user-panel-body,
html body.guest {
  overflow-x: clip;
  overflow-y: visible;
}
/* Overlays must never be able to widen the document */
.mobile-drawer,
.mobile-drawer-backdrop,
.user-sidebar,
.user-sidebar-backdrop,
.mobile-bottom-nav,
.ambient-glow-sphere {
  max-width: 100vw;
}
@media (max-width: 768px) {
  .mobile-drawer { width: min(320px, 88vw) !important; }
  .user-sidebar { width: min(270px, 82vw) !important; }
}