/* ============================================================================
 * Ustozona-Games — YAGONA YON PANEL (sidebar) uslubi
 *
 * ⛔ QAT'IY QOIDA: yon panel BUTUN SAYT uchun BITTA. Har sahifa uchun
 * alohida sidebar YOZILMAYDI va bu fayldagi qoidalar sahifa ichida
 * QAYTA YOZILMAYDI. Kontekst (o'ng tomondagi mazmun) o'zgaradi —
 * sidebar hech qachon o'zgarmaydi.
 *
 * Tarix (nega shu qoida bor): 2026-08 da edugames va lessonplanner
 * sahifalarida sidebar ALOHIDA-ALOHIDA nusxalangan edi. Natijada
 * bittasini tuzatsak ikkinchisi orqada qolib, tugmalar ham har xil ish
 * bajarardi ("Yaratish" vs "Yangi sinf"). Endi manba bitta: shu fayl +
 * /assets/sidebar.js.
 *
 * ULASH (har yangi sahifada aynan shu tartibda):
 *   <link rel="stylesheet" href="/assets/theme.css">
 *   <link rel="stylesheet" href="/assets/sidebar.css">
 *   ...
 *   <script src="/assets/sidebar.js"></script>
 *   <script>LLSidebar.mount({ active: "games" });</script>
 *
 * Sahifa markupi faqat shu qobiqni beradi:
 *   <div class="shell">
 *     <div class="main">
 *       <header class="topnav">...</header>
 *       <div class="content">...</div>
 *     </div>
 *   </div>
 * Qolganini (aside, overlay, modallar, toast) sidebar.js o'zi qo'shadi.
 * ========================================================================== */

