/* ═══════════════════════════════════════════════════════════════════════
   EmiraiCRM — "Soft Glass" theme v3 (Oct 2026)
   Pale blue-grey canvas · big rounded white cards · black pill accents ·
   round icon buttons · smooth motion on every page.

   Pure presentation layer: it restyles the existing Tailwind utility classes
   (bg-white cards, bg-cream-50 fields, bg-burgundy-800 buttons, …) so every
   screen picks it up without touching markup, data or logic. Everything is
   scoped under `body.lg`; removing the class (or this file) restores the
   previous design. Motion is driven by assets/js/liquid-motion.js.

   Themes (class on <body>, set in Settings → Appearance):
     body.lg            light — pale canvas, white cards, black accents
     body.lg.lg-dark    black glass
     body.lg.lg-motion  entrance / hover animations on
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* fallbacks only — real values are written per request by appearance_style_tag() */
  --lg-bg-image: radial-gradient(64rem 44rem at -4% -8%, rgba(255,255,255,.92), transparent 62%), radial-gradient(52rem 42rem at 104% 6%, rgba(176,188,226,.62), transparent 64%), radial-gradient(56rem 44rem at 92% 106%, rgba(160,174,214,.58), transparent 64%);
  --lg-bg-base: #d9deea;
  --lg-bg-dim: 0;
  --lg-bg-blur: 0px;
  --lg-frost: .4;
  --lg-ease: cubic-bezier(.22,.8,.24,1);
}

/* ── Tokens: light ────────────────────────────────────────────────────── */
body.lg {
  --lg-rgb: 255,255,255;
  --lg-veil: 235,238,246;
  --lg-a: calc(.50 + var(--lg-frost) * .42);                  /* card opacity ← "Glass frost" */
  --lg-glass: rgba(var(--lg-rgb), var(--lg-a));
  --lg-glass-3: rgba(255,255,255, calc(.90 + var(--lg-frost) * .08));
  --lg-text: #14151a;
  --lg-muted: #697086;
  --lg-rim: rgba(255,255,255,.92);
  --lg-hair: rgba(40,52,96,.11);
  --lg-hair-soft: rgba(40,52,96,.06);
  --lg-tint: rgba(36,48,92,.05);
  --lg-sub-1: rgba(222,227,240,.55);                           /* inner panels (old cream-50) */
  --lg-sub-2: rgba(222,227,240,.42);
  --lg-sub-3: rgba(222,227,240,.30);
  --lg-chip: rgba(36,48,92,.075);
  --lg-chip-hover: rgba(36,48,92,.13);
  --lg-field: rgba(255,255,255,.78);
  --lg-field-focus: #ffffff;
  --lg-field-border: rgba(40,52,96,.13);
  --lg-ring: rgba(0,0,0,.11);
  --lg-accent: #000000;
  --lg-sheen: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 46%);
  --lg-blur: blur(20px) saturate(140%);
  --lg-blur-strong: blur(34px) saturate(150%);
  --lg-edge: inset 0 1px 0 rgba(255,255,255,.95);
  --lg-shadow: var(--lg-edge), 0 22px 44px -18px rgba(44,56,104,.22), 0 3px 10px rgba(44,56,104,.06);
  --lg-shadow-strong: var(--lg-edge), 0 36px 80px -14px rgba(36,46,92,.34), 0 8px 20px rgba(36,46,92,.10);
  --lg-r-card: 2rem;
}

/* ── Tokens: black glass ──────────────────────────────────────────────── */
body.lg.lg-dark {
  color-scheme: dark;
  --lg-rgb: 24,24,30;
  --lg-veil: 0,0,0;
  --lg-a: calc(.38 + var(--lg-frost) * .38);
  --lg-glass-3: rgba(24,24,30, calc(.86 + var(--lg-frost) * .1));
  --lg-text: #f5f5f7;
  --lg-muted: rgba(235,235,245,.62);
  --lg-rim: rgba(255,255,255,.14);
  --lg-hair: rgba(255,255,255,.13);
  --lg-hair-soft: rgba(255,255,255,.07);
  --lg-tint: rgba(255,255,255,.07);
  --lg-sub-1: rgba(255,255,255,.06);
  --lg-sub-2: rgba(255,255,255,.045);
  --lg-sub-3: rgba(255,255,255,.035);
  --lg-chip: rgba(255,255,255,.11);
  --lg-chip-hover: rgba(255,255,255,.19);
  --lg-field: rgba(255,255,255,.07);
  --lg-field-focus: rgba(255,255,255,.12);
  --lg-field-border: rgba(255,255,255,.17);
  --lg-ring: rgba(255,255,255,.26);
  --lg-accent: #ffffff;
  --lg-sheen: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 46%);
  --lg-blur: blur(24px) saturate(160%);
  --lg-blur-strong: blur(40px) saturate(170%);
  --lg-edge: inset 0 1px 0 rgba(255,255,255,.22);
  --lg-shadow: var(--lg-edge), 0 22px 48px -16px rgba(0,0,0,.6), 0 3px 10px rgba(0,0,0,.3);
  --lg-shadow-strong: var(--lg-edge), 0 40px 90px -10px rgba(0,0,0,.75), 0 8px 24px rgba(0,0,0,.4);
}

