/* LogForge Liquid Glass
   Critical: NEVER put filter:url() on the same layer as backdrop-filter.
   Correct stack:
     1) transparent wrapper
     2) ::before → backdrop-filter ONLY (live blur)
     3) ::after  → tint wash + soft inset shine
     4) content  → z-index above
*/

/* ================================================================
   LOGFORGE DESIGN SYSTEM — single source of truth.
   Pages must ONLY use these tokens + component classes
   (.glass, .btn/.btn-*, .field, .chip, .lf-switch …).
   Prefer --accent over legacy --gold. Public vs console density via --btn-radius.
   Never hand-tune sizes/colors per page.
   ================================================================ */
:root {
  color-scheme: light;

  /* — ink — */
  --ink: #22252b;
  --ink-soft: #343842;
  --ink-muted: rgba(52, 56, 66, .68);
  --ink-invert: #e8ebf0;

  /* — brand / status — */
  --blue: #C9962E; /* Quiet amber; was stadium #007aff */
  --blue-deep: #A67C2A;
  --blue-soft: rgba(201, 150, 46, .14);
  --accent: #C9962E;
  --accent-soft: #F0C85A;
  /* legacy aliases — prefer --accent */
  --gold: var(--accent);
  --gold-soft: var(--accent-soft);
  --green: #34c759;
  --red: #ff3b30;

  /* — settings toggle (ios-switch-row) — */
  --switch-track: #c8cbd1;
  --switch-track-on: var(--green);
  --switch-thumb: #eef1f5;

  /* — glass surface — light frost (never muddy/dark wash over wallpaper) — */
  --glass-bg: rgb(248 250 253 / 58%);
  --glass-bg-strong: rgb(250 252 255 / 78%);
  --glass-rim: transparent;
  --glass-tint: rgb(240 244 250 / 35%);
  --glass-blur: 18px;
  --glass-shine: inset 0 1px 0 rgb(255 255 255 / 55%);
  --glass-depth: 0 10px 28px rgb(15 25 45 / 08%);
  --shadow: 0 6px 18px rgb(15 25 45 / 07%);

  /* — radius scale — */
  --radius-xs: 12px;
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --radius-xl: 34px;
  --radius: var(--radius-lg);
  --radius-pill: 999px;
  /* public marketing CTAs = stadium; console remaps --btn-radius */
  --btn-radius: var(--radius-pill);

  /* — spacing scale — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* — type scale — */
  --text-xs: .75rem;      /* 12 — captions, chips */
  --text-sm: .875rem;     /* 14 — secondary, buttons sm */
  --text-md: 1rem;        /* 16 — body */
  --text-lg: 1.1875rem;   /* 19 — emphasized body / btn-lg */
  --text-xl: 1.375rem;    /* 22 — card titles */
  --text-2xl: 1.75rem;    /* 28 — section titles */
  --text-display: clamp(2rem, 4.5vw, 3.25rem);

  /* — control sizes (buttons / pills / fields) — */
  --ctl-h-sm: 36px;
  --ctl-h-md: 46px;
  --ctl-h-lg: 56px;
  --ctl-px-sm: 16px;
  --ctl-px-md: 24px;
  --ctl-px-lg: 32px;
  --ctl-fs-sm: .8125rem;  /* 13 */
  --ctl-fs-md: .9375rem;  /* 15 */
  --ctl-fs-lg: 1.0625rem; /* 17 — Apple CTA */
  --touch: var(--ctl-h-md);

  /* — button surfaces (theme decides the look, components consume) — */
  --btn-bg: rgb(226 232 242 / 42%);
  --btn-bg-hover: rgb(226 232 242 / 58%);
  --btn-rim: rgb(255 255 255 / 22%);
  --btn-ink: var(--ink-soft);
  --btn-primary-bg: linear-gradient(165deg, color-mix(in srgb, var(--blue) 58%, #dbe7f7) 0%, color-mix(in srgb, var(--blue) 78%, transparent) 100%);
  --btn-primary-bg-hover: linear-gradient(165deg, color-mix(in srgb, var(--blue) 68%, #dbe7f7) 0%, var(--blue) 100%);
  --btn-primary-rim: rgb(255 255 255 / 28%);
  --btn-primary-ink: #f4f7fb;
  --btn-primary-glow: 0 8px 22px color-mix(in srgb, var(--blue) 28%, transparent);

  /* — fonts — */
  --font-en: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-fa: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --font: var(--font-en);
  --mono: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --placeholder: rgba(60, 60, 67, .45);
  --hairline: rgb(60 60 67 / 12%);
  --surface-elevated: transparent;

  /* — Apple-like motion (iOS 26 liquid glass) — */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --ease-press: cubic-bezier(.2, .8, .2, 1);
  --dur-press: .14s;
  --dur-hover: .32s;
  --dur-reveal: .7s;
  --dur-switch: .48s;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: #8eb8f0;
  --theme-x: 50%;
  --theme-y: 50%;
  --theme-dur: .65s;
}

/* Theme morph: fade surfaces when View Transitions unavailable */
html.theme-fading body,
html.theme-fading .glass::before,
html.theme-fading .glass::after,
html.theme-fading .btn,
html.theme-fading .field,
html.theme-fading .locale-pill,
html.theme-fading .lf-switch,
html.theme-fading .theme-switch,
html.theme-fading .blob,
html.theme-fading .ios-wallpaper i,
html.theme-fading .muted,
html.theme-fading .session-line {
  transition:
    background-color var(--theme-dur) ease,
    background var(--theme-dur) ease,
    color var(--theme-dur) ease,
    box-shadow var(--theme-dur) ease,
    opacity var(--theme-dur) ease,
    border-color var(--theme-dur) ease,
    filter var(--theme-dur) ease;
}

html.theme-fading body {
  transition: background var(--theme-dur) ease, color var(--theme-dur) ease;
}

/* Circular reveal from the toggle click */
@supports (view-transition-name: root) {
  html.theme-vt {
    view-transition-name: root;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--theme-dur);
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    mix-blend-mode: normal;
  }

  ::view-transition-old(root) {
    z-index: 1;
    animation-name: theme-fade-out;
  }

  ::view-transition-new(root) {
    z-index: 2;
    animation-name: theme-circle-in;
  }

  @keyframes theme-fade-out {
    to { opacity: 0; }
  }

  @keyframes theme-circle-in {
    from { clip-path: circle(0% at var(--theme-x) var(--theme-y)); }
    to { clip-path: circle(150% at var(--theme-x) var(--theme-y)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-fading body,
  html.theme-fading .glass::after,
  html.theme-fading .btn,
  html.theme-fading .field,
  html.theme-fading .locale-pill,
  html.theme-fading .blob,
  html.theme-fading .ios-wallpaper i {
    transition: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ——— macOS / iOS style scroll ——— */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 70, 90, .28) transparent;
}

html, body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 70, 90, .28) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(60, 70, 90, .22);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  min-height: 40px;
  transition: background-color .2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(60, 70, 90, .42);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background-color: rgba(60, 70, 90, .55);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Nested panels (notepad, modals) — overlay feel */
.notepad-body,
.glass[style*="overflow"],
.modal-scroll {
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html[lang="fa"],
html[lang="fa"] body,
[lang="fa"],
[dir="rtl"] {
  --font: var(--font-fa);
  font-family: var(--font-fa);
}

html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
[lang="fa"] h1,
[lang="fa"] h2,
[lang="fa"] h3,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  letter-spacing: 0;
  line-height: 1.35;
  font-weight: 600;
}

html[lang="fa"] .btn,
html[lang="fa"] .field,
html[lang="fa"] .chip,
html[lang="fa"] .locale-pill,
[dir="rtl"] .btn,
[dir="rtl"] .field {
  font-family: var(--font-fa);
  letter-spacing: 0;
  font-weight: 600;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--ink);
  /* Soft dusk wash — no near-white glare */
  background: linear-gradient(165deg, #8fa3bb 0%, #9aa0b4 44%, #8eaba0 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="fa"] body,
[dir="rtl"] body {
  line-height: 1.55;
}

a { color: inherit; }
button, input, textarea, select { font-family: inherit; }

/* ——— Ambient stage (structured, not AI nebula blobs) ——— */
.ios-wallpaper, .ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: #9aadc4;
}

.ambient::before,
.ios-wallpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 14%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 14%) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 10%, transparent 78%);
  opacity: .35;
  animation: lf-grid-drift 28s linear infinite;
}

.ambient::after,
.ios-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 0%, rgb(255 255 255 / 10%) 42%, transparent 58%),
    radial-gradient(ellipse 70% 45% at 80% 12%, rgb(180 210 255 / 35%), transparent 60%),
    radial-gradient(ellipse 55% 40% at 12% 88%, rgb(160 210 190 / 28%), transparent 62%);
  opacity: .9;
}

