/* ═══════════════════════════════════════════════════════
   GLASSMORPHISM DESIGN SYSTEM v3 — Smart Orders
   Overlay: load AFTER app.css + hotfix.css
   ═══════════════════════════════════════════════════════ */

/* ── 0. VARIABLES ── */
:root,[data-theme="light"] {
  --bg: #e4e9f2;
  --bg-card: rgba(255,255,255,0.45);
  --bg-card-solid: rgba(255,255,255,0.55);
  --glass: rgba(255,255,255,0.35);
  --glass-strong: rgba(255,255,255,0.55);
  --glass-blur: 20px;
  --glass-border: rgba(255,255,255,0.5);
  --glass-border-subtle: rgba(255,255,255,0.25);
  --glass-shadow: 0 8px 32px rgba(31,38,135,0.08);
  --glass-shadow-lg: 0 16px 48px rgba(31,38,135,0.12);
  --glass-shadow-hover: 0 12px 40px rgba(31,38,135,0.14);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,0.6);
  --border: rgba(255,255,255,0.35);
  --border-hover: rgba(99,102,241,0.3);
  --text: #0f172a;
  --text-sec: #334155;
  --text-muted: #64748b;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-soft: rgba(99,102,241,0.1);
  --accent: #8b5cf6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --mesh-1: #c7d2fe;
  --mesh-2: #a5f3fc;
  --mesh-3: #fbcfe8;
  --mesh-4: #bfdbfe;
}

[data-theme="dark"] {
  --bg: #0a0e1a;
  --bg-card: rgba(15,20,40,0.55);
  --bg-card-solid: rgba(18,24,48,0.65);
  --glass: rgba(20,25,50,0.45);
  --glass-strong: rgba(25,32,60,0.6);
  --glass-blur: 24px;
  --glass-border: rgba(255,255,255,0.08);
  --glass-border-subtle: rgba(255,255,255,0.04);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
  --glass-shadow-lg: 0 16px 48px rgba(0,0,0,0.4);
  --glass-shadow-hover: 0 12px 40px rgba(0,0,0,0.45);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(139,92,246,0.35);
  --text: #e2e8f0;
  --text-sec: #94a3b8;
  --text-muted: #475569;
  --primary: #818cf8;
  --primary-hover: #a5b4fc;
  --primary-soft: rgba(129,140,248,0.12);
  --mesh-1: #1e1b4b;
  --mesh-2: #0c4a6e;
  --mesh-3: #4a1d5e;
  --mesh-4: #172554;
}

/* ── 1. BODY — mesh background ── */
body { background: var(--bg); }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, var(--mesh-1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 25%, var(--mesh-2) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 50% 80%, var(--mesh-3) 0%, transparent 50%),
    radial-gradient(ellipse 40% 55% at 25% 65%, var(--mesh-4) 0%, transparent 55%),
    var(--bg);
  animation: meshFloat 25s ease-in-out infinite alternate;
}

@keyframes meshFloat {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
  50%  { background-position: 5% 8%, 92% 5%, 45% 92%, 8% 55%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
}

/* ── 2. GLASS BASE ── */
.navbar,
.card,
.order-card,
.oc2,
.filter-card,
.stat-card,
.adm-card,
.src-row,
.sug-row,
.user-row,
.gift-card,
.coming-soon,
.onboarding-card {
  background: var(--bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
}

.card:hover, .order-card:hover, .oc2:hover,
.filter-card:hover, .stat-card:hover {
  box-shadow: var(--glass-shadow-hover), var(--glass-inset) !important;
  transform: translateY(-2px);
}

/* ── 3. NAVBAR ── */
.navbar {
  background: var(--glass-strong) !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-inset) !important;
  /* animation removed to prevent layout shift */
}

@keyframes navSlide {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.nav-tab { transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important; }
.nav-tab:hover, .nav-tab.active { background: rgba(99,102,241,0.12) !important; }
.nav-avatar {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}

/* ── 4. BUTTONS ── */
.btn-primary,
.btn-premium-primary,
.btn-premium.btn-premium-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  color: #fff !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}

.btn-primary:hover, .btn-premium-primary:hover {
  box-shadow: 0 8px 28px rgba(99,102,241,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.08);
}

.btn-primary:active, .btn-premium-primary:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3) !important;
}

.btn-secondary, .btn-premium-secondary, .btn-premium.btn-premium-secondary {
  background: var(--glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-inset) !important;
  transition: all 0.25s ease !important;
}

.btn-secondary:hover, .btn-premium-secondary:hover {
  background: var(--glass-strong) !important;
  border-color: var(--border-hover) !important;
  transform: translateY(-1px) !important;
}

.btn-danger {
  background: rgba(239,68,68,0.1) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(239,68,68,0.15) !important;
}

.btn-danger:hover {
  background: rgba(239,68,68,0.18) !important;
  transform: translateY(-1px) !important;
}

.btn-xs { backdrop-filter: blur(8px) !important; transition: all 0.2s ease !important; }
.btn-xs:hover { transform: translateY(-1px) scale(1.05) !important; }
.btn-xs.g { box-shadow: 0 2px 8px rgba(34,197,94,0.25) !important; }
.btn-xs.r { box-shadow: 0 2px 8px rgba(239,68,68,0.2) !important; }

.btn-icon {
  background: var(--glass) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  transition: all 0.25s ease !important;
}