.shell { display: flex; min-height: 100vh; }
.main  { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ============================================================================
 * YON PANEL — Ustozona'ning rasmiy yon paneli bilan AYNAN BIR XIL.
 *
 * Manba (o'zgarsa shu yerni ham yangilang):
 *   ustozona.uz/src/components/app-sidebar.tsx      — tuzilma
 *   ustozona.uz/src/components/ui/sidebar.tsx        — o'lchamlar (shadcn)
 *   ustozona.uz/src/app/globals.css :root --sidebar-* — ranglar
 *   ustozona.uz/src/assets/logo/brand-wordmark.tsx   — brend belgisi
 *
 * Tailwind → qiymat:
 *   kenglik 16rem (256px), yig'ilgan 4.5rem (72px), mobil 18rem
 *   header/footer p-2 (8px) gap-2 · guruh p-1 (4px) · menyu gap-0.5 (2px)
 *   tugma h-9 (36px) p-2 gap-2 text-sm (14px) rounded-md (0.4rem)
 *   ikonka 16px stroke 2 · faol: sidebar-primary fon + 600 vazn
 *   guruh sarlavhasi h-8 text-xs 500 uppercase tracking-wider, 70% shaffof
 *   o'tish 250ms cubic-bezier(.2,0,0,1) (--transition-duration-base)
 *
 * Brend bittalik hissi — maqsad. Ustozona'da o'zgargan qiymat bu yerda
 * ham o'zgarishi kerak; «chiroyliroq» deb alohida uslub qo'shmang.
 * ========================================================================== */
.sidebar {
  --sb-bg: #ffffff;              --sb-bg: oklch(1 0 0);
  --sb-fg: #0a0a0a;              --sb-fg: oklch(0.145 0 0);
  --sb-fg-70: rgba(10,10,10,.7); --sb-fg-70: oklch(0.145 0 0 / 70%);
  --sb-muted: #737373;           --sb-muted: oklch(0.556 0 0);
  --sb-primary: #292929;         --sb-primary: oklch(0.28 0 0);
  --sb-primary-fg: #fafafa;      --sb-primary-fg: oklch(0.985 0 0);
  --sb-primary-10: rgba(41,41,41,.1); --sb-primary-10: oklch(0.28 0 0 / 10%);
  --sb-accent: #f5f5f5;          --sb-accent: oklch(0.97 0 0);
  --sb-accent-fg: #171717;       --sb-accent-fg: oklch(0.205 0 0);
  --sb-border: #e5e5e5;          --sb-border: oklch(0.922 0 0);
  --sb-ring: #a1a1a1;            --sb-ring: oklch(0.708 0 0);
  --sb-radius: 0.4rem;
  --sb-ease: cubic-bezier(0.2, 0, 0, 1);

  position: sticky; top: 0; height: 100vh; height: 100svh; width: 16rem; flex-shrink: 0;
  display: flex; flex-direction: column; z-index: 60; overflow: hidden;
  background: var(--sb-bg); color: var(--sb-fg); border-right: 1px solid var(--sb-border);
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.43; -webkit-font-smoothing: antialiased;
  transition: width 250ms var(--sb-ease);
}
/* Qora rejim — Ustozona `.dark --sidebar-*` (faqat `data-dark-ok` sahifada,
   `theme.css` dagi qoida bilan bir xil sabab). */
html[data-dark-ok][data-theme="dark"] .sidebar {
  --sb-bg: #171717;              --sb-bg: oklch(0.205 0 0);
  --sb-fg: #fafafa;              --sb-fg: oklch(0.985 0 0);
  --sb-fg-70: rgba(250,250,250,.7); --sb-fg-70: oklch(0.985 0 0 / 70%);
  --sb-muted: #a1a1a1;           --sb-muted: oklch(0.708 0 0);
  --sb-primary: #1447e6;         --sb-primary: oklch(0.488 0.243 264.376);
  --sb-primary-fg: #fafafa;      --sb-primary-fg: oklch(0.985 0 0);
  --sb-primary-10: rgba(20,71,230,.15); --sb-primary-10: oklch(0.488 0.243 264.376 / 15%);
  --sb-accent: #262626;          --sb-accent: oklch(0.269 0 0);
  --sb-accent-fg: #fafafa;       --sb-accent-fg: oklch(0.985 0 0);
  --sb-border: rgba(255,255,255,.1); --sb-border: oklch(1 0 0 / 10%);
  --sb-ring: #737373;            --sb-ring: oklch(0.556 0 0);
}
@media (prefers-color-scheme: dark) {
  html[data-dark-ok]:not([data-theme]) .sidebar {
    --sb-bg: #171717;              --sb-bg: oklch(0.205 0 0);
    --sb-fg: #fafafa;              --sb-fg: oklch(0.985 0 0);
    --sb-fg-70: rgba(250,250,250,.7); --sb-fg-70: oklch(0.985 0 0 / 70%);
    --sb-muted: #a1a1a1;           --sb-muted: oklch(0.708 0 0);
    --sb-primary: #1447e6;         --sb-primary: oklch(0.488 0.243 264.376);
    --sb-primary-fg: #fafafa;      --sb-primary-fg: oklch(0.985 0 0);
    --sb-primary-10: rgba(20,71,230,.15); --sb-primary-10: oklch(0.488 0.243 264.376 / 15%);
    --sb-accent: #262626;          --sb-accent: oklch(0.269 0 0);
    --sb-accent-fg: #fafafa;       --sb-accent-fg: oklch(0.985 0 0);
    --sb-border: rgba(255,255,255,.1); --sb-border: oklch(1 0 0 / 10%);
    --sb-ring: #737373;            --sb-ring: oklch(0.556 0 0);
  }
}
.sidebar *, .sidebar *::before, .sidebar *::after { box-sizing: border-box; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }

/* Header — brend belgisi (SidebarMenuButton size=lg) */
.sb-header { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.sb-brand {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--sb-radius);
  color: var(--sb-fg); text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: background-color 150ms var(--sb-ease);
}
.sb-brand:hover { background: var(--sb-accent); }
.sb-shield { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.sb-word {
  font-family: "Instrument Sans", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.025em; color: var(--sb-fg);
}
.sb-sub {
  margin-left: -6px; font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--sb-muted);
}

/* Kontent — skroll, pastda Ustozona'dagi ScrollFade */
.sb-content-wrap { position: relative; display: flex; flex: 1; min-height: 0; flex-direction: column; }
.sb-content { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 4px; overflow: auto; }
.sb-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px; pointer-events: none;
  background: linear-gradient(to top, var(--sb-bg), transparent);
}
.sb-group { position: relative; display: flex; width: 100%; min-width: 0; flex-direction: column; padding: 4px; }
.sb-group-label {
  display: flex; height: 32px; flex-shrink: 0; align-items: center; justify-content: space-between;
  width: 100%; padding: 0 8px; border: 0; border-radius: var(--sb-radius); background: none;
  font: 500 12px/1 "DM Sans", ui-sans-serif, system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--sb-fg-70); cursor: pointer; white-space: nowrap;
  transition: color 150ms var(--sb-ease), opacity 250ms var(--sb-ease), margin 250ms var(--sb-ease);
}
.sb-group-label:hover { color: var(--sb-fg); }
.sb-chev { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform 150ms var(--sb-ease); }
.sb-group[data-open="false"] .sb-chev { transform: rotate(-90deg); }
.sb-group[data-open="false"] .sb-group-body { display: none; }

