/* =============================================================================
   WME Neo — core skin. Additive, scoped under html[data-skin="neo"].
   Classic renders untouched when the attribute is absent.
   Sections: shell · typography · buttons · forms · search/filters · tables ·
   stats · sections/cards · services grid · modals · tabs · badges · toasts ·
   loading/empty · progress · code · misc · help widget · icon picker · browser surfaces
   ============================================================================= */

/* ---------- Shell ---------- */
html[data-skin="neo"] { background: var(--neo-canvas); }
html[data-skin="neo"] body {
  background: var(--neo-canvas);
  color: var(--neo-text);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--neo-accent);
}
/* The blue wash lives on a fixed layer behind the content so it does not scroll away on long pages */
html[data-skin="neo"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 520px at 8% -12%, rgba(20, 99, 184, .10), transparent 62%),
    radial-gradient(900px 480px at 100% 0%, rgba(42, 157, 244, .07), transparent 58%);
}
html[data-skin="neo"][data-theme="dark"] body::before {
  background:
    radial-gradient(1100px 520px at 8% -12%, rgba(79, 157, 240, .12), transparent 62%),
    radial-gradient(900px 480px at 100% 0%, rgba(124, 192, 255, .06), transparent 58%);
}
html[data-skin="neo"] ::selection { background: rgba(20, 99, 184, .18); color: var(--neo-text); }
html[data-skin="neo"][data-theme="dark"] ::selection { background: rgba(79, 157, 240, .32); }

/* Top bar: sticky, translucent — content scrolls under it */
html[data-skin="neo"] header.wme-bar {
  position: sticky; top: 0; z-index: 900;
  background: var(--neo-glass);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  color: var(--neo-text);
  border-bottom: 1px solid var(--neo-border);
  box-shadow: none;
  transition: box-shadow var(--neo-dur) var(--neo-ease), background var(--neo-dur);
}
html[data-skin="neo"].neo-scrolled header.wme-bar { box-shadow: var(--neo-shadow-sm); }
html[data-skin="neo"] .wme-bar .wme-wrap { padding: 10px 24px; max-width: 1360px; margin: 0 auto; transition: padding var(--neo-dur) var(--neo-ease); }
html[data-skin="neo"].neo-scrolled .wme-bar .wme-wrap { padding: 6px 24px; }
/* Light mode: the logo wordmarks are white artwork, so they sit on a compact dark brand plate */
/* Same box in every mode (no height jump when switching); only the plate colour differs */
html[data-skin="neo"] .wme-top {
  border-radius: 12px; padding: 7px 20px; gap: 20px; background: transparent;
  transition: padding var(--neo-dur) var(--neo-ease), background var(--neo-dur);
}
html[data-skin="neo"].neo-scrolled .wme-top { padding: 5px 20px; }
html[data-skin="neo"]:not([data-theme="dark"]) .wme-top { background: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, .18); }
html[data-skin="neo"] .wme-logo img { height: 26px; filter: none; transition: transform var(--neo-dur) var(--neo-ease); }
html[data-skin="neo"].neo-scrolled .wme-logo img { transform: scale(.92); }
html[data-skin="neo"][data-theme="dark"] .wme-logo img { filter: brightness(1.08); }