.btn-icon:hover { background: var(--glass-strong) !important; transform: translateY(-1px) !important; }
.btn-icon-danger:hover { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.25) !important; }

/* Edit button in filter card */
.btn-premium-xs {
  padding: 6px 14px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  background: var(--glass) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-sec) !important;
  transition: all 0.2s ease !important;
}

.btn-premium-xs:hover {
  background: var(--glass-strong) !important;
  border-color: var(--border-hover) !important;
  color: var(--primary) !important;
  transform: translateY(-1px) !important;
}

/* ── 5. INPUTS ── */
.form-control, .field-input, .field-select,
#catSearch, .cat-search-input,
.add-row input, .gift-row input,
.premium-container input,
.premium-container select {
  background: var(--glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-inset) !important;
  transition: all 0.25s ease !important;
}

.form-control:focus, .field-input:focus,
.field-select:focus, #catSearch:focus,
.cat-search-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15), var(--glass-inset) !important;
  background: var(--glass-strong) !important;
}

/* ── 6. PREMIUM TEASER ── */
.premium-teaser {
  background: var(--bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  border-radius: 20px !important;
}

.teaser-chip {
  background: var(--glass) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  transition: all 0.2s ease !important;
}

.teaser-chip:hover {
  background: var(--glass-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.1);
}

/* ── 7. PREMIUM CONTAINER ── */
.premium-container {
  background: var(--bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  border-radius: 24px !important;
}

/* ── 8. FILTER CARDS — premium glass ── */
.filter-card-premium {
  background: var(--bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  border-radius: 20px !important;
  padding: 20px 24px !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  animation: filterCardIn 0.4s ease backwards;
  position: relative;
  overflow: hidden;
}

/* Subtle gradient shimmer on active filters */
.filter-card-premium.is-active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  border-radius: 20px 0 0 20px;
}

.filter-card-premium.is-paused {
  opacity: 0.55 !important;
}

.filter-card-premium.is-paused::before {
  background: var(--glass-border) !important;
}

.filters-grid .filter-card-premium:nth-child(1) { animation-delay: 0.05s; }
.filters-grid .filter-card-premium:nth-child(2) { animation-delay: 0.12s; }
.filters-grid .filter-card-premium:nth-child(3) { animation-delay: 0.19s; }
.filters-grid .filter-card-premium:nth-child(4) { animation-delay: 0.26s; }
.filters-grid .filter-card-premium:nth-child(5) { animation-delay: 0.33s; }

@keyframes filterCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.filter-card-premium:hover {
  box-shadow: var(--glass-shadow-hover), var(--glass-inset) !important;
  transform: translateY(-3px) !important;
}

/* Filter name */
.filter-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* Filter meta pills */
.filter-meta-item {
  background: var(--glass) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  border-radius: 10px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  transition: all 0.2s ease !important;
}

.filter-meta-item:hover {
  background: var(--glass-strong) !important;
  transform: translateY(-1px);
}

/* Filter actions row */
.filter-actions {
  border-top: 1px solid var(--glass-border-subtle) !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
}

/* Toggle label */
.toggle-label {
  color: var(--text-sec) !important;
  font-weight: 500 !important;
}

/* Filter badge */
.filter-badge {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
}

/* ── 9. ORDER CARDS ── */
.oc2 {
  border-radius: 24px !important;
  animation: cardIn 0.35s ease backwards;
}

.oc2:nth-child(1) { animation-delay: 0.03s; }
.oc2:nth-child(2) { animation-delay: 0.06s; }
.oc2:nth-child(3) { animation-delay: 0.09s; }
.oc2:nth-child(4) { animation-delay: 0.12s; }
.oc2:nth-child(5) { animation-delay: 0.15s; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.oc2[data-new="1"] {
  border-left: 3px solid var(--success) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset), -4px 0 16px rgba(16,185,129,0.1) !important;
  background: linear-gradient(90deg, rgba(16,185,129,0.05) 0%, transparent 30%) !important;
  transition: border-left-color .6s ease, box-shadow .6s ease, background .6s ease;
}

.oc2-badge, .oc2-geo-pill {
  background: var(--glass) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border-subtle) !important;
}

.oc2-btn-contact {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  box-shadow: 0 4px 12px rgba(5,150,105,0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  border: none !important;
  transition: all 0.25s ease !important;
}

.oc2-btn-contact:hover {
  box-shadow: 0 6px 20px rgba(5,150,105,0.35) !important;
  transform: translateY(-2px) !important;
}

.oc2-btn-pro {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  border: none !important;
  transition: all 0.25s ease !important;
}

.oc2-btn-pro:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(99,102,241,0.35) !important;
}

.oc2-btn-skip {
  background: var(--glass) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  transition: all 0.2s ease !important;
}

.oc2-btn-skip:hover {
  background: var(--glass-strong) !important;
  transform: translateY(-1px) !important;
}

.oc2-actions { border-top-color: var(--glass-border-subtle) !important; }

/* Score ring glow */
.oc2-score-ring.top .oc2-ring-fg { filter: drop-shadow(0 0 6px rgba(124,58,237,0.5)); }
.oc2-score-ring.high .oc2-ring-fg { filter: drop-shadow(0 0 4px rgba(5,150,105,0.4)); }
.oc2-score-ring.mid .oc2-ring-fg { filter: drop-shadow(0 0 4px rgba(217,119,6,0.4)); }

/* ── 10. MODALS — frosted premium ── */
.modal-overlay,
#paywallModal,
#clearModal,
#delUserModal,
#delSrcModal {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.modal-premium {
  background: var(--glass-strong) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-inset) !important;
  border-radius: 24px !important;
  animation: modalFloat 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

