/* ==========================================================================
   HOOSH SAZIN — DESIGN SYSTEM v5
   Loaded AFTER app.css. Single source of truth for color, radius, spacing,
   buttons, inputs and surfaces. Legacy variables (--gold, --rose, ...) are
   re-mapped here so old rules inherit the new look without edits.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* ===== BRAND PALETTE (official) ===== */
  --brand-cyan: #07d2f8;        /* focus, accents, links on dark, live/info    */
  --brand-blue: #0160ea;        /* primary action, links on light, active nav  */
  --brand-deep: #033cc1;        /* primary pressed/end, strong borders         */
  --brand-violet-deep: #610ecb; /* AI / premium surfaces, tinted fills         */
  --brand-violet: #9525ea;      /* secondary accent, Pro, avatars              */
  --brand-fuchsia: #d339fb;     /* highlight only: gradient end, dots, glints  */
  --brand-indigo: var(--brand-deep);
  --brand-magenta: var(--brand-fuchsia);

  /* gradients: each has ONE job */
  --grad-primary: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-deep) 100%);
  --grad-brand: linear-gradient(120deg, #07d2f8 0%, #0160ea 28%, #033cc1 48%, #610ecb 66%, #9525ea 84%, #d339fb 100%);
  --grad-ai: linear-gradient(135deg, #610ecb 0%, #9525ea 55%, #d339fb 100%);
  --grad-icon: linear-gradient(140deg, #07d2f8 0%, #0160ea 55%, #610ecb 100%);
  --grad-avatar: linear-gradient(135deg, #0160ea 0%, #9525ea 62%, #d339fb 100%);
  --brand-gradient: var(--grad-brand);
  --primary-grad: var(--grad-primary);
  --on-primary: #ffffff;

  /* semantic (deliberately NOT brand colors) */
  --success: #1fbf85;
  --warning: #f5a524;
  --danger: #ef4565;
  --success-soft: rgba(31, 191, 133, .12);
  --warning-soft: rgba(245, 165, 36, .14);
  --danger-soft: rgba(239, 69, 101, .12);

  /* shape / space */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 48px;
  --ring: 0 0 0 3px rgba(7, 210, 248, .38);
  --ease: cubic-bezier(.22, .9, .3, 1);
  --shadow-1: 0 1px 2px rgba(7, 11, 31, .06), 0 4px 14px -6px rgba(7, 11, 31, .12);
  --shadow-2: 0 2px 4px rgba(7, 11, 31, .08), 0 18px 40px -16px rgba(7, 11, 31, .28);
  --shadow-primary: 0 8px 20px -10px rgba(1, 96, 234, .85);
  --shadow-primary-hover: 0 12px 28px -12px rgba(1, 96, 234, .9), 0 0 0 1px rgba(7, 210, 248, .25);
  --tip-bg: #0b1230;
  --tip-tx: #eef3ff;
}

/* dark (default, shown when no data-theme or data-theme=dark) */
:root {
  --bg: #070b1f;
  --bg2: #0d1430;
  --card: #111a3a;
  --line: #22305f;
  --line2: #2e4078;
  --tx: #eef3ff;
  --mut: #9aa8cc;
  --accent: #07d2f8;          /* text / borders / focus on dark */
  --accent-strong: #6fe6fc;
  --gold: var(--accent);       /* legacy alias */
  --gold2: #0160ea;
  --teal: #07d2f8;
  --rose: #ff6b88;             /* legacy alias -> danger */
  --gs: rgba(7, 210, 248, .10);
  --ong: #04122b;
  --scroll-thumb: rgba(154, 168, 204, .26);
  --scroll-thumb-hover: rgba(7, 210, 248, .7);
  --glow-a: rgba(1, 96, 234, .16);
  --glow-b: rgba(149, 37, 234, .13);
}

[data-theme=light] {
  --bg: #f4f7fe;
  --bg2: #ffffff;
  --card: #ffffff;
  --line: #dee6f6;
  --line2: #c7d4ee;
  --tx: #0f1b3d;
  --mut: #5a6b92;
  --accent: #0160ea;
  --accent-strong: #033cc1;
  --gold: var(--accent);
  --gold2: #07a9c9;
  --teal: #0597b8;
  --rose: #d92d50;
  --gs: rgba(1, 96, 234, .08);
  --ong: #ffffff;
  --scroll-thumb: rgba(90, 107, 146, .28);
  --scroll-thumb-hover: rgba(1, 96, 234, .6);
  --glow-a: rgba(1, 96, 234, .09);
  --glow-b: rgba(149, 37, 234, .07);
  --shadow-1: 0 1px 2px rgba(15, 27, 61, .05), 0 6px 18px -8px rgba(15, 27, 61, .10);
  --shadow-2: 0 2px 4px rgba(15, 27, 61, .06), 0 22px 44px -18px rgba(15, 27, 61, .20);
}

/* ---------- 2. BASE ------------------------------------------------------ */
body {
  background:
    radial-gradient(1100px 560px at 88% -12%, var(--glow-a), transparent 62%),
    radial-gradient(900px 520px at -6% 112%, var(--glow-b), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--brand-blue) 35%, transparent); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* ---------- 3. BUTTONS — one system ------------------------------------- */
/* Primary: solid blue->indigo, white text. One per view. */
.lg-primary,
.auth-primary,
.admin-settings-primary,
.send,
.hd-new:hover,
.btn-primary {
  background: var(--primary-grad) !important;
  color: var(--on-primary) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--shadow-primary);
  font-weight: 700;
  letter-spacing: 0;
  transition: transform .18s var(--ease), box-shadow .2s, filter .2s, opacity .2s;
}
.lg-primary:hover,
.auth-primary:hover,
.admin-settings-primary:hover,
.send:hover:not(:disabled),
.btn-primary:hover {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px rgba(13, 110, 253, .85);
}
.lg-primary:active,
.auth-primary:active,
.admin-settings-primary:active,
.send:active:not(:disabled),
.btn-primary:active {
  transform: translateY(0);
  filter: brightness(.96);
  box-shadow: 0 4px 10px -6px rgba(13, 110, 253, .7);
}
.lg-primary:focus-visible,
.auth-primary:focus-visible,
.admin-settings-primary:focus-visible,
.send:focus-visible,
.btn-primary:focus-visible,
.hd-new:focus-visible {
  outline: none;
  box-shadow: var(--ring), var(--shadow-primary);
}
.lg-primary:disabled,
.auth-primary:disabled,
.admin-settings-primary:disabled,
.btn-primary:disabled,
.lg-primary[aria-disabled=true] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}
/* send button: disabled = quiet neutral, stop = danger */
.send { height: var(--h-md); border-radius: var(--r-md); }
.send:disabled {
  background: var(--line) !important;
  color: var(--mut) !important;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}
.send.stop {
  background: var(--danger) !important;
  box-shadow: 0 8px 18px -10px var(--danger);
}
.lg-primary, .auth-primary { min-height: var(--h-lg); border-radius: var(--r-md); }
.admin-settings-primary { min-height: var(--h-md); border-radius: var(--r-md); }

/* "New chat" in the header: tinted by default, solid on hover */
.hd-new {
  min-height: var(--h-md);
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--gs);
  color: var(--accent);
  font-weight: 700;
}
.hd-new:hover { transform: translateY(-1px); box-shadow: var(--shadow-primary); }

/* Secondary: outline */
.admin-settings-secondary,
.admin-user-status-btn,
.admin-users-pagination button,
.sample-retry,
.admin-sample-retry,
.btn-secondary {
  min-height: var(--h-md);
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--tx);
  font-weight: 600;
  transition: border-color .18s, background .18s, color .18s, transform .18s var(--ease);
}
.admin-settings-secondary:hover,
.admin-user-status-btn:hover,
.admin-users-pagination button:hover:not(:disabled),
.sample-retry:hover,
.admin-sample-retry:hover,
.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--gs);
  color: var(--accent);
}
.admin-users-pagination button { min-height: var(--h-sm); }
button:disabled, .btn-secondary:disabled { cursor: not-allowed; }

/* Ghost / icon buttons */
.rbtn, .hd-icon, .hd-theme, .hd-hamburger, .hd-search, .hd-up, .sb-toggle, .sb-record-action {
  border-radius: var(--r-md);
  color: var(--mut);
  transition: background .18s, color .18s, border-color .18s;
}
.rbtn:hover, .hd-icon:hover, .hd-theme:hover, .hd-hamburger:hover, .hd-search:hover, .hd-up:hover, .sb-toggle:hover {
  background: var(--gs);
  color: var(--accent);
}
.hd-icon.on { color: var(--accent); background: var(--gs); }

/* Danger */
.admin-user-status-btn.is-disable,
.btn-danger {
  color: var(--rose);
  border-color: color-mix(in srgb, var(--rose) 35%, var(--line));
}
.admin-user-status-btn.is-disable:hover,
.btn-danger:hover {
  background: var(--danger-soft);
  border-color: var(--rose);
  color: var(--rose);
}
.admin-user-status-btn.is-enable { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--line)); }
.admin-user-status-btn.is-enable:hover { background: var(--success-soft); border-color: var(--success); color: var(--success); }

/* ---------- 4. SURFACES -------------------------------------------------- */
.sidebar {
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  border-inline-end: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.hd {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.hd-menu, .range-pop, .sb-manage-menu {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.hd-menu-item { border-radius: var(--r-sm); min-height: 40px; }
.hd-menu-item:hover { background: var(--gs); color: var(--accent); }

.lg-card, .admin-page-card, .admin-user-stats article, .admin-user-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.lg-card { border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.admin-page-card { border-radius: var(--r-xl); }
.admin-user-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-2); }

/* ---------- 5. SIDEBAR NAV ---------------------------------------------- */
.sb-nav-item {
  min-height: 42px;
  border-radius: var(--r-md);
  color: var(--mut);
  transition: background .18s, color .18s;
}
.sb-nav-item:hover { background: var(--gs); color: var(--tx); }
.sb-nav-item.on {
  background: color-mix(in srgb, var(--brand-blue) 12%, transparent);
  color: var(--accent-strong);
  font-weight: 700;
  box-shadow: inset -3px 0 0 var(--brand-blue);
}
[dir=ltr] .sb-nav-item.on { box-shadow: inset 3px 0 0 var(--brand-blue); }
.sb-nav-item.sb-pro {
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand-cyan) 14%, transparent), color-mix(in srgb, var(--brand-violet) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand-blue) 28%, var(--line));
  color: var(--tx);
}
.sb-record, .sb-item { border-radius: var(--r-md); }
.sb-record.active {
  background: color-mix(in srgb, var(--brand-blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand-blue) 35%, var(--line));
}
.sb-search { border-radius: var(--r-md); background: var(--bg2); border: 1px solid var(--line); }
.sb-search:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.sb-user { border-radius: var(--r-lg); }

/* Logo tile: subtle, no sticker look */
.sb-logo, .lg-brand-lockup img, .admin-setup-logo img, .sb-admin-lockup img {
  background: #fff !important;
  border: 1px solid color-mix(in srgb, var(--brand-blue) 18%, var(--line)) !important;
  box-shadow: 0 8px 22px -12px rgba(1, 96, 234, .45) !important;
}

/* ---------- 6. CHAT & COMPOSER ------------------------------------------ */
.m.u .bub {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 20%, var(--card)), color-mix(in srgb, var(--brand-violet) 16%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, var(--line));
  border-radius: 18px 18px 18px 6px;
  color: var(--tx);
}
.cmp {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 22px;
  box-shadow: var(--shadow-2);
  transition: border-color .2s, box-shadow .2s;
}
.cmp:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-2), var(--ring);
}
.cmp textarea { color: var(--tx); }
.cmp textarea::placeholder { color: var(--mut); opacity: .85; }
.modes button { border-radius: var(--r-md); }
.modes button.on { color: var(--on-primary); }
[data-theme=light] .modes button.on { color: #fff; }

/* ---------- 7. FORMS ----------------------------------------------------- */
.admin-field input, .admin-field select, .admin-field textarea,
.admin-users-search, .admin-users-toolbar > select {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  color: var(--tx);
  min-height: var(--h-lg);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.admin-field input, .admin-field select, .admin-users-search, .admin-users-toolbar > select { min-height: 44px; }
.admin-field input:hover, .admin-field select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line2)); }
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus,
.admin-users-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
  background: var(--bg2);
}
/* login field: the wrapper owns the border, the input stays bare */
.lg-field {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  min-height: var(--h-lg);
  transition: border-color .18s, box-shadow .18s;
}
.lg-field:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line2)); }
.lg-field:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.lg-field input { background: transparent; border: 0; box-shadow: none; outline: none; }
input::placeholder, textarea::placeholder { color: var(--mut); opacity: .8; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--brand-blue); }
.admin-field label, .lg-field label { font-weight: 600; color: var(--tx); }