/* Language switcher + theme toggle as one segmented control */
html[data-skin="neo"] .lang-switcher {
  gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--neo-surface-2); border: 1px solid var(--neo-border);
}
html[data-skin="neo"] .lang-btn {
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--neo-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
html[data-skin="neo"] .lang-btn:hover { background: var(--neo-surface); color: var(--neo-text); border-color: transparent; }
html[data-skin="neo"] .lang-btn.active { background: var(--neo-surface); color: var(--neo-accent); border-color: var(--neo-border); box-shadow: var(--neo-shadow-sm); }
html[data-skin="neo"] .theme-toggle {
  margin-left: 2px; padding: 0; width: 28px; height: 28px; justify-content: center; border-radius: 999px;
  background: transparent; border: 1px solid transparent; color: var(--neo-muted);
}
html[data-skin="neo"] .theme-toggle:hover { background: var(--neo-surface); color: var(--neo-text); border-color: transparent; }
html[data-skin="neo"] .theme-toggle i { font-size: 13px; }

/* Hero → slim page header */
html[data-skin="neo"] section.wme-hero {
  background: transparent; border-bottom: 0; padding: 26px 24px 8px; text-align: left;
}
html[data-skin="neo"] .wme-hero .wme-wrap { align-items: stretch; }
html[data-skin="neo"] .wme-hero h1 { font-size: 22px; font-weight: 650; letter-spacing: -.015em; color: var(--neo-text); margin: 0 0 2px; }
html[data-skin="neo"] .wme-hero p { font-size: 13.5px; color: var(--neo-muted); }
html[data-skin="neo"] .hero-content { margin-top: 14px; gap: 12px; }
html[data-skin="neo"] .hero-user-greeting {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  background: var(--neo-surface); border: 1px solid var(--neo-border); box-shadow: var(--neo-shadow-sm);
  font-size: 13px; color: var(--neo-muted);
}
html[data-skin="neo"] .hero-user-greeting::before {
  content: attr(data-initials); display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 999px; background: var(--neo-grad); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; flex: none;
}
html[data-skin="neo"] .hero-user-greeting:not([data-initials])::before { content: ""; width: 0; height: 0; display: none; }
html[data-skin="neo"] .hero-user-greeting > i.fa-user-circle { display: none; }
html[data-skin="neo"] .hero-user-greeting strong { color: var(--neo-text); font-weight: 600; }
/* tier badge is rendered with inline styles on 32 pages → override */
html[data-skin="neo"] .hero-user-greeting span[style] {
  background: var(--neo-surface-2) !important; color: var(--neo-text) !important;
  border: 1px solid var(--neo-border); border-radius: 999px !important; padding: 2px 9px !important;
  font-size: 11px !important; font-weight: 600; margin-left: 2px !important; letter-spacing: .01em;
}
html[data-skin="neo"] .wme-hero .header-controls,
html[data-skin="neo"] .header-controls { gap: 8px; }

/* Legacy .header variant */
html[data-skin="neo"] .header { background: transparent; border-bottom: 0; padding: 26px 24px 8px; margin-bottom: 8px; }
html[data-skin="neo"] .header h1 { font-size: 22px; font-weight: 650; letter-spacing: -.015em; color: var(--neo-text); }

/* Content panel: a hairline box that spans 80% of the viewport (cap 1900px), grows with its content,
   and lets the content fill it edge to edge. Hero aligns to the same edges. */
html[data-skin="neo"] .main-wrapper,
html[data-skin="neo"][data-theme="dark"] .main-wrapper {
  width: min(80%, 1900px); max-width: none; margin: 8px auto 28px; padding: 8px 0 20px;
  display: flex; flex-direction: column; flex: 1 0 auto;
  background: color-mix(in srgb, var(--neo-surface) 60%, transparent);
  border: 1px solid var(--neo-border); border-radius: 16px; box-shadow: var(--neo-shadow-sm);
}
html[data-skin="neo"] .container { width: 100%; max-width: none; margin: 0; padding: 16px 28px 20px; flex-grow: 1; }
html[data-skin="neo"] .wme-hero .wme-wrap { width: min(80%, 1900px); max-width: none; padding: 0; margin: 0 auto; }
html[data-skin="neo"] .wme-bar .wme-wrap { max-width: none; }
@media (max-width: 1100px) {
  html[data-skin="neo"] .main-wrapper, html[data-skin="neo"][data-theme="dark"] .main-wrapper { width: calc(100% - 24px); margin: 8px auto 20px; }
  html[data-skin="neo"] .wme-hero .wme-wrap { width: calc(100% - 24px); }
  html[data-skin="neo"] .container { padding: 14px 16px 18px; }
}
/* Very wide screens (4K): a touch more type size and breathing room so content does not look shrunken */
@media (min-width: 2200px) {
  html[data-skin="neo"] body { font-size: 15px; }
  html[data-skin="neo"] .container { padding: 20px 36px 28px; }
  html[data-skin="neo"] .stats, html[data-skin="neo"] .stats-grid, html[data-skin="neo"] .stats-overview, html[data-skin="neo"] .services-grid { gap: 18px; }
  html[data-skin="neo"] .stat-number, html[data-skin="neo"] .stat-value, html[data-skin="neo"] .health-number { font-size: 30px; }
  html[data-skin="neo"] .wme-hero h1 { font-size: 24px; }
}

/* Footer */
html[data-skin="neo"] footer.wme-foot,
html[data-skin="neo"] .footer {
  background: transparent; border-top: 1px solid var(--neo-border); color: var(--neo-muted);
  font-size: 12px; padding: 18px 24px; box-shadow: none;
}
html[data-skin="neo"] .wme-foot a, html[data-skin="neo"] .footer a, html[data-skin="neo"] .footer-links a { color: var(--neo-muted); }
html[data-skin="neo"] .wme-foot a:hover, html[data-skin="neo"] .footer a:hover { color: var(--neo-accent); }

/* ---------- Typography ---------- */
html[data-skin="neo"] body { font-size: 14px; line-height: 1.5; }
html[data-skin="neo"] h1, html[data-skin="neo"] h2, html[data-skin="neo"] h3, html[data-skin="neo"] h4 { color: var(--neo-text); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
html[data-skin="neo"] a { color: var(--neo-accent); text-underline-offset: 3px; }
html[data-skin="neo"] .stat-number, html[data-skin="neo"] .stat-value, html[data-skin="neo"] .health-number,
html[data-skin="neo"] .flow-val, html[data-skin="neo"] td.num, html[data-skin="neo"] .rs-num { font-variant-numeric: tabular-nums; }
html[data-skin="neo"] code, html[data-skin="neo"] pre, html[data-skin="neo"] kbd, html[data-skin="neo"] .code-output,
html[data-skin="neo"] .nm-ob-code, html[data-skin="neo"] .config-preview, html[data-skin="neo"] .config-raw, html[data-skin="neo"] .fmb-code,
html[data-skin="neo"] .forward-info, html[data-skin="neo"] #preview-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 12.5px;
}

/* ---------- Buttons ---------- */
html[data-skin="neo"] .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 14px; border-radius: var(--neo-r-sm);
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--neo-dur), color var(--neo-dur), border-color var(--neo-dur), box-shadow var(--neo-dur), transform 120ms var(--neo-ease);
}
html[data-skin="neo"] .btn:hover { transform: none; }
html[data-skin="neo"] .btn:active { transform: scale(.98); }
html[data-skin="neo"] .btn:focus-visible { outline: none; box-shadow: var(--neo-ring); }
html[data-skin="neo"] .btn i { font-size: 12px; }
html[data-skin="neo"] .btn-primary { background: var(--neo-grad); color: #fff; box-shadow: 0 1px 2px rgba(20, 99, 184, .25); }
html[data-skin="neo"] .btn-primary:hover { background: var(--neo-grad); color: #fff; box-shadow: 0 4px 14px -4px rgba(20, 99, 184, .55); filter: brightness(1.04); }
html[data-skin="neo"] .btn-secondary { background: var(--neo-surface); color: var(--neo-text); border-color: var(--neo-border-strong); box-shadow: var(--neo-shadow-sm); }
html[data-skin="neo"] .btn-secondary:hover { background: var(--neo-surface-2); color: var(--neo-text); border-color: var(--neo-border-strong); }
html[data-skin="neo"] .btn-portal { background: var(--primary-light); color: var(--neo-accent); border-color: transparent; }
html[data-skin="neo"] .btn-portal:hover { background: var(--neo-accent); color: #fff; border-color: transparent; }
html[data-skin="neo"] .btn-danger { background: var(--neo-danger-bg); color: var(--neo-danger); border-color: transparent; }
html[data-skin="neo"] .btn-danger:hover { background: var(--neo-danger); color: #fff; transform: none; }
html[data-skin="neo"] .btn-small { min-height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
html[data-skin="neo"] .btn-large { min-height: 44px; padding: 0 20px; font-size: 14px; }
html[data-skin="neo"] .btn-disabled, html[data-skin="neo"] .btn:disabled, html[data-skin="neo"] .btn[disabled] {
  background: var(--neo-surface-2); color: var(--neo-muted); border-color: var(--neo-border); box-shadow: none; opacity: 1; cursor: not-allowed;
}
html[data-skin="neo"] .btn-icon { width: 32px; height: 32px; padding: 0; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--neo-muted); display: inline-flex; align-items: center; justify-content: center; }
html[data-skin="neo"] .btn-icon:hover { background: var(--neo-surface-2); color: var(--neo-text); }
html[data-skin="neo"] .btn-icon.delete:hover { background: var(--neo-danger-bg); color: var(--neo-danger); }
html[data-skin="neo"] .btn-icon.edit:hover { background: var(--primary-light); color: var(--neo-accent); }
html[data-skin="neo"] .filter-btn, html[data-skin="neo"] .seg-btn, html[data-skin="neo"] .range-btn, html[data-skin="neo"] .nav-btn, html[data-skin="neo"] .flag-btn {
  border-radius: 999px; border: 1px solid var(--neo-border); background: var(--neo-surface); color: var(--neo-muted);
  font-size: 12.5px; font-weight: 500; padding: 6px 12px; transition: background var(--neo-dur), color var(--neo-dur), border-color var(--neo-dur);
}
html[data-skin="neo"] .filter-btn:hover, html[data-skin="neo"] .seg-btn:hover, html[data-skin="neo"] .range-btn:hover, html[data-skin="neo"] .nav-btn:hover { color: var(--neo-text); border-color: var(--neo-border-strong); }
html[data-skin="neo"] .filter-btn.active, html[data-skin="neo"] .seg-btn.active, html[data-skin="neo"] .range-btn.active, html[data-skin="neo"] .nav-btn.active {
  background: var(--neo-accent); border-color: var(--neo-accent); color: #fff;
}
html[data-skin="neo"] .month-arrow { border-radius: 999px; border: 1px solid var(--neo-border); background: var(--neo-surface); color: var(--neo-text); }
html[data-skin="neo"] .linklike { color: var(--neo-accent); background: none; border: 0; }

/* ---------- Forms ---------- */
html[data-skin="neo"] input[type="text"], html[data-skin="neo"] input[type="email"], html[data-skin="neo"] input[type="password"],
html[data-skin="neo"] input[type="number"], html[data-skin="neo"] input[type="tel"], html[data-skin="neo"] input[type="url"],
html[data-skin="neo"] input[type="search"], html[data-skin="neo"] input[type="date"], html[data-skin="neo"] input[type="time"],
html[data-skin="neo"] input[type="datetime-local"], html[data-skin="neo"] input[type="month"], html[data-skin="neo"] input:not([type]),
html[data-skin="neo"] select, html[data-skin="neo"] textarea {
  background: var(--neo-surface); color: var(--neo-text);
  border: 1px solid var(--neo-border-strong); border-radius: var(--neo-r-sm);
  min-height: 36px; padding: 7px 12px; font-size: 13.5px; font-family: inherit; box-shadow: var(--neo-shadow-sm);
  transition: border-color var(--neo-dur), box-shadow var(--neo-dur), background var(--neo-dur);
}
html[data-skin="neo"] textarea { min-height: 88px; line-height: 1.5; }
html[data-skin="neo"] input:focus, html[data-skin="neo"] select:focus, html[data-skin="neo"] textarea:focus {
  outline: none; border-color: var(--neo-accent); box-shadow: var(--neo-ring);
}
html[data-skin="neo"] input::placeholder, html[data-skin="neo"] textarea::placeholder { color: var(--neo-muted); opacity: .8; }
html[data-skin="neo"] input:disabled, html[data-skin="neo"] select:disabled, html[data-skin="neo"] textarea:disabled { background: var(--neo-surface-2); color: var(--neo-muted); box-shadow: none; opacity: 1; }
html[data-skin="neo"] select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
html[data-skin="neo"][data-theme="dark"] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
html[data-skin="neo"] input[type="checkbox"], html[data-skin="neo"] input[type="radio"] { accent-color: var(--neo-accent); width: 16px; height: 16px; min-height: 0; box-shadow: none; }
html[data-skin="neo"] input[type="range"] { accent-color: var(--neo-accent); min-height: 0; box-shadow: none; border: 0; background: transparent; padding: 0; }
html[data-skin="neo"] input[type="color"] { padding: 2px; min-height: 32px; width: 44px; }
html[data-skin="neo"] .form-group { margin-bottom: 16px; }
html[data-skin="neo"] .form-group label, html[data-skin="neo"] .modal-body .form-group label,
html[data-skin="neo"] .search-container label, html[data-skin="neo"] .filter-label {
  font-size: 12px; font-weight: 600; color: var(--neo-muted); letter-spacing: .01em; margin-bottom: 6px;
}
html[data-skin="neo"] .form-hint { color: var(--neo-muted); font-size: 12px; }
html[data-skin="neo"] .form-section { background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: var(--neo-r); padding: 18px; }
html[data-skin="neo"] .form-actions, html[data-skin="neo"] .button-group { gap: 8px; }
html[data-skin="neo"] .input-with-domain, html[data-skin="neo"] .password-wrapper, html[data-skin="neo"] .password-input-wrapper, html[data-skin="neo"] .ip-input-container { border-radius: var(--neo-r-sm); }
html[data-skin="neo"] .domain-suffix, html[data-skin="neo"] .network-prefix { background: var(--neo-surface-2); color: var(--neo-muted); border: 1px solid var(--neo-border-strong); font-size: 13px; }
html[data-skin="neo"] .toggle-password, html[data-skin="neo"] .password-toggle { color: var(--neo-muted); background: transparent; border: 0; }

/* Toggles — both implementations (.toggle-switch/.toggle-slider, .switch/.slider) */
html[data-skin="neo"] .toggle-switch, html[data-skin="neo"] .switch { width: 42px; height: 24px; }
html[data-skin="neo"] .toggle-slider, html[data-skin="neo"] .slider { background: var(--neo-border-strong); border-radius: 999px; transition: background var(--neo-dur); }
html[data-skin="neo"] .toggle-slider::before, html[data-skin="neo"] .slider::before {
  width: 18px; height: 18px; left: 3px; bottom: 3px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--neo-dur) var(--neo-ease);
}
html[data-skin="neo"] input:checked + .toggle-slider, html[data-skin="neo"] input:checked + .slider { background: var(--neo-accent); }
html[data-skin="neo"] input:checked + .toggle-slider::before, html[data-skin="neo"] input:checked + .slider::before { transform: translateX(18px); }
html[data-skin="neo"] input:focus-visible + .toggle-slider, html[data-skin="neo"] input:focus-visible + .slider { box-shadow: var(--neo-ring); }

/* ---------- Search & filters ---------- */
html[data-skin="neo"] .search-container { gap: 10px; }
html[data-skin="neo"] .search-input { padding-left: 36px; border-radius: 999px; background: var(--neo-surface); }
html[data-skin="neo"] .search-input:focus { border-color: var(--neo-accent); box-shadow: var(--neo-ring); }
html[data-skin="neo"] .search-icon { left: 13px; color: var(--neo-muted); font-size: 13px; }
html[data-skin="neo"] .filter-select { min-height: 36px; }
html[data-skin="neo"] .filters-bar, html[data-skin="neo"] .docs-admin-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
  background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: var(--neo-r); padding: 12px 14px; box-shadow: var(--neo-shadow-sm);
}

/* ---------- Tables ---------- */
html[data-skin="neo"] table { border-collapse: separate; border-spacing: 0; font-size: 13px; }
html[data-skin="neo"] thead { background: transparent; }
html[data-skin="neo"] thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--neo-surface-2); color: var(--neo-muted);
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 12px; border-bottom: 1px solid var(--neo-border);
}
html[data-skin="neo"] thead th:first-child { border-top-left-radius: 10px; }
html[data-skin="neo"] thead th:last-child { border-top-right-radius: 10px; }
html[data-skin="neo"] td { padding: 10px 12px; border-bottom: 1px solid var(--neo-border); color: var(--neo-text); font-size: 13px; vertical-align: middle; }
html[data-skin="neo"] tbody tr { transition: background var(--neo-dur); }
html[data-skin="neo"] tbody tr:hover { background: var(--primary-light); }
html[data-skin="neo"] tbody tr:last-child td { border-bottom: 0; }
html[data-skin="neo"][data-theme="dark"] thead th { background: var(--neo-surface-2); }
html[data-skin="neo"] .section-content > table, html[data-skin="neo"] .content-box > table, html[data-skin="neo"] .table-wrap > table,
html[data-skin="neo"] .sessions-table, html[data-skin="neo"] .history-table, html[data-skin="neo"] .rs-table, html[data-skin="neo"] .docs-admin-table {
  border: 1px solid var(--neo-border); border-radius: 10px; overflow: hidden; background: var(--neo-surface);
}
html[data-skin="neo"] .data-grid { gap: 12px; }
html[data-skin="neo"] .data-card { background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: var(--neo-r); box-shadow: var(--neo-shadow-sm); }
html[data-skin="neo"] .accordion-item { border: 1px solid var(--neo-border); border-radius: var(--neo-r); background: var(--neo-surface); overflow: hidden; }
html[data-skin="neo"] .accordion-header { background: var(--neo-surface-2); font-weight: 600; }
html[data-skin="neo"] .dropdown-menu { background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: var(--neo-r-sm); box-shadow: var(--neo-shadow-lg); padding: 6px; }
html[data-skin="neo"] .dropdown-menu a, html[data-skin="neo"] .dropdown-menu button { border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--neo-text); }
html[data-skin="neo"] .dropdown-menu a:hover, html[data-skin="neo"] .dropdown-menu button:hover { background: var(--neo-surface-2); }
html[data-skin="neo"] .rs-pager, html[data-skin="neo"] .docs-pager { display: flex; gap: 6px; align-items: center; }
html[data-skin="neo"] .rs-pager button, html[data-skin="neo"] .rs-pager a, html[data-skin="neo"] .docs-pager-link {
  min-width: 32px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--neo-border); background: var(--neo-surface); color: var(--neo-text); font-size: 12.5px;
}
html[data-skin="neo"] .rs-pager .active, html[data-skin="neo"] .rs-pager [aria-current] { background: var(--neo-accent); color: #fff; border-color: var(--neo-accent); }

/* ---------- Stats ---------- */
html[data-skin="neo"] .stats, html[data-skin="neo"] .stats-grid, html[data-skin="neo"] .stats-overview { gap: 14px; margin-bottom: 22px; }
html[data-skin="neo"] .stat-card, html[data-skin="neo"] .stats-overview .stat-card, html[data-skin="neo"] .stat-card-compact,
html[data-skin="neo"] .mini-stat-card, html[data-skin="neo"] .health-card {
  background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: var(--neo-r);
  box-shadow: var(--neo-shadow-sm); padding: 16px 18px; text-align: left;
}
html[data-skin="neo"] .stat-card:hover, html[data-skin="neo"] .stats-overview .stat-card:hover, html[data-skin="neo"] .health-card:hover {
  border-color: var(--neo-border-strong); box-shadow: var(--neo-shadow); transform: translateY(-2px);
}
html[data-skin="neo"] .stat-number, html[data-skin="neo"] .stat-value, html[data-skin="neo"] .health-number {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--neo-text); margin-bottom: 2px; line-height: 1.15;
}
html[data-skin="neo"] .stat-label { font-size: 12px; font-weight: 500; color: var(--neo-muted); letter-spacing: 0; text-transform: none; }
html[data-skin="neo"] .stat-icon {
  width: 40px; height: 40px; font-size: 16px; border-radius: 10px; flex: none;
  background: var(--primary-light); color: var(--neo-accent);
}
html[data-skin="neo"] .stat-icon-success { background: var(--neo-success-bg); color: var(--neo-success); }
html[data-skin="neo"] .stat-icon-warning { background: var(--neo-warning-bg); color: var(--neo-warning); }
html[data-skin="neo"] .stat-icon-danger  { background: var(--neo-danger-bg);  color: var(--neo-danger); }
html[data-skin="neo"] .stat-icon-info    { background: var(--neo-info-bg);    color: var(--neo-info); }
html[data-skin="neo"] .stat-icon-muted   { background: var(--neo-surface-2);  color: var(--neo-muted); }
html[data-skin="neo"] .stats .stat-card:not(.stats-overview .stat-card) .stat-number { text-align: left; }