@keyframes modalFloat {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  border-bottom: 1px solid var(--glass-border-subtle) !important;
  padding: 22px 28px 18px !important;
}

.modal-header h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px;
}

.modal-body {
  padding: 24px 28px !important;
}

.modal-footer {
  border-top: 1px solid var(--glass-border-subtle) !important;
  background: var(--glass) !important;
  backdrop-filter: blur(12px) !important;
  padding: 18px 28px !important;
  border-radius: 0 0 24px 24px !important;
}

.modal-close {
  background: var(--glass) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}

.modal-close:hover {
  background: var(--glass-strong) !important;
  transform: rotate(90deg) !important;
}

/* Inner dialog boxes */
#paywallModal > div:last-child,
#clearModal > div:last-child,
#delUserModal > div,
#delSrcModal > div,
#termsModal > div {
  background: var(--glass-strong) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-lg), var(--glass-inset) !important;
  border-radius: 24px !important;
  animation: modalFloat 0.4s cubic-bezier(0.16,1,0.3,1);
}

/* ── 11. MODAL FORM FIELDS — refined ── */
.modal-premium .field-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 8px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.modal-premium .field-hint {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 6px !important;
  line-height: 1.5 !important;
}

.modal-premium .form-field {
  margin-bottom: 22px !important;
}

/* ── 12. CATEGORY CATALOG — premium glass ── */
.cat-catalog {
  background: var(--glass) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--glass-inset) !important;
  overflow: hidden;
}

.cat-group {
  border-bottom: 1px solid var(--glass-border-subtle) !important;
}

.cat-group:last-child {
  border-bottom: none !important;
}

.cat-group-header {
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  background: transparent !important;
  transition: background 0.2s ease !important;
}

.cat-group-header:hover {
  background: var(--glass) !important;
}

.cat-group-count {
  background: var(--glass-strong) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
}

.cat-group-items {
  padding: 6px 14px 14px !important;
}

/* Category item chips — glass pill style */
.cat-item {
  background: var(--glass) !important;
  backdrop-filter: blur(8px) !important;
  border: 1.5px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-sec) !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
  cursor: pointer !important;
}

.cat-item:hover {
  border-color: var(--border-hover) !important;
  background: var(--glass-strong) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.12) !important;
  color: var(--primary) !important;
}

.cat-item.is-checked {
  border-color: var(--primary) !important;
  background: rgba(99,102,241,0.12) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 12px rgba(99,102,241,0.18) !important;
}

.cat-item-icon {
  font-size: 15px !important;
}

/* Selected chips */
.cat-chip-selected {
  background: rgba(99,102,241,0.1) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(99,102,241,0.2) !important;
  border-radius: 12px !important;
  padding: 6px 12px !important;
}

/* Search input in catalog */
.cat-search-wrap {
  margin-bottom: 12px !important;
}

.cat-search-icon {
  color: var(--text-muted) !important;
}

/* ── 13. TOGGLE SWITCH ── */
.switch-slider, .toggle-slider {
  background: rgba(148,163,184,0.25) !important;
  border: none !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}

.switch input:checked + .switch-slider,
.premium-toggle input[type="checkbox"]:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3) !important;
}

/* ── 14. ADMIN SPOILERS — closed by default, glass reveal ── */
.spoiler-toggle { cursor: pointer; }
.spoiler-toggle .arrow { transition: transform 0.25s ease; }
.spoiler-toggle.open .arrow { transform: rotate(90deg); }
.spoiler-body { display: none; }
.spoiler-body.open {
  display: block;
  animation: glassReveal 0.35s ease;
}

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

/* Admin cards */
.adm-card {
  border-radius: 16px !important;
  transition: all 0.25s ease !important;
}

.adm-card:hover { transform: translateY(-2px) !important; }

.adm-card[style*="border-color:#22c55e"] {
  background: linear-gradient(135deg, rgba(34,197,94,0.06), var(--bg-card)) !important;
}

.adm-card[style*="border-color:#ef4444"] {
  background: linear-gradient(135deg, rgba(239,68,68,0.06), var(--bg-card)) !important;
}

/* Pipeline table */
.adm-section table thead tr { background: var(--glass) !important; }
.adm-section table tbody tr { transition: background 0.15s; }
.adm-section table tbody tr:hover { background: var(--glass) !important; }

/* ── 15. SUPPORT BLOCK — glass ── */
.support-block-premium {
  background: var(--bg-card) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  border-radius: 20px !important;
  padding: 20px 28px !important;
  text-align: center;
}