.sb-menu { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 2px; }
.sb-li { position: relative; }

/* <a> ham, <button> ham bir xil ko'rinadi (SidebarMenuButton). */
.sb-item {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 8px;
  overflow: hidden; border: 0; border-radius: var(--sb-radius); background: none;
  font: 400 14px/20px "DM Sans", ui-sans-serif, system-ui, sans-serif; color: var(--sb-fg);
  text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; outline: none;
  transition: width 250ms var(--sb-ease), height 250ms var(--sb-ease), padding 250ms var(--sb-ease);
}
.sb-item .lbl { overflow: hidden; text-overflow: ellipsis; }
.sb-ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.sb-item:hover, .sb-item:active { background: var(--sb-accent); color: var(--sb-accent-fg); }
.sb-item:focus-visible { box-shadow: 0 0 0 2px var(--sb-ring); }
.sb-item[data-active="true"],
.sb-item[data-active="true"]:hover { background: var(--sb-primary); color: var(--sb-primary-fg); font-weight: 600; }

/* Nishon (SidebarMenuBadge: bg-sidebar-primary/10 text-sidebar-primary) */
.sb-badge {
  position: absolute; right: 4px; top: 8px; display: flex; height: 20px; min-width: 20px;
  align-items: center; justify-content: center; padding: 0 4px; border-radius: var(--sb-radius);
  background: var(--sb-primary-10); color: var(--sb-primary);
  font: 500 12px/1 "DM Sans", ui-sans-serif, system-ui, sans-serif; pointer-events: none; white-space: nowrap;
}