/* ── Canvas: system background (preset or uploaded picture) + veil ─────── */
body.lg {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  color: var(--lg-text);
  -webkit-font-smoothing: antialiased;
  background: var(--lg-bg-base);
}
body.lg::before {
  content: ""; position: fixed; inset: -40px; z-index: -2; pointer-events: none;
  background-image: var(--lg-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(var(--lg-bg-blur));
}
body.lg::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(var(--lg-veil), var(--lg-bg-dim)); }
body.lg .font-display, body.lg h1, body.lg h2, body.lg h3 { font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: -0.025em; }
body.lg ::selection { background: rgba(0,0,0,.16); }
body.lg.lg-dark ::selection { background: rgba(255,255,255,.28); }

/* ── Cards: big, soft, white ──────────────────────────────────────────── */
body.lg .bg-white { background-color: var(--lg-glass); }
body.lg .bg-white:is(.rounded-2xl,.rounded-3xl,.rounded-xl,.shadow-soft,.shadow-luxe,.shadow-lg,.shadow-2xl),
body.lg .bg-white\/95, body.lg .bg-white\/90, body.lg .bg-white\/80 { -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }
body.lg .bg-white:is(.rounded-2xl,.rounded-3xl,.rounded-xl,.shadow-soft) { background-image: var(--lg-sheen); border-color: var(--lg-rim); box-shadow: var(--lg-shadow); }
body.lg .bg-white:is(.rounded-2xl,.rounded-3xl) { border-radius: var(--lg-r-card); }
body.lg .bg-white.rounded-xl:not(.absolute) { border-radius: 1.4rem; }
/* floating layers (menus, popovers, modals, toasts) are denser so text stays crisp */
body.lg .bg-white:is(.shadow-luxe,.shadow-lg,.shadow-2xl,.absolute,.fixed), body.lg .absolute.bg-white, body.lg .fixed .bg-white.rounded-2xl {
  background-color: var(--lg-glass-3); -webkit-backdrop-filter: var(--lg-blur-strong); backdrop-filter: var(--lg-blur-strong);
  border-color: var(--lg-rim); box-shadow: var(--lg-shadow-strong);
}
body.lg .bg-white\/95, body.lg .bg-white\/90 { background-color: var(--lg-glass-3); }
body.lg .bg-white.rounded-full:is(.w-2,.w-3,.w-4,.w-5,.w-6,.h-2,.h-3,.h-4,.h-5,.h-6) { background-color: #fff; background-image: none; box-shadow: 0 1px 3px rgba(0,0,0,.3); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* inner panels / table heads / hover rows */
body.lg .bg-cream-50 { background-color: var(--lg-sub-1); }
body.lg .bg-cream-100 { background-color: var(--lg-sub-2); }
body.lg .bg-cream-200 { background-color: var(--lg-sub-3); }
body.lg .bg-cream-50:is(.rounded-xl,.rounded-2xl), body.lg .bg-cream-100:is(.rounded-xl,.rounded-2xl) { border-radius: 1.3rem; }
body.lg thead.bg-cream-50, body.lg thead .bg-cream-50 { background-color: transparent; }
body.lg .hover\:bg-cream-50:hover, body.lg .hover\:bg-cream-100:hover, body.lg .hover\:bg-cream-200:hover,
body.lg [class*="hover:bg-cream-50/"]:hover, body.lg .hover\:bg-ink-50:hover, body.lg .hover\:bg-ink-100:hover { background-color: var(--lg-tint); }
body.lg .bg-ink-100 { background-color: var(--lg-chip); }
body.lg .bg-ink-200 { background-color: var(--lg-chip-hover); }
body.lg .bg-ink-50 { background-color: var(--lg-sub-1); }
body.lg :is(.bg-burgundy-50,.bg-burgundy-50\/60,.bg-burgundy-50\/40,.bg-burgundy-50\/30) { background-color: var(--lg-sub-1); }
body.lg .bg-burgundy-100 { background-color: var(--lg-chip); }
body.lg .hover\:bg-burgundy-50:hover { background-color: var(--lg-tint); }
/* opacity-variant surfaces follow the theme too */
body.lg :is([class*="bg-cream-50/"],[class*="bg-cream-100/"],[class*="bg-ink-50/"],[class*="bg-ink-100/"],[class*="bg-burgundy-50/"],[class*="bg-gold-50/"]):not(button):not(a) { background-color: var(--lg-sub-2); }
body.lg :is([class*="hover:bg-cream-50/"],[class*="hover:bg-ink-50/"]):hover { background-color: var(--lg-tint); }
body.lg :is(.bg-white\/50,.bg-white\/60,.bg-white\/70,.bg-white\/75,.bg-white\/80,.bg-white\/85) { background-color: var(--lg-glass); }
body.lg :is(.hover\:bg-white:hover,.hover\:bg-white\/70:hover) { background-color: var(--lg-glass-3); }

/* hairlines → soft translucent separators */
body.lg .border-ink-100, body.lg .divide-ink-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--lg-hair-soft); }
body.lg .border-ink-200, body.lg .border-ink-300, body.lg .divide-ink-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--lg-hair); }
body.lg :is(.border-gold-300,.border-gold-200,.border-burgundy-200,.border-burgundy-300) { border-color: var(--lg-hair); }
body.lg .bg-white.border-ink-200:is(.rounded-2xl,.rounded-3xl) { border-color: var(--lg-rim); }