/* ---------- 8. STATUS / FEEDBACK ---------------------------------------- */
.admin-user-status.is-active { color: var(--success); background: var(--success-soft); }
.admin-user-status.is-inactive { color: var(--rose); background: var(--danger-soft); }
.admin-user-admin { color: var(--brand-violet); border-color: color-mix(in srgb, var(--brand-violet) 30%, var(--line)); background: color-mix(in srgb, var(--brand-violet) 8%, transparent); }
[data-theme=dark] .admin-user-admin, :root:not([data-theme=light]) .admin-user-admin { color: #b69bff; }
.admin-user-stats article > i { background: var(--gs); color: var(--accent); }
.admin-user-stats article > i.is-active { background: var(--success-soft); color: var(--success); }
.admin-user-stats article > i.is-inactive { background: var(--danger-soft); color: var(--rose); }
.admin-user-balances b { color: var(--accent-strong); }
.admin-user-balances .debt b { color: var(--rose); }
.admin-users-empty.is-error, .sample-empty-state.is-error { border-color: color-mix(in srgb, var(--rose) 40%, var(--line)); }
.admin-settings-error { color: var(--rose); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--rose) 30%, transparent); border-radius: var(--r-md); }

/* ---------- 9. TYPOGRAPHY ----------------------------------------------- */
h1, h2, h3 { letter-spacing: -.01em; line-height: 1.5; }
.sb-name, .lg-brand-lockup b { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:not([data-theme=light]) .sb-name,
:root:not([data-theme=light]) .lg-brand-lockup b { background-image: linear-gradient(120deg, #4fdcf7 0%, #5b9dff 50%, #b69bff 100%); }

/* ---------- 10. TOUCH + MOTION ------------------------------------------ */
@media (pointer: coarse) {
  .sb-nav-item, .hd-menu-item { min-height: 46px; }
  .rbtn, .hd-icon, .hd-theme, .hd-hamburger, .sb-record-action { min-width: 40px; min-height: 40px; }
  .send { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .send, .lg-primary, .auth-primary, .admin-settings-primary { border: 1px solid ButtonText !important; }
}


/* ==========================================================================
   11. PALETTE ROLES — every brand color has a job
   cyan = focus/live/info   blue = action   deep blue = pressed/strong
   deep violet + violet = AI / Pro / identity   fuchsia = glints only
   ========================================================================== */

/* Mode tabs: sliding pill uses the primary gradient, white text in both themes */
.modes::before { background: var(--grad-primary); box-shadow: 0 6px 16px -8px rgba(1, 96, 234, .8); }
.modes button.on, [data-theme=light] .modes button.on { color: #fff; }

/* Active nav icon chip: cyan -> blue -> deep violet (the logo's own sweep) */
.sb-nav-item.on svg,
.sb-admin-nav .sb-nav-item.on svg {
  background: var(--grad-icon);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(1, 96, 234, .9);
}
.sb-nav-item:hover svg { color: var(--accent); }
.sb-nav-item.on { background: linear-gradient(100deg, rgba(1, 96, 234, .14), rgba(97, 14, 203, .08)); }

/* Pro / premium: violet family */
.sb-nav-item.sb-pro {
  background: linear-gradient(120deg, rgba(97, 14, 203, .22), rgba(149, 37, 234, .16) 60%, rgba(211, 57, 251, .12));
  border: 1px solid rgba(149, 37, 234, .38);
}
.sb-nav-item.sb-pro:hover { border-color: rgba(211, 57, 251, .6); box-shadow: 0 10px 24px -14px rgba(149, 37, 234, .8); }
.sb-nav-item.sb-pro svg { color: var(--brand-fuchsia); }

/* Identity: avatars share one gradient */
.sb-av, .admin-user-avatar {
  background: var(--grad-avatar);
  color: #fff;
  box-shadow: 0 7px 18px -10px rgba(149, 37, 234, .9);
}

/* Cards: a 3px full-palette accent line at the top of hero surfaces */
.lg-card {
  background: var(--grad-brand) top / 100% 3px no-repeat, var(--card);
}
.admin-page-card {
  background: var(--grad-brand) top / 100% 3px no-repeat, var(--card);
}

/* Live / info dots use cyan; user bubble blends blue into deep violet */
.hd-live, .hd-live i { color: var(--brand-cyan); }
.m.u .bub {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 22%, var(--card)), color-mix(in srgb, var(--brand-violet-deep) 18%, var(--card)));
  border-color: color-mix(in srgb, var(--brand-blue) 34%, var(--line));
}

/* Admin tags & stat chips */
.admin-user-admin {
  color: var(--brand-violet);
  background: rgba(149, 37, 234, .10);
  border-color: rgba(149, 37, 234, .35);
}
:root:not([data-theme=light]) .admin-user-admin { color: #c98bff; }
.admin-user-stats article > i { background: rgba(1, 96, 234, .12); color: var(--accent); }
.admin-user-stats article:nth-child(3) > i:not(.is-active):not(.is-inactive) { background: rgba(149, 37, 234, .14); color: var(--brand-violet); }

/* Links */
a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

/* Secondary buttons: cyan hairline on hover, never filled */
.btn-secondary:hover, .admin-settings-secondary:hover { border-color: var(--brand-cyan); }

/* Scrollbar */
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--brand-cyan), var(--brand-blue)); background-clip: padding-box; }

/* ==========================================================================
   12. COLLAPSED SIDEBAR — tooltip fix
   Root cause: `.sb-nav-item.on::after` is the active DOT (4px wide, left:4px).
   In collapsed mode the same ::after is the tooltip, so on the active item the
   tooltip text was rendered 4px wide on top of the icon. Fix: the dot is
   removed in collapsed mode (the inset bar + chip already mark it) and the
   tooltip gets one consistent, fully-reset definition for every item type.
   ========================================================================== */
.app[data-sidebar=collapsed] .sb-nav-item.on::after,
.app[data-sidebar=collapsed] .sb-nav-item::after,
.app[data-sidebar=collapsed] .sb-item::after,
.app[data-sidebar=collapsed] .sb-tool::after {
  content: attr(data-tip);
  position: absolute;
  inset-inline-start: calc(100% + 12px);
  inset-inline-end: auto;
  top: 50%;
  width: auto;
  height: auto;
  translate: none;
  transform: translateY(-50%) translateX(4px);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--tip-bg);
  color: var(--tip-tx);
  border: 1px solid rgba(7, 210, 248, .28);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: none;
  z-index: 60;
  transition: opacity .16s ease, transform .16s var(--ease);
}
.app[data-sidebar=collapsed] .sb-nav-item:hover::after,
.app[data-sidebar=collapsed] .sb-nav-item:focus-visible::after,
.app[data-sidebar=collapsed] .sb-item:hover::after,
.app[data-sidebar=collapsed] .sb-tool:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: .12s;
}
/* collapsed: make sure the label span never leaks over the icon */
.app[data-sidebar=collapsed] .sb-nav-item { position: relative; overflow: visible; justify-content: center; }
.app[data-sidebar=collapsed] .sb-nav-item > span,
.app[data-sidebar=collapsed] .sb-nav-item > em { display: none !important; }
.app[data-sidebar=collapsed] .sb-nav-item.on { box-shadow: inset -3px 0 0 var(--brand-blue); }
[dir=ltr] .app[data-sidebar=collapsed] .sb-nav-item.on { box-shadow: inset 3px 0 0 var(--brand-blue); }
@media (prefers-reduced-motion: reduce) {
  .app[data-sidebar=collapsed] .sb-nav-item::after { transition: none; }
}

/* ==========================================================================
   13. LOGIN FLOW — stepper, phone field, phone chip, OTP boxes, resend timer
   ========================================================================== */
.lg-stepper {
  list-style: none;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 4px 0 18px; padding: 0;
  font-size: 12px; color: var(--mut);
}
.lg-st { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; transition: color .25s; }
.lg-st i {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 800;
  border: 1.5px solid var(--line2); color: var(--mut); background: transparent;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.lg-st.on { color: var(--tx); }
.lg-st.on i {
  background: var(--grad-primary); border-color: transparent; color: #fff;
  box-shadow: 0 8px 16px -8px rgba(211, 57, 251, .85);
  transform: scale(1.06);
}
.lg-st.done i { background: var(--success-soft); border-color: var(--success); color: var(--success); font-size: 0; }
.lg-st.done i::after { content: "\2713"; font-size: 13px; }
.lg-st-line { flex: 0 0 40px; height: 2px; border-radius: 2px; background: var(--line2); position: relative; overflow: hidden; }
.lg-st-line::after {
  content: ""; position: absolute; inset: 0; background: var(--grad-brand);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease);
}
[dir=ltr] .lg-st-line::after { transform-origin: 0 50%; }
.lg-stepper[data-step="2"] .lg-st-line::after { transform: scaleX(1); }

/* phone field */
.lg-field { min-height: 54px; }
.lg-field input { font-size: 18px; font-weight: 700; letter-spacing: .6px; font-variant-numeric: tabular-nums; }
.lg-field input::placeholder { font-weight: 500; letter-spacing: .4px; }
.lg-cc { font-weight: 800; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.lg-cc-ic { transition: color .2s; }
.lg-field.is-valid { border-color: color-mix(in srgb, var(--success) 60%, var(--line2)); }
.lg-field.is-valid .lg-cc-ic { color: var(--success); }
.lg-field.is-invalid, .lg-field.is-invalid:focus-within {
  border-color: var(--rose); box-shadow: 0 0 0 3px var(--danger-soft); animation: lgShake .4s;
}
.lg-field.is-invalid .lg-cc-ic { color: var(--rose); }
.lg-hint { margin: 8px 2px 0; font-size: 12px; color: var(--mut); line-height: 1.9; }
.lg-hint span { color: var(--tx); font-weight: 700; letter-spacing: .3px; unicode-bidi: isolate; }
.lg-message { min-height: 24px; }
.lg-message.error { display: flex; align-items: center; gap: 6px; }
.lg-message.error::before { content: "!"; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; background: var(--rose); color: #fff; }

/* phone chip with edit */
.lg-phone-chip {
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%;
  margin: 14px auto 2px; padding: 6px 14px 6px 6px; border-radius: 99px;
  background: var(--bg2); border: 1px solid var(--line2);
  box-shadow: var(--shadow-1);
}
.lg-phone-chip > svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-inline-start: 6px; }
.lg-phone-chip b { font-size: 16px; font-weight: 800; letter-spacing: .6px; color: var(--tx); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.lg-edit {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border-radius: 99px; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--brand-violet); background: rgba(149, 37, 234, .10); border: 1px solid rgba(149, 37, 234, .32);
  transition: background .2s, color .2s, border-color .2s, transform .18s var(--ease);
}
:root:not([data-theme=light]) .lg-edit { color: #d9a2ff; }
.lg-edit svg { width: 14px; height: 14px; }
.lg-edit:hover { background: var(--grad-ai); color: #fff; border-color: transparent; transform: translateY(-1px); }
.lg-edit:focus-visible { outline: none; box-shadow: var(--ring); }

/* OTP boxes */
.lg-otp { display: flex; justify-content: center; gap: 12px; margin: 20px 0 6px; }
.lg-otp .lg-digit {
  width: 62px; height: 72px; padding: 0; border-radius: var(--r-lg);
  font-size: 30px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--tx); caret-color: var(--brand-fuchsia);
  background: var(--bg2); border: 1.5px solid var(--line2);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s var(--ease);
}
.lg-otp .lg-digit:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line2)); }
.lg-otp .lg-digit:focus {
  outline: none; transform: translateY(-2px);
  border-color: transparent !important;
  background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad-brand) border-box !important;
  box-shadow: 0 0 0 4px rgba(149, 37, 234, .18), 0 14px 26px -14px rgba(211, 57, 251, .8);
}
.lg-otp .lg-digit.filled {
  border-color: transparent !important;
  background:
    linear-gradient(color-mix(in srgb, var(--brand-violet) 9%, var(--bg2)), color-mix(in srgb, var(--brand-violet) 9%, var(--bg2))) padding-box,
    var(--grad-ai) border-box !important;
  box-shadow: 0 10px 22px -16px rgba(149, 37, 234, .9);
}
.lg-otp .lg-digit.err, .lg-otp .lg-digit.filled.err {
  border-color: var(--rose) !important; background: var(--danger-soft) !important;
  box-shadow: 0 0 0 3px var(--danger-soft); animation: lgShake .4s;
}
.lg-otp .lg-digit.ok, .lg-otp .lg-digit.filled.ok {
  border-color: var(--success) !important; background: var(--success-soft) !important;
  color: var(--success); box-shadow: none; animation: none;
}
@media (max-width: 420px) {
  .lg-otp { gap: 9px; }
  .lg-otp .lg-digit { width: 54px; height: 64px; font-size: 26px; }
  .lg-phone-chip b { font-size: 15px; }
}