.support-block-premium .support-content p {
  color: var(--text-sec) !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

.support-link {
  color: var(--primary) !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.support-link:hover {
  color: var(--accent) !important;
  gap: 10px !important;
}

/* ── 16. TOAST ── */
.toast {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
}

.toast-success { background: rgba(5,150,105,0.88) !important; }
.toast-error { background: rgba(220,38,38,0.88) !important; }
.toast-info { background: rgba(99,102,241,0.88) !important; }

/* ── 17. AUTOCOMPLETE ── */
.ac-dropdown, .autocomplete-dropdown {
  background: var(--glass-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-lg) !important;
  border-radius: 16px !important;
}

/* ── 18. REASONS MODAL ── */
.reasons-box {
  background: var(--glass-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
}

.reasons-item {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  border-radius: 12px !important;
}

/* ── 19. EMPTY STATE ── */
.empty-state, .empty-state-premium {
  background: var(--glass) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
}

/* ── 20. SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.35); }

/* ── 21. SELECTION ── */
::selection { background: rgba(99,102,241,0.2); color: var(--text); }

/* ── 22. PAGE TITLES ── */
.page-title, .section-title {
  animation: titleFade 0.4s ease;
}

@keyframes titleFade {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── 23. STAT ICON ── */
.stat-icon {
  background: var(--glass) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border-subtle) !important;
}

/* ── 24. BADGE ── */
.badge {
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ── 25. PROFILE STATS ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stats-grid .stat-card {
  text-align: center;
  border-radius: 16px !important;
}

/* ── 26. SECTION HEADER ── */
.section-header {
  margin-bottom: 20px !important;
}

.section-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

/* ── 27. PRINT ── */
@media print {
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ── 28. REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════
   v4 OVERRIDES — higher specificity to beat hotfix.css
   ═══════════════════════════════════════════════════════ */

/* ── MODAL — force glass over hotfix !important ── */
body .modal-overlay {
  background: rgba(15,23,42,0.3) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body .modal-overlay .modal-premium {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow: 0 24px 80px rgba(31,38,135,0.12), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  border-radius: 28px !important;
}

body .modal-overlay .modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.3) !important;
  padding: 24px 28px 18px !important;
  background: transparent !important;
}

body .modal-overlay .modal-header h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

body .modal-overlay .modal-body {
  padding: 24px 28px !important;
  background: transparent !important;
}

body .modal-overlay .modal-footer {
  background: rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(255,255,255,0.3) !important;
  padding: 18px 28px !important;
  border-radius: 0 0 28px 28px !important;
}

body .modal-overlay .modal-close {
  background: rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 12px !important;
  width: 40px !important;
  height: 40px !important;
}

body .modal-overlay .modal-close:hover {
  background: rgba(255,255,255,0.6) !important;
  transform: rotate(90deg) !important;
}

/* ── MODAL FORM FIELDS — refined glass ── */
body .modal-premium .field-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 8px !important;
}

body .modal-premium .field-hint {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}

body .modal-premium .field-input,
body .modal-premium .field-select {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  border-radius: 14px !important;
  padding: 13px 16px !important;
  font-size: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

body .modal-premium .field-input:focus,
body .modal-premium .field-select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  background: rgba(255,255,255,0.65) !important;
}

body .modal-premium .form-field {
  margin-bottom: 24px !important;
}

/* ── CATEGORY CATALOG in modal — force glass ── */
body .modal-premium .cat-catalog {
  background: rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

body .modal-premium .cat-group {
  border-bottom: 1px solid rgba(255,255,255,0.25) !important;
}

body .modal-premium .cat-group:last-child {
  border-bottom: none !important;
}

body .modal-premium .cat-group-header {
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: transparent !important;
  border: none !important;
}

body .modal-premium .cat-group-header:hover {
  background: rgba(255,255,255,0.3) !important;
}

body .modal-premium .cat-group-count {
  background: rgba(255,255,255,0.5) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  color: #64748b !important;
}

body .modal-premium .cat-group-items {
  padding: 6px 14px 14px !important;
}

body .modal-premium .cat-item {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  color: #334155 !important;
  transition: all 0.2s ease !important;
}

body .modal-premium .cat-item:hover {
  border-color: rgba(99,102,241,0.35) !important;
  background: rgba(255,255,255,0.6) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.1) !important;
  color: #6366f1 !important;
}

body .modal-premium .cat-item.is-checked {
  border-color: #6366f1 !important;
  background: rgba(99,102,241,0.1) !important;
  color: #6366f1 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 12px rgba(99,102,241,0.15) !important;
}

/* Search in catalog */
body .modal-premium .cat-search-input,
body .modal-premium #catSearch {
  background: rgba(255,255,255,0.5) !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  border-radius: 14px !important;
}

body .modal-premium .cat-search-input:focus,
body .modal-premium #catSearch:focus {
  border-color: #6366f1 !important;
  background: rgba(255,255,255,0.65) !important;
}

/* Selected chips */
body .modal-premium .cat-chip-selected {
  background: rgba(99,102,241,0.08) !important;
  border: 1px solid rgba(99,102,241,0.2) !important;
  border-radius: 12px !important;
}

/* ── PREMIUM TEASER — force glass ── */
body .premium-teaser {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow: 0 8px 32px rgba(31,38,135,0.08), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  border-radius: 22px !important;
  padding: 18px 22px !important;
}

body .premium-teaser h4 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body .premium-teaser .teaser-chip {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: 999px !important;
  color: #0f172a !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

body .premium-teaser .teaser-chip:hover {
  background: rgba(255,255,255,0.65) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.1) !important;
}

/* ── PREMIUM CONTAINER — force glass ── */
body .premium-container {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow: 0 8px 32px rgba(31,38,135,0.08), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  border-radius: 26px !important;
  padding: 24px !important;
}

/* ── FILTER CARDS — force glass ── */
body .filter-card-premium {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 8px 32px rgba(31,38,135,0.06), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  border-radius: 22px !important;
  padding: 20px 24px !important;
  position: relative !important;
  overflow: hidden !important;
}

body .filter-card-premium:hover {
  box-shadow: 0 14px 44px rgba(31,38,135,0.12), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  transform: translateY(-3px) !important;
}

body .filter-card-premium.is-active {
  border-left: none !important;
}

body .filter-card-premium.is-active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, #6366f1, #8b5cf6) !important;
  border-radius: 22px 0 0 22px !important;
}