/* ── Form fields ───────────────────────────────────────────────────────── */
body.lg :is(input,select,textarea).bg-cream-50, body.lg :is(input,select,textarea).bg-white, body.lg :is(input,select,textarea).bg-ink-50 {
  background-color: var(--lg-field); border-color: var(--lg-field-border); color: var(--lg-text);
  box-shadow: inset 0 1px 2px rgba(40,52,96,.06); transition: box-shadow .25s var(--lg-ease), border-color .25s, background-color .25s;
}
body.lg :is(input,select).bg-cream-50:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
body.lg :is(input,select).bg-white:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]) { border-radius: 9999px; }
body.lg textarea.bg-cream-50, body.lg textarea.bg-white { border-radius: 1.2rem; }
body.lg :is(input,select,textarea).bg-cream-50:focus, body.lg :is(input,select,textarea).bg-white:focus, body.lg [class*="focus:border"]:focus {
  background-color: var(--lg-field-focus); border-color: var(--lg-accent); box-shadow: 0 0 0 4px var(--lg-ring); outline: none;
}
body.lg ::placeholder { color: rgba(60,66,92,.42); }
body.lg input[type=checkbox], body.lg input[type=radio], body.lg input[type=range] { accent-color: var(--lg-accent); }
body.lg input[type=file]::file-selector-button { border-radius: 9999px; }
body.lg option { color: #14151a; background: #fff; }

/* ── Buttons: black pills ─────────────────────────────────────────────── */
body.lg :is(button,a)[class*="px-"]:is(.rounded-xl,.rounded-lg):not(.w-full):not(.block) { border-radius: 9999px; }
body.lg :is(button,a,input[type=submit],label).bg-burgundy-800, body.lg :is(button,a).bg-burgundy-700 {
  background-image: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 52%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -8px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.18);
  transition: transform .25s var(--lg-ease), box-shadow .25s, filter .25s, background-color .25s;
}
body.lg :is(button,a,input[type=submit]).bg-burgundy-800:hover, body.lg :is(button,a).bg-burgundy-700:hover { filter: brightness(1.35); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 26px -8px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.2); }
body.lg :is(button,a,input[type=submit]).bg-burgundy-800:active { transform: scale(.97); }
body.lg :is(button,a):disabled, body.lg button.disabled\:opacity-40:disabled { box-shadow: none; filter: saturate(.6); transform: none; }
body.lg :is(button,a).bg-ink-800, body.lg :is(button,a).bg-ink-900 { background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px -6px rgba(0,0,0,.4); }
body.lg :is(button,a).bg-ink-100:not(.bg-ink-100\/50), body.lg :is(button,a).bg-cream-100 { background-color: var(--lg-chip); }
body.lg :is(button,a).bg-ink-100:hover, body.lg :is(button,a).hover\:bg-ink-200:hover { background-color: var(--lg-chip-hover); }
body.lg :is(button,a).bg-gold-500 { background-image: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%); border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px -8px rgba(0,0,0,.25); }
/* white outline buttons (secondary) → soft white pills */
body.lg :is(button,a).bg-white.border:not(.absolute) { box-shadow: 0 6px 16px -8px rgba(44,56,104,.25), inset 0 1px 0 rgba(255,255,255,.95); transition: transform .25s var(--lg-ease), box-shadow .25s, background-color .25s; }
body.lg :is(button,a).bg-white.border:not(.absolute):hover { transform: translateY(-1px); background-color: var(--lg-glass-3); }