/* resend */
.lg-resend-row { margin-top: 18px; gap: 8px; font-size: 13px; }
.lg-resend {
  height: 32px; padding: 0 14px; border-radius: 99px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: transparent; border: 1px solid var(--line2); color: var(--mut); transition: all .2s;
}
.lg-resend:not(:disabled) { color: var(--brand-violet); border-color: rgba(149, 37, 234, .4); background: rgba(149, 37, 234, .08); cursor: pointer; }
:root:not([data-theme=light]) .lg-resend:not(:disabled) { color: #d9a2ff; }
.lg-resend:not(:disabled):hover { background: var(--grad-ai); color: #fff; border-color: transparent; }
.lg-timer { height: 3px; max-width: 220px; margin: 12px auto 0; border-radius: 3px; background: var(--line); overflow: hidden; transition: opacity .3s; }
.lg-timer i { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: var(--grad-brand); transition: width 1s linear; }
.lg-resend-row.ready + .lg-timer { opacity: 0; }

/* ==========================================================================
   14. GRADIENT-FIRST KEY ELEMENTS — more fuchsia where it matters
   ========================================================================== */
:root {
  --grad-primary: linear-gradient(120deg, #0160ea 0%, #610ecb 32%, #9525ea 64%, #d339fb 100%);
  --grad-icon:    linear-gradient(140deg, #07d2f8 0%, #0160ea 32%, #9525ea 70%, #d339fb 100%);
  --grad-ai:      linear-gradient(135deg, #610ecb 0%, #9525ea 50%, #d339fb 100%);
  --grad-avatar:  linear-gradient(135deg, #0160ea 0%, #9525ea 55%, #d339fb 100%);
  --primary-grad: var(--grad-primary);
  --shadow-primary: 0 10px 24px -10px rgba(149, 37, 234, .8);
  --shadow-primary-hover: 0 16px 32px -12px rgba(211, 57, 251, .85), 0 0 0 1px rgba(211, 57, 251, .3);
  --glow-b: rgba(211, 57, 251, .14);
}
[data-theme=light] { --glow-b: rgba(211, 57, 251, .09); }

/* every primary action: same gradient, same glow */
.lg-primary, .auth-primary, .admin-settings-primary, .send, .btn-primary, .hd-new {
  background-image: var(--grad-primary) !important;
  background-color: transparent !important;
  background-size: 100% 100% !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: var(--shadow-primary);
  text-shadow: 0 1px 1px rgba(30, 0, 70, .35);
  font-weight: 700;
}
.lg-primary:hover, .auth-primary:hover, .admin-settings-primary:hover, .send:hover:not(:disabled), .btn-primary:hover, .hd-new:hover {
  filter: brightness(1.07) saturate(1.1);
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary-hover);
}
.hd-new { transition: transform .18s var(--ease), box-shadow .2s, filter .2s; }
.hd-new svg { color: #fff; }

/* active navigation: gradient bar + gradient tint + gradient icon chip */
.sb-nav-item.on,
.app[data-sidebar=collapsed] .sb-nav-item.on {
  background:
    linear-gradient(180deg, #07d2f8, #9525ea 58%, #d339fb) right 2px center / 3px 52% no-repeat,
    linear-gradient(100deg, rgba(1, 96, 234, .24), rgba(149, 37, 234, .20) 58%, rgba(211, 57, 251, .16));
  box-shadow: none;
}
[dir=ltr] .sb-nav-item.on, [dir=ltr] .app[data-sidebar=collapsed] .sb-nav-item.on { background-position: left 2px center, 0 0; }
.sb-nav-item.on svg, .sb-admin-nav .sb-nav-item.on svg { background: var(--grad-icon); box-shadow: 0 8px 18px -10px rgba(211, 57, 251, .9); }
.sb-record.active { background: linear-gradient(100deg, rgba(1, 96, 234, .13), rgba(149, 37, 234, .11) 60%, rgba(211, 57, 251, .09)); border-color: rgba(149, 37, 234, .35); }

/* credit chip + composer: gradient hairline borders */
.hd-coin {
  border: 1px solid transparent !important;
  background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad-brand) border-box !important;
}
.hd-coin .hd-coin-ic, .hd-coin svg { color: #fff; }
.cmp:focus-within {
  border-color: transparent;
  background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad-brand) border-box;
  box-shadow: var(--shadow-2), 0 0 0 4px rgba(149, 37, 234, .12);
}

/* identity + brand text: fuchsia-forward */
:root:not([data-theme=light]) .sb-name,
:root:not([data-theme=light]) .lg-brand-lockup b { background-image: linear-gradient(120deg, #4fdcf7 0%, #5b9dff 30%, #c084ff 66%, #f08cff 100%); }
.sb-nav-item.sb-pro { background: linear-gradient(120deg, rgba(97, 14, 203, .26), rgba(149, 37, 234, .22) 55%, rgba(211, 57, 251, .20)); border-color: rgba(211, 57, 251, .45); }
.m.u .bub {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 24%, var(--card)), color-mix(in srgb, var(--brand-violet) 20%, var(--card)) 62%, color-mix(in srgb, var(--brand-fuchsia) 16%, var(--card)));
  border-color: color-mix(in srgb, var(--brand-violet) 38%, var(--line));
}
.lg-badge, .lg-badge-otp {
  background: var(--grad-primary); color: #fff;
  box-shadow: 0 16px 30px -14px rgba(211, 57, 251, .85), inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* gradient hairline on top of key cards (login, admin cards, stat tiles) */
.admin-user-stats article { background: var(--grad-brand) top / 100% 2px no-repeat, var(--card); }
.modes::before { background: var(--grad-primary); box-shadow: 0 8px 18px -8px rgba(211, 57, 251, .8); }

/* brand line across the very top of every page */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 9999; pointer-events: none;
  background: var(--grad-brand); opacity: .95;
}

/* ==========================================================================
   16. SIDEBAR — flat, one highlight, no stacked boxes
   ========================================================================== */
.sidebar { border: 1px solid var(--line); border-radius: 20px; background: var(--bg2); box-shadow: 0 24px 60px -38px rgba(0, 0, 0, .6); }
.sb-section-title::before, .sb-section-title::after { display: none !important; }
.sb-section-title { padding: 6px 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--mut); opacity: .85; }
.sb-logo { width: 38px; height: 38px; border: 0 !important; border-radius: 10px; box-shadow: none !important; }
.sb-toggle { border: 0 !important; background: transparent !important; color: var(--mut); box-shadow: none; }
.sb-toggle:hover { background: var(--gs) !important; color: var(--accent); }
.sb-nav { gap: 2px; padding: 10px 12px 6px; }
.sb-nav-sep { margin: 8px 10px; opacity: .7; }

.sb-nav-item {
  min-height: 42px; padding: 0 8px; gap: 10px;
  border: 0 !important; border-radius: 10px; background: transparent;
  color: var(--mut); font-size: 13.5px; font-weight: 600;
  transition: background .18s, color .18s;
}
.sb-nav-item svg {
  width: 30px; height: 30px; padding: 6px; margin: 0; flex: none;
  border: 0 !important; border-radius: 8px; background: transparent !important; box-shadow: none !important;
  color: inherit; transform: none !important; transition: background .18s, color .18s;
}
.sb-nav-item:hover { background: var(--gs); color: var(--tx); }
.sb-nav-item:hover svg { color: var(--accent); }
.sb-nav-item:active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sb-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: none; }

.sb-nav-item.on { color: var(--tx); font-weight: 700; }
.sb-nav-item.on svg { background: var(--grad-icon) !important; color: #fff; box-shadow: 0 6px 14px -8px rgba(211, 57, 251, .85) !important; }
.sb-nav-item.on:hover svg { color: #fff; }
.app:not([data-sidebar=collapsed]) .sb-nav-item.on::after { display: none; }

.sb-nav-item.sb-pro { border: 0 !important; }
.sb-nav-item.sb-pro:hover { box-shadow: none; background: linear-gradient(120deg, rgba(97, 14, 203, .34), rgba(149, 37, 234, .28) 55%, rgba(211, 57, 251, .26)); }
.sb-nav-item.sb-pro svg { color: var(--brand-fuchsia); }
.sb-nav-item.sb-pro:hover svg { color: #fff; }

.app[data-sidebar=collapsed] .sb-nav-item { min-height: 44px; padding: 0; }
.app[data-sidebar=collapsed] .sb-nav-item svg { width: 34px; height: 34px; padding: 7px; }

.sb-user { border: 0 !important; border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); box-shadow: none; }
.sb-user:hover { background: var(--gs); }

/* ==========================================================================
   17. SAMPLES — gallery + modal, fuchsia-forward
   ========================================================================== */
.sample-kind-icon { background: var(--grad-icon) !important; color: #fff; box-shadow: 0 8px 18px -10px rgba(211, 57, 251, .8); }
.sample-prompt-icon { background: rgba(149, 37, 234, .12); color: var(--brand-violet); border: 0; }
:root:not([data-theme=light]) .sample-prompt-icon { color: #d9a2ff; }
.sample-kind-count { color: var(--brand-violet); border-color: rgba(149, 37, 234, .32); background: rgba(149, 37, 234, .08); }
:root:not([data-theme=light]) .sample-kind-count { color: #d9a2ff; }
.sample-prompt-card:hover > button { border-color: rgba(211, 57, 251, .5); box-shadow: 0 16px 32px -20px rgba(211, 57, 251, .9); }
.sample-prompt-arrow { color: var(--brand-fuchsia); }
.sample-filters button.active, .sample-filters button[aria-pressed=true] {
  background: var(--grad-primary) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 8px 18px -10px rgba(211, 57, 251, .85);
}
.sample-search:focus-within { border-color: var(--brand-violet); box-shadow: 0 0 0 3px rgba(149, 37, 234, .18); }
.media-card .thumb:hover, .sample-voice-card > button:hover { border-color: rgba(211, 57, 251, .5) !important; box-shadow: 0 16px 32px -20px rgba(211, 57, 251, .9); }

/* modal */
.sp-modal {
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(149, 37, 234, .34), transparent 62%),
    radial-gradient(700px 460px at 100% 105%, rgba(211, 57, 251, .16), transparent 60%),
    rgba(4, 6, 20, .74) !important;
  backdrop-filter: blur(10px);
}
.sp-modal .sample-modal-card {
  background: var(--grad-brand) top / 100% 3px no-repeat, var(--card);
  border: 1px solid rgba(149, 37, 234, .32);
  box-shadow: 0 44px 100px -34px rgba(97, 14, 203, .85), 0 0 0 1px rgba(211, 57, 251, .08);
}
.sp-modal .sample-modal-media {
  background:
    radial-gradient(520px 340px at 50% 0%, rgba(211, 57, 251, .24), transparent 65%),
    radial-gradient(420px 300px at 0% 100%, rgba(1, 96, 234, .22), transparent 62%),
    color-mix(in srgb, var(--bg) 84%, #000);
}
.sp-modal .sample-modal-chat-icon { background: var(--grad-icon); color: #fff; box-shadow: 0 22px 46px -20px rgba(211, 57, 251, .9); border: 0; }
.sp-modal .sp-close { border: 0; background: rgba(0, 0, 0, .28); color: #fff; backdrop-filter: blur(6px); }
.sp-modal .sp-close:hover { background: var(--grad-ai); }
.sp-modal .sp-kind {
  color: var(--brand-violet); background: rgba(149, 37, 234, .12); border: 1px solid rgba(149, 37, 234, .34);
}
:root:not([data-theme=light]) .sp-modal .sp-kind { color: #e0b0ff; }
.sp-modal .sp-chip { background: rgba(1, 96, 234, .10); border: 1px solid rgba(1, 96, 234, .28); color: var(--tx); }
.sp-modal .sp-chip:nth-child(even) { background: rgba(149, 37, 234, .10); border-color: rgba(149, 37, 234, .3); }
.sp-modal .sp-chip .i { color: var(--brand-cyan); }
.sp-modal .sp-chip:nth-child(even) .i { color: var(--brand-fuchsia); }
.sp-modal .sample-modal-prompt {
  border: 1px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--brand-violet) 6%, var(--bg2)), color-mix(in srgb, var(--brand-violet) 6%, var(--bg2))) padding-box,
    linear-gradient(135deg, rgba(7, 210, 248, .55), rgba(149, 37, 234, .65) 55%, rgba(211, 57, 251, .7)) border-box;
}
.sp-modal .sp-prompt-label .i { color: var(--brand-fuchsia); }
.sp-modal .sp-prompt-copy { color: var(--brand-violet); border: 1px solid rgba(149, 37, 234, .32); background: rgba(149, 37, 234, .08); border-radius: 8px; }
:root:not([data-theme=light]) .sp-modal .sp-prompt-copy { color: #d9a2ff; }
.sp-modal .sp-prompt-copy:hover { background: var(--grad-ai); color: #fff; border-color: transparent; }
.sp-modal .sp-use {
  background-image: var(--grad-primary) !important; background-color: transparent !important; color: #fff !important;
  border: 1px solid transparent !important; box-shadow: var(--shadow-primary); font-weight: 700;
  text-shadow: 0 1px 1px rgba(30, 0, 70, .35); transition: transform .18s var(--ease), box-shadow .2s, filter .2s;
}
.sp-modal .sp-use:hover { filter: brightness(1.07) saturate(1.1); transform: translateY(-1px); box-shadow: var(--shadow-primary-hover); }
.sp-modal .sp-secondary { color: var(--brand-violet); border-color: rgba(149, 37, 234, .4); background: rgba(149, 37, 234, .06); }
:root:not([data-theme=light]) .sp-modal .sp-secondary { color: #d9a2ff; }
.sp-modal .sp-secondary:hover { background: var(--grad-ai); color: #fff; border-color: transparent; }

/* ---- polish pass ---- */
.sb-nav-item, .sb-nav-item:hover, .sb-nav-item:active { transform: none !important; }
.sb-nav-item:hover { background: color-mix(in srgb, var(--brand-blue) 14%, transparent); }
.sb-nav-item:hover svg { color: var(--accent-strong); }
.sb-nav-item.on:hover { background:
    linear-gradient(180deg, #07d2f8, #9525ea 58%, #d339fb) right 4px center / 3px 52% no-repeat,
    linear-gradient(100deg, rgba(1, 96, 234, .28), rgba(149, 37, 234, .22) 58%, rgba(211, 57, 251, .18)); }
.sb-nav-item.on,
.app[data-sidebar=collapsed] .sb-nav-item.on { background-position: right 4px center, 0 0; }
[dir=ltr] .sb-nav-item.on, [dir=ltr] .app[data-sidebar=collapsed] .sb-nav-item.on { background-position: left 4px center, 0 0; }
.sp-modal .sp-prompt-label b { color: var(--tx); }
.sb-nav-item.on::before, .sb-nav-item:hover::before { display: none !important; }
[data-theme=light] .sb-nav-item.on { background-image:
    linear-gradient(180deg, #07d2f8, #9525ea 58%, #d339fb),
    linear-gradient(100deg, rgba(1, 96, 234, .13), rgba(149, 37, 234, .10) 58%, rgba(211, 57, 251, .08)); }
[data-theme=light] .sb-nav-item.on:hover { background-image:
    linear-gradient(180deg, #07d2f8, #9525ea 58%, #d339fb),
    linear-gradient(100deg, rgba(1, 96, 234, .18), rgba(149, 37, 234, .14) 58%, rgba(211, 57, 251, .11)); }

/* ==========================================================================
   18. LOGIN — original layout, refined
   ========================================================================== */
.lg-scene { opacity: .55; }
.lg-card {
  width: 100%; max-width: 420px; padding: 42px 34px 30px; border-radius: 24px;
  background: var(--grad-brand) top / 100% 2px no-repeat, var(--card);
  box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--brand-violet) 10%, transparent);
}
.lg-close { background: transparent; border: 0; color: var(--mut); box-shadow: none; }
.lg-close:hover { background: var(--gs); color: var(--tx); }

.lg-card .lg-brand-lockup { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 28px; }
.lg-card .lg-brand-lockup img {
  width: 64px; height: 64px; margin-bottom: 4px; padding: 0; border: 0 !important; border-radius: 0; background: none !important;
  box-shadow: none !important; filter: drop-shadow(0 10px 18px rgba(149, 37, 234, .32));
}
.lg-card .lg-brand-lockup b { font-size: 18px; font-weight: 800; }
.lg-card .lg-brand-lockup small { font-size: 12.5px; font-weight: 500; color: var(--mut); line-height: 1.8; }

.lg-step h1 { margin: 0; font-size: 21px; font-weight: 800; text-align: center; line-height: 1.6; }
.lg-lead { margin: 8px 0 0; font-size: 13px; line-height: 2; text-align: center; color: var(--mut); }
.lg-lead b { color: var(--tx); font-weight: 800; letter-spacing: .3px; }
.lg-label { display: block; margin: 24px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--tx); }

/* phone field: single border, quiet prefix, status icon */
.lg-field { min-height: 52px; border-radius: var(--r-md); }
.lg-cc { background: transparent; border: 0; border-inline-end: 1px solid var(--line); padding-inline: 16px; color: var(--mut); font-weight: 700; }
.lg-field input { font-size: 17px; }
.lg-cc-ic { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--mut); margin-inline-end: 4px; }
.lg-field.is-valid { border-color: var(--line2); }
.lg-field.is-valid:focus-within { border-color: var(--accent); }
.lg-field.is-valid .lg-cc-ic { color: var(--success); }

.lg-message { min-height: 0; margin: 10px 2px 0; font-size: 12.5px; font-weight: 600; }
.lg-message:empty { display: none; }
.lg-message.error { display: block; color: var(--rose); }
.lg-message.error::before { content: none; }

.lg-step .lg-primary { width: 100%; min-height: 50px; margin-top: 18px; gap: 8px; }
.lg-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; font-size: 12px; line-height: 1.8; color: var(--mut); }
.lg-note svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.lg-setup-link { display: block; margin-top: 14px; text-align: center; font-size: 12px; color: var(--mut); }
.lg-setup-link:hover { color: var(--accent); }

/* OTP step */
.lg-otp-top { display: flex; justify-content: flex-start; margin: -16px 0 4px; }
.lg-back {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--mut);
  font-size: 13px; font-weight: 600; box-shadow: none; transform: none; cursor: pointer;
  transition: background .18s, color .18s;
}
.lg-back:hover { background: var(--gs); color: var(--tx); transform: none; border: 0; }
.lg-back:focus-visible { outline: none; box-shadow: var(--ring); }
.lg-badge { margin: 4px auto 14px; }
.lg-otp { gap: 10px; margin: 22px 0 0; justify-content: center; }
.lg-otp .lg-digit { width: 58px; height: 66px; font-size: 26px; border-radius: 14px; }
.lg-otp .lg-digit:focus { transform: none; box-shadow: 0 0 0 3px rgba(149, 37, 234, .18); }
.lg-otp .lg-digit.filled {
  border-color: rgba(149, 37, 234, .55) !important;
  background: color-mix(in srgb, var(--brand-violet) 7%, var(--bg2)) !important;
  box-shadow: none;
}
.lg-resend-row { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 18px; font-size: 13px; color: var(--mut); }
.lg-resend {
  height: auto; padding: 6px 10px; border: 0; border-radius: 8px; background: none;
  font-size: 13px; font-weight: 700; color: var(--mut); font-variant-numeric: tabular-nums;
}
.lg-resend:not(:disabled) { color: var(--brand-violet); background: none; border: 0; }
:root:not([data-theme=light]) .lg-resend:not(:disabled) { color: #d9a2ff; }
.lg-resend:not(:disabled):hover { background: rgba(149, 37, 234, .10); }
@media (max-width: 420px) {
  .lg-card { padding: 36px 22px 26px; }
  .lg-otp { gap: 8px; }
  .lg-otp .lg-digit { width: 54px; height: 62px; }
}
#authPhonePreview { display: inline-block; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.lg-lead { text-wrap: balance; max-width: 320px; margin-inline: auto; }
.lg-back { color: var(--accent); }
.lg-back:hover { color: var(--accent-strong); }


/* ========================================================================== 
   FINAL UI REFINEMENT — OTP, POLISHED SIDEBAR, MAGENTA COMPOSER
   These rules intentionally come last to neutralize older layered styles.
   ========================================================================== */
:root {
  --chat-accent-deep: #610ecb;
  --chat-accent: #9525ea;
  --chat-accent-bright: #d339fb;
  --chat-control-gradient: linear-gradient(112deg, #610ecb 0%, #9525ea 58%, #d339fb 100%);
  --chat-control-glow: rgba(211, 57, 251, .18);
  --sidebar-icon-active: #d339fb;
  --sidebar-icon-hover: #b94af4;
}
[data-theme=light] {
  --chat-control-glow: rgba(149, 37, 234, .14);
  --sidebar-icon-active: #610ecb;
  --sidebar-icon-hover: #9525ea;
}

/* 2. Chat composer selects: restrained violet-to-fuchsia glass gradient. */
.cmp .st {
  background: linear-gradient(128deg,
    color-mix(in srgb, var(--brand-violet-deep) 11%, var(--card)) 0%,
    color-mix(in srgb, var(--brand-violet) 8%, var(--bg2)) 58%,
    color-mix(in srgb, var(--brand-fuchsia) 7%, var(--card)) 100%) !important;
  border-color: color-mix(in srgb, var(--brand-violet) 26%, var(--line2)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 5px 16px -13px rgba(149,37,234,.62) !important;
}
.cmp .st:hover,
.cmp .sel.is-open .st,
.cmp .st:focus-visible {
  border-color: color-mix(in srgb, var(--brand-violet) 62%, var(--brand-fuchsia)) !important;
  box-shadow: 0 0 0 3px var(--chat-control-glow), inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px -14px rgba(149,37,234,.72) !important;
}
.cmp .st .sl { border-inline-end-color: color-mix(in srgb, var(--brand-violet) 25%, var(--line)); }
.cmp .st b,
.cmp .sel.is-open .st > svg:last-child { color: var(--chat-accent); }
.cmp .st .sel-badge:not(.is-free) {
  color: var(--chat-accent-bright);
  background: linear-gradient(115deg, rgba(97,14,203,.15), rgba(149,37,234,.13), rgba(211,57,251,.10));
  border-color: color-mix(in srgb, var(--brand-violet) 34%, var(--brand-fuchsia));
}
[data-theme=light] .cmp .st .sel-badge:not(.is-free) { color: var(--chat-accent-deep); }

/* The select list is moved to body by the UI script, so it needs its own class. */
.cmp-menu {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--card) 96%, var(--brand-violet-deep) 4%),
    color-mix(in srgb, var(--bg2) 95%, var(--brand-fuchsia) 5%)) !important;
  border: 1px solid color-mix(in srgb, var(--brand-violet) 30%, var(--line2)) !important;
  box-shadow: 0 24px 58px -22px rgba(97,14,203,.48),
              0 8px 24px -18px rgba(211,57,251,.42),
              inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.cmp-menu .opt.act {
  background: linear-gradient(105deg, rgba(97,14,203,.10), rgba(149,37,234,.09) 62%, rgba(211,57,251,.06)) !important;
}
.cmp-menu .opt[aria-selected=true] {
  background: linear-gradient(110deg, rgba(97,14,203,.20), rgba(149,37,234,.15) 62%, rgba(211,57,251,.10)) !important;
  border-color: color-mix(in srgb, var(--brand-violet) 40%, var(--brand-fuchsia)) !important;
}
.cmp-menu .opt[aria-selected=true]::before {
  background: var(--chat-control-gradient) !important;
}
.cmp-menu .opt .ck {
  background: var(--chat-control-gradient) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -7px rgba(149,37,234,.9);
}
.cmp-menu .opt .bd:not(.is-free) {
  color: var(--chat-accent-bright);
  background: rgba(149,37,234,.12);
  border-color: rgba(149,37,234,.30);
}
[data-theme=light] .cmp-menu .opt .bd:not(.is-free) { color: var(--chat-accent-deep); }

/* 3. Chat sliders: matching gradient track, thumb, value and step controls. */
.range-sel .st b { color: var(--chat-accent-bright) !important; }
[data-theme=light] .range-sel .st b { color: var(--chat-accent-deep) !important; }
.range-pop {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--card) 96%, var(--brand-violet-deep) 4%),
    color-mix(in srgb, var(--bg2) 95%, var(--brand-fuchsia) 5%)) !important;
  border-color: color-mix(in srgb, var(--brand-violet) 32%, var(--line2)) !important;
  box-shadow: 0 24px 58px -22px rgba(97,14,203,.48),
              0 8px 24px -18px rgba(211,57,251,.42),
              inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.range-pop .range-head output {
  color: var(--chat-accent-bright) !important;
  background: linear-gradient(115deg, rgba(97,14,203,.17), rgba(149,37,234,.14), rgba(211,57,251,.11)) !important;
  border-color: color-mix(in srgb, var(--brand-violet) 34%, var(--brand-fuchsia)) !important;
}
[data-theme=light] .range-pop .range-head output { color: var(--chat-accent-deep) !important; }
.range-pop .rg-step:hover {
  color: var(--chat-accent-bright) !important;
  border-color: color-mix(in srgb, var(--brand-violet) 55%, var(--brand-fuchsia)) !important;
  background: rgba(149,37,234,.12) !important;
}
.range-pop input[type=range]::-webkit-slider-runnable-track {
  background: var(--chat-control-gradient) 0/var(--range-progress) 100% no-repeat,
              color-mix(in srgb, var(--brand-violet) 16%, var(--line2)) !important;
}
:root[dir=rtl] .range-pop input[type=range]::-webkit-slider-runnable-track {
  background: var(--chat-control-gradient) 100%/var(--range-progress) 100% no-repeat,
              color-mix(in srgb, var(--brand-violet) 16%, var(--line2)) !important;
}
.range-pop input[type=range]::-webkit-slider-thumb {
  border-color: var(--brand-violet) !important;
  box-shadow: 0 2px 7px rgba(97,14,203,.28), 0 0 0 2px rgba(211,57,251,.10) !important;
}
.range-pop input[type=range]:hover::-webkit-slider-thumb,
.range-pop input[type=range]:active::-webkit-slider-thumb {
  border-color: var(--brand-fuchsia) !important;
  box-shadow: 0 0 0 4px var(--chat-control-glow), 0 3px 9px rgba(97,14,203,.28) !important;
}
.range-pop input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--chat-control-glow), 0 2px 7px rgba(97,14,203,.30) !important;
}
.range-pop input[type=range]::-moz-range-progress {
  background: var(--chat-control-gradient) !important;
}
.range-pop input[type=range]::-moz-range-thumb {
  border-color: var(--brand-violet) !important;
  box-shadow: 0 2px 7px rgba(97,14,203,.28), 0 0 0 2px rgba(211,57,251,.10) !important;
}

/* ======================================================================
   OTP EXPERIENCE — final, conflict-resistant component layer
   The auth script switches .lg-card[data-auth-state] between phone and otp.
   ====================================================================== */
.lg-card[data-auth-state="otp"] {
  width: min(440px, 100%);
  padding: 30px 34px 26px;
  border: 1px solid color-mix(in srgb, var(--brand-violet) 22%, var(--line));
  border-radius: 26px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--card) 97%, var(--brand-violet) 3%),
    color-mix(in srgb, var(--card) 99%, var(--brand-fuchsia) 1%));
  box-shadow: 0 30px 78px -44px rgba(0,0,0,.70),
              0 0 0 1px rgba(255,255,255,.035) inset,
              0 1px 0 rgba(255,255,255,.055) inset;
}
[data-theme="light"] .lg-card[data-auth-state="otp"] {
  box-shadow: 0 26px 64px -40px rgba(20,35,75,.25),
              0 0 0 1px rgba(255,255,255,.82) inset;
}

/* Compact horizontal brand signature, reserved for the verification step. */
.lg-card[data-auth-state="otp"] .lg-brand-lockup {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0 0 24px;
  padding: 0 0 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
}
.lg-card[data-auth-state="otp"] .lg-brand-lockup img {
  display: block;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  margin: 0;
  padding: 1px;
  border: 0 !important;
  border-radius: 11px;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 12px rgba(149,37,234,.2));
}
.lg-card[data-auth-state="otp"] .lg-brand-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 0;
}
.lg-card[data-auth-state="otp"] .lg-brand-lockup b {
  font-size: 15px;
  font-weight: 850;
  line-height: 1.6;
}
.lg-card[data-auth-state="otp"] .lg-brand-lockup small { display: none; }

.lg-card[data-auth-state="otp"] .lg-otp-step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 0;
  text-align: start;
}
.lg-otp-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 18px;
  text-align: right;
}
.lg-otp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  color: var(--chat-accent-bright);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}
[data-theme="light"] .lg-otp-kicker { color: var(--chat-accent-deep); }
.lg-otp-kicker .i { width: 15px; height: 15px; }
.lg-otp-step h1 {
  margin: 0;
  color: var(--tx);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: -.25px;
  text-align: start;
}
.lg-otp-step .lg-lead {
  max-width: none;
  margin: 5px 0 0;
  color: var(--mut);
  font-size: 12px;
  line-height: 1.85;
  text-align: start;
}

