:root {
  --ux-font: "ui-rounded", "SF Pro Rounded", "SF Pro Text", "Tajawal", "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ux-a1: #38bdf8;
  --ux-a2: #2563eb;
  --ux-a3: #14b8a6;
  --ux-a4: #8b5cf6;
  --ux-a5: #22c55e;
  --ux-a6: #f59e0b;
  --ux-shadow-soft: 0 12px 28px rgba(2, 6, 23, 0.22);
  --ux-shadow-strong: 0 18px 42px rgba(2, 6, 23, 0.32);
  --ux-toolbar-bg: rgba(15, 23, 42, 0.82);
  --ux-toolbar-border: rgba(148, 163, 184, 0.24);
  --ux-card-border: rgba(148, 163, 184, 0.18);
  --ux-card-hi: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1020;
  --bg2: #111827;
  --bg3: #162033;
  --bg4: #1d2a42;
  --surface: #111827;
  --card: #162033;
  --border: rgba(148, 163, 184, 0.16);
  --border2: rgba(148, 163, 184, 0.24);
  --border3: rgba(148, 163, 184, 0.34);
  --text: #f8fafc;
  --text2: #cbd5e1;
  --text3: #94a3b8;
  --muted: #94a3b8;
  --accent: #3b82f6;
  --accent2: #14b8a6;
  --accent-glow: rgba(59, 130, 246, 0.24);
  --red: #ef4444;
  --red2: #dc2626;
  --green: #059669;
  --green2: #10b981;
  --cyan: #06b6d4;
  --amber: #f59e0b;
  --gold: #f59e0b;
  --topbar-bg: rgba(15, 23, 42, 0.88);
  --ux-toolbar-bg: rgba(15, 23, 42, 0.84);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fb;
  --bg2: #ffffff;
  --bg3: #f9fbff;
  --bg4: #eef2f7;
  --surface: #ffffff;
  --card: #ffffff;
  --border: rgba(71, 85, 105, 0.18);
  --border2: rgba(71, 85, 105, 0.26);
  --border3: rgba(71, 85, 105, 0.36);
  --text: #111827;
  --text2: #334155;
  --text3: #64748b;
  --muted: #64748b;
  --accent: #2563eb;
  --accent2: #0f766e;
  --accent-glow: rgba(37, 99, 235, 0.18);
  --red: #dc2626;
  --red2: #b91c1c;
  --green: #047857;
  --green2: #059669;
  --cyan: #0891b2;
  --amber: #d97706;
  --gold: #b7791f;
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --ux-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.12);
  --ux-shadow-strong: 0 16px 34px rgba(15, 23, 42, 0.16);
  --ux-toolbar-bg: rgba(255, 255, 255, 0.82);
  --ux-toolbar-border: rgba(71, 85, 105, 0.2);
  --ux-card-border: rgba(71, 85, 105, 0.18);
  --ux-card-hi: rgba(255, 255, 255, 0.62);
}

body.ux-premium {
  font-family: var(--ux-font);
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}

body.ux-premium::before,
body.ux-premium::after {
  content: "";
  position: fixed;
  inset: -16%;
  pointer-events: none;
  z-index: -2;
}

body.ux-premium::before {
  background:
    radial-gradient(circle at 12% 14%, rgba(56, 189, 248, 0.22), transparent 42%),
    radial-gradient(circle at 87% 10%, rgba(20, 184, 166, 0.14), transparent 44%),
    radial-gradient(circle at 82% 80%, rgba(139, 92, 246, 0.12), transparent 48%);
}

body.ux-premium::after {
  background:
    radial-gradient(circle at 30% 88%, rgba(34, 197, 94, 0.14), transparent 44%),
    radial-gradient(circle at 58% 55%, rgba(37, 99, 235, 0.11), transparent 46%);
}