/* ---------- Sections & cards ---------- */
/* No overflow:hidden here — sticky/scrolling panels (forms builder palette) and in-section dropdowns must not be clipped */
html[data-skin="neo"] .section, html[data-skin="neo"] .content-box, html[data-skin="neo"] .info-card {
  background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: var(--neo-r);
  box-shadow: var(--neo-shadow-sm);
}
html[data-skin="neo"] .section { margin-bottom: 18px; }
html[data-skin="neo"] .section-header, html[data-skin="neo"] .card-header {
  background: transparent; border-bottom: 1px solid var(--neo-border);
  padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--neo-text);
}
html[data-skin="neo"] .section-header i, html[data-skin="neo"] .card-header i { color: var(--neo-accent); }
html[data-skin="neo"] .section-content, html[data-skin="neo"] .card-body { padding: 16px; }
html[data-skin="neo"] .content-box { padding: 20px; }
html[data-skin="neo"] .content-box h3 { font-size: 16px; }
html[data-skin="neo"] .section-subtitle { color: var(--neo-muted); font-weight: 500; }

/* ---------- Services grid (landing + shared) ---------- */
html[data-skin="neo"] .services-grid { gap: 16px; }
html[data-skin="neo"] .service-card {
  position: relative; background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: 14px;
  padding: 20px; box-shadow: var(--neo-shadow-sm);
}
html[data-skin="neo"] .service-card::before { content: none; }
html[data-skin="neo"] .service-card:hover { border-color: rgba(20, 99, 184, .35); box-shadow: var(--neo-shadow); transform: translateY(-2px); }
html[data-skin="neo"][data-theme="dark"] .service-card:hover { border-color: rgba(79, 157, 240, .45); }
html[data-skin="neo"] .service-icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--neo-grad); color: #fff;
  display: grid; place-items: center; font-size: 20px; margin-bottom: 14px; box-shadow: 0 6px 16px -8px rgba(20, 99, 184, .6);
}
html[data-skin="neo"] .service-icon i, html[data-skin="neo"] .service-icon-svg { color: #fff; }
html[data-skin="neo"] .service-title { font-size: 15px; font-weight: 600; color: var(--neo-text); letter-spacing: -.01em; }
html[data-skin="neo"] .service-description { font-size: 13px; color: var(--neo-muted); line-height: 1.5; }
html[data-skin="neo"] .service-stats { gap: 6px; }
html[data-skin="neo"] .stat-badge { background: var(--neo-surface-2); color: var(--neo-muted); border: 1px solid var(--neo-border); border-radius: 999px; font-size: 11.5px; padding: 3px 9px; }
html[data-skin="neo"] .service-actions { border-top: 1px solid var(--neo-border); padding-top: 12px; }
html[data-skin="neo"] .service-card.coming-soon { opacity: .7; }

/* ---------- Modals ---------- */
html[data-skin="neo"] .modal { background: rgba(2, 6, 23, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-skin="neo"] .modal-content {
  background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: 16px;
  box-shadow: var(--neo-shadow-lg); animation: neoModalIn .22s var(--neo-ease);
}
html[data-skin="neo"] .modal-header { padding: 18px 22px; background: transparent; border-bottom: 1px solid var(--neo-border); }
html[data-skin="neo"] .modal-header h2, html[data-skin="neo"] .modal-header h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--neo-text); }
html[data-skin="neo"] .modal-header h2 i, html[data-skin="neo"] .modal-header h3 i { color: var(--neo-accent); font-size: 16px; }
html[data-skin="neo"] .modal-body { padding: 22px; }
html[data-skin="neo"] .modal-footer { padding: 14px 22px; background: var(--neo-surface-2); border-top: 1px solid var(--neo-border); gap: 8px; }
html[data-skin="neo"] .modal-close, html[data-skin="neo"] .btn-close, html[data-skin="neo"] .close { border-radius: 8px; color: var(--neo-muted); font-size: 20px; }
html[data-skin="neo"] .modal-close:hover, html[data-skin="neo"] .btn-close:hover, html[data-skin="neo"] .close:hover { background: var(--neo-surface-2); color: var(--neo-text); transform: none; }
html[data-skin="neo"] .modal-field, html[data-skin="neo"] .modal-field-group { gap: 12px; }