body .filter-card-premium.is-paused {
  opacity: 0.5 !important;
}

body .filter-card-premium .filter-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

body .filter-card-premium .filter-meta-item {
  background: rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 10px !important;
  padding: 4px 12px !important;
}

body .filter-card-premium .filter-actions {
  border-top: 1px solid rgba(255,255,255,0.25) !important;
  padding-top: 14px !important;
}

/* ── SUPPORT BLOCK — force glass, no arrow ── */
body .support-block-premium {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow: 0 8px 32px rgba(31,38,135,0.06), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  border-radius: 22px !important;
  padding: 20px 28px !important;
}

body .support-block-premium .support-link {
  color: #6366f1 !important;
  font-weight: 700 !important;
  gap: 0 !important;
}

body .support-block-premium .support-link:hover {
  color: #4f46e5 !important;
}

/* Hide arrow in support link */
body .support-block-premium .support-link::after {
  display: none !important;
}

/* ── TOGGLE — glass premium ── */
body .premium-toggle .toggle-slider {
  background: rgba(148,163,184,0.2) !important;
  border: none !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08) !important;
}

body .premium-toggle input:checked + .toggle-slider {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  box-shadow: 0 2px 10px rgba(99,102,241,0.3) !important;
}

/* ── DARK THEME overrides ── */
[data-theme="dark"] body .modal-overlay .modal-premium,
[data-theme="dark"] body .premium-container,
[data-theme="dark"] body .premium-teaser,
[data-theme="dark"] body .filter-card-premium,
[data-theme="dark"] body .support-block-premium {
  background: rgba(18,24,48,0.7) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] body .modal-premium .field-input,
[data-theme="dark"] body .modal-premium .field-select,
[data-theme="dark"] body .modal-premium .cat-catalog,
[data-theme="dark"] body .modal-premium .cat-item {
  background: rgba(20,25,50,0.5) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #e2e8f0 !important;
}

/* ═══════════════════════════════════════════════════════
   v5 — DARK THEME FULL FIX for filters/modals/login
   ═══════════════════════════════════════════════════════ */

/* ── All glass containers in dark ── */
[data-theme="dark"] body .premium-teaser,
[data-theme="dark"] body .premium-container,
[data-theme="dark"] body .filter-card-premium,
[data-theme="dark"] body .support-block-premium {
  background: rgba(15,20,40,0.6) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] body .premium-teaser .teaser-chip {
  background: rgba(25,32,60,0.6) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #c7d2fe !important;
}

[data-theme="dark"] body .filter-card-premium .filter-name {
  color: #e2e8f0 !important;
}

[data-theme="dark"] body .filter-card-premium .filter-meta-item {
  background: rgba(25,32,60,0.5) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] body .filter-card-premium .filter-actions {
  border-top-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] body .filter-card-premium.is-active::before {
  background: linear-gradient(180deg, #818cf8, #a78bfa) !important;
}

[data-theme="dark"] body .filter-card-premium:hover {
  box-shadow: 0 14px 44px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ── Modal dark ── */
[data-theme="dark"] body .modal-overlay .modal-premium {
  background: rgba(15,20,40,0.85) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] body .modal-overlay .modal-header {
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] body .modal-overlay .modal-header h2 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] body .modal-overlay .modal-footer {
  background: rgba(15,20,40,0.6) !important;
  border-top-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] body .modal-overlay .modal-close {
  background: rgba(25,32,60,0.6) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #94a3b8 !important;
}

/* ── Modal form fields dark ── */
[data-theme="dark"] body .modal-premium .field-label {
  color: #c7d2fe !important;
}

[data-theme="dark"] body .modal-premium .field-hint {
  color: #64748b !important;
}

[data-theme="dark"] body .modal-premium .field-input,
[data-theme="dark"] body .modal-premium .field-select {
  background: rgba(20,25,50,0.6) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

[data-theme="dark"] body .modal-premium .field-input:focus,
[data-theme="dark"] body .modal-premium .field-select:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,0.15), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  background: rgba(25,32,60,0.7) !important;
}

[data-theme="dark"] body .modal-premium .field-input::placeholder {
  color: #475569 !important;
}

/* ── Category catalog dark ── */
[data-theme="dark"] body .modal-premium .cat-catalog {
  background: rgba(15,20,40,0.5) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] body .modal-premium .cat-group {
  border-bottom-color: rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] body .modal-premium .cat-group-header {
  color: #c7d2fe !important;
}

[data-theme="dark"] body .modal-premium .cat-group-header:hover {
  background: rgba(25,32,60,0.5) !important;
}

[data-theme="dark"] body .modal-premium .cat-group-count {
  background: rgba(25,32,60,0.6) !important;
  border-color: rgba(255,255,255,0.04) !important;
  color: #64748b !important;
}

[data-theme="dark"] body .modal-premium .cat-item {
  background: rgba(20,25,50,0.5) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] body .modal-premium .cat-item:hover {
  border-color: rgba(129,140,248,0.3) !important;
  background: rgba(25,32,60,0.7) !important;
  color: #818cf8 !important;
  box-shadow: 0 4px 16px rgba(129,140,248,0.1) !important;
}