/* Footer — SidebarSeparator (mx-2, mb-1) + menyu */
.sb-footer { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.sb-sep { height: 1px; margin: 0 8px 4px; background: var(--sb-border); }

/* ── Yig'ilgan («icon») rejim — Ustozona globals.css bilan bir xil:
   72px, faqat ikonka markazda, sarlavha/nishon/ajratgich yashirin. ── */
html.eg-col .sidebar { width: 4.5rem; }
html.eg-col .sb-brand { justify-content: center; padding: 8px 0; }
html.eg-col .sb-word, html.eg-col .sb-sub { display: none; }
html.eg-col .sb-group-label { margin-top: -8px; height: 0; opacity: 0; pointer-events: none; overflow: hidden; }
html.eg-col .sb-group[data-open="false"] .sb-group-body { display: block; }
html.eg-col .sb-item { justify-content: center; width: 36px; height: 36px; padding: 8px; margin: 0 auto; }
html.eg-col .sb-item > :not(:first-child), html.eg-col .sb-badge, html.eg-col .sb-sep { display: none; }
html.eg-col .sb-content { overflow: hidden; }

/* ── Panel tugmasi (Ustozona Header'dagi SidebarTrigger: size-8,
   ghost, text-muted-foreground, PanelLeft 16px) ──
   ⛔ Suzuvchi (position:fixed) tugma ISHLATILMAYDI — u topnav ichida,
   mobil "hamburger" vazifasini ham shu bajaradi. */
.tn-panel {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; padding: 0; margin-right: 2px; border: 0; border-radius: 0.4rem;
  background: none; cursor: pointer; color: #737373; color: oklch(0.556 0 0);
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1), color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.tn-panel:hover { background: #f5f5f5; background: oklch(0.97 0 0); color: #171717; color: oklch(0.205 0 0); }
.tn-panel svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* ── Mobil: panel yashirin (Ustozona'dagi Sheet — 18rem), tn-panel ochadi ── */
.sb-overlay { display: none; }
@media (max-width: 767px) {
  .sidebar, html.eg-col .sidebar {
    position: fixed; left: 0; top: 0; width: 18rem; transform: translateX(-105%);
    transition: transform 250ms var(--sb-ease); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  }
  body.sb-open .sidebar { transform: none; }
  html.eg-col .sb-brand { justify-content: flex-start; padding: 8px; }
  html.eg-col .sb-word, html.eg-col .sb-sub { display: inline; }
  html.eg-col .sb-group-label { margin-top: 0; height: 32px; opacity: 1; pointer-events: auto; }
  html.eg-col .sb-item { justify-content: flex-start; width: 100%; margin: 0; }
  html.eg-col .sb-item > :not(:first-child), html.eg-col .sb-sep { display: revert; }
  html.eg-col .sb-badge { display: flex; }
  .sb-overlay {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55;
    opacity: 0; pointer-events: none; transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
  }
  body.sb-open .sb-overlay { opacity: 1; pointer-events: auto; }
}

/* ============================================================================
 * MODALLAR — "Yaratish" va "Sozlamalar". Ular ham sidebar'ning bir qismi:
 * tugmasi panelda bo'lgani uchun oynasi ham shu yerda, sahifada emas.
 *
 * Ko'rinish — Ustozona `Dialog` (ustozona.uz/src/components/ui/dialog.tsx):
 *   fon bg-black/50 · oyna rounded-lg, border, bg-background, shadow-lg,
 *   eng keng 32rem · sarlavha 18px/600 · izoh 14px muted ·
 *   pastki qism border-t, bg-muted/20, px-6 py-4 · tugmalar h-9 rounded-md.
 * Mobilda pastdan chiqadigan varaq (sheet) — telefonda bosh barmoq yetadi.
 * ========================================================================== */
.cr-ov {
  position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
  font-family: var(--ll-font);
}
@media (min-width: 560px) { .cr-ov { align-items: center; padding: 16px; } }
.cr-ov.on { opacity: 1; pointer-events: auto; }
.cr-md {
  background: var(--ll-surface); color: var(--ll-ink);
  border: 1px solid var(--ll-line); border-radius: var(--ll-r-lg) var(--ll-r-lg) 0 0;
  max-width: 32rem; width: 100%; padding: 24px; box-shadow: var(--ll-sh-lg);
  transform: translateY(24px); opacity: 0;
  transition: transform .2s cubic-bezier(.2,0,0,1), opacity .2s;
  max-height: 88vh; overflow-y: auto;
}
@media (min-width: 560px) { .cr-md { border-radius: 0.5rem; transform: scale(.95); } }
.cr-ov.on .cr-md { transform: none; opacity: 1; }
.cr-md h3 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.cr-md .sub { font-size: 14px; line-height: 1.5; color: var(--ll-ink3); margin: 4px 0 16px; }
.cr-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: var(--ll-r-lg);
  border: 1px solid var(--ll-line); background: var(--ll-surface); cursor: pointer; font-family: inherit;
  text-align: left; margin-bottom: 8px; text-decoration: none; color: var(--ll-ink);
  transition: background-color .15s, border-color .15s;
}
.cr-opt:hover { background: var(--ll-acc-soft); border-color: var(--ll-card-line-hover); }
.cr-opt .e {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--ll-r-md); flex-shrink: 0; background: var(--ll-surface2); color: var(--ll-ink2);
}
.cr-opt .e svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cr-opt .e.g { background: var(--ll-play-soft); color: var(--ll-play); }
.cr-opt b { display: block; font-size: 14px; font-weight: 600; color: var(--ll-ink); }
.cr-opt small { display: block; font-size: 13px; line-height: 1.4; color: var(--ll-ink3); margin-top: 2px; }
.cr-note {
  display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--ll-ink3); margin-top: 8px;
}
.cr-note svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* «Bekor qilish/Yopish» — Ustozona `outline` tugmasi */
.cr-close {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; margin-top: 16px;
  background: var(--ll-surface); border: 1px solid var(--ll-line); box-shadow: 0 1px 2px rgba(0,0,0,.05);
  border-radius: var(--ll-r-md); font: 500 14px/1 var(--ll-font); cursor: pointer; color: var(--ll-ink);
  transition: background-color .15s;
}
.cr-close:hover { background: var(--ll-acc-soft); }