/* ---------- Tabs — all three systems + sub-tabs ---------- */
html[data-skin="neo"] .tabs, html[data-skin="neo"] .tabs-container, html[data-skin="neo"] .admin-tabs,
html[data-skin="neo"] .sub-tabs, html[data-skin="neo"] .sub-tab-nav, html[data-skin="neo"] .panel-tabs, html[data-skin="neo"] .admin-nav, html[data-skin="neo"] .fmb-inspector-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 0 18px;
  background: var(--neo-surface-2); border: 1px solid var(--neo-border); border-radius: var(--neo-r-sm);
  border-bottom: 1px solid var(--neo-border); width: auto; max-width: 100%;
}
html[data-skin="neo"] .tab-button, html[data-skin="neo"] .tab-btn, html[data-skin="neo"] .sub-tab-btn, html[data-skin="neo"] .sub-tab-link,
html[data-skin="neo"] .panel-tab, html[data-skin="neo"] .admin-nav .nav-btn, html[data-skin="neo"] .fmb-inspector-tabs button {
  flex: none; border: 0; border-bottom: 0; border-radius: 8px; padding: 7px 14px; min-width: 0;
  background: transparent; color: var(--neo-muted); font-size: 13px; font-weight: 500;
  transition: background var(--neo-dur), color var(--neo-dur), box-shadow var(--neo-dur);
}
html[data-skin="neo"] .tab-button:hover, html[data-skin="neo"] .tab-btn:hover, html[data-skin="neo"] .sub-tab-btn:hover, html[data-skin="neo"] .sub-tab-link:hover,
html[data-skin="neo"] .panel-tab:hover, html[data-skin="neo"] .admin-nav .nav-btn:hover { background: transparent; color: var(--neo-text); }
html[data-skin="neo"] .tab-button.active, html[data-skin="neo"] .tab-btn.active, html[data-skin="neo"] .sub-tab-btn.active, html[data-skin="neo"] .sub-tab-link.active,
html[data-skin="neo"] .panel-tab.active, html[data-skin="neo"] .admin-nav .nav-btn.active, html[data-skin="neo"] .fmb-inspector-tabs button.active {
  background: var(--neo-surface); color: var(--neo-accent); border-bottom: 0; box-shadow: var(--neo-shadow-sm);
}
html[data-skin="neo"] .tab-button:focus-visible, html[data-skin="neo"] .tab-btn:focus-visible { outline: none; box-shadow: var(--neo-ring); }
@media (max-width: 768px) {
  html[data-skin="neo"] .tabs, html[data-skin="neo"] .tabs-container { display: flex; overflow-x: auto; flex-wrap: nowrap; }
}