[data-theme="dark"] body .modal-premium .cat-item.is-checked {
  border-color: #818cf8 !important;
  background: rgba(129,140,248,0.12) !important;
  color: #a5b4fc !important;
  box-shadow: 0 2px 12px rgba(129,140,248,0.15) !important;
}

[data-theme="dark"] body .modal-premium .cat-chip-selected {
  background: rgba(129,140,248,0.1) !important;
  border-color: rgba(129,140,248,0.2) !important;
  color: #a5b4fc !important;
}

[data-theme="dark"] body .modal-premium .cat-search-input,
[data-theme="dark"] body .modal-premium #catSearch {
  background: rgba(20,25,50,0.6) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #e2e8f0 !important;
}

/* ── Toggle dark ── */
[data-theme="dark"] body .premium-toggle .toggle-slider {
  background: rgba(55,65,90,0.5) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important;
}

[data-theme="dark"] body .toggle-label {
  color: #94a3b8 !important;
}

/* ── Support dark ── */
[data-theme="dark"] body .support-block-premium .support-content p {
  color: #94a3b8 !important;
}

[data-theme="dark"] body .support-block-premium .support-link {
  color: #818cf8 !important;
}

/* ── Section title dark ── */
[data-theme="dark"] .section-title {
  color: #e2e8f0 !important;
}

/* ── Paywall/Clear/Delete modals dark ── */
[data-theme="dark"] #paywallModal > div:last-child,
[data-theme="dark"] #clearModal > div:last-child,
[data-theme="dark"] #delUserModal > div,
[data-theme="dark"] #delSrcModal > div,
[data-theme="dark"] #termsModal > div {
  background: rgba(15,20,40,0.9) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ── Login page dark overrides ── */