/* Phone and edit action stay on one row at every supported width. */
.lg-otp-recipient {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  margin: 0 0 22px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--brand-violet) 22%, var(--line)) !important;
  border-radius: 14px;
  background: linear-gradient(112deg,
    color-mix(in srgb, var(--brand-violet-deep) 6%, var(--card)),
    color-mix(in srgb, var(--brand-violet) 5%, var(--card)) 62%,
    color-mix(in srgb, var(--brand-fuchsia) 3%, var(--card))) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  text-align: start;
}
.lg-otp-recipient-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  width: 100%;
}
.lg-otp-recipient-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border: 1px solid color-mix(in srgb, var(--brand-violet) 22%, transparent);
  border-radius: 10px;
  color: #d39aff;
  background: linear-gradient(140deg, rgba(97,14,203,.17), rgba(149,37,234,.11));
}
[data-theme="light"] .lg-otp-recipient-icon { color: var(--chat-accent-deep); }
.lg-otp-recipient-icon .i { width: 17px; height: 17px; }
.lg-otp-recipient-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.lg-otp-recipient-text small {
  color: var(--mut);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}
.lg-otp-recipient-text b {
  display: block;
  max-width: 100%;
  color: var(--tx) !important;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .25px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.lg-otp-step .lg-back {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center !important;
  flex: 0 0 auto;
  gap: 5px;
  min-width: 0;
  min-height: 32px;
  height: 32px;
  margin: 0 !important;
  padding: 0 7px;
  border: 0 !important;
  border-inline-start: 1px solid color-mix(in srgb, var(--brand-violet) 24%, var(--line)) !important;
  border-radius: 0;
  color: var(--chat-accent-bright) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transform: none !important;
  cursor: pointer;
  transition: color .18s ease, opacity .18s ease;
}
[data-theme="light"] .lg-otp-step .lg-back { color: var(--chat-accent-deep) !important; }
.lg-otp-step .lg-back:hover { color: var(--chat-accent-bright) !important; opacity: .78; }
[data-theme="light"] .lg-otp-step .lg-back:hover { color: var(--chat-accent-deep) !important; }
.lg-otp-step .lg-back:active { opacity: .6; }
.lg-otp-step .lg-back:focus-visible {
  outline: 2px solid var(--chat-accent-bright) !important;
  outline-offset: 3px;
  border-radius: 7px;
}
.lg-otp-step .lg-back .i {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  transform: none !important;
}

.lg-otp-field { width: 100%; min-width: 0; }
.lg-otp-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 1px 10px;
  color: var(--tx);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.6;
}
.lg-otp-field-head small {
  color: var(--mut);
  font-size: 10px;
  font-weight: 650;
}
.lg-otp-step .lg-otp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  direction: ltr;
  width: min(100%, 300px);
  gap: 10px;
  margin: 0 auto;
}
.lg-otp-step .lg-digit {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  height: 62px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line2) 78%, var(--brand-violet) 22%) !important;
  border-radius: 13px;
  color: var(--tx) !important;
  background: color-mix(in srgb, var(--bg2) 94%, var(--brand-violet) 6%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
  font-family: inherit;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  caret-color: var(--chat-accent-bright);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.lg-otp-step .lg-digit:hover { border-color: color-mix(in srgb, var(--brand-violet) 52%, var(--line2)) !important; }
.lg-otp-step .lg-digit:focus {
  outline: none;
  border-color: transparent !important;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--chat-control-gradient) border-box !important;
  box-shadow: 0 0 0 3px var(--chat-control-glow) !important;
  transform: translateY(-1px);
}
.lg-otp-step .lg-digit.filled {
  border-color: color-mix(in srgb, var(--brand-violet) 48%, var(--line2)) !important;
  background: color-mix(in srgb, var(--brand-violet) 8%, var(--card)) !important;
  box-shadow: none !important;
}
.lg-otp-step .lg-digit.err,
.lg-otp-step .lg-digit.filled.err {
  border: 1px solid var(--rose) !important;
  color: var(--rose) !important;
  background: var(--danger-soft) !important;
  box-shadow: 0 0 0 3px var(--danger-soft) !important;
  animation: lgShake .4s;
}
.lg-otp-step .lg-digit.ok,
.lg-otp-step .lg-digit.filled.ok {
  border: 1px solid var(--success) !important;
  color: var(--success) !important;
  background: var(--success-soft) !important;
  box-shadow: none !important;
  animation: none;
}