.ios-wallpaper i, .blob {
  position: absolute;
  display: block;
  border-radius: 999px;
  filter: blur(2px);
  opacity: .55;
  will-change: transform, opacity;
  mix-blend-mode: soft-light;
}

/* Thin light beams instead of soft orbs */
.ios-wallpaper i:nth-child(1), .blob-a {
  width: 140vw; height: 2px; left: -20vw; top: 18vh;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 55%), transparent);
  opacity: .35;
  transform: rotate(-18deg);
  animation: lf-beam-a 16s ease-in-out infinite;
}

.ios-wallpaper i:nth-child(2), .blob-b {
  width: 120vw; height: 2px; left: -10vw; top: 58vh;
  background: linear-gradient(90deg, transparent, rgb(210 230 255 / 45%), transparent);
  opacity: .28;
  transform: rotate(12deg);
  animation: lf-beam-b 20s ease-in-out infinite;
}

.ios-wallpaper i:nth-child(3), .blob-c {
  width: 38vw; height: 38vw; left: -8vw; bottom: -12vw;
  border-radius: 28%;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 22%);
  filter: none;
  opacity: .25;
  animation: lf-frame-spin 48s linear infinite;
}

.ios-wallpaper i:nth-child(4), .blob-d {
  width: 28vw; height: 28vw; right: -6vw; top: 8vh;
  border-radius: 24%;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 18%);
  filter: none;
  opacity: .2;
  animation: lf-frame-spin 60s linear infinite reverse;
}

.ios-wallpaper i:nth-child(5), .blob-e {
  width: 100%; height: 28%; left: 0; bottom: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent, rgb(40 55 75 / 28%));
  filter: none;
  opacity: .7;
  animation: none;
  mix-blend-mode: normal;
}