body.ux-premium.ux-luxe-v3 .section,
body.ux-premium.ux-luxe-v3 .card,
body.ux-premium.ux-luxe-v3 .sub-card,
body.ux-premium.ux-luxe-v3 .payments-card,
body.ux-premium.ux-luxe-v3 .messages-card,
body.ux-premium.ux-luxe-v3 .settings-panel,
body.ux-premium.ux-luxe-v3 .settings-section,
body.ux-premium.ux-luxe-v3 .table-wrap,
body.ux-premium.ux-luxe-v3 .stat,
body.ux-premium.ux-luxe-v3 .stat-card,
body.ux-premium.ux-luxe-v3 .plan-card,
body.ux-premium.ux-luxe-v3 .countdown-card,
body.ux-premium.ux-luxe-v3 .vc-box,
body.ux-premium.ux-luxe-v3 .profile-modal,
body.ux-premium.ux-luxe-v3 .modal,
body.ux-premium.ux-luxe-v3 .notice {
  border-color: var(--ux-card-border) !important;
  box-shadow: var(--ux-shadow-soft);
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Keep long forms inside modals scrollable on small viewports. */
body.ux-premium.ux-luxe-v3 .profile-modal,
body.ux-premium.ux-luxe-v3 .modal {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.ux-premium .modal-overlay,
body.ux-premium .profile-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-height: 760px) {
  body.ux-premium .modal-overlay.open,
  body.ux-premium .modal-overlay.show,
  body.ux-premium .profile-overlay.show {
    align-items: flex-start;
  }

  body.ux-premium .modal-overlay.open .modal,
  body.ux-premium .modal-overlay.show .modal,
  body.ux-premium .profile-overlay.show .profile-modal {
    margin-block: 12px;
  }
}

body.ux-premium.ux-luxe-v3 .section::after,
body.ux-premium.ux-luxe-v3 .card::after,
body.ux-premium.ux-luxe-v3 .sub-card::after,
body.ux-premium.ux-luxe-v3 .payments-card::after,
body.ux-premium.ux-luxe-v3 .messages-card::after,
body.ux-premium.ux-luxe-v3 .settings-panel::after,
body.ux-premium.ux-luxe-v3 .settings-section::after,
body.ux-premium.ux-luxe-v3 .table-wrap::after,
body.ux-premium.ux-luxe-v3 .stat::after,
body.ux-premium.ux-luxe-v3 .stat-card::after,
body.ux-premium.ux-luxe-v3 .plan-card::after,
body.ux-premium.ux-luxe-v3 .countdown-card::after,
body.ux-premium.ux-luxe-v3 .vc-box::after,
body.ux-premium.ux-luxe-v3 .profile-modal::after,
body.ux-premium.ux-luxe-v3 .modal::after,
body.ux-premium.ux-luxe-v3 .notice::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ux-section-a, var(--ux-a1)), var(--ux-section-b, var(--ux-a2)));
}

body.ux-premium.ux-luxe-v3 .section:hover,
body.ux-premium.ux-luxe-v3 .card:hover,
body.ux-premium.ux-luxe-v3 .sub-card:hover,
body.ux-premium.ux-luxe-v3 .payments-card:hover,
body.ux-premium.ux-luxe-v3 .messages-card:hover,
body.ux-premium.ux-luxe-v3 .settings-panel:hover,
body.ux-premium.ux-luxe-v3 .settings-section:hover,
body.ux-premium.ux-luxe-v3 .stat:hover,
body.ux-premium.ux-luxe-v3 .stat-card:hover,
body.ux-premium.ux-luxe-v3 .plan-card:hover,
body.ux-premium.ux-luxe-v3 .countdown-card:hover,
body.ux-premium.ux-luxe-v3 .vc-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--ux-shadow-strong);
}