.lg-otp-step #authOtpMessage {
  min-height: 0;
  margin: 0;
  color: var(--mut);
  font-size: 11.5px;
  line-height: 1.7;
  text-align: center;
}
.lg-otp-step #authOtpMessage:empty { display: none; }
.lg-otp-step #authOtpMessage:not(:empty) { margin: 10px 0 0; }
.lg-otp-step #authOtpMessage.error { color: var(--rose); font-weight: 750; }
.lg-otp-step .lg-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  height: 52px;
  margin: 16px 0 0;
  padding: 0 18px;
  border: 1px solid transparent !important;
  border-radius: 13px;
  color: #fff !important;
  background: var(--chat-control-gradient) !important;
  box-shadow: 0 12px 25px -17px rgba(149,37,234,.82), inset 0 1px 0 rgba(255,255,255,.2) !important;
  font-size: 13px;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .2s ease, filter .18s ease;
}
.lg-otp-step .lg-primary:hover {
  filter: brightness(1.06) saturate(1.06);
  box-shadow: 0 15px 28px -17px rgba(211,57,251,.82), inset 0 1px 0 rgba(255,255,255,.24) !important;
  transform: translateY(-1px);
}
.lg-otp-step .lg-primary:active { transform: translateY(0) scale(.99); }
.lg-otp-step .lg-primary:focus-visible { outline: 2px solid var(--chat-accent-bright); outline-offset: 3px; }
.lg-otp-step .lg-primary .i { width: 17px; height: 17px; }
.lg-otp-step .lg-primary .lg-spin { border-color: rgba(255,255,255,.35); border-top-color: #fff; }

.lg-otp-step .lg-resend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 17px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 11.5px;
  line-height: 1.7;
}
.lg-otp-step .lg-resend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  height: 29px;
  padding: 0 8px;
  border: 1px solid transparent !important;
  border-radius: 8px;
  color: var(--mut);
  background: transparent;
  font-size: 10.8px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.lg-otp-step .lg-resend:disabled { opacity: .85; cursor: default; }
.lg-otp-step .lg-resend:not(:disabled) {
  color: #d9a2ff;
  border-color: color-mix(in srgb, var(--brand-violet) 28%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand-violet) 8%, var(--card));
  cursor: pointer;
}
[data-theme="light"] .lg-otp-step .lg-resend:not(:disabled) { color: var(--chat-accent-deep); }
.lg-otp-step .lg-resend:not(:disabled):hover {
  color: #fff;
  border-color: transparent !important;
  background: var(--chat-control-gradient);
}