/* Public storefront: calm stage — no spinning frames / drifting beams (those glitch behind glass) */
body:has(.public-shell) {
  background: linear-gradient(165deg, #8fa3bb 0%, #95a6bc 50%, #8eaba0 100%);
  background-attachment: fixed;
}
body:has(.public-shell) > .ios-wallpaper {
  background: #93a7bf;
}
body:has(.public-shell) > .ios-wallpaper::before {
  animation: none;
  opacity: .16;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}
body:has(.public-shell) > .ios-wallpaper::after {
  opacity: .75;
  background:
    radial-gradient(ellipse 60% 40% at 78% 14%, rgb(120 180 255 / 28%), transparent 62%),
    radial-gradient(ellipse 50% 38% at 14% 86%, rgb(140 200 180 / 22%), transparent 64%);
}
body:has(.public-shell) > .ios-wallpaper i:nth-child(1),
body:has(.public-shell) > .ios-wallpaper i:nth-child(2),
body:has(.public-shell) > .ios-wallpaper i:nth-child(3),
body:has(.public-shell) > .ios-wallpaper i:nth-child(4) {
  display: none;
}
body:has(.public-shell) > .ios-wallpaper i:nth-child(5) {
  opacity: .45;
  background: linear-gradient(180deg, transparent, rgb(40 55 75 / 18%));
}
html[data-theme="ember"] body:has(.public-shell) {
  background: #050506;
}
html[data-theme="ember"] body:has(.public-shell) > .ios-wallpaper {
  background: #050506;
}
html[data-theme="ember"] body:has(.public-shell) > .ios-wallpaper i:nth-child(1),
html[data-theme="ember"] body:has(.public-shell) > .ios-wallpaper i:nth-child(2),
html[data-theme="ember"] body:has(.public-shell) > .ios-wallpaper i:nth-child(3),
html[data-theme="ember"] body:has(.public-shell) > .ios-wallpaper i:nth-child(4) {
  display: none;
}

@keyframes lf-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-56px, -56px, 0); }
}
@keyframes lf-beam-a {
  0%, 100% { opacity: .2; transform: translate3d(0, 0, 0) rotate(-18deg); }
  50% { opacity: .45; transform: translate3d(0, 4vh, 0) rotate(-16deg); }
}
@keyframes lf-beam-b {
  0%, 100% { opacity: .16; transform: translate3d(0, 0, 0) rotate(12deg); }
  50% { opacity: .38; transform: translate3d(0, -3vh, 0) rotate(14deg); }
}
@keyframes lf-frame-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes aurora-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1) rotate(0deg); }
  to { transform: translate3d(4%, 3%, 0) scale(1.08) rotate(8deg); }
}

@keyframes aurora-breathe {
  from { opacity: .35; transform: scale(1); }
  to { opacity: .7; transform: scale(1.08); }
}

@keyframes orb-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  33% { transform: translate3d(8vw, 6vh, 0) scale(1.12); opacity: 1; }
  66% { transform: translate3d(3vw, 12vh, 0) scale(.94); opacity: .75; }
}

@keyframes orb-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .8; }
  40% { transform: translate3d(-7vw, 10vh, 0) scale(1.15); opacity: 1; }
  70% { transform: translate3d(-3vw, 4vh, 0) scale(.9); opacity: .7; }
}

@keyframes orb-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .75; }
  50% { transform: translate3d(-6vw, -8vh, 0) scale(1.18); opacity: 1; }
}

@keyframes orb-drift-d {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .65; }
  50% { transform: translate3d(5vw, -6vh, 0) scale(1.25); opacity: .95; }
}

@keyframes orb-drift-e {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .6; }
  50% { transform: translate3d(-4vw, 5vh, 0) scale(1.2); opacity: .9; }
}

#app, .app-surface, .page-shell, .public-shell, .login-wrap { position: relative; z-index: 1; }

.login-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: hidden;
}

body:has(.login-wrap) {
  height: 100dvh;
  overflow: hidden;
}

body:has(.login-wrap)::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ——— Liquid Glass ———
   Edge is defined by SVG rim refraction + one soft top catch-light.
   No painted 1px strokes, no rainbow rim masks, no inset chord shadows. */
.glass {
  --lg-x: 28%;
  --lg-y: 12%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--glass-bg);
  box-shadow:
    var(--glass-depth),
    var(--glass-shine);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%) brightness(1.08);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) brightness(1.08);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: box-shadow .22s ease, background .22s ease;
}

/* Specular only — follows pointer; never a stroked border */
.glass::before { content: none; }

.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  /* Soft top catch-light only — soft-light blend darkened midtones into a dirty pane */
  background: linear-gradient(180deg, rgb(255 255 255 / 42%) 0%, transparent 22%);
  mix-blend-mode: normal;
  opacity: .85;
}

.glass-sm { border-radius: var(--radius-md); }
.topbar.glass { border-radius: var(--radius-pill); }
.glass > *,
.glass .glass-inner {
  position: relative;
  z-index: 2;
}

/* Nested glass: no second backdrop layer (that paints a dark band inside panels) */
.glass .glass {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgb(255 255 255 / 48%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%);
}

/* Refraction must keep frost opacity — never 4% wash (reads as dark inset) */
html.lf-refract-ok .glass.liquid-refract {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%) brightness(1.06);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%) brightness(1.06);
  box-shadow:
    var(--glass-depth),
    inset 0 1px 0 rgb(255 255 255 / 55%);
}

/* ——— Fields ——— */
.field {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  margin: 10px 0 16px;
  padding: 14px 16px;
  min-height: var(--touch);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-md);
  outline: none;
  background-color: rgb(255 255 255 / 42%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 55%),
    inset 0 0 0 1px rgb(255 255 255 / 18%);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.field::placeholder { color: var(--placeholder); }