[data-theme="dark"] .ln-stat {
  background: rgba(15,20,40,0.6) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] .ln-stat-num { color: #e2e8f0 !important; }
[data-theme="dark"] .ln-stat-label { color: #64748b !important; }

[data-theme="dark"] .ln-feat {
  background: rgba(15,20,40,0.6) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] .ln-feat-title { color: #e2e8f0 !important; }
[data-theme="dark"] .ln-feat-desc { color: #64748b !important; }

[data-theme="dark"] .ln-h1 { color: #e2e8f0 !important; }
[data-theme="dark"] .ln-h1 span { color: #818cf8 !important; }
[data-theme="dark"] .ln-desc { color: #94a3b8 !important; }
[data-theme="dark"] .ln-trigger { color: #c7d2fe !important; }
[data-theme="dark"] .ln-trigger::before { background: #818cf8 !important; }
[data-theme="dark"] .ln-logo-text { color: #e2e8f0 !important; }
[data-theme="dark"] .ln-logo-sub { color: #64748b !important; }
[data-theme="dark"] .ln-cta-hint { color: #475569 !important; }
[data-theme="dark"] .ln-footer { color: #475569 !important; }
[data-theme="dark"] .ln-tg-alt-text { color: #475569 !important; }
[data-theme="dark"] .ln-tg-alt-line { background: rgba(255,255,255,0.06) !important; }

[data-theme="dark"] .sms-modal {
  background: rgba(15,20,40,0.9) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

[data-theme="dark"] .sms-title { color: #e2e8f0 !important; }
[data-theme="dark"] .sms-subtitle { color: #64748b !important; }
[data-theme="dark"] .sms-phone-input,
[data-theme="dark"] .sms-code-digit {
  background: rgba(20,25,50,0.6) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .sms-prefix {
  background: rgba(25,32,60,0.6) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .sms-close {
  background: rgba(25,32,60,0.6) !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .ln-dev {
  background: rgba(15,20,40,0.6) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] .ln-dev p { color: #94a3b8 !important; }
[data-theme="dark"] .ln-dev input {
  background: rgba(20,25,50,0.6) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .ln-dev button {
  background: linear-gradient(135deg, #818cf8, #a78bfa) !important;
}

/* ═══ v6 — PRICING + OFFER + PRIVACY glass ═══ */
body .pr-card{background:rgba(255,255,255,0.45)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border:1px solid rgba(255,255,255,0.5)!important;box-shadow:0 12px 40px rgba(31,38,135,0.1),inset 0 1px 0 rgba(255,255,255,0.6)!important;border-radius:24px!important}
body .pr-stat{background:rgba(255,255,255,0.45)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;border:1px solid rgba(255,255,255,0.5)!important;box-shadow:0 8px 28px rgba(31,38,135,0.06),inset 0 1px 0 rgba(255,255,255,0.6)!important;border-radius:18px!important;transition:all .25s ease!important}
body .pr-stat:hover{transform:translateY(-2px)!important;box-shadow:0 12px 36px rgba(31,38,135,0.12)!important}
body .pr-access{background:rgba(99,102,241,0.06)!important;border:1px solid rgba(99,102,241,0.12)!important;border-radius:14px!important;color:var(--primary)!important}
body .pr-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;border-radius:16px!important;box-shadow:0 6px 24px rgba(99,102,241,0.35),inset 0 1px 0 rgba(255,255,255,0.15)!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}
body .pr-btn:hover{transform:translateY(-2px) scale(1.02)!important;box-shadow:0 10px 32px rgba(99,102,241,0.45)!important;filter:brightness(1.08)!important}
body .pr-btn[style*="background:#059669"]{background:linear-gradient(135deg,#059669,#10b981)!important;box-shadow:0 4px 16px rgba(5,150,105,0.3),inset 0 1px 0 rgba(255,255,255,0.15)!important}
body .pr-trust{background:rgba(255,255,255,0.35)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;border:1px solid rgba(255,255,255,0.4)!important;border-radius:18px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5)!important}
body .pr-features li{border-bottom-color:rgba(255,255,255,0.2)!important}
body .pr-features .ck{color:var(--primary)!important}
body .pr-stat-num{color:var(--primary)!important}
body .pr-price{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
body .card[style*="max-width:720px"]{background:rgba(255,255,255,0.45)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border:1px solid rgba(255,255,255,0.5)!important;box-shadow:0 12px 40px rgba(31,38,135,0.1),inset 0 1px 0 rgba(255,255,255,0.6)!important;border-radius:24px!important;padding:32px 36px!important}
[data-theme="dark"] body .pr-card{background:rgba(15,20,40,0.6)!important;border-color:rgba(255,255,255,0.08)!important;box-shadow:0 12px 40px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.04)!important}
[data-theme="dark"] body .pr-stat{background:rgba(15,20,40,0.6)!important;border-color:rgba(255,255,255,0.08)!important}
[data-theme="dark"] body .pr-trust{background:rgba(15,20,40,0.5)!important;border-color:rgba(255,255,255,0.06)!important}
[data-theme="dark"] body .pr-title{color:#e2e8f0!important}
[data-theme="dark"] body .pr-sub,[data-theme="dark"] body .pr-sub2{color:#94a3b8!important}
[data-theme="dark"] body .pr-period{color:#64748b!important}
[data-theme="dark"] body .pr-features li{color:#c7d2fe!important;border-bottom-color:rgba(255,255,255,0.04)!important}
[data-theme="dark"] body .pr-note{color:#475569!important}
[data-theme="dark"] body .pr-access{background:rgba(129,140,248,0.08)!important;border-color:rgba(129,140,248,0.15)!important;color:#818cf8!important}
[data-theme="dark"] body .card[style*="max-width:720px"]{background:rgba(15,20,40,0.6)!important;border-color:rgba(255,255,255,0.08)!important}

/* ===== SKY TOGGLE — Day/Night Theme Switcher ===== */

/* ── Sky Toggle: reset .btn overrides ── */
button.sky-toggle,button.sky-toggle:hover,button.sky-toggle:focus,button.sky-toggle:active{display:block;align-items:initial;justify-content:initial;gap:0;font-weight:normal;letter-spacing:normal;text-transform:none;background:none;color:inherit;border-radius:calc(var(--st-h)/2);padding:0;box-shadow:none;transform:none}
.sky-toggle{--st-w:68px;--st-h:34px;--st-thumb:26px;--st-pad:4px;position:relative;width:var(--st-w);height:var(--st-h);border-radius:calc(var(--st-h)/2);cursor:pointer;border:none;outline:none;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:box-shadow .4s ease;padding:0;flex-shrink:0}
.sky-toggle:focus-visible{box-shadow:0 0 0 3px rgba(99,102,241,.5)}
.sky-toggle:active .sky-toggle__thumb{transform:scale(.88)}
.sky-toggle__sky{position:absolute;inset:0;border-radius:inherit;overflow:hidden;transition:background .6s cubic-bezier(.4,0,.2,1)}
.sky-toggle[data-mode="light"] .sky-toggle__sky{background:linear-gradient(180deg,#4facfe,#7ec8f8 50%,#a8e0ff)}
.sky-toggle[data-mode="dark"] .sky-toggle__sky{background:linear-gradient(180deg,#0c1445,#1b2a6b 50%,#2d3a8c)}
.sky-toggle__stars{position:absolute;inset:0;transition:opacity .5s ease .1s}
.sky-toggle[data-mode="light"] .sky-toggle__stars{opacity:0}
.sky-toggle[data-mode="dark"] .sky-toggle__stars{opacity:1}
.sky-toggle__star{position:absolute;background:#fff;border-radius:50%;animation:skyTwinkle 2s ease-in-out infinite alternate}
.sky-toggle__star:nth-child(1){width:2px;height:2px;top:7px;left:10px;animation-delay:0s}
.sky-toggle__star:nth-child(2){width:1.5px;height:1.5px;top:5px;left:22px;animation-delay:.4s}
.sky-toggle__star:nth-child(3){width:2px;height:2px;top:14px;left:16px;animation-delay:.8s}
.sky-toggle__star:nth-child(4){width:1px;height:1px;top:10px;left:30px;animation-delay:1.2s}
.sky-toggle__star:nth-child(5){width:1.5px;height:1.5px;top:22px;left:8px;animation-delay:.6s}
.sky-toggle__star:nth-child(6){width:1px;height:1px;top:20px;left:26px;animation-delay:1s}
@keyframes skyTwinkle{0%{opacity:.3;transform:scale(1)}100%{opacity:1;transform:scale(1.4)}}
.sky-toggle__clouds{position:absolute;inset:0;transition:opacity .5s ease}
.sky-toggle[data-mode="light"] .sky-toggle__clouds{opacity:1}
.sky-toggle[data-mode="dark"] .sky-toggle__clouds{opacity:0}
.sky-toggle__cloud{position:absolute;background:rgba(255,255,255,.85);border-radius:50px;animation:skyDrift 6s ease-in-out infinite alternate}
.sky-toggle__cloud:nth-child(1){width:18px;height:6px;top:10px;left:6px}
.sky-toggle__cloud:nth-child(2){width:14px;height:5px;top:20px;left:14px;animation-delay:1s;opacity:.7}
.sky-toggle__cloud:nth-child(3){width:10px;height:4px;top:8px;left:24px;animation-delay:2s;opacity:.5}
@keyframes skyDrift{0%{transform:translateX(0)}100%{transform:translateX(4px)}}
.sky-toggle__thumb{position:absolute;top:var(--st-pad);width:var(--st-thumb);height:var(--st-thumb);border-radius:50%;transition:left .5s cubic-bezier(.68,-.3,.32,1.3),background .4s ease,box-shadow .4s ease,transform .3s ease;z-index:2}
.sky-toggle[data-mode="light"] .sky-toggle__thumb{left:var(--st-pad);background:linear-gradient(135deg,#ffd700,#ffaa00);box-shadow:0 0 8px rgba(255,170,0,.6),0 0 20px rgba(255,200,0,.3),inset -2px -2px 4px rgba(255,140,0,.3)}
.sky-toggle[data-mode="dark"] .sky-toggle__thumb{left:calc(var(--st-w) - var(--st-thumb) - var(--st-pad));background:linear-gradient(135deg,#e8e8f0,#c8c8e0);box-shadow:0 0 8px rgba(200,200,240,.4),0 0 16px rgba(180,180,255,.2),inset -3px -2px 4px rgba(160,160,200,.4)}
.sky-toggle__crater{position:absolute;border-radius:50%;background:rgba(160,160,200,.3);transition:opacity .4s ease .2s}
.sky-toggle[data-mode="light"] .sky-toggle__crater{opacity:0}
.sky-toggle[data-mode="dark"] .sky-toggle__crater{opacity:1}
.sky-toggle__crater:nth-child(1){width:6px;height:6px;top:5px;left:14px}
.sky-toggle__crater:nth-child(2){width:4px;height:4px;top:14px;left:8px}
.sky-toggle__crater:nth-child(3){width:3px;height:3px;top:10px;left:18px}
.sky-toggle__rays{position:absolute;inset:-4px;border-radius:50%;transition:opacity .4s ease}
.sky-toggle[data-mode="light"] .sky-toggle__rays{opacity:1}
.sky-toggle[data-mode="dark"] .sky-toggle__rays{opacity:0}
.sky-toggle__ray{position:absolute;width:2px;height:5px;background:#ffd700;border-radius:2px;left:50%;top:50%;transform-origin:center center;animation:skyRayPulse 3s ease-in-out infinite alternate}
.sky-toggle__ray:nth-child(1){transform:translate(-50%,-16px) rotate(0deg)}
.sky-toggle__ray:nth-child(2){transform:translate(-50%,-16px) rotate(45deg);animation-delay:.3s}
.sky-toggle__ray:nth-child(3){transform:translate(-50%,-16px) rotate(90deg);animation-delay:.6s}
.sky-toggle__ray:nth-child(4){transform:translate(-50%,-16px) rotate(135deg);animation-delay:.9s}
.sky-toggle__ray:nth-child(5){transform:translate(-50%,-16px) rotate(180deg);animation-delay:1.2s}
.sky-toggle__ray:nth-child(6){transform:translate(-50%,-16px) rotate(225deg);animation-delay:1.5s}
.sky-toggle__ray:nth-child(7){transform:translate(-50%,-16px) rotate(270deg);animation-delay:1.8s}
.sky-toggle__ray:nth-child(8){transform:translate(-50%,-16px) rotate(315deg);animation-delay:2.1s}
@keyframes skyRayPulse{0%{opacity:.4;height:4px}100%{opacity:.9;height:6px}}
.sky-toggle::after{content:'';position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;transition:box-shadow .6s ease}
.sky-toggle[data-mode="light"]::after{box-shadow:inset 0 1px 2px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08)}
.sky-toggle[data-mode="dark"]::after{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 12px rgba(100,100,255,.15)}
.sky-theme-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sky-theme-label{font-size:13px;color:#64748b;font-weight:500;min-width:50px;text-align:right}
.sky-theme-label--active{color:#059669;font-weight:600}

/* ═══════════════════════════════════════════════════════
   MOBILE MODAL — bottom sheet layout (matches hotfix.css
   mobile fixes but with body-prefixed specificity to beat
   the v4 desktop overrides above)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  body .modal-overlay .modal-premium {
    width: 100% !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0px)) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
  }
  body .modal-overlay .modal-header {
    padding: 16px 20px 12px !important;
  }
  body .modal-overlay .modal-body {
    padding: 16px 20px !important;
    max-height: none !important;
  }
  body .modal-overlay .modal-footer {
    padding: 14px 20px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    gap: 10px !important;
  }
  body .modal-overlay .modal-footer .btn-premium {
    flex: 1 !important;
    padding: 14px 16px !important;
  }
  /* dark mode mobile */
  [data-theme="dark"] body .modal-overlay .modal-footer {
    border-radius: 0 !important;
  }
  [data-theme="dark"] body .modal-overlay .modal-premium {
    border-radius: 20px 20px 0 0 !important;
  }
}