.st-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-bottom: 8px;
  border: 1px solid var(--ll-line); border-radius: var(--ll-r-lg); background: var(--ll-surface2);
  color: var(--ll-ink); text-align: left;
}
.st-row.warn { border-color: var(--ll-warn); background: var(--ll-warn-soft); }
.st-row > div:last-child { min-width: 0; flex: 1; }
.st-row b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.st-row small { display: block; margin-top: 2px; color: var(--ll-ink3); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.st-av {
  width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ll-acc-soft); color: var(--ll-ink); font-size: 16px; font-weight: 600;
}
/* Amal qatorlari — Ustozona `ghost` tugma (ikonka + matn, chapga tekis) */
.st-act {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; margin: 4px 0 0; padding: 0 12px;
  border: 1px solid var(--ll-line); border-radius: var(--ll-r-md); background: var(--ll-surface); color: var(--ll-ink);
  font: 500 14px/1 var(--ll-font); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.st-act:hover { background: var(--ll-acc-soft); }
.st-act svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-act.danger { color: var(--ll-err); border-color: var(--ll-err-soft); background: var(--ll-err-soft); }

/* ── Ko'rinish (ishchi maydon foni) ── */
.st-group { font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ll-ink3); margin: 20px 0 8px; }
.bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.bg-swatch {
  border: 1px solid var(--ll-line); border-radius: var(--ll-r-lg); padding: 4px; cursor: pointer;
  background: none; font-family: inherit; text-align: left; transition: border-color .15s;
}
.bg-swatch:hover { border-color: var(--ll-card-line-hover); }
.bg-swatch.active { border-color: var(--ll-acc); box-shadow: 0 0 0 1px var(--ll-acc); }
.bg-swatch .prev { display: block; height: 48px; border-radius: var(--ll-r-md); border: 1px solid var(--ll-line); }
.bg-swatch .name { display: block; font-size: 12px; font-weight: 500; color: var(--ll-ink2); margin-top: 4px; padding: 0 2px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.range-row { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--ll-line); border-radius: var(--ll-r-lg); gap: 12px; }
.range-row .rl { font-size: 14px; font-weight: 500; color: var(--ll-ink2); flex-shrink: 0; }
.range-row input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 999px; background: var(--ll-line); outline: none; }
.range-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ll-acc); cursor: pointer; border: 2px solid var(--ll-surface); box-shadow: 0 0 0 1px var(--ll-line); }
.range-row input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ll-acc); cursor: pointer; border: 2px solid var(--ll-surface); box-shadow: 0 0 0 1px var(--ll-line); }
.range-row .rv { font-size: 12px; font-weight: 500; color: var(--ll-ink3); flex-shrink: 0; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Katta ekran (smartboard / 4K doska) ──
   Ustozona'ning o'z paneli kattalashmaydi, lekin O'yinlar bosh sahifasi
   sinf doskasida ochiladi va 256px panel 4K ekranda uzoqdan o'qilmaydi.
   Shuning uchun alohida o'lchamlar YOZILMAYDI — butun panel bir xil
   proporsiyada `zoom` bilan kattalashadi: ko'rinish Ustozona'dagi
   bilan aynan bir xil qoladi, faqat kattaroq. */
@media (min-width: 1600px) { .sidebar, .tn-panel { zoom: 1.15; } }
@media (min-width: 2200px) { .sidebar, .tn-panel { zoom: 1.5; } }

/* ── Toast — Ustozona `sonner` (pastda, markazda; 384px; popover yuzasi,
   border, radius-xl, 16px ichki masofa). ── */
.eg-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 200;
  width: max-content; max-width: min(384px, calc(100vw - 32px));
  background: var(--ll-surface); color: var(--ll-ink); border: 1px solid var(--ll-line);
  font: 500 14px/1.4 var(--ll-font); padding: 16px; border-radius: var(--ll-r-lg);
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.04), 0 8px 24px -6px rgba(0,0,0,.10);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.eg-toast.on { opacity: 1; transform: translate(-50%, 0); }