.field:hover { background-color: rgb(255 255 255 / 55%); }
.field:focus {
  background-color: rgb(255 255 255 / 70%);
  border-color: color-mix(in srgb, var(--blue) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}

.field-sm {
  width: auto;
  min-width: 108px;
  margin: 0;
  padding: 8px 12px;
  min-height: 36px;
  font-size: var(--text-sm);
  border-radius: 12px;
}

/* ——— Selects (Apple liquid-glass trigger; OS menu still native) ——— */
select.field {
  cursor: pointer;
  padding-inline-end: 2.35rem;
  background-color: rgb(255 255 255 / 42%);
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 18%), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25 10.5 1.75' stroke='%23666E80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position:
    center top,
    right 14px center;
  background-size: auto, 11px 7px;
}
[dir="rtl"] select.field {
  background-position:
    center top,
    left 14px center;
}
html[data-theme="ember"] select.field {
  background-color: rgb(255 255 255 / 6%);
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25 10.5 1.75' stroke='%23C8C8C8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select.field:hover {
  background-color: rgb(255 255 255 / 55%);
}
html[data-theme="ember"] select.field:hover {
  background-color: rgb(255 255 255 / 8%);
}
select.field:focus {
  background-color: rgb(255 255 255 / 70%);
}
html[data-theme="ember"] select.field:focus {
  background-color: rgb(255 255 255 / 10%);
}
select.field option {
  color: var(--ink);
  background: #fff;
}
html[data-theme="ember"] select.field option {
  background: #111;
  color: #f7f7f7;
}

/* ——— Liquid glass menu / popover (iOS-style) ——— */
.lf-menu {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  z-index: 4;
}
.lf-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: rgb(10 12 18 / 18%);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  animation: lf-menu-fade .18s var(--ease-out, ease);
}
html[data-theme="ember"] .lf-menu-backdrop {
  background: rgb(0 0 0 / 42%);
}
.lf-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 50%;
  --lf-menu-x: -50%;
  transform: translateX(var(--lf-menu-x));
  z-index: 6;
  width: min(292px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 22px;
  border: 0;
  color: var(--ink);
  background: color-mix(in srgb, var(--glass-bg, rgb(255 255 255 / 58%)) 92%, transparent);
  box-shadow:
    var(--glass-shine, inset 0 1px 0 rgb(255 255 255 / 45%)),
    0 18px 48px rgb(15 25 45 / 18%),
    0 2px 8px rgb(15 25 45 / 08%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  animation: lf-menu-rise .22s var(--ease-spring, cubic-bezier(.22, 1, .36, 1));
}
[dir="rtl"] .lf-menu-panel {
  --lf-menu-x: 50%;
}
html[data-theme="ember"] .lf-menu-panel {
  background: color-mix(in srgb, var(--glass-bg, rgb(20 20 22 / 72%)) 94%, transparent);
  box-shadow:
    var(--glass-shine, inset 0 1px 0 rgb(255 255 255 / 12%)),
    0 22px 56px rgb(0 0 0 / 45%);
}
.lf-menu-title {
  margin: 0 2px 10px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--ink-muted);
}
.lf-menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--hairline, rgb(120 120 128 / 22%)) 80%, transparent);
}
.lf-menu-actions .btn,
.lf-menu-actions label.btn {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
@keyframes lf-menu-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lf-menu-rise {
  from { opacity: 0; transform: translateX(var(--lf-menu-x, -50%)) translateY(6px) scale(.96); }
  to { opacity: 1; transform: translateX(var(--lf-menu-x, -50%)) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lf-menu-backdrop,
  .lf-menu-panel { animation: none; }
}

/* ——— Buttons — one component, tokens decide everything.
   Sizes: .btn-sm / (default md) / .btn-lg
   Variants: default glass, .btn-primary, .btn-ghost, .btn-danger ——— */
.btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--ctl-h-md);
  padding: 0 var(--ctl-px-md);
  border: 0;
  border-radius: var(--btn-radius);
  font: inherit;
  font-size: var(--ctl-fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border-color: transparent;
  /* Soft float + top catch-light only — no chord / painted rim */
  box-shadow:
    0 8px 22px rgb(15 25 45 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 40%);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  transition:
    transform .18s cubic-bezier(.22, 1, .36, 1),
    box-shadow .2s ease,
    background .2s ease,
    opacity .16s ease;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 32%) 0%, transparent 28%),
    radial-gradient(
      120% 80% at var(--lg-x, 50%) var(--lg-y, 20%),
      rgb(255 255 255 / 28%) 0%,
      rgb(255 255 255 / 05%) 40%,
      transparent 62%);
  mix-blend-mode: soft-light;
}

.btn-primary::after { content: none; }

.btn:hover {
  transform: translateY(-1px);
  background: var(--btn-bg-hover);
}

.btn:active {
  transform: scale(.97);
}

.btn:disabled, .btn[disabled] {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  color: var(--btn-primary-ink);
  text-shadow: 0 1px 1px rgb(0 0 0 / 18%);
  background: var(--btn-primary-bg);
  border: 0;
  box-shadow:
    var(--btn-primary-glow),
    inset 0 1px 0 rgb(255 255 255 / 45%);
  backdrop-filter: blur(14px) saturate(175%);
  -webkit-backdrop-filter: blur(14px) saturate(175%);
}

.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
}

.btn-ghost {
  background: color-mix(in srgb, var(--btn-bg) 60%, transparent);
  box-shadow:
    inset 0 1.5px 1px rgb(255 255 255 / 32%),
    inset 1px 0 1px rgb(255 255 255 / 10%);
}

.btn-ghost:hover {
  background: var(--btn-bg);
}

.btn-danger {
  color: #fff;
  text-shadow: none;
  background: var(--red);
  border-color: color-mix(in srgb, var(--red) 50%, white);
  box-shadow: 0 4px 14px rgb(255 59 48 / 22%);
}

.btn-sm {
  min-height: var(--ctl-h-sm);
  padding: 0 var(--ctl-px-sm);
  font-size: var(--ctl-fs-sm);
  gap: 7px;
}

.btn-lg {
  min-height: var(--ctl-h-lg);
  padding: 0 var(--ctl-px-lg);
  font-size: var(--ctl-fs-lg);
  gap: 12px;
}

.google-button {
  color: var(--ink) !important;
  text-shadow: none !important;
  background: rgb(255 255 255 / 25%) !important;
}