.ux-section-accent-0 { --ux-section-a: var(--ux-a1); --ux-section-b: var(--ux-a2); }
.ux-section-accent-1 { --ux-section-a: var(--ux-a3); --ux-section-b: var(--ux-a6); }
.ux-section-accent-2 { --ux-section-a: var(--ux-a4); --ux-section-b: var(--ux-a1); }
.ux-section-accent-3 { --ux-section-a: var(--ux-a5); --ux-section-b: var(--ux-a2); }
.ux-section-accent-4 { --ux-section-a: var(--ux-a6); --ux-section-b: var(--ux-a3); }
.ux-section-accent-5 { --ux-section-a: var(--ux-a2); --ux-section-b: var(--ux-a4); }

.ux-toolbar {
  position: relative;
  z-index: 30;
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding: 0;
  border-radius: 14px;
}

.ux-toolbar-inline {
  margin-inline-start: 8px;
}

.ux-toolbar-floating {
  position: fixed;
  bottom: 12px;
  inset-inline-start: 12px;
  z-index: 24000;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--ux-toolbar-border);
  background: var(--ux-toolbar-bg);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--ux-shadow-strong);
}

.ux-control {
  border: 1px solid var(--ux-toolbar-border);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  min-height: 44px;
  min-width: 112px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-family: var(--ux-font);
}

.ux-control:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(22, 75, 146, 0.28);
  border-color: rgba(120, 179, 255, 0.55);
}

.ux-control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ux-control-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, var(--ux-a6), var(--ux-a3));
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.26);
  flex-shrink: 0;
}

#ux-theme-toggle .ux-control-icon {
  font-size: 15px;
}

#ux-lang-toggle .ux-control-icon {
  background: linear-gradient(145deg, var(--ux-a2), var(--ux-a4));
  font-size: 11px;
  letter-spacing: 0;
}

.ux-control-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.ux-control-main {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.ux-control-sub {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text3);
  font-weight: 700;
  white-space: nowrap;
}

.topbar-right .ux-toolbar-inline .ux-control,
.nav-right .ux-toolbar-inline .ux-control {
  min-width: 96px;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 11px;
}

.topbar-right .ux-toolbar-inline .ux-control-main,
.nav-right .ux-toolbar-inline .ux-control-main {
  font-size: 11px;
}

.topbar-right .ux-toolbar-inline .ux-control-sub,
.nav-right .ux-toolbar-inline .ux-control-sub {
  font-size: 8px;
}

.topbar-right .ux-toolbar-inline .ux-control-icon,
.nav-right .ux-toolbar-inline .ux-control-icon {
  width: 20px;
  height: 20px;
  font-size: 10px;
  border-radius: 6px;
}

body.ux-premium .ni {
  width: 34px !important;
  height: 34px;
  border-radius: 11px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 17px !important;
  background: linear-gradient(145deg, rgba(83, 168, 255, 0.22), rgba(3, 199, 243, 0.2));
  border: 1px solid rgba(146, 195, 255, 0.34);
  box-shadow: inset 0 1px 0 var(--ux-card-hi), 0 8px 16px rgba(23, 80, 153, 0.23);
  margin-inline-end: 4px;
}

body.ux-premium .nav-item,
body.ux-premium .btn,
body.ux-premium .btn-sm-nav,
body.ux-premium .tab,
body.ux-premium .set-btn,
body.ux-premium .copy-btn,
body.ux-premium .btn-back,
body.ux-premium .btn-logout,
body.ux-premium .pm-btn,
body.ux-premium .btn-dash {
  border-radius: 13px !important;
}

body.ux-premium .nav-item.active,
body.ux-premium .tab.active {
  box-shadow: 0 9px 20px rgba(34, 107, 200, 0.26);
}

body.ux-premium .logo-icon,
body.ux-premium .nav-logo-icon,
body.ux-premium .code,
body.ux-premium .step-num,
body.ux-premium .vc-icon,
body.ux-premium .success-icon,
body.ux-premium .block-icon,
body.ux-premium .na-icon {
  box-shadow: 0 11px 24px rgba(23, 81, 156, 0.32) !important;
}