@media (max-width: 480px) {
  .lg-card[data-auth-state="otp"] {
    width: min(100%, 440px);
    padding: 25px 21px 22px;
    border-radius: 23px;
  }
  .lg-card[data-auth-state="otp"] .lg-brand-lockup { margin-bottom: 21px; padding-bottom: 13px; }
  .lg-card[data-auth-state="otp"] .lg-brand-lockup img { width: 36px; height: 36px; flex-basis: 36px; }
  .lg-otp-heading { margin-bottom: 16px; }
  .lg-otp-step h1 { font-size: 19px; }
  .lg-otp-step .lg-lead { font-size: 11.5px; }
  .lg-otp-recipient { min-height: 62px; gap: 6px; margin-bottom: 20px; padding: 9px 10px; }
  .lg-otp-recipient-main { gap: 7px; }
  .lg-otp-recipient-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
  .lg-otp-recipient-text small { font-size: 9.5px; }
  .lg-otp-recipient-text b { font-size: 12px; }
  .lg-otp-step .lg-back { gap: 4px; min-height: 30px; height: 30px; padding: 0 6px; font-size: 10.5px; }
  .lg-otp-step .lg-back .i { width: 13px; height: 13px; flex-basis: 13px; }
  .lg-otp-step .lg-otp { width: min(100%, 292px); gap: 8px; }
  .lg-otp-step .lg-digit { height: 57px; border-radius: 12px; font-size: 23px; }
  .lg-otp-step .lg-primary { height: 50px; min-height: 50px; margin-top: 15px; }
  .lg-otp-step .lg-resend-row { margin-top: 15px; padding-top: 11px; }
}
@media (max-width: 360px) {
  .lg-card[data-auth-state="otp"] { padding: 22px 15px 19px; }
  .lg-otp-recipient { padding: 8px; }
  .lg-otp-recipient-icon { width: 29px; height: 29px; flex-basis: 29px; }
  .lg-otp-recipient-text small { font-size: 9px; }
  .lg-otp-recipient-text b { font-size: 11px; }
  .lg-otp-step .lg-back { gap: 3px; padding: 0 5px; font-size: 10px; }
  .lg-otp-step .lg-otp { gap: 7px; }
  .lg-otp-step .lg-digit { height: 53px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-otp-step .lg-digit,
  .lg-otp-step .lg-primary,
  .lg-otp-step .lg-resend { transition: none; }
  .lg-otp-step .lg-digit.err { animation: none; }
}

/* Explicit theme surfaces for OTP digits (avoid legacy input background leakage). */
html[data-theme="light"] .lg-card[data-auth-state="otp"] .lg-otp-step .lg-digit {
  color: #0f1b3d !important;
  background: #ffffff !important;
  border-color: #d7def0 !important;
}
html[data-theme="light"] .lg-card[data-auth-state="otp"] .lg-otp-step .lg-digit.filled {
  background: #f8f1ff !important;
  border-color: #bd8ce9 !important;
}
html:not([data-theme="light"]) .lg-card[data-auth-state="otp"] .lg-otp-step .lg-digit {
  color: #eef3ff !important;
  background: #0d1430 !important;
  border-color: #344274 !important;
}
html:not([data-theme="light"]) .lg-card[data-auth-state="otp"] .lg-otp-step .lg-digit.filled {
  background: #171333 !important;
  border-color: #8050bd !important;
}


/* Keep the phone-step brand stack intact after grouping its copy for OTP. */
.lg-card .lg-brand-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 0;
}
.lg-card[data-auth-state="otp"] .lg-brand-copy { align-items: flex-start; }


/* ==========================================================================
   19. UNIFIED AUTH CARD + TRANSPARENT SIDEBAR BRAND MARK
   Both phone and OTP steps share one centered card and one centered brand
   signature. Keep this block last so earlier legacy rules cannot split them.
   ========================================================================== */

/* The same shell is used for both steps; only the inner form content changes. */
.lg-card,
.lg-card[data-auth-state="phone"],
.lg-card[data-auth-state="otp"] {
  width: min(440px, 100%) !important;
  max-width: 440px !important;
  margin-inline: auto !important;
  padding: 36px 34px 30px !important;
  border: 1px solid color-mix(in srgb, var(--brand-violet) 24%, var(--line)) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand-violet) 3.5%, var(--card)),
      color-mix(in srgb, var(--brand-fuchsia) 1.5%, var(--card))) !important;
  box-shadow:
    0 30px 82px -48px rgba(0, 0, 0, .72),
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 1px 0 rgba(255, 255, 255, .055) inset !important;
  text-align: center;
}
[data-theme="light"] .lg-card,
[data-theme="light"] .lg-card[data-auth-state="phone"],
[data-theme="light"] .lg-card[data-auth-state="otp"] {
  background: linear-gradient(145deg, #fff 0%, color-mix(in srgb, #fff 97%, #f4eaff) 100%) !important;
  box-shadow:
    0 28px 70px -48px rgba(31, 26, 67, .30),
    0 0 0 1px rgba(255, 255, 255, .9) inset !important;
}

/* Identical centered logo + wordmark on the phone and verification steps. */
.lg-card .lg-brand-lockup,
.lg-card[data-auth-state="otp"] .lg-brand-lockup {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 auto 25px !important;
  padding: 0 0 19px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent) !important;
  text-align: center !important;
}
.lg-card .lg-brand-lockup img,
.lg-card[data-auth-state="otp"] .lg-brand-lockup img {
  display: block !important;
  width: 70px !important;
  height: 70px !important;
  flex: 0 0 70px !important;
  margin: 0 auto 1px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 15px rgba(149, 37, 234, .18)) !important;
}
.lg-card .lg-brand-copy,
.lg-card[data-auth-state="otp"] .lg-brand-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  min-width: 0;
  text-align: center !important;
}
.lg-card .lg-brand-lockup b,
.lg-card[data-auth-state="otp"] .lg-brand-lockup b {
  display: block !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  letter-spacing: -.25px !important;
}
.lg-card .lg-brand-lockup small,
.lg-card[data-auth-state="otp"] .lg-brand-lockup small {
  display: block !important;
  max-width: 290px;
  color: var(--mut) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
  white-space: normal;
}

/* Keep the two form states centered within the same card. */
.lg-card .lg-step,
.lg-card[data-auth-state="otp"] .lg-otp-step {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  width: 100%;
  min-width: 0;
  text-align: center !important;
}
.lg-card .lg-step h1,
.lg-card[data-auth-state="otp"] .lg-otp-step h1 {
  width: 100%;
  margin: 0 !important;
  color: var(--tx);
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.65 !important;
  text-align: center !important;
}
.lg-card .lg-step .lg-lead,
.lg-card[data-auth-state="otp"] .lg-otp-step .lg-lead {
  width: 100%;
  max-width: 340px !important;
  margin: 6px auto 0 !important;
  color: var(--mut);
  font-size: 12px !important;
  line-height: 1.95 !important;
  text-align: center !important;
  text-wrap: balance;
}
.lg-card .lg-label {
  width: 100%;
  margin: 19px 0 8px !important;
  text-align: right !important;
}
.lg-card .lg-field { width: 100%; }
.lg-card #authMessage,
.lg-card #authOtpMessage {
  width: 100%;
  text-align: center !important;
}
.lg-card .lg-note { width: 100%; text-align: center; }

/* OTP heading uses the same centered hierarchy as the phone step. */
.lg-card .lg-otp-heading,
.lg-card[data-auth-state="otp"] .lg-otp-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  margin: 0 0 17px !important;
  text-align: center !important;
}
.lg-card .lg-otp-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 7px;
  color: var(--chat-accent-bright);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
}
[data-theme="light"] .lg-card .lg-otp-kicker { color: var(--chat-accent-deep); }

/* Recipient row: balanced number display and a quiet edit action. */
.lg-card .lg-otp-recipient,
.lg-card[data-auth-state="otp"] .lg-otp-recipient {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0;
  min-height: 64px;
  margin: 0 0 19px !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--brand-violet) 20%, var(--line)) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--brand-violet) 5%, var(--card)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  text-align: center !important;
}
.lg-card .lg-otp-recipient-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
}
.lg-card .lg-otp-recipient-text {
  align-items: flex-start !important;
  text-align: right !important;
}
.lg-card .lg-back,
.lg-card .lg-otp-step .lg-back {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 32px;
  height: 32px;
  padding: 0 10px !important;
  border: 1px solid color-mix(in srgb, var(--brand-violet) 25%, var(--line)) !important;
  border-radius: 10px !important;
  color: var(--chat-accent-bright) !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap;
  box-shadow: none !important;
  transform: none !important;
}
[data-theme="light"] .lg-card .lg-back { color: var(--chat-accent-deep) !important; }
.lg-card .lg-back:hover {
  border-color: color-mix(in srgb, var(--brand-violet) 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand-violet) 7%, transparent) !important;
}
.lg-card .lg-back .i { width: 13px; height: 13px; transform: none !important; }

/* Center the OTP label, digit group, messages and resend line. */
.lg-card .lg-otp-field { width: 100%; }
.lg-card .lg-otp-field-head {
  justify-content: space-between !important;
  gap: 9px;
  text-align: right;
}
.lg-card .lg-otp-step .lg-otp { margin-inline: auto; }
.lg-card .lg-otp-step .lg-primary { width: 100%; }
.lg-card .lg-otp-step .lg-resend-row {
  justify-content: center !important;
  text-align: center;
}
.lg-card .lg-otp-step #authOtpMessage { text-align: center !important; }

/* Gentle state transition; no second card or duplicated brand header. */
.lg-card .lg-step:not([hidden]) {
  animation: lgAuthStepEnter .24s ease both;
}
@keyframes lgAuthStepEnter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .lg-card,
  .lg-card[data-auth-state="phone"],
  .lg-card[data-auth-state="otp"] {
    width: min(100%, 440px) !important;
    padding: 31px 22px 25px !important;
    border-radius: 24px !important;
  }
  .lg-card .lg-brand-lockup,
  .lg-card[data-auth-state="otp"] .lg-brand-lockup {
    margin-bottom: 21px !important;
    padding-bottom: 15px !important;
  }
  .lg-card .lg-brand-lockup img,
  .lg-card[data-auth-state="otp"] .lg-brand-lockup img {
    width: 62px !important;
    height: 62px !important;
    flex-basis: 62px !important;
  }
  .lg-card .lg-brand-lockup b,
  .lg-card[data-auth-state="otp"] .lg-brand-lockup b { font-size: 18px !important; }
  .lg-card .lg-brand-lockup small,
  .lg-card[data-auth-state="otp"] .lg-brand-lockup small { font-size: 10.5px !important; }
  .lg-card .lg-otp-heading { margin-bottom: 14px !important; }
  .lg-card .lg-otp-recipient { min-height: 60px; gap: 7px !important; padding: 8px 9px !important; }
  .lg-card .lg-otp-recipient-icon { width: 31px; height: 31px; flex-basis: 31px; }
  .lg-card .lg-otp-recipient-text small { font-size: 9.5px; }
  .lg-card .lg-otp-recipient-text b { font-size: 11.5px; }
  .lg-card .lg-back { min-height: 30px; height: 30px; padding-inline: 8px !important; font-size: 10px !important; }
  .lg-card .lg-otp-step .lg-digit { height: 56px; }
}
@media (max-width: 360px) {
  .lg-card,
  .lg-card[data-auth-state="phone"],
  .lg-card[data-auth-state="otp"] {
    padding: 27px 16px 21px !important;
  }
  .lg-card .lg-otp-recipient { padding-inline: 7px !important; }
  .lg-card .lg-otp-recipient-main { gap: 6px; }
  .lg-card .lg-otp-recipient-text small { font-size: 9px; }
  .lg-card .lg-otp-recipient-text b { font-size: 10.5px; }
  .lg-card .lg-back { padding-inline: 6px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-card .lg-step:not([hidden]) { animation: none !important; }
}

/* Sidebar brand artwork: preserve the original logo size, remove only its tile. */
.sidebar .sb-logo {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sidebar .sb-logo img,
.sidebar .sb-admin-lockup img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.sidebar .sb-admin-lockup img {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}

/* Preserve the native hidden state while centering the visible auth step. */
.lg-card .lg-step[hidden] { display: none !important; }
.lg-card .lg-step:not([hidden]) { display: flex !important; }
.lg-card .lg-step .lg-primary { width: 100%; }


/* ==========================================================================
   FINAL OVERRIDE — one centered authentication card for phone + OTP.
   The card shell and brand lockup are shared by both states in auth-modal.
   ========================================================================== */
html body .lg-card,
html body .lg-card[data-auth-state="phone"],
html body .lg-card[data-auth-state="otp"] {
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 34px 32px 29px !important;
  border: 1px solid transparent !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(20, 27, 57, .985), rgba(13, 19, 43, .99)) padding-box,
    linear-gradient(135deg, rgba(1, 96, 234, .42), rgba(149, 37, 234, .48) 56%, rgba(211, 57, 251, .38)) border-box !important;
  box-shadow:
    0 28px 76px -42px rgba(0, 0, 0, .72),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  text-align: center !important;
}
html[data-theme="light"] body .lg-card,
html[data-theme="light"] body .lg-card[data-auth-state="phone"],
html[data-theme="light"] body .lg-card[data-auth-state="otp"] {
  background:
    linear-gradient(145deg, #ffffff, #fbf9ff) padding-box,
    linear-gradient(135deg, rgba(1, 96, 234, .28), rgba(149, 37, 234, .34) 56%, rgba(211, 57, 251, .25)) border-box !important;
  box-shadow:
    0 26px 68px -42px rgba(34, 22, 70, .28),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

/* Shared centered brand header — never changes between phone and OTP. */
html body .lg-card .lg-brand-lockup,
html body .lg-card[data-auth-state="phone"] .lg-brand-lockup,
html body .lg-card[data-auth-state="otp"] .lg-brand-lockup {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 auto 23px !important;
  padding: 0 0 19px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
  text-align: center !important;
}
html body .lg-card .lg-brand-lockup img,
html body .lg-card[data-auth-state="phone"] .lg-brand-lockup img,
html body .lg-card[data-auth-state="otp"] .lg-brand-lockup img {
  display: block !important;
  width: 68px !important;
  height: 68px !important;
  flex: 0 0 68px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 7px 13px rgba(149, 37, 234, .18)) !important;
}
html body .lg-card .lg-brand-copy,
html body .lg-card[data-auth-state="phone"] .lg-brand-copy,
html body .lg-card[data-auth-state="otp"] .lg-brand-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: 100% !important;
  text-align: center !important;
}
html body .lg-card .lg-brand-lockup b {
  display: block !important;
  margin: 0 !important;
  color: var(--tx) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
html body .lg-card .lg-brand-lockup small {
  display: block !important;
  max-width: 300px !important;
  margin: 0 auto !important;
  color: var(--mut) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.85 !important;
  text-align: center !important;
  white-space: normal !important;
}

/* Both states use the same centered content rhythm and typography. */
html body .lg-card .lg-step:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
  animation: lgAuthStepEnter .22s ease both;
}
html body .lg-card .lg-step[hidden] { display: none !important; }
html body .lg-card .lg-step h1,
html body .lg-card .lg-otp-step h1 {
  width: 100% !important;
  margin: 0 !important;
  color: var(--tx) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.7 !important;
  text-align: center !important;
}
html body .lg-card .lg-step .lg-lead {
  width: 100% !important;
  max-width: 340px !important;
  margin: 6px auto 0 !important;
  color: var(--mut) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.95 !important;
  text-align: center !important;
  text-wrap: balance;
}
html body .lg-card .lg-label {
  width: 100% !important;
  margin: 19px 0 9px !important;
  text-align: center !important;
}
html body .lg-card .lg-field,
html body .lg-card .lg-otp-field,
html body .lg-card .lg-primary,
html body .lg-card #authMessage,
html body .lg-card #authOtpMessage,
html body .lg-card .lg-note {
  width: 100% !important;
}
html body .lg-card #authMessage,
html body .lg-card #authOtpMessage,
html body .lg-card .lg-note {
  text-align: center !important;
}

/* OTP heading is visually identical in hierarchy to the phone heading. */
html body .lg-card .lg-otp-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 0 17px !important;
  text-align: center !important;
}
html body .lg-card .lg-otp-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 0 7px !important;
  color: var(--chat-accent-bright) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