.telegram-button {
  width: 100%;
  min-height: 48px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 600;
  background: #229ed9 !important;
  box-shadow:
    0 6px 18px rgb(34 158 217 / 28%),
    inset 0 1px 1px rgb(255 255 255 / 28%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.telegram-button:hover { background: #1b8fc7 !important; transform: none; }
.telegram-button.compact { width: auto; min-height: 40px; padding: 8px 14px; }
.telegram-button.btn-sm { min-height: 32px; padding: 5px 11px; gap: 6px; font-size: 12px; }
.telegram-mark {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}
.telegram-button.btn-sm .telegram-mark { width: 16px !important; height: 16px !important; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  background: rgb(255 255 255 / 25%);
  box-shadow:
    inset 2px 2px 1px 0 rgb(255 255 255 / 55%),
    inset -1px -1px 1px 1px rgb(255 255 255 / 40%),
    0 4px 12px rgb(0 0 0 / 8%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.locale-pill {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  background: rgb(255 255 255 / 25%);
  box-shadow:
    0 4px 12px rgb(0 0 0 / 8%),
    inset 2px 2px 1px 0 rgb(255 255 255 / 55%),
    inset -1px -1px 1px 1px rgb(255 255 255 / 40%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.locale-pill.active {
  color: #fff;
  background: rgb(10 132 255 / 45%);
  box-shadow:
    0 6px 16px rgb(10 132 255 / 28%),
    inset 2px 2px 1px 0 rgb(255 255 255 / 50%),
    inset -1px -1px 1px 1px rgb(255 255 255 / 30%);
}

/* ——— Liquid Glass switch (shared): theme + language ———
   Markup:
     <a class="lf-switch theme-switch|lang-switch" role="switch">
       <span class="lf-switch-track">…two sides…</span>
       <span class="lf-switch-thumb"></span>
     </a>
   Thumb slides left (first side) → right (second side).
   Theme: light=left / ember=right via html[data-theme]
   Lang:  fa=left / en=right via html[lang]  */
.lf-switch,
.theme-switch {
  --sw-h: 36px;
  --sw-w: 72px;
  --sw-pad: 3px;
  --sw-thumb: calc(var(--sw-h) - var(--sw-pad) * 2);
  --sw-travel: calc(var(--sw-w) - var(--sw-thumb) - var(--sw-pad) * 2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sw-w);
  height: var(--sw-h);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  flex: 0 0 auto;
  direction: ltr;
  background: rgb(255 255 255 / 18%);
  box-shadow:
    0 8px 20px rgb(15 25 45 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 45%);
  backdrop-filter: blur(14px) saturate(175%);
  -webkit-backdrop-filter: blur(14px) saturate(175%);
  transition:
    transform var(--dur-hover, .32s) var(--ease-spring, cubic-bezier(.34, 1.45, .64, 1)),
    background var(--dur-switch, .48s) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
    box-shadow var(--dur-hover, .32s) ease;
}

.lf-switch::before,
.theme-switch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 40%) 0%, transparent 30%),
    radial-gradient(
      120% 80% at var(--lg-x, 50%) var(--lg-y, 20%),
      rgb(255 255 255 / 32%) 0%,
      rgb(255 255 255 / 05%) 42%,
      transparent 65%);
  mix-blend-mode: soft-light;
  opacity: .85;
}

.lf-switch::after,
.theme-switch::after {
  content: none;
}

.lf-switch-track,
.theme-switch-track {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  pointer-events: none;
}

.lf-switch-side,
.theme-switch-ico {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  z-index: 2;
  transition: color .3s ease, opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}

.lf-switch-thumb,
.theme-switch-thumb {
  position: absolute;
  top: var(--sw-pad);
  left: var(--sw-pad);
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 50%;
  z-index: 1;
  background:
    radial-gradient(120% 100% at 30% 22%, rgb(255 255 255 / 72%) 0%, rgb(255 255 255 / 28%) 42%, rgb(255 255 255 / 14%) 100%);
  border: 0;
  box-shadow:
    0 4px 12px rgb(15 25 45 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 70%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  transition:
    transform var(--dur-switch, .48s) var(--ease-spring, cubic-bezier(.34, 1.45, .64, 1)),
    width var(--dur-switch, .48s) var(--ease-spring, cubic-bezier(.34, 1.45, .64, 1)),
    background var(--dur-switch, .48s) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
    box-shadow var(--dur-switch, .48s) ease;
}

/* —— Theme variant: ☀ left / ☾ right —— */
.theme-switch .lf-switch-sun,
.theme-switch-sun {
  font-size: 14px;
  color: #ffb000;
  opacity: 1;
  transform: scale(1);
}
.theme-switch .lf-switch-moon,
.theme-switch-moon {
  font-size: 14px;
  color: rgb(60 60 67 / 45%);
  opacity: .55;
  transform: scale(.92);
}

html[data-theme="ember"] .lf-switch,
html[data-theme="ember"] .theme-switch {
  border: 0;
  background: rgb(0 0 0 / 42%);
  box-shadow:
    0 10px 24px rgb(0 0 0 / 45%),
    inset 0 1px 0 rgb(255 255 255 / 16%);
}

html[data-theme="ember"] .theme-switch .lf-switch-sun,
html[data-theme="ember"] .theme-switch-sun {
  color: rgb(235 235 245 / 40%);
  opacity: .45;
  transform: scale(.9);
}
html[data-theme="ember"] .theme-switch .lf-switch-moon,
html[data-theme="ember"] .theme-switch-moon {
  color: var(--accent);
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0 0 6px rgb(240 200 90 / 45%));
}

html[data-theme="ember"] .theme-switch .lf-switch-thumb,
html[data-theme="ember"] .theme-switch-thumb {
  transform: translateX(var(--sw-travel));
  background:
    radial-gradient(120% 100% at 30% 22%, rgb(255 255 255 / 22%) 0%, rgb(40 0 0 / 55%) 48%, rgb(0 0 0 / 70%) 100%);
  border-color: rgb(255 80 70 / 35%);
  box-shadow:
    0 6px 18px rgb(0 0 0 / 55%),
    0 0 16px rgb(240 200 90 / 20%),
    inset 0 1px 1px rgb(255 255 255 / 28%),
    inset 0 -1px 1px rgb(80 0 0 / 40%);
}

/* —— Language variant: فا left / EN right —— */
.lang-switch .lf-switch-fa {
  font-family: var(--font-fa);
  font-size: 13px;
  color: var(--blue);
  opacity: 1;
  transform: scale(1);
}
.lang-switch .lf-switch-en {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 800;
  color: rgb(60 60 67 / 45%);
  opacity: .55;
  transform: scale(.92);
}

html[lang="en"] .lang-switch .lf-switch-fa {
  color: rgb(60 60 67 / 45%);
  opacity: .5;
  transform: scale(.9);
}
html[lang="en"] .lang-switch .lf-switch-en {
  color: var(--blue);
  opacity: 1;
  transform: scale(1);
}
html[lang="en"] .lang-switch .lf-switch-thumb {
  transform: translateX(var(--sw-travel));
}
html.lf-lang-animating .lang-switch .lf-switch-thumb {
  transition:
    transform var(--dur-switch, .48s) var(--ease-spring, cubic-bezier(.34, 1.45, .64, 1)),
    width var(--dur-switch, .48s) var(--ease-spring, cubic-bezier(.34, 1.45, .64, 1));
}

html[data-theme="ember"] .lang-switch .lf-switch-fa {
  color: var(--accent);
}
html[data-theme="ember"][lang="en"] .lang-switch .lf-switch-fa {
  color: rgb(235 235 245 / 40%);
}
html[data-theme="ember"][lang="en"] .lang-switch .lf-switch-en {
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgb(240 200 90 / 40%));
}
html[data-theme="ember"][lang="fa"] .lang-switch .lf-switch-en {
  color: rgb(235 235 245 / 40%);
}
html[data-theme="ember"] .lang-switch .lf-switch-thumb {
  background:
    radial-gradient(120% 100% at 30% 22%, rgb(255 255 255 / 22%) 0%, rgb(40 0 0 / 55%) 48%, rgb(0 0 0 / 70%) 100%);
  border-color: rgb(255 80 70 / 35%);
  box-shadow:
    0 6px 18px rgb(0 0 0 / 55%),
    0 0 16px rgb(240 200 90 / 20%),
    inset 0 1px 1px rgb(255 255 255 / 28%),
    inset 0 -1px 1px rgb(80 0 0 / 40%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .ambient::before,
  .ios-wallpaper::before,
  .ambient::after,
  .ios-wallpaper::after,
  .blob,
  .ios-wallpaper i {
    animation: none !important;
  }
}

/* ========== Ember dark · pure black + blood red (dark & terrifying) ========== */
html[data-theme="ember"],
[data-theme="ember"] {
  color-scheme: dark;
  --ink: #e6e8ee;
  --ink-soft: #d2d5de;
  --ink-muted: rgba(214, 218, 228, .58);
  --blue: #C9962E; /* Quiet; was PS red */
  --blue-deep: #c40000;
  --blue-soft: rgba(240, 200, 90, .16);
  --accent: #F0C85A;
  --accent-soft: #F5D78A;
  --gold: var(--accent);
  --gold-soft: var(--accent-soft);
  --green: #30d158;
  --red: #ff2d20;
  --switch-track: #3a3a3c;
  --switch-track-on: var(--accent);
  --switch-thumb: #e8ebf0;

  /* smoked glass — transparent enough for rim refraction to read */
  --glass-bg: rgb(0 0 0 / 34%);
  --glass-bg-strong: rgb(0 0 0 / 48%);
  --glass-rim: transparent;
  --glass-tint: rgb(255 20 10 / 04%);
  --glass-blur: 16px;
  --glass-shine: inset 0 1px 0 rgb(232 235 242 / 12%);
  --glass-depth: 0 20px 52px rgb(0 0 0 / 55%);
  --shadow: 0 10px 28px rgb(0 0 0 / 40%);

  /* black glass pills; primary = translucent blood-glass (not opaque paint) */
  --btn-bg: rgb(0 0 0 / 55%);
  --btn-bg-hover: rgb(20 0 0 / 65%);
  --btn-rim: rgb(232 235 242 / 10%);
  --btn-ink: #e8ebf0;
  --btn-primary-bg:
    linear-gradient(165deg,
      rgb(240 200 90 / 72%) 0%,
      rgb(201 150 46 / 78%) 48%,
      rgb(140 100 30 / 82%) 100%);
  --btn-primary-bg-hover:
    linear-gradient(165deg,
      rgb(245 215 140 / 80%) 0%,
      rgb(220 170 60 / 82%) 48%,
      rgb(160 120 35 / 88%) 100%);
  --btn-primary-rim: rgb(255 240 200 / 22%);
  --btn-primary-ink: #1A1408;
  --btn-primary-glow: 0 10px 28px rgb(201 150 46 / 36%);

  --placeholder: rgba(235, 235, 245, .34);
  --hairline: rgb(240 200 90 / 18%);
  --surface-elevated: transparent;
  scrollbar-color: rgba(255, 45, 32, .35) transparent;
}

html[data-theme="ember"] {
  background: #000;
}

html[data-theme="ember"] body,
[data-theme="ember"] body {
  color: var(--ink);
  background: #000;
}

/* Ember stage: black + structured crimson grid / beams (not AI nebula blobs) */
html[data-theme="ember"] .ios-wallpaper,
html[data-theme="ember"] .ambient {
  background: #050505;
}

html[data-theme="ember"] .ambient::before,
html[data-theme="ember"] .ios-wallpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(240 200 90 / 10%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(240 200 90 / 10%) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 78% 64% at 50% 32%, #000 18%, transparent 78%);
  opacity: .7;
  animation: lf-grid-drift 36s linear infinite;
}

html[data-theme="ember"] .ambient::after,
html[data-theme="ember"] .ios-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, transparent 36%, rgb(240 200 90 / 12%) 49%, transparent 62%),
    linear-gradient(180deg, rgb(255 30 20 / 10%) 0%, transparent 28%, transparent 70%, rgb(0 0 0 / 88%) 100%);
  opacity: 1;
  animation: lf-ember-sheen 14s ease-in-out infinite;
}

html[data-theme="ember"] .blob-a,
html[data-theme="ember"] .ios-wallpaper i:nth-child(1) {
  width: 160vw; height: 2px; left: -30vw; top: 22vh;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
  filter: none;
  mix-blend-mode: screen;
  transform: rotate(-16deg);
  animation: lf-beam-a 12s ease-in-out infinite;
}
html[data-theme="ember"] .blob-b,
html[data-theme="ember"] .ios-wallpaper i:nth-child(2) {
  width: 140vw; height: 1.5px; left: -20vw; top: 64vh;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, #ff6961, transparent);
  opacity: .4;
  filter: none;
  mix-blend-mode: screen;
  transform: rotate(10deg);
  animation: lf-beam-b 15s ease-in-out infinite;
}
html[data-theme="ember"] .blob-c,
html[data-theme="ember"] .ios-wallpaper i:nth-child(3) {
  width: 42vw; height: 42vw; left: -10vw; bottom: -14vw;
  border-radius: 22%;
  background: transparent;
  border: 1px solid rgb(240 200 90 / 22%);
  opacity: .35;
  filter: none;
  mix-blend-mode: normal;
  animation: lf-frame-spin 54s linear infinite;
}
html[data-theme="ember"] .blob-d,
html[data-theme="ember"] .ios-wallpaper i:nth-child(4) {
  display: block;
  width: 30vw; height: 30vw; right: -8vw; top: 6vh;
  border-radius: 20%;
  background: transparent;
  border: 1px solid rgb(255 69 58 / 22%);
  opacity: .28;
  filter: none;
  mix-blend-mode: normal;
  animation: lf-frame-spin 68s linear infinite reverse;
}
html[data-theme="ember"] .blob-e,
html[data-theme="ember"] .ios-wallpaper i:nth-child(5) {
  display: block;
  width: 100%; height: 34%; left: 0; bottom: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 92%));
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  animation: none;
}