body.ux-premium .topbar,
body.ux-premium nav,
body.ux-premium .sidebar,
body.ux-premium .sidebar-logo {
  border-color: var(--ux-card-border) !important;
}

body.ux-premium .topbar {
  background: var(--topbar-bg) !important;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
}

body.ux-premium .sidebar,
body.ux-premium .sidebar-logo {
  background: var(--bg2) !important;
}

body.ux-premium .topbar-stock-add {
  background: linear-gradient(135deg, #059669, #0f766e) !important;
  color: #fff !important;
  border: 1px solid rgba(16, 185, 129, 0.36) !important;
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.2);
}

html[data-theme="light"] .fsel option,
html[data-theme="light"] .form-group select option {
  background: #ffffff;
  color: #111827;
}

html[data-theme="dark"] .fsel option,
html[data-theme="dark"] .form-group select option {
  background: #111827;
  color: #f8fafc;
}

body.ux-premium.ux-economy .ux-toolbar {
  backdrop-filter: blur(10px);
}

body.ux-premium.ux-economy .section,
body.ux-premium.ux-economy .card,
body.ux-premium.ux-economy .sub-card,
body.ux-premium.ux-economy .payments-card,
body.ux-premium.ux-economy .messages-card,
body.ux-premium.ux-economy .settings-panel,
body.ux-premium.ux-economy .settings-section,
body.ux-premium.ux-economy .table-wrap,
body.ux-premium.ux-economy .stat,
body.ux-premium.ux-economy .stat-card,
body.ux-premium.ux-economy .plan-card,
body.ux-premium.ux-economy .countdown-card,
body.ux-premium.ux-economy .vc-box,
body.ux-premium.ux-economy .profile-modal,
body.ux-premium.ux-economy .modal,
body.ux-premium.ux-economy .notice,
body.ux-premium.ux-economy .ux-control {
  transition: none !important;
}

html.ux-lang-en input,
html.ux-lang-en textarea,
html.ux-lang-en select {
  text-align: left;
}

html.ux-lang-en .vc-number-val,
html.ux-lang-en .sb-countdown,
html.ux-lang-en .topbar-sub-countdown,
html.ux-lang-en .message-modal-meta {
  direction: ltr;
}

@media (max-width: 1024px) {
  .topbar-right .ux-toolbar-inline .ux-control-sub,
  .nav-right .ux-toolbar-inline .ux-control-sub {
    display: none;
  }

  .ux-toolbar-floating {
    bottom: 10px;
    inset-inline-start: 10px;
    padding: 6px;
    border-radius: 14px;
    gap: 6px;
  }

  .ux-control {
    min-width: 126px;
    min-height: 40px;
    padding: 7px 9px;
    border-radius: 12px;
  }

  .ux-control-main { font-size: 11px; }
  .ux-control-sub { font-size: 9px; }

  .ux-control-icon {
    width: 22px;
    height: 22px;
    font-size: 11px;
    border-radius: 7px;
  }

  body.ux-premium .ni {
    width: 31px !important;
    height: 31px;
    font-size: 15px !important;
  }
}

@media (max-width: 640px) {
  .ux-toolbar-inline {
    margin-inline-start: 4px;
  }

  .ux-toolbar-floating {
    inset-inline: 8px;
    bottom: 8px;
    justify-content: center;
  }

  .ux-control {
    flex: 1;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ux-premium .section,
  body.ux-premium .card,
  body.ux-premium .sub-card,
  body.ux-premium .payments-card,
  body.ux-premium .messages-card,
  body.ux-premium .settings-panel,
  body.ux-premium .settings-section,
  body.ux-premium .table-wrap,
  body.ux-premium .stat,
  body.ux-premium .stat-card,
  body.ux-premium .plan-card,
  body.ux-premium .countdown-card,
  body.ux-premium .vc-box,
  body.ux-premium .profile-modal,
  body.ux-premium .modal,
  body.ux-premium .notice,
  body.ux-premium .ux-control {
    transition: none !important;
  }
}