/* ---------- Badges / pills / status chips ---------- */
html[data-skin="neo"] .status-badge, html[data-skin="neo"] .service-status, html[data-skin="neo"] .tier-badge, html[data-skin="neo"] .tier-badge-dynamic,
html[data-skin="neo"] .type-badge, html[data-skin="neo"] .meta-badge, html[data-skin="neo"] .badge, html[data-skin="neo"] .equipment-type-badge,
html[data-skin="neo"] .ssl-badge, html[data-skin="neo"] .compliance-badge, html[data-skin="neo"] .availability-badge, html[data-skin="neo"] .device-type-badge,
html[data-skin="neo"] .version-badge, html[data-skin="neo"] .solar-badge, html[data-skin="neo"] .group-badge, html[data-skin="neo"] .docs-lang-tag,
html[data-skin="neo"] .fm-chip, html[data-skin="neo"] .fm-type, html[data-skin="neo"] .rp-chip, html[data-skin="neo"] .rp-range-badge,
html[data-skin="neo"] .poe-badge, html[data-skin="neo"] .speed-badge, html[data-skin="neo"] .pill, html[data-skin="neo"] .admin-badge, html[data-skin="neo"] .tier-access-badge,
html[data-skin="neo"] [class*="docs-status-"], html[data-skin="neo"] [class*="severity-"], html[data-skin="neo"] [class*="result-"] {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.4;
  background: var(--neo-surface-2); color: var(--neo-muted); border: 1px solid var(--neo-border);
}
/* success family */
html[data-skin="neo"] .status-badge.status-success, html[data-skin="neo"] .status-badge.status-active, html[data-skin="neo"] .status-badge.status-enabled,
html[data-skin="neo"] .status-badge.status-valid, html[data-skin="neo"] .status-badge.status-online, html[data-skin="neo"] .status-badge.status-up,
html[data-skin="neo"] .service-status.status-active, html[data-skin="neo"] .status-active, html[data-skin="neo"] .ssl-enabled, html[data-skin="neo"] .status-enabled,
html[data-skin="neo"] .compliance-ok, html[data-skin="neo"] .result-success, html[data-skin="neo"] .solar-badge-ok, html[data-skin="neo"] .docs-status-published,
html[data-skin="neo"] .rp-chip-new, html[data-skin="neo"] .pill.green, html[data-skin="neo"] .badge-success {
  background: var(--neo-success-bg); color: var(--neo-success); border-color: transparent;
}
/* warning family */
html[data-skin="neo"] .status-badge.status-warning, html[data-skin="neo"] .status-badge.status-planned, html[data-skin="neo"] .status-badge.status-maintenance,
html[data-skin="neo"] .status-badge.status-dhcp, html[data-skin="neo"] .status-badge.status-pending, html[data-skin="neo"] .service-status.status-planned,
html[data-skin="neo"] .service-status.status-maintenance, html[data-skin="neo"] .status-planned, html[data-skin="neo"] .status-maintenance,
html[data-skin="neo"] .compliance-due_soon, html[data-skin="neo"] .result-partial, html[data-skin="neo"] .severity-warning, html[data-skin="neo"] .docs-status-draft,
html[data-skin="neo"] .rp-chip-change, html[data-skin="neo"] .pill.amber, html[data-skin="neo"] .badge-warning {
  background: var(--neo-warning-bg); color: #b45309; border-color: transparent;
}
html[data-skin="neo"][data-theme="dark"] .status-badge.status-warning, html[data-skin="neo"][data-theme="dark"] .status-badge.status-planned,
html[data-skin="neo"][data-theme="dark"] .status-badge.status-maintenance, html[data-skin="neo"][data-theme="dark"] .status-badge.status-dhcp,
html[data-skin="neo"][data-theme="dark"] .service-status.status-planned, html[data-skin="neo"][data-theme="dark"] .service-status.status-maintenance,
html[data-skin="neo"][data-theme="dark"] .compliance-due_soon, html[data-skin="neo"][data-theme="dark"] .result-partial, html[data-skin="neo"][data-theme="dark"] .severity-warning,
html[data-skin="neo"][data-theme="dark"] .docs-status-draft, html[data-skin="neo"][data-theme="dark"] .rp-chip-change, html[data-skin="neo"][data-theme="dark"] .pill.amber { color: var(--neo-warning); }
/* danger family */
html[data-skin="neo"] .status-badge.status-danger, html[data-skin="neo"] .status-badge.status-failed, html[data-skin="neo"] .status-badge.status-disabled,
html[data-skin="neo"] .status-badge.status-offline, html[data-skin="neo"] .status-badge.status-down, html[data-skin="neo"] .status-badge.status-expired,
html[data-skin="neo"] .status-badge.status-error, html[data-skin="neo"] .service-status.status-disabled, html[data-skin="neo"] .status-disabled, html[data-skin="neo"] .status-suspended,
html[data-skin="neo"] .ssl-disabled, html[data-skin="neo"] .status-expired, html[data-skin="neo"] .compliance-overdue, html[data-skin="neo"] .result-failed,
html[data-skin="neo"] .severity-critical, html[data-skin="neo"] .solar-badge-off, html[data-skin="neo"] .pill.red, html[data-skin="neo"] .badge-danger {
  background: var(--neo-danger-bg); color: var(--neo-danger); border-color: transparent;
}
/* info family */
html[data-skin="neo"] .status-badge.status-static, html[data-skin="neo"] .status-badge.status-info, html[data-skin="neo"] .badge-info, html[data-skin="neo"] .severity-info,
html[data-skin="neo"] .docs-lang-tag, html[data-skin="neo"] .type-badge.status-active {
  background: var(--neo-info-bg); color: #0369a1; border-color: transparent;
}
html[data-skin="neo"][data-theme="dark"] .status-badge.status-static, html[data-skin="neo"][data-theme="dark"] .badge-info, html[data-skin="neo"][data-theme="dark"] .severity-info,
html[data-skin="neo"][data-theme="dark"] .docs-lang-tag { color: var(--neo-info); }
/* neutral / archived */
html[data-skin="neo"] .compliance-never, html[data-skin="neo"] .compliance-retired, html[data-skin="neo"] .docs-status-archived, html[data-skin="neo"] .rp-chip-idle,
html[data-skin="neo"] .status-badge.status-unknown, html[data-skin="neo"] .status-badge.status-vacant, html[data-skin="neo"] .status-badge.status-inactive, html[data-skin="neo"] .pill.gray {
  background: var(--neo-surface-2); color: var(--neo-muted); border-color: var(--neo-border);
}
/* tier badges keep their tier colour but as a tinted ring */
html[data-skin="neo"] .tier-badge-dynamic, html[data-skin="neo"] .tier-badge[style] {
  background: color-mix(in srgb, var(--tier-color, var(--neo-accent)) 14%, transparent) !important;
  color: var(--tier-color, var(--neo-accent)) !important; border: 1px solid color-mix(in srgb, var(--tier-color, var(--neo-accent)) 35%, transparent);
}
html[data-skin="neo"] .admin-badge { background: var(--neo-warning-bg); color: #b45309; }

/* ---------- Toasts ---------- */
html[data-skin="neo"] .notification {
  position: fixed; top: 20px; right: 20px; z-index: 10000;
  display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 420px;
  padding: 12px 14px 14px; border-radius: var(--neo-r); border: 1px solid var(--neo-border);
  background: var(--neo-surface); color: var(--neo-text); box-shadow: var(--neo-shadow-lg);
  border-left-width: 1px; overflow: hidden; font-size: 13.5px;
}
html[data-skin="neo"] .notification i { font-size: 15px; width: 30px; height: 30px; border-radius: 999px; display: inline-grid; place-items: center; flex: none; }
html[data-skin="neo"] .notification::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--neo-accent); animation: neoToastBar 4s linear forwards;
}
html[data-skin="neo"] .notification.success, html[data-skin="neo"] .notification-success { background: var(--neo-surface); color: var(--neo-text); border-left: 1px solid var(--neo-border); }
html[data-skin="neo"] .notification.success i, html[data-skin="neo"] .notification-success i { background: var(--neo-success-bg); color: var(--neo-success); }
html[data-skin="neo"] .notification.success::after, html[data-skin="neo"] .notification-success::after { background: var(--neo-success); }
html[data-skin="neo"] .notification.error, html[data-skin="neo"] .notification-error { background: var(--neo-surface); color: var(--neo-text); border-left: 1px solid var(--neo-border); }
html[data-skin="neo"] .notification.error i, html[data-skin="neo"] .notification-error i { background: var(--neo-danger-bg); color: var(--neo-danger); }
html[data-skin="neo"] .notification.error::after, html[data-skin="neo"] .notification-error::after { background: var(--neo-danger); }
html[data-skin="neo"] .notification.info, html[data-skin="neo"] .notification-info { background: var(--neo-surface); color: var(--neo-text); border-left: 1px solid var(--neo-border); }
html[data-skin="neo"] .notification.info i, html[data-skin="neo"] .notification-info i { background: var(--neo-info-bg); color: var(--neo-info); }
html[data-skin="neo"] .notification.warning i { background: var(--neo-warning-bg); color: var(--neo-warning); }