@keyframes lf-ember-sheen {
  0%, 100% { opacity: .82; transform: translate3d(0, 0, 0); }
  50% { opacity: 1; transform: translate3d(1.5vw, 0, 0); }
}

/* Dark smoked glass — edge from refraction, not red stroke */
html[data-theme="ember"] .glass {
  border: 0;
  background: var(--glass-bg);
  box-shadow:
    var(--glass-depth),
    var(--glass-shine);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%) brightness(.98);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) brightness(.98);
}

html[data-theme="ember"] .glass::before { content: none; }

html[data-theme="ember"] .glass::after {
  background: linear-gradient(180deg, rgb(255 255 255 / 14%) 0%, transparent 22%);
  mix-blend-mode: normal;
  box-shadow: none;
}

html[data-theme="ember"] .glass .glass {
  background: rgb(255 255 255 / 06%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
}

html.lf-refract-ok[data-theme="ember"] .glass.liquid-refract {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%) brightness(.98);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%) brightness(.98);
  box-shadow:
    var(--glass-depth),
    inset 0 1px 0 rgb(255 255 255 / 16%);
}

/* Buttons inherit the ember tokens — top specular only (no bottom chord line) */
html[data-theme="ember"] .btn {
  border: 0;
  box-shadow:
    0 8px 22px rgb(0 0 0 / 40%),
    inset 0 1px 0 rgb(255 255 255 / 18%);
}