html[data-theme="light"] body .lg-card .lg-otp-kicker { color: var(--chat-accent-deep) !important; }

/* The phone number and edit action stay in one clean, balanced row. */
html body .lg-card .lg-otp-recipient {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 62px !important;
  margin: 0 0 19px !important;
  padding: 9px 11px !important;
  border: 1px solid color-mix(in srgb, var(--brand-violet) 22%, var(--line)) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--brand-violet) 5%, var(--card)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}
html body .lg-card .lg-otp-recipient-main {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 9px !important;
}
html body .lg-card .lg-otp-recipient-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  text-align: center !important;
}
html body .lg-card .lg-otp-recipient-text small {
  color: var(--mut) !important;
  font-size: 10px !important;
  line-height: 1.65 !important;
  text-align: center !important;
}
html body .lg-card .lg-otp-recipient-text b {
  color: var(--tx) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.7 !important;
  white-space: nowrap !important;
}
html body .lg-card .lg-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
  min-height: 33px !important;
  height: 33px !important;
  padding: 0 10px !important;
  border: 1px solid color-mix(in srgb, var(--brand-fuchsia) 28%, var(--line)) !important;
  border-radius: 10px !important;
  color: var(--chat-accent-bright) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  transform: none !important;
}
html[data-theme="light"] body .lg-card .lg-back { color: var(--chat-accent-deep) !important; }
html body .lg-card .lg-back:hover {
  border-color: color-mix(in srgb, var(--brand-fuchsia) 48%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand-fuchsia) 6%, transparent) !important;
}
html body .lg-card .lg-back .i {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  transform: none !important;
}

/* Center the OTP field label, digits, feedback and resend action. */
html body .lg-card .lg-otp-field-head {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 9px !important;
  text-align: center !important;
}
html body .lg-card .lg-otp-field-head small {
  padding: 3px 8px !important;
  border: 1px solid color-mix(in srgb, var(--brand-violet) 22%, var(--line)) !important;
  border-radius: 999px !important;
  color: var(--mut) !important;
  background: color-mix(in srgb, var(--brand-violet) 6%, transparent) !important;
  font-size: 10px !important;
}
html body .lg-card .lg-otp { margin-inline: auto !important; }
html body .lg-card .lg-otp-step .lg-primary { width: 100% !important; }
html body .lg-card .lg-otp-step .lg-resend-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  width: 100% !important;
  text-align: center !important;
}
html body .lg-card .lg-otp-step #authOtpMessage { text-align: center !important; }

/* Small screens: retain the same centered card without cramped recipient row. */
@media (max-width: 480px) {
  html body .lg-card,
  html body .lg-card[data-auth-state="phone"],
  html body .lg-card[data-auth-state="otp"] {
    width: min(420px, calc(100vw - 28px)) !important;
    padding: 29px 21px 24px !important;
    border-radius: 23px !important;
  }
  html body .lg-card .lg-brand-lockup { margin-bottom: 20px !important; padding-bottom: 15px !important; }
  html body .lg-card .lg-brand-lockup img { width: 62px !important; height: 62px !important; flex-basis: 62px !important; }
  html body .lg-card .lg-brand-lockup b { font-size: 18px !important; }
  html body .lg-card .lg-brand-lockup small { font-size: 10px !important; }
  html body .lg-card .lg-otp-recipient { min-height: 58px !important; gap: 6px !important; padding: 8px 8px !important; }
  html body .lg-card .lg-otp-recipient-main { gap: 6px !important; }
  html body .lg-card .lg-otp-recipient-icon { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; }
  html body .lg-card .lg-otp-recipient-text small { font-size: 9px !important; }
  html body .lg-card .lg-otp-recipient-text b { font-size: 10.5px !important; }
  html body .lg-card .lg-back { min-height: 30px !important; height: 30px !important; padding-inline: 7px !important; font-size: 9.5px !important; }
}
@media (max-width: 360px) {
  html body .lg-card,
  html body .lg-card[data-auth-state="phone"],
  html body .lg-card[data-auth-state="otp"] { padding: 25px 15px 21px !important; }
  html body .lg-card .lg-otp-recipient { gap: 4px !important; padding-inline: 6px !important; }
  html body .lg-card .lg-otp-recipient-main { gap: 5px !important; }
  html body .lg-card .lg-otp-recipient-text small { font-size: 8.5px !important; }
  html body .lg-card .lg-otp-recipient-text b { font-size: 10px !important; }
  html body .lg-card .lg-back { gap: 3px !important; padding-inline: 5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body .lg-card .lg-step:not([hidden]) { animation: none !important; }
}

/* Sidebar: keep its original panel surface; only remove the logo's tile. */
html body .sidebar {
  background: var(--bg2) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: var(--line) !important;
  box-shadow: 0 24px 60px -38px rgba(0, 0, 0, .6) !important;
}
html body .sidebar .sb-logo,
html body .sidebar .sb-logo img,
html body .sidebar .sb-admin-lockup,
html body .sidebar .sb-admin-lockup img {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  filter: none !important;
}
html body .sidebar .sb-logo {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px !important;
  overflow: visible !important;
}
html body .sidebar .sb-logo img,
html body .sidebar .sb-admin-lockup img {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}



/* ==========================================================================
   HOOSH SAZIN — SIDEBAR INTERACTION SYSTEM
   Refined navigation surfaces, icon tiles, active states and collapsed tooltips.
   ========================================================================== */

:root {
  --sb-nav-radius: 14px;
  --sb-nav-surface: color-mix(in srgb, var(--card) 68%, transparent);
  --sb-nav-hover-line: color-mix(in srgb, var(--brand-blue) 24%, var(--line));
  --sb-nav-active-line: color-mix(in srgb, var(--brand-violet) 34%, var(--line));
  --sb-nav-hover-shadow: 0 9px 20px -17px rgba(1, 96, 234, .58);
  --sb-nav-active-shadow: 0 12px 24px -19px rgba(149, 37, 234, .72);
}

/* A restrained glass panel gives the navigation more depth without noise. */
html body .sidebar {
  background:
    radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--brand-blue) 7%, transparent), transparent 48%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg2) 97%, var(--brand-violet) 3%),
      var(--bg2) 58%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
  border-color: color-mix(in srgb, var(--brand-blue) 13%, var(--line)) !important;
  box-shadow:
    0 24px 58px -38px rgba(0, 0, 0, .68),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}
html[data-theme="light"] body .sidebar {
  background:
    radial-gradient(ellipse at 8% 0%, rgba(1, 96, 234, .055), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
  border-color: color-mix(in srgb, var(--brand-blue) 13%, var(--line)) !important;
  box-shadow:
    0 22px 52px -38px rgba(28, 49, 94, .28),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

/* Header: clear separation, a crisp brand lockup and a tactile collapse control. */
html body .sidebar .sb-head {
  position: relative !important;
  min-height: 70px !important;
  padding: 13px 13px 12px !important;
  gap: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent) !important;
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--brand-blue) 4%, transparent),
    transparent 72%) !important;
}
html body .sidebar .sb-brand {
  gap: 10px !important;
  min-width: 0 !important;
}
html body .sidebar .sb-brand-t {
  gap: 2px !important;
}
html body .sidebar .sb-brand-t .sb-name {
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -.2px !important;
}
html body .sidebar .sb-brand-t small {
  color: var(--mut) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  opacity: .88;
}
html body .sidebar .sb-toggle {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 1px solid color-mix(in srgb, var(--line2) 72%, transparent) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--card) 82%, transparent) !important;
  color: var(--mut) !important;
  box-shadow: 0 3px 10px -7px rgba(0, 0, 0, .42) !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease !important;
}
html body .sidebar .sb-toggle:hover,
html body .sidebar .sb-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--brand-blue) 38%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand-blue) 10%, var(--card)) !important;
  color: var(--brand-cyan) !important;
  box-shadow: 0 7px 16px -11px rgba(1, 96, 234, .62) !important;
  transform: translateY(-1px) !important;
}
html[data-theme="light"] body .sidebar .sb-toggle:hover,
html[data-theme="light"] body .sidebar .sb-toggle:focus-visible {
  color: var(--brand-blue) !important;
}
html body .sidebar .sb-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-blue) 60%, transparent) !important;
  outline-offset: 2px !important;
}

/* Section labels and separators create a quiet, consistent hierarchy. */
html body .sidebar .sb-nav {
  gap: 5px !important;
  padding: 10px 11px 8px !important;
}
html body .sidebar .sb-nav .sb-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 25px !important;
  margin: 2px 2px 4px !important;
  padding: 3px 7px 5px !important;
  color: var(--mut) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .025em !important;
  opacity: .92 !important;
}
html body .sidebar .sb-nav .sb-section-title::before {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, var(--brand-cyan), var(--brand-violet)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 9%, transparent) !important;
}
html body .sidebar .sb-nav .sb-section-title::after {
  content: "" !important;
  display: block !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  margin-inline-start: 3px !important;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--line2) 80%, transparent),
    transparent) !important;
  opacity: .9 !important;
}
html body .sidebar .sb-nav-sep {
  display: block !important;
  height: 1px !important;
  margin: 7px 8px !important;
  border: 0 !important;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--line2) 88%, transparent) 24%,
    color-mix(in srgb, var(--line2) 88%, transparent) 76%,
    transparent) !important;
  opacity: .78 !important;
}