/* ---------- Loading & empty ---------- */
html[data-skin="neo"] .loading-spinner { border: 2px solid var(--neo-border); border-top-color: var(--neo-accent); width: 28px; height: 28px; }
html[data-skin="neo"] .loading-state, html[data-skin="neo"] .loading-message, html[data-skin="neo"] .placeholder-content,
html[data-skin="neo"] .loading-cell, html[data-skin="neo"] .loading { color: var(--neo-muted); font-size: 13px; }
html[data-skin="neo"] .empty-state, html[data-skin="neo"] .no-results-state, html[data-skin="neo"] .rs-empty, html[data-skin="neo"] .docs-search-empty,
html[data-skin="neo"] .empty-history, html[data-skin="neo"] .chart-no-data, html[data-skin="neo"] .empty-message, html[data-skin="neo"] .assignments-empty {
  border: 1px dashed var(--neo-border-strong); border-radius: var(--neo-r); background: transparent; color: var(--neo-muted); padding: 36px 20px;
}
html[data-skin="neo"] .empty-state h3 { color: var(--neo-text); font-size: 15px; margin-bottom: 6px; }
html[data-skin="neo"] .empty-state p { color: var(--neo-muted); }
html[data-skin="neo"] .empty-icon, html[data-skin="neo"] .empty-state > i, html[data-skin="neo"] .no-results-icon {
  width: 52px; height: 52px; border-radius: 14px; display: inline-grid; place-items: center; margin: 0 auto 14px;
  background: var(--neo-surface-2); color: var(--neo-muted); font-size: 20px; opacity: 1;
}
html[data-skin="neo"] .success-message { background: var(--neo-success-bg); color: var(--neo-success); border-radius: var(--neo-r-sm); }