html[data-theme="ember"] .btn-primary {
  border: 0;
  box-shadow:
    var(--btn-primary-glow),
    inset 0 1px 0 rgb(255 255 255 / 40%);
}

html[data-theme="ember"] .btn-danger {
  background: rgb(255 69 58 / 55%);
  border: 0;
  box-shadow:
    0 6px 18px rgb(0 0 0 / 40%),
    inset 0 1px 0 rgb(255 255 255 / 28%);
}

html[data-theme="ember"] .field {
  color: var(--ink);
  border-color: rgb(255 255 255 / 10%);
  background-color: rgb(255 255 255 / 6%);
  box-shadow: none;
}

html[data-theme="ember"] .field::placeholder { color: var(--placeholder); }
html[data-theme="ember"] .field:hover { background-color: rgb(255 255 255 / 8%); }
html[data-theme="ember"] .field:focus {
  background-color: rgb(255 255 255 / 9%);
  border-color: rgb(255 69 58 / 50%);
  box-shadow: 0 0 0 3px rgb(255 69 58 / 16%);
}

html[data-theme="ember"] select.field {
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25 10.5 1.75' stroke='%23C8C8C8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center top, right 14px center;
  background-size: auto, 11px 7px;
}
[dir="rtl"] html[data-theme="ember"] select.field,
html[data-theme="ember"][dir="rtl"] select.field {
  background-position: center top, left 14px center;
}

html[data-theme="ember"] .google-button {
  color: var(--ink) !important;
  background: rgb(255 255 255 / 10%) !important;
}