/* Base navigation row: visible hit area, subtle surface and smooth movement. */
html body .sidebar .sb-nav-item,
html body .sidebar .sb-admin-nav .sb-nav-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  gap: 11px !important;
  padding: 6px 9px !important;
  overflow: visible !important;
  border: 1px solid transparent !important;
  border-radius: var(--sb-nav-radius) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--mut) !important;
  font-size: 12.75px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
  text-align: right !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: translateX(0) !important;
  transition:
    background .2s ease,
    background-image .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .22s ease,
    transform .22s cubic-bezier(.22, .9, .3, 1) !important;
}
html body .sidebar .sb-nav-item > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
  transition: color .18s ease, transform .18s ease !important;
}
html body .sidebar .sb-nav-item > svg,
html body .sidebar .sb-nav-item > .i {
  display: block !important;
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  flex: 0 0 35px !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--line2) 58%, transparent) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--card) 92%, var(--brand-blue) 8%),
    color-mix(in srgb, var(--card) 96%, transparent)) !important;
  color: color-mix(in srgb, var(--mut) 90%, var(--tx)) !important;
  stroke-width: 1.8 !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 2px 5px -4px rgba(0, 0, 0, .42) !important;
  transform: translateY(0) scale(1) rotate(0deg) !important;
  transform-origin: center !important;
  transition:
    background .22s ease,
    border-color .22s ease,
    color .2s ease,
    box-shadow .22s ease,
    filter .22s ease,
    transform .28s cubic-bezier(.22, .9, .3, 1) !important;
}

/* Hover and keyboard focus: surface lights up, the icon tile responds independently. */
@media (hover: hover) and (pointer: fine) {
  html body .sidebar .sb-nav-item:not(.sb-pro):hover,
  html body .sidebar .sb-admin-nav .sb-nav-item:not(.sb-pro):hover {
    border-color: var(--sb-nav-hover-line) !important;
    background: linear-gradient(105deg,
      color-mix(in srgb, var(--brand-blue) 9%, transparent),
      color-mix(in srgb, var(--brand-violet) 7%, transparent) 72%,
      color-mix(in srgb, var(--brand-fuchsia) 4%, transparent)) !important;
    color: var(--tx) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .045),
      var(--sb-nav-hover-shadow) !important;
    transform: translateX(-2px) !important;
  }
  html body .sidebar .sb-nav-item:not(.sb-pro):hover > svg,
  html body .sidebar .sb-nav-item:not(.sb-pro):hover > .i,
  html body .sidebar .sb-admin-nav .sb-nav-item:not(.sb-pro):hover > svg,
  html body .sidebar .sb-admin-nav .sb-nav-item:not(.sb-pro):hover > .i {
    border-color: color-mix(in srgb, var(--brand-cyan) 44%, var(--brand-violet)) !important;
    background: var(--grad-icon) !important;
    color: #fff !important;
    box-shadow:
      0 8px 18px -10px rgba(1, 96, 234, .8),
      0 0 0 3px color-mix(in srgb, var(--brand-violet) 10%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    filter: drop-shadow(0 3px 5px rgba(1, 96, 234, .12)) !important;
    transform: translateY(-1px) scale(1.075) rotate(-3deg) !important;
  }
  html body .sidebar .sb-nav-item:not(.sb-pro):hover > span,
  html body .sidebar .sb-admin-nav .sb-nav-item:not(.sb-pro):hover > span {
    transform: translateX(-1px) !important;
  }
}
html body .sidebar .sb-nav-item:focus-visible,
html body .sidebar .sb-admin-nav .sb-nav-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-blue) 62%, transparent) !important;
  outline-offset: 2px !important;
  border-color: color-mix(in srgb, var(--brand-blue) 28%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand-blue) 7%, transparent) !important;
  color: var(--tx) !important;
}
html body .sidebar .sb-nav-item:focus-visible > svg,
html body .sidebar .sb-nav-item:focus-visible > .i {
  border-color: color-mix(in srgb, var(--brand-cyan) 42%, var(--line)) !important;
  background: var(--grad-icon) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px -10px rgba(1, 96, 234, .82) !important;
}
html body .sidebar .sb-nav-item:active {
  background: color-mix(in srgb, var(--brand-blue) 13%, transparent) !important;
  transform: translateY(1px) scale(.99) !important;
}

/* Selected page: a premium blue-violet surface and a clear active rail. */
html body .sidebar .sb-nav-item.on,
html body .sidebar .sb-admin-nav .sb-nav-item.on {
  border-color: var(--sb-nav-active-line) !important;
  background: linear-gradient(105deg,
    rgba(1, 96, 234, .15) 0%,
    rgba(97, 14, 203, .12) 58%,
    rgba(211, 57, 251, .075) 100%) !important;
  color: var(--tx) !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    var(--sb-nav-active-shadow) !important;
  transform: none !important;
}
html body .sidebar .sb-nav-item.on::before,
html body .sidebar .sb-admin-nav .sb-nav-item.on::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset-inline-start: -1px !important;
  top: 24% !important;
  bottom: 24% !important;
  width: 3px !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg,
    var(--brand-cyan) 0%,
    var(--brand-blue) 42%,
    var(--brand-violet) 78%,
    var(--brand-fuchsia) 100%) !important;
  box-shadow: 0 0 13px rgba(149, 37, 234, .42) !important;
  opacity: 1 !important;
}
html body .sidebar .sb-nav-item.on > svg,
html body .sidebar .sb-nav-item.on > .i,
html body .sidebar .sb-admin-nav .sb-nav-item.on > svg,
html body .sidebar .sb-admin-nav .sb-nav-item.on > .i {
  border-color: color-mix(in srgb, var(--brand-fuchsia) 42%, transparent) !important;
  background: var(--grad-icon) !important;
  color: #fff !important;
  box-shadow:
    0 8px 18px -10px rgba(149, 37, 234, .9),
    0 0 0 3px color-mix(in srgb, var(--brand-violet) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  transform: translateY(-.5px) scale(1.035) !important;
}
html body .sidebar .sb-nav-item.on:hover,
html body .sidebar .sb-admin-nav .sb-nav-item.on:hover {
  border-color: color-mix(in srgb, var(--brand-fuchsia) 38%, var(--line)) !important;
  background: linear-gradient(105deg,
    rgba(1, 96, 234, .20) 0%,
    rgba(97, 14, 203, .16) 58%,
    rgba(211, 57, 251, .11) 100%) !important;
  color: var(--tx) !important;
}
html body .sidebar .sb-nav-item.on:hover > svg,
html body .sidebar .sb-nav-item.on:hover > .i {
  box-shadow:
    0 10px 21px -9px rgba(149, 37, 234, .95),
    0 0 0 4px rgba(149, 37, 234, .12),
    inset 0 1px 0 rgba(255, 255, 255, .32) !important;
  transform: translateY(-1px) scale(1.075) rotate(-2deg) !important;
}

/* History view's disclosure control reflects its expanded state. */
html body .sidebar #sbHistoryOpen[aria-expanded="true"] {
  border-color: var(--sb-nav-active-line) !important;
  background: color-mix(in srgb, var(--brand-blue) 8%, transparent) !important;
  color: var(--tx) !important;
}
html body .sidebar #sbHistoryOpen[aria-expanded="true"] > svg {
  border-color: color-mix(in srgb, var(--brand-blue) 34%, var(--line)) !important;
  background: var(--grad-icon) !important;
  color: #fff !important;
}

/* Pro upgrade remains a distinct premium action, not another ordinary row. */
html body .sidebar .sb-nav-item.sb-pro {
  min-height: 49px !important;
  margin-top: 5px !important;
  border: 1px solid rgba(149, 37, 234, .32) !important;
  background: linear-gradient(112deg,
    rgba(97, 14, 203, .15),
    rgba(149, 37, 234, .12) 58%,
    rgba(211, 57, 251, .09)) !important;
  color: color-mix(in srgb, var(--brand-fuchsia) 70%, var(--tx)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}
html body .sidebar .sb-nav-item.sb-pro > svg,
html body .sidebar .sb-nav-item.sb-pro > .i {
  border-color: rgba(211, 57, 251, .3) !important;
  background: linear-gradient(145deg, #610ecb, #9525ea 62%, #d339fb) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px -10px rgba(149, 37, 234, .85) !important;
}
html body .sidebar .sb-nav-item.sb-pro > em {
  margin-inline-start: auto !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(211, 57, 251, .35) !important;
  border-radius: 999px !important;
  background: rgba(149, 37, 234, .14) !important;
  color: var(--brand-fuchsia) !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  line-height: 1.3 !important;
}
html body .sidebar .sb-nav-item.sb-pro:hover,
html body .sidebar .sb-nav-item.sb-pro:focus-visible {
  border-color: rgba(211, 57, 251, .58) !important;
  background: linear-gradient(112deg,
    rgba(97, 14, 203, .23),
    rgba(149, 37, 234, .19) 58%,
    rgba(211, 57, 251, .15)) !important;
  color: var(--tx) !important;
  box-shadow: 0 11px 22px -16px rgba(149, 37, 234, .88) !important;
}
html body .sidebar .sb-nav-item.sb-pro:hover > svg,
html body .sidebar .sb-nav-item.sb-pro:hover > .i {
  background: var(--grad-ai) !important;
  color: #fff !important;
  transform: translateY(-1px) scale(1.075) rotate(-3deg) !important;
}

/* Collapsed desktop: centered icon tiles with a tooltip that opens inward. */
@media (min-width: 761px) {
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav {
    padding-inline: 8px !important;
    gap: 6px !important;
  }
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav-item,
  html body .app[data-sidebar="collapsed"] .sidebar .sb-admin-nav .sb-nav-item {
    justify-content: center !important;
    min-height: 50px !important;
    padding: 6px !important;
    gap: 0 !important;
    border-radius: 15px !important;
  }
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav-item > span,
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav-item > em {
    display: none !important;
  }
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav-item > svg,
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav-item > .i {
    width: 37px !important;
    height: 37px !important;
    min-width: 37px !important;
    flex: 0 0 37px !important;
    padding: 8px !important;
  }
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav-item.on::before {
    top: 27% !important;
    bottom: 27% !important;
  }
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav-item::after {
    content: attr(data-tip) !important;
    display: block !important;
    position: absolute !important;
    inset-inline-start: calc(100% + 12px) !important;
    inset-inline-end: auto !important;
    top: 50% !important;
    width: max-content !important;
    max-width: 230px !important;
    height: auto !important;
    padding: 7px 11px !important;
    border: 1px solid color-mix(in srgb, var(--brand-cyan) 25%, var(--line)) !important;
    border-radius: 10px !important;
    background: var(--tip-bg, #101a36) !important;
    color: var(--tip-tx, #eef3ff) !important;
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .62) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(-50%) translateX(4px) !important;
    transition: opacity .16s ease, transform .16s ease !important;
    z-index: 120 !important;
  }
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav-item:hover::after,
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav-item:focus-visible::after {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
    transition-delay: .1s !important;
  }
  html[data-theme="light"] body .app[data-sidebar="collapsed"] .sidebar .sb-nav-item::after {
    background: #15264b !important;
    color: #fff !important;
    border-color: rgba(1, 96, 234, .28) !important;
  }
}

/* Touch devices get a larger target; no hover-only transform is required. */
@media (max-width: 760px) {
  html body .sidebar .sb-nav {
    padding: 10px 12px 12px !important;
    gap: 5px !important;
  }
  html body .sidebar .sb-nav-item {
    min-height: 49px !important;
  }
  html body .sidebar .sb-nav-item > svg,
  html body .sidebar .sb-nav-item > .i {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-basis: 36px !important;
  }
  html body .sidebar {
    box-shadow: 0 -14px 36px -18px rgba(0, 0, 0, .45) !important;
  }
}

/* Keep all motion intentional and respect the user's accessibility setting. */
@media (prefers-reduced-motion: reduce) {
  html body .sidebar .sb-nav-item,
  html body .sidebar .sb-nav-item > svg,
  html body .sidebar .sb-nav-item > .i,
  html body .sidebar .sb-toggle {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}


/* In icon-only desktop mode, keep section captions out of the narrow rail. */
@media (min-width: 761px) {
  html body .app[data-sidebar="collapsed"] .sidebar .sb-nav .sb-section-title,
  html body .app[data-sidebar="collapsed"] .sidebar .sb-admin-nav .sb-section-title {
    display: none !important;
  }
}