/* ---------- Progress bars (all families) ---------- */
html[data-skin="neo"] .progress-bar-bg, html[data-skin="neo"] .utilization-bar, html[data-skin="neo"] .capacity-bar, html[data-skin="neo"] .strength-meter {
  height: 8px; border-radius: 999px; background: var(--neo-surface-2); border: 1px solid var(--neo-border); overflow: hidden;
}
html[data-skin="neo"] .progress-bar-fill, html[data-skin="neo"] .utilization-fill, html[data-skin="neo"] .capacity-fill, html[data-skin="neo"] .strength-meter-fill {
  height: 100%; border-radius: 999px; background: var(--neo-grad); transition: width .4s var(--neo-ease);
}
html[data-skin="neo"] .progress-bar-fill.success, html[data-skin="neo"] .util-low, html[data-skin="neo"] .strength-meter-fill.strong { background: var(--neo-success); }
html[data-skin="neo"] .progress-bar-fill.warning, html[data-skin="neo"] .util-medium, html[data-skin="neo"] .strength-meter-fill.medium { background: var(--neo-warning); }
html[data-skin="neo"] .progress-bar-fill.danger, html[data-skin="neo"] .util-high, html[data-skin="neo"] .strength-meter-fill.weak { background: var(--neo-danger); }

/* ---------- Code ---------- */
html[data-skin="neo"] pre, html[data-skin="neo"] .code-output, html[data-skin="neo"] .nm-ob-code, html[data-skin="neo"] .config-preview,
html[data-skin="neo"] .config-raw, html[data-skin="neo"] .fmb-code, html[data-skin="neo"] .docs-content pre {
  background: var(--neo-surface-2); color: var(--neo-text); border: 1px solid var(--neo-border); border-radius: var(--neo-r-sm); padding: 12px 14px; line-height: 1.55;
}
html[data-skin="neo"][data-theme="dark"] pre, html[data-skin="neo"][data-theme="dark"] .code-output, html[data-skin="neo"][data-theme="dark"] .nm-ob-code { background: #0b1220; }
html[data-skin="neo"] :not(pre) > code { background: var(--neo-surface-2); border: 1px solid var(--neo-border); border-radius: 6px; padding: 1px 6px; font-size: 12px; }
html[data-skin="neo"] kbd { background: var(--neo-surface-2); border: 1px solid var(--neo-border-strong); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; font-size: 11px; color: var(--neo-muted); }
html[data-skin="neo"] .docs-copy-btn, html[data-skin="neo"] .nm-ob-copy { border-radius: 8px; background: var(--neo-surface); border: 1px solid var(--neo-border); color: var(--neo-muted); }

/* ---------- Misc shared ---------- */
html[data-skin="neo"] .activity-feed { gap: 0; }
html[data-skin="neo"] .activity-item { padding: 10px 0; border-bottom: 1px solid var(--neo-border); }
html[data-skin="neo"] .activity-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--primary-light); color: var(--neo-accent); font-size: 13px; }
html[data-skin="neo"] .activity-time { color: var(--neo-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
html[data-skin="neo"] .info-box, html[data-skin="neo"] .warning-box, html[data-skin="neo"] .rp-panel {
  border: 1px solid var(--neo-border); border-left-width: 1px; border-radius: var(--neo-r-sm); background: var(--neo-surface-2); padding: 12px 14px; font-size: 13px;
}
html[data-skin="neo"] .warning-box { background: var(--neo-warning-bg); border-color: transparent; }
html[data-skin="neo"] .file-input-wrapper, html[data-skin="neo"] .fr-drop { border: 1px dashed var(--neo-border-strong); border-radius: var(--neo-r); background: var(--neo-surface-2); }
html[data-skin="neo"] .access-denied-container { background: var(--neo-surface); border: 1px solid var(--neo-border); border-radius: 16px; box-shadow: var(--neo-shadow); }
html[data-skin="neo"] .access-denied-icon { color: var(--neo-danger); }
html[data-skin="neo"] .access-denied-title { color: var(--neo-text); }
html[data-skin="neo"] .text-muted { color: var(--neo-muted); }
html[data-skin="neo"] hr { border: 0; border-top: 1px solid var(--neo-border); }

/* ---------- Help widget (self-themed in classic: 41 hardcoded colours) ---------- */
html[data-skin="neo"] .help-widget-button {
  width: 46px; height: 46px; border-radius: 999px; background: var(--neo-surface); color: var(--neo-accent);
  border: 1px solid var(--neo-border); box-shadow: var(--neo-shadow); font-size: 17px;
  transition: transform var(--neo-dur) var(--neo-ease), box-shadow var(--neo-dur);
}
html[data-skin="neo"] .help-widget-button:hover { transform: translateY(-2px); box-shadow: var(--neo-shadow-lg); background: var(--neo-surface); }
html[data-skin="neo"] .help-widget-overlay { background: rgba(2, 6, 23, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html[data-skin="neo"] .help-widget-modal { background: var(--neo-surface); color: var(--neo-text); border: 1px solid var(--neo-border); border-radius: 16px; box-shadow: var(--neo-shadow-lg); }
html[data-skin="neo"] .help-widget-header { background: transparent; color: var(--neo-text); border-bottom: 1px solid var(--neo-border); }
html[data-skin="neo"] .help-widget-title { color: var(--neo-text); font-weight: 600; }
html[data-skin="neo"] .help-widget-close, html[data-skin="neo"] .help-widget-theme-toggle { background: var(--neo-surface-2); color: var(--neo-muted); border: 1px solid var(--neo-border); border-radius: 8px; }
html[data-skin="neo"] .help-widget-search input { background: var(--neo-surface); color: var(--neo-text); border: 1px solid var(--neo-border-strong); border-radius: 999px; }
html[data-skin="neo"] .help-widget-content { color: var(--neo-text); }
html[data-skin="neo"] .help-widget-content h1, html[data-skin="neo"] .help-widget-content h2, html[data-skin="neo"] .help-widget-content h3, html[data-skin="neo"] .help-doc-section-title { color: var(--neo-text); }
html[data-skin="neo"] .help-widget-content p, html[data-skin="neo"] .help-widget-content li { color: var(--neo-text); }
html[data-skin="neo"] .help-doc-section { border-bottom: 1px solid var(--neo-border); }
html[data-skin="neo"] .help-highlight { background: rgba(20, 99, 184, .16); color: inherit; border-radius: 4px; }
html[data-skin="neo"] .help-widget-no-results { color: var(--neo-muted); }

/* ---------- Icon picker ---------- */
html[data-skin="neo"] .icon-picker-preview { background: var(--neo-surface-2); border: 1px solid var(--neo-border); border-radius: var(--neo-r-sm); }
html[data-skin="neo"] .preview-icon { color: var(--neo-accent); }
html[data-skin="neo"] .icon-category { color: var(--neo-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
html[data-skin="neo"] .icon-btn { border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--neo-text); }
html[data-skin="neo"] .icon-btn:hover { background: var(--neo-surface-2); border-color: var(--neo-border); }
html[data-skin="neo"] .icon-btn.selected { background: var(--primary-light); color: var(--neo-accent); border-color: var(--neo-accent); }

/* ---------- Browser surfaces ---------- */
html[data-skin="neo"] { scrollbar-color: var(--neo-border-strong) transparent; scrollbar-width: thin; }
html[data-skin="neo"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-skin="neo"] ::-webkit-scrollbar-track { background: transparent; }
html[data-skin="neo"] ::-webkit-scrollbar-thumb { background: var(--neo-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
html[data-skin="neo"] ::-webkit-scrollbar-thumb:hover { background: var(--neo-muted); background-clip: padding-box; }
html[data-skin="neo"] :focus-visible { outline: 2px solid var(--neo-accent); outline-offset: 2px; }
html[data-skin="neo"] .btn:focus-visible, html[data-skin="neo"] input:focus-visible, html[data-skin="neo"] select:focus-visible, html[data-skin="neo"] textarea:focus-visible { outline: none; }
html[data-skin="neo"] input { caret-color: var(--neo-accent); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  html[data-skin="neo"] .wme-bar .wme-wrap { padding: 8px 14px; }
  html[data-skin="neo"] section.wme-hero, html[data-skin="neo"] .header { padding: 18px 16px 4px; }
  html[data-skin="neo"] .hero-content { flex-direction: column; align-items: flex-start; }
  html[data-skin="neo"] header.wme-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--neo-surface); }
}