/* black bands (card headers, highlighted cards) */
body.lg :is(div,section,header,thead,th,tr,summary).bg-burgundy-800, body.lg :is(div,section).bg-burgundy-700, body.lg :is(div,section).bg-burgundy-900 {
  background-color: #0d0e12;
  background-image: linear-gradient(135deg, rgba(70,72,84,.5), rgba(0,0,0,0) 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
body.lg :is(div,span).bg-burgundy-800:is(.rounded-full,.rounded-lg,.rounded-xl) { background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 60%); }
body.lg div.bg-burgundy-800:is(.rounded-2xl,.rounded-3xl) { border-radius: var(--lg-r-card); box-shadow: var(--lg-shadow-strong); }

/* pills / badges */
body.lg .status-badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
body.lg :is(.bg-gold-100,.bg-gold-50) { background-color: var(--lg-chip); }
body.lg :is(.bg-emerald-100,.bg-green-100) { background-color: rgba(48,209,88,.17); }
body.lg :is(.bg-red-100,.bg-rose-100) { background-color: rgba(255,69,58,.15); }
body.lg :is(.bg-amber-100,.bg-yellow-100) { background-color: rgba(255,159,10,.18); }
body.lg :is(.bg-blue-100,.bg-sky-100) { background-color: rgba(10,132,255,.15); }
body.lg :is(.bg-purple-100,.bg-violet-100,.bg-indigo-100) { background-color: rgba(94,92,230,.16); }
body.lg :is(.bg-emerald-50,.bg-green-50) { background-color: rgba(48,209,88,.10); }
body.lg :is(.bg-red-50,.bg-rose-50) { background-color: rgba(255,69,58,.09); }
body.lg :is(.bg-amber-50,.bg-yellow-50) { background-color: rgba(255,159,10,.11); }
body.lg :is(.bg-blue-50,.bg-sky-50) { background-color: rgba(10,132,255,.09); }
body.lg :is(.bg-purple-50,.bg-indigo-50) { background-color: rgba(94,92,230,.09); }

/* ── Sidebar: soft white rail, black active pill ──────────────────────── */
body.lg aside.fixed {
  top: 14px; bottom: 14px; left: 14px; width: calc(16rem - 28px); border-radius: 2.2rem; overflow: hidden;
  background-color: rgba(255,255,255,.66); background-image: var(--lg-sheen);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--lg-rim); box-shadow: var(--lg-shadow);
}
@media (max-width: 1023px) {
  body.lg aside.fixed { width: min(19rem, calc(100vw - 28px)); }
  body.lg aside.fixed.-translate-x-full { transform: translateX(calc(-100% - 44px)); }
}
body.lg:not(.lg-dark) aside.fixed .text-white { color: #14151a; }
body.lg:not(.lg-dark) aside.fixed :is(.bg-burgundy-700,.bg-amber-500).text-white { color: #fff; }
body.lg:not(.lg-dark) aside.fixed :is(.text-white\/60,.text-white\/70) { color: #565c72; }
body.lg:not(.lg-dark) aside.fixed :is(.text-white\/50,.text-white\/40) { color: #8a90a6; }
body.lg:not(.lg-dark) aside.fixed :is(.border-white\/10,.border-white\/5) { border-color: var(--lg-hair); }
body.lg:not(.lg-dark) aside.fixed :is(.hover\:bg-white\/5:hover,.hover\:bg-white\/10:hover) { background-color: var(--lg-tint); }
body.lg:not(.lg-dark) aside.fixed :is(.hover\:text-white:hover) { color: #000; }
body.lg:not(.lg-dark) aside.fixed img[src*="wordmark"] { filter: invert(1); }
body.lg:not(.lg-dark) aside.fixed { color: #14151a; }
body.lg:not(.lg-dark) aside.fixed .rounded-full[class*="bg-gradient"], body.lg:not(.lg-dark) aside.fixed .rounded-full[class*="bg-gradient"] .text-white { color: #fff; }
body.lg:not(.lg-dark) aside.fixed .text-gold-300 { color: #000; }
body.lg:not(.lg-dark) aside.fixed .scrollbar-slim::-webkit-scrollbar-thumb { background: rgba(40,52,96,.25); }
/* active item = the black pill from the design */
body.lg:not(.lg-dark) aside.fixed nav a.bg-white\/10 { background-color: #0b0c10; background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%); box-shadow: 0 12px 22px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2); }
body.lg:not(.lg-dark) aside.fixed nav a.bg-white\/10, body.lg:not(.lg-dark) aside.fixed nav a.bg-white\/10 :is(span,svg,p) { color: #fff; }
body.lg:not(.lg-dark) aside.fixed nav a.bg-white\/10 .bg-gold-400 { background-color: #fff; }
body.lg aside.fixed nav a { border-radius: 9999px; transition: background-color .25s, color .25s, transform .3s var(--lg-ease), box-shadow .3s; }
body.lg aside.fixed nav a:hover { transform: translateX(3px); }
body.lg aside.fixed :is(.bg-burgundy-700,.bg-amber-500,.bg-gold-500) { background-image: none; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
/* black-glass theme keeps a dark rail */
body.lg.lg-dark aside.fixed { background-color: rgba(10,10,12,.62); border-color: rgba(255,255,255,.14); }
body.lg.lg-dark aside.fixed nav a.bg-white\/10 { background-color: rgba(255,255,255,.17); background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(0,0,0,.3); }
body.lg.lg-dark aside.fixed :is(.border-white\/10,.border-white\/5) { border-color: rgba(255,255,255,.12); }
body.lg.lg-dark aside.fixed .text-white\/60 { color: rgba(255,255,255,.74); }
body.lg.lg-dark aside.fixed :is(.text-white\/40,.text-white\/50) { color: rgba(255,255,255,.55); }
body.lg aside.fixed .bg-burgundy-800, body.lg aside.fixed .bg-burgundy-700 { background-color: #0b0c10; }

/* ── Top bar: floats on the canvas, round icon buttons ────────────────── */
body.lg header.sticky {
  top: 0; border-radius: 0; border: 0; box-shadow: none; background-image: none;
  background-color: rgba(255,255,255,.28);
  background-color: color-mix(in srgb, var(--lg-bg-base) 52%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}
body.lg header.sticky > div { padding-top: .9rem; padding-bottom: .9rem; }
body.lg header.sticky h1 { font-size: 1.7rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; }
@media (max-width: 639px) { body.lg header.sticky h1 { font-size: 1.25rem; } }
body.lg header.sticky :is(a,button).border:not(.bg-burgundy-800) {
  background-color: var(--lg-glass-3); border-color: var(--lg-rim); border-radius: 9999px; min-width: 42px; height: 42px; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(44,56,104,.3), inset 0 1px 0 rgba(255,255,255,.95); color: var(--lg-text);
  transition: transform .25s var(--lg-ease), box-shadow .25s, background-color .25s;
}
body.lg header.sticky :is(a,button).border:not(.bg-burgundy-800):hover { background-color: #fff; transform: translateY(-2px); }
body.lg header.sticky a.bg-burgundy-800.border { border-radius: 9999px; min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }
body.lg main { padding-top: 1.1rem; }

/* ── Tables, lists, kanban ────────────────────────────────────────────── */
body.lg table { border-collapse: separate; border-spacing: 0; }
body.lg tbody tr { transition: background-color .2s; }
body.lg tbody tr:hover { background-color: var(--lg-tint); }
body.lg .kanban-card, body.lg .sortable-chosen { transition: transform .3s var(--lg-ease), box-shadow .3s; }
body.lg .kanban-card:hover { transform: translateY(-3px); box-shadow: var(--lg-shadow-strong); }
body.lg .sortable-ghost { background: var(--lg-tint) !important; border: 2px dashed var(--lg-hair) !important; border-radius: 22px; }
body.lg .sortable-drag { box-shadow: var(--lg-shadow-strong); }

/* ── Overlays / modals ────────────────────────────────────────────────── */
body.lg :is(.bg-black\/60,.bg-black\/50,.bg-black\/40) { background-color: rgba(30,36,60,.34); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); }
body.lg.lg-dark :is(.bg-black\/60,.bg-black\/50,.bg-black\/40) { background-color: rgba(0,0,0,.58); }
body.lg .backdrop-blur-sm { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
body.lg #toast-container > div > div { border-radius: 22px; }

/* ── Scrollbars ───────────────────────────────────────────────────────── */
body.lg ::-webkit-scrollbar { width: 10px; height: 10px; }
body.lg ::-webkit-scrollbar-track { background: transparent; }
body.lg ::-webkit-scrollbar-thumb { background: rgba(40,52,96,.22); border-radius: 9999px; border: 3px solid transparent; background-clip: padding-box; }
body.lg ::-webkit-scrollbar-thumb:hover { background: rgba(40,52,96,.38); background-clip: padding-box; border: 3px solid transparent; }
body.lg.lg-dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); background-clip: padding-box; border: 3px solid transparent; }
body.lg.lg-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.42); background-clip: padding-box; border: 3px solid transparent; }
body.lg .scrollbar-slim::-webkit-scrollbar { width: 8px; height: 8px; }

/* ── Chat / email ─────────────────────────────────────────────────────── */
body.lg .msg-scroll::-webkit-scrollbar-thumb, body.lg .chat-scroll::-webkit-scrollbar-thumb, body.lg .email-scroll::-webkit-scrollbar-thumb { background: rgba(40,52,96,.22); }
body.lg .chat-text code, body.lg .mention-chip { background: var(--lg-chip); }
body.lg .msg-flash > .msg-body { animation: msgFlashLg 1.6s ease-out; }
@keyframes msgFlashLg { 0%,40% { box-shadow: 0 0 0 4px rgba(120,120,128,.45); } 100% { box-shadow: 0 0 0 0 rgba(120,120,128,0); } }
body.lg .email-row.active { background: var(--lg-tint); }
body.lg .email-row.selected { background: var(--lg-chip); }
body.lg .tb-btn { color: var(--lg-text); }
body.lg .tb-btn:hover { background: var(--lg-chip); }
body.lg .email-editor a { color: var(--lg-text); }
body.lg .email-editor blockquote { border-left-color: var(--lg-hair); color: var(--lg-muted); }
body.lg .email-editor:empty:before { color: var(--lg-muted); }
body.lg.lg-dark iframe { color-scheme: light; background: #fff; border-radius: 14px; }

/* ── Links & small details ────────────────────────────────────────────── */
body.lg a.hover\:underline:hover { text-underline-offset: 3px; }
body.lg hr, body.lg .ornament-line { border-color: var(--lg-hair-soft); }
body.lg .shadow-soft { box-shadow: var(--lg-shadow); }
body.lg .shadow-luxe { box-shadow: var(--lg-shadow-strong); }
body.lg .ring-white { --tw-ring-color: rgba(255,255,255,.85); }
body.lg .text-ink-400 { color: #8b91a5; }
body.lg .text-ink-300 { color: #aeb3c4; }
body.lg .sticky.bg-white:not(header) { background-color: var(--lg-glass-3); }
/* dropdowns inside the header sit in a backdrop root → near-solid */
body.lg header.sticky .absolute.bg-white, body.lg header.sticky .absolute .bg-white { background-color: #ffffff; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.lg.lg-dark header.sticky .absolute.bg-white, body.lg.lg-dark header.sticky .absolute .bg-white { background-color: #1c1c21; }
/* progress tracks */
body.lg .h-1\.5.bg-cream-100, body.lg .h-2.bg-cream-100, body.lg .h-1\.5.bg-ink-100, body.lg .h-2.bg-ink-100 { background-color: var(--lg-chip); }

@media (max-width: 479px) {
  body.lg header.sticky > div { padding-left: .7rem; padding-right: .7rem; justify-content: space-between; }
  body.lg header.sticky .flex-1 > .min-w-0 { display: none; }
  body.lg header.sticky .flex-1 { flex: 0 0 auto; }
  body.lg header.sticky :is(a,button).border:not(.bg-burgundy-800) { min-width: 38px; height: 38px; }
}

/* ═══════════════════════ BLACK GLASS (dark theme) overrides ═══════════════════════ */
body.lg.lg-dark :is(.text-ink-900,.text-ink-800,.text-ink-700,.text-black,.text-stone-900,.text-stone-800,.text-stone-700,.text-gray-900,.text-gray-800,.text-gray-700,.text-burgundy-700,.text-burgundy-800,.text-burgundy-900,.text-gold-700,.text-gold-800,.text-slate-900,.text-slate-800,.text-slate-700) { color: #f5f5f7; }
body.lg.lg-dark :is(.text-ink-600,.text-ink-500,.text-stone-600,.text-stone-500,.text-gray-600,.text-gray-500,.text-slate-600,.text-slate-500,.text-burgundy-600,.text-gold-600) { color: rgba(235,235,245,.66); }
body.lg.lg-dark :is(.text-ink-400,.text-ink-300,.text-stone-400,.text-gray-400,.text-slate-400) { color: rgba(235,235,245,.44); }
body.lg.lg-dark :is(.hover\:text-ink-900:hover,.hover\:text-ink-800:hover,.hover\:text-ink-700:hover,.hover\:text-burgundy-700:hover,.hover\:text-burgundy-800:hover,.hover\:text-burgundy-900:hover) { color: #ffffff; }
body.lg.lg-dark ::placeholder { color: rgba(235,235,245,.38); }
body.lg.lg-dark :is(.border-burgundy-700,.border-burgundy-800) { border-color: #f5f5f7; }
body.lg.lg-dark :is(.ring-burgundy-800,.ring-burgundy-700) { --tw-ring-color: #f5f5f7; }
body.lg.lg-dark option { color: #f5f5f7; background: #1c1c21; }
body.lg.lg-dark :is(.text-emerald-600,.text-emerald-700,.text-emerald-800,.text-emerald-900,.text-green-600,.text-green-700,.text-green-800) { color: #5fe08b; }
body.lg.lg-dark :is(.text-red-600,.text-red-700,.text-red-800,.text-red-900,.text-rose-600,.text-rose-700) { color: #ff7a70; }
body.lg.lg-dark :is(.text-amber-600,.text-amber-700,.text-amber-800,.text-amber-900,.text-yellow-700,.text-yellow-800,.text-orange-600,.text-orange-700) { color: #ffbd5a; }
body.lg.lg-dark :is(.text-blue-600,.text-blue-700,.text-blue-800,.text-sky-600,.text-sky-700,.text-sky-800) { color: #6cb8ff; }
body.lg.lg-dark :is(.text-purple-600,.text-purple-700,.text-purple-800,.text-indigo-600,.text-indigo-700,.text-indigo-800,.text-violet-700) { color: #b3b1ff; }
body.lg.lg-dark :is(.bg-red-50,.bg-rose-50) { background-color: rgba(255,69,58,.14); }
body.lg.lg-dark :is(.border-red-200,.border-rose-200) { border-color: rgba(255,69,58,.35); }
body.lg.lg-dark :is(.border-emerald-200,.border-green-200) { border-color: rgba(48,209,88,.35); }
body.lg.lg-dark :is(.border-amber-200,.border-yellow-200) { border-color: rgba(255,159,10,.35); }
body.lg.lg-dark :is(button,a,input[type=submit],label).bg-burgundy-800, body.lg.lg-dark :is(button,a).bg-burgundy-700 { background-color: #101013; border-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.6); }
body.lg.lg-dark :is(div,section,header,thead,th,tr,summary).bg-burgundy-800, body.lg.lg-dark :is(div,section).bg-burgundy-700, body.lg.lg-dark :is(div,section).bg-burgundy-900 { background-color: rgba(0,0,0,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
body.lg.lg-dark :is(button,a).bg-gold-500, body.lg.lg-dark :is(button,a).bg-gold-400 { background-color: rgba(255,255,255,.16); color: #f5f5f7; border-color: rgba(255,255,255,.28); }
body.lg.lg-dark :is(.bg-gold-100,.bg-gold-50) { background-color: rgba(255,255,255,.1); }
body.lg.lg-dark :is(button,a).bg-ink-800, body.lg.lg-dark :is(button,a).bg-ink-900 { background-color: rgba(255,255,255,.16); color: #fff; }
body.lg.lg-dark header.sticky { background-color: rgba(0,0,0,.30); background-color: color-mix(in srgb, var(--lg-bg-base) 55%, transparent); }
body.lg.lg-dark header.sticky :is(a,button).border:not(.bg-burgundy-800) { background-color: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 14px rgba(0,0,0,.4); }
body.lg.lg-dark header.sticky :is(a,button).border:not(.bg-burgundy-800):hover { background-color: rgba(255,255,255,.18); }
body.lg.lg-dark :is(button,a).bg-white.border:not(.absolute) { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 14px rgba(0,0,0,.35); }
body.lg.lg-dark .lg-logo-light { display: none; }

/* ── Login page ───────────────────────────────────────────────────────── */
body.lg .lg-login-card { background-color: var(--lg-glass); background-image: var(--lg-sheen); -webkit-backdrop-filter: var(--lg-blur-strong); backdrop-filter: var(--lg-blur-strong); border: 1px solid var(--lg-rim); border-radius: 2.4rem; box-shadow: var(--lg-shadow-strong); }
body.lg .lg-chip { background: var(--lg-glass-3); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-rim); box-shadow: var(--lg-shadow); color: var(--lg-text); }
body.lg .lg-field { background: var(--lg-field); border: 1px solid var(--lg-field-border); box-shadow: inset 0 1px 2px rgba(40,52,96,.06); color: var(--lg-text); }
body.lg .lg-field::placeholder { color: var(--lg-muted); opacity: .7; }
body.lg .lg-field:focus { background: var(--lg-field-focus); border-color: var(--lg-accent); box-shadow: 0 0 0 4px var(--lg-ring); outline: none; }
body.lg .btn-signin { color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,.12); background-color: #000; background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 52%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 26px -10px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.2); transition: transform .25s var(--lg-ease), filter .25s; }
body.lg.lg-dark .btn-signin { background-color: #101013; border-color: rgba(255,255,255,.34); }
body.lg .btn-signin:hover { filter: brightness(1.35); transform: translateY(-1px); }
body.lg .btn-signin:active { transform: scale(.985); }
body.lg .lg-headline { color: var(--lg-text); }
body.lg .lg-sub { color: var(--lg-muted); }

/* ═══════════════ HOVER-ANIMATED ICONS (every sidebar / top-bar / button icon) ═══════════════
   Each icon gets its own little motion on hover. Only with .lg-motion (the "Smooth animations"
   switch in Settings → Appearance + the browser's reduced-motion preference). */
@keyframes icoHop    { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-4px) scale(1.08); } 65% { transform: translateY(0) scale(.96); } }
@keyframes icoPulse  { 0%,100% { transform: scale(1); } 40% { transform: scale(1.22); } 70% { transform: scale(.95); } }
@keyframes icoShake  { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-7deg); } }
@keyframes icoRise   { 0% { transform: scaleY(.75); } 55% { transform: scaleY(1.14); } 100% { transform: scaleY(1); } }
@keyframes icoFlipY  { to { transform: rotateY(360deg); } }
@keyframes icoFlipX  { to { transform: rotateX(360deg); } }
@keyframes icoWiggle { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-24deg); } 45% { transform: rotate(18deg); } 70% { transform: rotate(-9deg); } }
@keyframes icoPop    { 0% { transform: scale(1); } 40% { transform: scale(1.32) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes icoBounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-4px); } 55% { transform: translateY(0); } 75% { transform: translateY(-2px); } }
@keyframes icoSlide  { 0% { transform: translateX(0); } 40% { transform: translateX(4px) rotate(6deg); } 100% { transform: translateX(0); } }
@keyframes icoBars   { 0% { transform: scaleY(.6); } 50% { transform: scaleY(1.18); } 100% { transform: scaleY(1); } }
@keyframes icoTilt   { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-10deg) translateY(-2px); } 70% { transform: rotate(5deg); } }
@keyframes icoSpin   { to { transform: rotate(180deg); } }
@keyframes icoSpinFull { to { transform: rotate(360deg); } }
@keyframes icoRing   { 0%,100% { transform: rotate(0); } 12% { transform: rotate(18deg); } 28% { transform: rotate(-16deg); } 44% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 76% { transform: rotate(4deg); } }
@keyframes icoTwinkle{ 0%,100% { transform: scale(1) rotate(0); } 35% { transform: scale(1.28) rotate(20deg); } 70% { transform: scale(.92) rotate(-8deg); } }
@keyframes icoEmoji  { 0%,100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.3) rotate(-12deg); } 50% { transform: scale(1.15) rotate(10deg); } 75% { transform: scale(1.25) rotate(-5deg); } }

html.lg-motion body.lg :is(a,button) > svg, html.lg-motion body.lg :is(a,button) > span > svg { transform-box: fill-box; }
/* default for any icon button / icon link */
html.lg-motion body.lg :is(button,a):not([data-ico]):not(#lg-theme-toggle) > svg:is([class*="w-3"],[class*="w-4"],[class*="w-5"]):not([class*="animate-"]) { transition: transform .35s var(--lg-ease); }
html.lg-motion body.lg :is(button,a):not([data-ico]):not(#lg-theme-toggle):hover > svg:is([class*="w-3"],[class*="w-4"],[class*="w-5"]):not([class*="animate-"]) { transform: scale(1.16) rotate(-6deg); }

/* sidebar — one motion per icon */
html.lg-motion body.lg aside.fixed nav a svg { transform-origin: 50% 60%; }
html.lg-motion body.lg aside.fixed nav a:hover svg, html.lg-motion body.lg aside.fixed nav a:focus-visible svg { animation: icoPulse .6s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="home"]:hover svg      { animation: icoHop .6s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="flow"]:hover svg      { animation: icoSpin .7s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="deals"]:hover svg     { animation: icoShake .6s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="building"]:hover svg  { animation: icoRise .6s var(--lg-ease); transform-origin: 50% 100%; }
html.lg-motion body.lg aside.fixed nav a[data-ico="address"]:hover svg   { animation: icoFlipY .7s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="key"]:hover svg       { animation: icoWiggle .65s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="calendar"]:hover svg  { animation: icoFlipX .7s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="checklist"]:hover svg { animation: icoPop .5s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="chat"]:hover svg      { animation: icoBounce .6s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="mail"]:hover svg      { animation: icoSlide .55s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="chart"]:hover svg     { animation: icoBars .6s var(--lg-ease); transform-origin: 50% 100%; }
html.lg-motion body.lg aside.fixed nav a[data-ico="folder"]:hover svg    { animation: icoTilt .6s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="bug"]:hover svg       { animation: icoWiggle .6s var(--lg-ease); }
html.lg-motion body.lg aside.fixed nav a[data-ico="cog"]:hover svg       { animation: icoSpinFull .8s var(--lg-ease); }

/* top bar */
html.lg-motion body.lg header button[title="Notifications"]:hover svg { animation: icoRing .8s var(--lg-ease); transform-origin: 50% 12%; }
html.lg-motion body.lg header #ai-assistant-link:hover svg  { animation: icoTwinkle .7s var(--lg-ease); }
html.lg-motion body.lg header #chat-badge-link:hover svg    { animation: icoBounce .6s var(--lg-ease); }
html.lg-motion body.lg header #bug-report-link:hover svg    { animation: icoWiggle .6s var(--lg-ease); }
html.lg-motion body.lg header #lg-theme-toggle:hover svg    { animation: icoSpinFull .7s var(--lg-ease); }
html.lg-motion body.lg header button.notranslate:hover > svg:first-child { animation: icoTilt .6s var(--lg-ease); }

/* emoji used as icons (tagged by liquid-motion.js) */
.lg-emoji { display: inline-block; transform-origin: 50% 65%; }
html.lg-motion body.lg :is(a,button,li,tr,summary,label,.lg-lift):hover .lg-emoji, html.lg-motion body.lg .lg-emoji:hover { animation: icoEmoji .7s var(--lg-ease); }

/* ── Light / dark switch icons + cross-fade ───────────────────────────── */
body.lg:not(.lg-dark) .lg-ico-sun, body.lg.lg-dark .lg-ico-moon { display: none; }
html.lg-switching body.lg, html.lg-switching body.lg :is(.bg-white,aside.fixed,header,input,select,textarea,button,a,div,section,p,span,h1,h2,h3,td,th) {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important;
}

/* ═════════════════════════════ MOTION ═════════════════════════════
   Driven by assets/js/liquid-motion.js (adds .lg-pre / .lg-in). Everything
   here is inert unless <html> has .lg-motion (setting on + no reduced-motion). */
@keyframes lgReveal { from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lgSlideIn { from { opacity: 0; transform: translateX(-18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lgDrop { from { opacity: 0; transform: translateY(-10px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lgPop { from { opacity: 0; transform: translateY(14px) scale(.95); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lgShow { to { opacity: 1; } }
html.lg-motion .lg-pre { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(12px); }
html.lg-motion .lg-pre.lg-in { animation: lgReveal .85s var(--lg-ease) var(--lg-d, 0ms) both; }
html.lg-motion .lg-pre-l { opacity: 0; transform: translateX(-18px); filter: blur(8px); }
html.lg-motion .lg-pre-l.lg-in { animation: lgSlideIn .7s var(--lg-ease) var(--lg-d, 0ms) both; }
html.lg-motion .lg-pre-d { opacity: 0; transform: translateY(-10px) scale(.9); }
html.lg-motion .lg-pre-d.lg-in { animation: lgPop .6s var(--lg-ease) var(--lg-d, 0ms) both; }
/* failsafe: if the script never runs, page content still appears */
html.lg-motion:not(.lg-ready) main > * { opacity: 0; animation: lgShow .01s linear 1.6s forwards; }
/* menus & modals ease in whenever they open */
html.lg-motion body.lg header.sticky .absolute.bg-white { animation: lgDrop .26s var(--lg-ease); transform-origin: top right; }
html.lg-motion body.lg .fixed.inset-0 .bg-white.rounded-2xl, html.lg-motion body.lg .fixed.inset-0 .bg-white.rounded-3xl { animation: lgPop .42s var(--lg-ease); }
/* small cards lift on hover */
html.lg-motion body.lg .lg-lift { transition: transform .45s var(--lg-ease), box-shadow .45s var(--lg-ease); }
html.lg-motion body.lg .lg-lift:hover { transform: translateY(-4px); box-shadow: var(--lg-shadow-strong); }
html.lg-motion body.lg :is(button,a) { transition-property: transform, box-shadow, background-color, color, filter, opacity; transition-duration: .25s; transition-timing-function: var(--lg-ease); }
html.lg-motion body.lg [style*="width"].lg-bar { transition: width 1.2s var(--lg-ease); }

/* ── Accessibility fallbacks ──────────────────────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.lg .bg-white { background-color: rgba(255,255,255,.92); }
  body.lg.lg-dark .bg-white { background-color: rgba(24,24,30,.94); }
  body.lg aside.fixed { background-color: rgba(250,251,254,.97); }
  body.lg.lg-dark aside.fixed { background-color: rgba(12,12,14,.97); }
  body.lg header.sticky { background-color: rgba(228,232,242,.95); }
  body.lg .lg-login-card { background-color: rgba(255,255,255,.95); }
  body.lg.lg-dark .lg-login-card { background-color: rgba(24,24,30,.95); }
}
@media (prefers-reduced-transparency: reduce) {
  body.lg { --lg-a: .97; }
  body.lg .bg-white, body.lg .bg-white:is(.shadow-luxe,.absolute,.fixed), body.lg aside.fixed, body.lg header.sticky { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { body.lg *, body.lg *::before { animation: none !important; transition: none !important; } }
@media print {
  body.lg { background: #fff !important; color: #000 !important; }
  body.lg::before, body.lg::after { display: none !important; }
  body.lg .bg-white, body.lg aside.fixed, body.lg header.sticky { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; background: #fff; }
  body.lg.lg-dark :is(h1,h2,h3,p,span,div,td,th,li,a,label) { color: #000 !important; }
  body.lg.lg-dark aside.fixed * { color: #fff !important; }
}