html[data-theme="ember"] .locale-pill {
  color: var(--ink-soft);
  background: var(--btn-bg);
  border: 1px solid rgb(255 255 255 / 14%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 16%),
    0 4px 14px rgb(0 0 0 / 30%);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

html[data-theme="ember"] .locale-pill.active {
  color: #fff;
  background: linear-gradient(180deg, rgb(255 69 58 / 85%), rgb(200 8 2 / 90%));
  border-color: rgb(255 255 255 / 24%);
  box-shadow:
    0 4px 16px rgb(0 0 0 / 40%),
    inset 0 1px 1px rgb(255 255 255 / 30%);
}

html[data-theme="ember"] .chip {
  color: var(--ink-soft);
  background: rgb(255 255 255 / 8%);
}

html[data-theme="ember"] .muted,
html[data-theme="ember"] .session-line { color: var(--ink-muted); }

html[data-theme="ember"] .err { color: #ff6b6b; }

html[data-theme="ember"] ::-webkit-scrollbar-thumb {
  background-color: rgba(225, 6, 0, .35);
}
html[data-theme="ember"] ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(225, 6, 0, .55);
}

html[data-theme="ember"] .auth-divider::before,
html[data-theme="ember"] .auth-divider::after {
  background: rgba(225, 6, 0, .22);
}

html[data-theme="ember"] .stat .v,
html[data-theme="ember"] .gold,
html[data-theme="ember"] .eyebrow { color: var(--gold-soft); }



/* ==================================================================
   LF_PUBLIC_BLUE_V1 — mainstream international theme pass.
   Amber accent retired in favor of a neutral stadium blue; ember
   shifts from black-red hacker to a calm neutral dark. Overrides
   only tokens + tinted backgrounds; component rules stay untouched.
   ================================================================== */
:root {
  --blue: #0a84ff;
  --blue-deep: #0060df;
  --blue-soft: rgba(10, 132, 255, .12);
  --accent: #0a84ff;
  --accent-soft: #4da3ff;
  --gold: var(--accent);
  --gold-soft: var(--accent-soft);
  --btn-primary-bg: linear-gradient(165deg, #4da3ff 0%, #0a84ff 100%);
  --btn-primary-bg-hover: linear-gradient(165deg, #6cb2ff 0%, #0a84ff 100%);
  --btn-primary-glow: 0 8px 22px rgba(10, 132, 255, .28);
  --hairline: rgba(10 132 255 / 14%);
}

html[data-theme="ember"],
[data-theme="ember"] {
  --blue: #4da3ff;
  --blue-deep: #0a84ff;
  --blue-soft: rgba(77, 163, 255, .18);
  --accent: #4da3ff;
  --accent-soft: #7fbdff;
  --gold: var(--accent);
  --gold-soft: var(--accent-soft);
  --red: #ff453a;
  --glass-tint: rgba(255 255 255 / 03%);
  --btn-primary-bg: linear-gradient(165deg, #4da3ff 0%, #0a6ce0 100%);
  --btn-primary-bg-hover: linear-gradient(165deg, #6cb2ff 0%, #0a84ff 100%);
  --btn-primary-rim: rgba(255 255 255 / 22%);
  --btn-primary-ink: #ffffff;
  --btn-primary-glow: 0 10px 28px rgba(10, 132, 255, .30);
  --hairline: rgba(77 163 255 / 20%);
  scrollbar-color: rgba(77, 163, 255, .35) transparent;
}

/* Neutral dark stage: soft graphite sky instead of pure black */
html[data-theme="ember"] {
  background: #0b0c10;
}
html[data-theme="ember"] body,
[data-theme="ember"] body {
  background: #0b0c10;
}
html[data-theme="ember"] body:has(.public-shell),
html[data-theme="ember"] body:has(.public-shell) > .ios-wallpaper {
  background: #0d0f16;
}
html[data-theme="ember"] .ambient,
html[data-theme="ember"] .ios-wallpaper {
  background: #0d0f16;
}

/* Wallpaper artwork: cool blue haze, no crimson grid or beams */
html[data-theme="ember"] .ambient::before,
html[data-theme="ember"] .ios-wallpaper::before {
  background-image:
    linear-gradient(rgba(77 163 255 / 07%) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77 163 255 / 07%) 1px, transparent 1px);
}
html[data-theme="ember"] .ambient::after,
html[data-theme="ember"] .ios-wallpaper::after {
  background:
    linear-gradient(125deg, transparent 36%, rgba(77 163 255 / 09%) 49%, transparent 62%),
    linear-gradient(180deg, rgba(10 132 255 / 07%) 0%, transparent 28%, transparent 70%, rgba(0 0 0 / 80%) 100%);
}
html[data-theme="ember"] .blob-b,
html[data-theme="ember"] .ios-wallpaper i:nth-child(2) {
  background: linear-gradient(90deg, transparent, rgba(77 163 255 / 70%), transparent);
}
html[data-theme="ember"] .blob-c,
html[data-theme="ember"] .ios-wallpaper i:nth-child(3) {
  border-color: rgba(77 163 255 / 20%);
}
html[data-theme="ember"] .blob-d,
html[data-theme="ember"] .ios-wallpaper i:nth-child(4) {
  border-color: rgba(77 163 255 / 16%);
}
html[data-theme="ember"] .field:focus {
  border-color: rgba(77 163 255 / 55%);
  box-shadow: 0 0 0 3px rgba(77 163 255 / 18%);
}
html[data-theme="ember"] ::-webkit-scrollbar-thumb {
  background-color: rgba(77 163 255 / 32%);
}
html[data-theme="ember"] ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(77 163 255 / 50%);
}
html[data-theme="ember"] .auth-divider::before,
html[data-theme="ember"] .auth-divider::after {
  background: rgba(77 163 255 / 22%);
}