/* ============================================================
   LiveLator — dizayn tizimi + mahsulot qatlami

   Bu fayl HAR BIR sahifada oxirgi bo'lib yuklanadi (landing,
   /live, /translator, /r/:id). Shu sababli rang, tipografiya va
   o'lcham tokenlarining YAGONA manbasi shu yerda turadi —
   style.css va landing.css shu tokenlarni iste'mol qiladi.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokenlar — yorug' rejim (asosiy)
   ------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* Brend palitrasi — rejimdan qat'i nazar o'zgarmaydi.
     Uch rang butun mahsulotni ushlab turadi: to'q yashil (ishonch),
     yalpiz (jonli holat) va krem (iliqlik). */
  --brand-mint: #4fd6b4;
  --brand-mint-soft: #66e6c6;
  --brand-mint-deep: #0f6b58;
  --brand-cream: #e8dcc4;
  --brand-ink: #062421;
  --brand-coral: #ff6d80;

  /* Sirtlar */
  --bg: #f5f1e8;
  --bg-deep: #efeade;
  --dark: #062421;
  --surface: #ffffff;
  --surface-2: #eae4d6;
  --glass: rgba(245, 241, 232, 0.82);
  --glass-strong: rgba(245, 241, 232, 0.94);
  --glass-flat: #f0ebe0;
  --glass-border: rgba(255, 255, 255, 0.72);
  --sheen: rgba(255, 255, 255, 0.86);
  --scrim: rgba(4, 20, 18, 0.6);
  --border: #e3ded1;
  --border-strong: #cfc7b4;
  --line: #d9d3c4;
  --hairline-bright: rgba(255, 255, 255, 0.72);

  /* Tahririy chiziq — bo'limlarni karta emas, CHIZIQ ajratadi.
     --rule to'liq quyuq (bo'lim boshi), --line esa yengil (ichki qatorlar). */
  --rule: #0b1a18;
  --numeral: #cfc7b4;

  /* Segment boshqaruvlari (tab guruhi): yo'lak "cho'kkan", tanlangan
     element esa "ko'tarilgan" bo'lishi kerak — ikkala rejimda ham. */
  --seg-track: #e5dfd2;
  --seg-thumb: #ffffff;

  /* Matn.
     Yorug' rejimda --text-muted ATAYLAB to'qroq: krem fon (#f5f1e8) ustida
     hozirgi qiymat ~5.6:1 — WCAG AA (4.5:1) dan yuqori. */
  --text: #0b1a18;
  --text-secondary: #3e524f;
  --text-muted: #5a6c6a;
  --text-faint: #8a9997;
  --text-on-accent: #ffffff;

  /* Aksentlar. --accent kichik matn uchun ham ishlatiladi (masalan bo'lim
     yorlig'i), shuning uchun fon ustida kamida 4.5:1 bo'lishi shart.
     Yalpiz (#4fd6b4) krem ustida 1.9:1 — matn uchun YARAMAYDI, shuning
     uchun yorug' rejimda aksent to'q yashilga aylanadi va yalpiz faqat
     to'q sirtlarda ishlatiladi. */
  --accent: #0f6b58;
  --accent-strong: #0b5546;
  --accent-soft: rgba(15, 107, 88, 0.1);
  --accent-ring: rgba(15, 107, 88, 0.34);
  --mint: var(--brand-mint);
  --mint-deep: var(--brand-mint-deep);
  --rec: #c8384f;
  --rec-soft: rgba(200, 56, 79, 0.11);
  --ok: #0f6b58;
  --ok-soft: rgba(15, 107, 88, 0.13);

  /* Asosiy harakat tugmasi: yorug'da to'q yashil, qorong'ida yalpiz */
  --cta-bg: #062421;
  --cta-bg-hover: #0b3330;
  --cta-fg: #f5f1e8;

  /* Soyalar — krem fon ostida iliq, sovuq kulrang emas */
  --shadow-xs: 0 1px 2px rgba(11, 26, 24, 0.05);
  --shadow-sm: 0 6px 18px rgba(11, 26, 24, 0.07);
  --shadow-md: 0 14px 40px rgba(11, 26, 24, 0.1);
  --shadow-lg: 0 26px 70px rgba(6, 36, 33, 0.14);
  --shadow-xl: 0 40px 110px rgba(6, 36, 33, 0.24);
  --shadow-mic: 0 14px 32px rgba(15, 107, 88, 0.28);

  /* Radiuslar */
  --r-xs: 9px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Masofa shkalasi — 4px qadam.
     Har bir bo'shliq shu ro'yxatdan olinadi: "shunchaki chiroyli ko'ringan"
     19px yoki 34px kabi qiymatlar interfeysni tasodifiy qiladi. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Tipografiya. Eng kichik o'lcham — 11px. */
  --font-ui: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Noto Sans', sans-serif;
  --font-reading: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Noto Sans Arabic', 'Noto Sans JP', 'Noto Sans KR', sans-serif;

  /* Interfeys o'lchamlari */
  --fs-micro: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;

  /* O'qish va sarlavha o'lchamlari — matn shu shkaladan tashqariga chiqmaydi */
  --fs-xl: 18px;
  --fs-2xl: 21px;
  --fs-3xl: clamp(22px, 2.2vw, 26px);
  --fs-4xl: clamp(26px, 3vw, 34px);
  --fs-5xl: clamp(32px, 4vw, 44px);
  --fs-6xl: clamp(38px, 5.6vw, 68px);

  /* Harf oralig'i O'LCHAMGA bog'liq: yirik matn kattalashgani sari harflar
     ortiqcha uzoqlashadi — siqamiz; mayda matn esa ochilishi kerak. */
  --track-display: -0.035em;
  --track-title: -0.025em;
  --track-body: 0;
  --track-caption: 0.01em;
  --track-label: 0.08em;

  /* Qator oralig'i o'lchamga TESKARI bog'liq */
  --leading-display: 1.04;
  --leading-title: 1.18;
  --leading-body: 1.6;
  --leading-reading: 1.68;

  /* Harakat. Springga yaqin, ortiqcha sakramaydigan egri chiziqlar.
     --ease-spring faqat foydalanuvchi harakati davom ettiradigan
     (surish, ochilish) hodisalar uchun — oddiy o'tishlar sokin. */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 400ms;
  --ease-out: cubic-bezier(0.22, 0.72, 0.28, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.28, 1.06);

  /* Balandlik (elevatsiya) — komponent emas, VAZIFA bo'yicha nomlanadi */
  --elev-flat: var(--shadow-xs);
  --elev-card: var(--shadow-sm);
  --elev-chrome: var(--shadow-md);
  --elev-overlay: var(--shadow-lg);

  /* Tarmoqlar */
  --reading: 860px;
  --header-h: 74px;
}

/* ------------------------------------------------------------
   2. Tokenlar — qorong'i rejim

   DIQQAT: quyidagi ikkita blok bir xil bo'lishi SHART.
   Biri tizim sozlamasi uchun, ikkinchisi qo'lda tanlov uchun.
   Bittasini o'zgartirsangiz — ikkinchisini ham o'zgartiring.
   ------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: #0a1413;
    --bg-deep: #071110;
    --dark: #041917;
    --surface: #0f1d1c;
    --surface-2: #162523;
    --glass: rgba(12, 24, 23, 0.74);
    --glass-strong: rgba(12, 24, 23, 0.92);
    --glass-flat: #0c1817;
    --glass-border: rgba(255, 255, 255, 0.09);
    --sheen: rgba(255, 255, 255, 0.06);
    --scrim: rgba(3, 10, 9, 0.62);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.2);
    --line: rgba(255, 255, 255, 0.11);
    --hairline-bright: rgba(255, 255, 255, 0.14);

    --rule: rgba(255, 255, 255, 0.18);
    --numeral: rgba(232, 240, 238, 0.22);

    --seg-track: #0a1413;
    --seg-thumb: #1c2b29;

    --text: #e8f0ee;
    --text-secondary: #a9bcb8;
    --text-muted: #859a96;
    --text-faint: #647975;
    /* Yalpiz tugma ustidagi matn — oq emas, to'q yashil */
    --text-on-accent: #04211d;

    --accent: #4fd6b4;
    --accent-strong: #9ff0da;
    --accent-soft: rgba(79, 214, 180, 0.14);
    --accent-ring: rgba(79, 214, 180, 0.4);
    --mint: #4fd6b4;
    --mint-deep: #66e6c6;
    --rec: #ff6d80;
    --rec-soft: rgba(255, 109, 128, 0.14);
    --ok: #4fd6b4;
    --ok-soft: rgba(79, 214, 180, 0.14);

    --cta-bg: #4fd6b4;
    --cta-bg-hover: #66e6c6;
    --cta-fg: #04211d;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.42);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.48);
    --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 40px 110px rgba(0, 0, 0, 0.66);
    --shadow-mic: 0 14px 32px rgba(79, 214, 180, 0.3);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0a1413;
  --bg-deep: #071110;
  --dark: #041917;
  --surface: #0f1d1c;
  --surface-2: #162523;
  --glass: rgba(12, 24, 23, 0.74);
  --glass-strong: rgba(12, 24, 23, 0.92);
  --glass-flat: #0c1817;
  --glass-border: rgba(255, 255, 255, 0.09);
  --sheen: rgba(255, 255, 255, 0.06);
  --scrim: rgba(3, 10, 9, 0.62);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.2);
  --line: rgba(255, 255, 255, 0.11);
  --hairline-bright: rgba(255, 255, 255, 0.14);

  --rule: rgba(255, 255, 255, 0.18);
  --numeral: rgba(232, 240, 238, 0.22);

  --seg-track: #0a1413;
  --seg-thumb: #1c2b29;

  --text: #e8f0ee;
  --text-secondary: #a9bcb8;
  --text-muted: #859a96;
  --text-faint: #647975;
  /* Yalpiz tugma ustidagi matn — oq emas, to'q yashil */
  --text-on-accent: #04211d;

  --accent: #4fd6b4;
  --accent-strong: #9ff0da;
  --accent-soft: rgba(79, 214, 180, 0.14);
  --accent-ring: rgba(79, 214, 180, 0.4);
  --mint: #4fd6b4;
  --mint-deep: #66e6c6;
  --rec: #ff6d80;
  --rec-soft: rgba(255, 109, 128, 0.14);
  --ok: #4fd6b4;
  --ok-soft: rgba(79, 214, 180, 0.14);

  --cta-bg: #4fd6b4;
  --cta-bg-hover: #66e6c6;
  --cta-fg: #04211d;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 40px 110px rgba(0, 0, 0, 0.66);
  --shadow-mic: 0 14px 32px rgba(79, 214, 180, 0.3);
}

/* Qo'lda "Yorug'" tanlangan bo'lsa — tizim qorong'i bo'lsa ham yorug' qoladi */
:root[data-theme='light'] { color-scheme: light; }

/* ------------------------------------------------------------
   3. Foydalanuvchi sozlamalari (product.js qo'yadigan atributlar)
   ------------------------------------------------------------ */

[data-reduce-motion] *,
[data-reduce-motion] *::before,
[data-reduce-motion] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

[data-high-contrast] {
  --text-secondary: #22332f;
  --text-muted: #2f423f;
  --border: rgba(11, 26, 24, 0.28);
  --border-strong: rgba(11, 26, 24, 0.42);
  --line: rgba(11, 26, 24, 0.3);
  --glass: rgba(245, 241, 232, 0.96);
  --glass-border: rgba(11, 26, 24, 0.28);
}

@media (prefers-color-scheme: dark) {
  [data-high-contrast]:not([data-theme='light']) {
    --text-secondary: #e2ecec;
    --text-muted: #c2d0d1;
    --border: rgba(255, 255, 255, 0.3);
    --border-strong: rgba(255, 255, 255, 0.46);
    --line: rgba(255, 255, 255, 0.3);
    --glass: rgba(10, 20, 19, 0.96);
    --glass-border: rgba(255, 255, 255, 0.3);
  }
}

[data-high-contrast][data-theme='dark'] {
  --text-secondary: #e2ecec;
  --text-muted: #c2d0d1;
  --border: rgba(255, 255, 255, 0.3);
  --border-strong: rgba(255, 255, 255, 0.46);
  --line: rgba(255, 255, 255, 0.3);
  --glass: rgba(10, 20, 19, 0.96);
  --glass-border: rgba(255, 255, 255, 0.3);
}

/* Tizim sozlamalari — foydalanuvchi ilova ichida hech narsa bosmasa ham
   operatsion tizimdagi tanlovi hurmat qilinadi.

   Shaffoflikni kamaytirish "shishani" olib tashlamaydi, balki uni QALIN
   qiladi: fon deyarli to'q bo'ladi va blur o'chadi — matn har qanday
   ostidagi kontentdan qat'i nazar o'qiladi. */
@media (prefers-reduced-transparency: reduce) {
  /* `:root:root` — qorong'i rejim bloklari `:root:not([data-theme='light'])`
     bilan yozilgan (0,2,0). Oddiy `:root` (0,1,0) ulardan yengilib qolardi,
     shuning uchun ustuvorlik teng qilinadi va keyinroq turgani g'olib
     bo'ladi. */
  :root:root {
    --glass: var(--surface);
    --glass-strong: var(--surface);
    --glass-flat: var(--surface);
    --glass-border: var(--border);
    --sheen: transparent;
    --nav-bg: var(--surface);
  }
  .app-rail,
  .workspace-body .topbar,
  .viewer-body .topbar,
  .workspace-body .dock,
  .workspace-body .tr-tabs,
  .workspace-body .tr-card,
  .workspace-body .lang-panel,
  .workspace-body .export-menu,
  .viewer-body .lang-panel,
  .site-header .site-nav,
  .product-dialog {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Yuqori kontrast: sirtlar qattiq, chegaralar aniq ko'rinadigan chiziq */
@media (prefers-contrast: more) {
  :root {
    --text-secondary: #22332f;
    --text-muted: #2f423f;
    --border: rgba(11, 26, 24, 0.34);
    --border-strong: rgba(11, 26, 24, 0.5);
    --line: rgba(11, 26, 24, 0.34);
    --glass: rgba(245, 241, 232, 0.97);
    --glass-border: rgba(11, 26, 24, 0.34);
  }
  :root[data-theme='dark'] {
    --text-secondary: #e6efef;
    --text-muted: #c8d5d6;
    --border: rgba(255, 255, 255, 0.36);
    --border-strong: rgba(255, 255, 255, 0.52);
    --line: rgba(255, 255, 255, 0.36);
    --glass: rgba(10, 20, 19, 0.97);
    --glass-border: rgba(255, 255, 255, 0.36);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --text-secondary: #e6efef;
    --text-muted: #c8d5d6;
    --border: rgba(255, 255, 255, 0.36);
    --border-strong: rgba(255, 255, 255, 0.52);
    --line: rgba(255, 255, 255, 0.36);
    --glass: rgba(10, 20, 19, 0.97);
    --glass-border: rgba(255, 255, 255, 0.36);
  }
}

/* ------------------------------------------------------------
   4. Umumiy primitivlar
   ------------------------------------------------------------ */

/* Klaviatura bilan yurganda fokus HAR DOIM ko'rinadi. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent-soft); color: var(--text); }

/* Ingichka, rejimga mos skrollbar — tizimning oq/qora chizig'i
   shisha panellar ustida ko'zga tashlanmasin. */
.product-dialog,
.auth-form-side,
.help-topics,
.show-inner {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.product-dialog::-webkit-scrollbar,
.auth-form-side::-webkit-scrollbar,
.show-inner::-webkit-scrollbar { width: 10px; }
.product-dialog::-webkit-scrollbar-track,
.auth-form-side::-webkit-scrollbar-track,
.show-inner::-webkit-scrollbar-track { background: transparent; }
.product-dialog::-webkit-scrollbar-thumb,
.auth-form-side::-webkit-scrollbar-thumb,
.show-inner::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: var(--r-full);
}

/* ------------------------------------------------------------
   5. Modal oynalar (hisob, sozlamalar, yordam)
   ------------------------------------------------------------ */

.product-modal[hidden],
.product-toast[hidden] { display: none !important; }

.product-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: var(--scrim);
  opacity: 0;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  transition: opacity 220ms ease;
}

.product-modal.is-open { opacity: 1; }
.product-modal-open { overflow: hidden !important; }

.product-dialog {
  position: relative;
  width: min(960px, 100%);
  max-height: min(850px, calc(100svh - 48px));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-xl), inset 0 1px 0 var(--sheen);
  opacity: 0;
  transform: translateY(16px) scale(.975);
  transition: opacity 220ms ease, transform 280ms cubic-bezier(.2, .8, .2, 1);
}

.product-modal.is-open .product-dialog { opacity: 1; transform: none; }
.product-dialog.dialog-small { width: min(620px, 100%); overflow-y: auto; }
.product-dialog.dialog-help { width: min(720px, 100%); overflow-y: auto; }
.product-dialog-content { min-height: 100%; }

.product-dialog-close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.product-dialog-close:hover { background: var(--surface-2); color: var(--text); }
.product-dialog-close svg { width: 18px; height: 18px; }

/* --- Kirish / ro'yxatdan o'tish --- */

.auth-layout { min-height: 640px; display: grid; grid-template-columns: .9fr 1.1fr; }

.auth-art {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* To'q yashil sahna — sotuvchi sahifadagi hero bilan bir dunyoda.
     Avval bu ko'k-firuza gradient edi va yangi brendan ajralib turardi. */
  background:
    radial-gradient(760px 420px at 78% 6%, rgba(79, 214, 180, .26), transparent 66%),
    radial-gradient(620px 420px at 6% 96%, rgba(232, 220, 196, .14), transparent 70%),
    #062421;
}

.auth-art::before,
.auth-art::after {
  content: '';
  position: absolute;
  width: 580px;
  height: 270px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  transform: rotate(24deg);
}
.auth-art::after { width: 350px; height: 520px; transform: rotate(-31deg); }

.auth-art-orb {
  position: relative;
  z-index: 2;
  width: 220px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(79, 214, 180, .38);
  border-radius: 48% 52% 42% 58% / 45% 44% 56% 55%;
  background:
    radial-gradient(circle at 35% 28%, rgba(159, 240, 218, .55), transparent 34%),
    linear-gradient(145deg, rgba(79, 214, 180, .30), rgba(6, 36, 33, .72));
  box-shadow: 0 35px 70px rgba(4, 20, 18, .45), inset 0 2px 10px rgba(159, 240, 218, .28);
  backdrop-filter: blur(12px);
  animation: product-orb 8s ease-in-out infinite;
}

.auth-wave { height: 64px; display: flex; align-items: center; gap: 6px; }
.auth-wave i { width: 5px; height: 28px; border-radius: var(--r-full); background: #4fd6b4; animation: product-wave 1s ease-in-out infinite alternate; }
.auth-wave i:nth-child(2), .auth-wave i:nth-child(4) { height: 48px; animation-delay: -.35s; }
.auth-wave i:nth-child(3) { height: 62px; animation-delay: -.68s; }

.auth-quote {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 24px;
  left: 24px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  background: rgba(4, 20, 18, .5);
  color: #eaf3f0;
  backdrop-filter: blur(18px);
}
.auth-quote small { font-size: var(--fs-micro); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.auth-quote p { margin: 8px 0 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }

.auth-form-side { position: relative; padding: 40px 48px 34px; overflow-y: auto; }

.dialog-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
.dialog-logo { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; border-radius: var(--r-xs); background: linear-gradient(145deg, var(--brand-mint), var(--brand-mint-deep)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.dialog-logo i { width: 2.5px; border-radius: 4px; background: #08201f; }
.dialog-logo i:nth-child(1) { height: 8px; }
.dialog-logo i:nth-child(2) { height: 15px; }
.dialog-logo i:nth-child(3) { height: 10px; }

.auth-heading { margin-top: 38px; }
.dialog-eyebrow { margin: 0 0 12px; color: var(--mint-deep); font-size: var(--fs-micro); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.auth-heading h2,
.simple-dialog h2 { margin: 0; color: var(--text); font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; }
.auth-heading > p:last-child,
.dialog-lead { margin: 14px 0 0; max-width: 46ch; color: var(--text-secondary); font-family: var(--font-reading); font-size: var(--fs-sm); line-height: 1.65; }

.auth-tabs { margin-top: 24px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border: 1px solid var(--border); border-radius: var(--r); background: var(--seg-track); }
.auth-tabs button { min-height: 40px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.auth-tabs button:hover { color: var(--text); }
.auth-tabs button[aria-selected='true'] { background: var(--seg-thumb); color: var(--text); box-shadow: var(--shadow-sm); }

.auth-form { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.auth-form > label:not(.check-row) { display: flex; flex-direction: column; gap: 7px; }
.auth-form > label > span { color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 700; }

.auth-form input[type='text'],
.auth-form input[type='email'],
.auth-form input[type='password'],
.help-search input,
.select-setting select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.auth-form input:focus,
.help-search input:focus,
.select-setting select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.auth-form input::placeholder,
.help-search input::placeholder { color: var(--text-muted); }

.check-row { display: inline-flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: var(--fs-xs); cursor: pointer; }
.check-row input { width: 17px; height: 17px; accent-color: var(--accent); }
.form-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-meta button { padding: 0; border: none; background: transparent; color: var(--accent); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.form-meta button:hover { text-decoration: underline; }
.form-error { margin: -2px 0 0; padding: 10px 12px; border-radius: var(--r-xs); background: var(--rec-soft); color: var(--rec); font-size: var(--fs-xs); font-weight: 600; }

.form-submit,
.dialog-primary,
.dialog-secondary {
  min-height: 50px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}
.form-submit:hover,
.dialog-primary:hover { background: var(--cta-bg-hover); transform: translateY(-1px); }
.form-submit svg,
.dialog-primary svg { width: 17px; height: 17px; }
.demo-disclaimer { margin: 16px 0 0; color: var(--text-muted); font-size: var(--fs-micro); text-align: center; }

/* --- Profil / sozlamalar / yordam --- */

.simple-dialog { position: relative; padding: 44px 44px 40px; }
.dialog-icon { width: 50px; height: 50px; margin-bottom: 26px; display: flex; align-items: center; justify-content: center; border-radius: var(--r); background: var(--surface-2); color: var(--text-secondary); }
.dialog-icon.accent { background: linear-gradient(145deg, rgba(79, 214, 180, .28), rgba(15, 107, 88, .2)); color: var(--accent-strong); }
.dialog-icon svg { width: 23px; height: 23px; }

.account-card { margin-top: 28px; padding: 15px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.account-avatar { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: var(--r-sm); background: linear-gradient(145deg, var(--brand-mint), var(--brand-mint-deep)); color: #0b2930; font-size: var(--fs-sm); font-weight: 850; }
.account-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-card b { overflow: hidden; font-size: var(--fs-md); text-overflow: ellipsis; white-space: nowrap; }
.account-card small { overflow: hidden; color: var(--text-muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.account-plan { margin-left: auto; padding: 6px 10px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-micro); font-weight: 800; }
.account-stats { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.account-stats span { padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: var(--fs-micro); font-weight: 650; }
.account-stats span + span { border-left: 1px solid var(--border); }
.account-stats b { color: var(--text); font-size: 19px; font-weight: 750; letter-spacing: -.03em; }
.dialog-actions { margin-top: 24px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 9px; }
.dialog-secondary { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.dialog-secondary:hover { background: var(--surface-2); }
.dialog-danger-link { margin-top: 18px; padding: 6px 0; border: none; background: transparent; color: var(--rec); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.dialog-danger-link:hover { text-decoration: underline; }

.settings-form { margin-top: 26px; display: flex; flex-direction: column; }
.settings-form fieldset { margin: 0 0 10px; padding: 0; border: none; }
.settings-form legend { margin-bottom: 9px; color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 700; }
.theme-options { padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border: 1px solid var(--border); border-radius: var(--r); background: var(--seg-track); }
.theme-options label { cursor: pointer; }
.theme-options input { position: absolute; opacity: 0; pointer-events: none; }
.theme-options span { min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 700; transition: background 160ms ease, color 160ms ease; }
.theme-options input:checked + span { background: var(--seg-thumb); color: var(--text); box-shadow: var(--shadow-sm); }
.theme-options input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.select-setting,
.switch-setting { min-height: 66px; padding: 13px 2px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); }
.select-setting > span,
.switch-setting > span { display: flex; flex-direction: column; gap: 3px; }
.select-setting b,
.switch-setting b { color: var(--text); font-size: var(--fs-md); font-weight: 700; }
.select-setting small,
.switch-setting small { color: var(--text-muted); font-size: var(--fs-xs); }
.select-setting select { width: 160px; min-height: 42px; padding: 0 10px; font-size: var(--fs-sm); }
.switch-setting { position: relative; cursor: pointer; }
.switch-setting input { position: absolute; right: 0; opacity: 0; width: 44px; height: 26px; }
.switch-setting i { position: relative; width: 44px; height: 26px; flex: 0 0 auto; border-radius: var(--r-full); background: var(--border-strong); transition: background 160ms ease; }
.switch-setting i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(10, 34, 35, .28); transition: transform 180ms ease; }
.switch-setting input:checked + i { background: var(--accent); }
.switch-setting input:checked + i::after { transform: translateX(18px); }
.switch-setting input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 3px; }
.settings-form .form-submit { margin-top: 22px; }

.help-search { position: relative; margin-top: 26px; display: flex; align-items: center; }
.help-search svg { position: absolute; z-index: 1; left: 16px; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.help-search input { min-height: 54px; padding-left: 46px; }
.help-topics { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.help-topics button { min-height: 118px; padding: 18px; display: grid; grid-template-columns: 30px 1fr; align-content: start; gap: 5px 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.help-topics button:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.help-topics button > span { grid-row: 1 / 3; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-micro); font-weight: 850; }
.help-topics b { font-size: var(--fs-sm); font-weight: 750; }
.help-topics small { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.help-answer { margin-top: 16px; padding: 24px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.help-answer button { padding: 0; border: none; background: transparent; color: var(--accent); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 800; cursor: pointer; }
.help-answer button:hover { text-decoration: underline; }
.help-answer h3 { margin: 18px 0 9px; font-size: 21px; font-weight: 750; letter-spacing: -.03em; }
.help-answer p { margin: 0; color: var(--text-secondary); font-family: var(--font-reading); font-size: var(--fs-sm); line-height: 1.7; }
.help-contact { margin-top: 22px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-xs); }
.help-contact button { padding: 0; border: none; background: transparent; color: var(--accent); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.help-contact button:hover { text-decoration: underline; }

/* --- Xabarnoma --- */

.product-toast {
  position: fixed;
  z-index: 1100;
  right: 24px;
  bottom: 24px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 14px 17px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--cta-bg);
  color: var(--cta-fg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.product-toast.is-visible { opacity: 1; transform: none; }

@keyframes product-orb {
  0%, 100% { border-radius: 48% 52% 42% 58% / 45% 44% 56% 55%; transform: translateY(0); }
  50% { border-radius: 58% 42% 55% 45% / 40% 58% 42% 60%; transform: translateY(-8px); }
}
@keyframes product-wave { to { transform: scaleY(.35); opacity: .6; } }

/* ============================================================
   6. Ish maydoni qobig'i (/live va /translator)
   ============================================================ */

.workspace-body {
  --header-h: 74px;
  --reading: 860px;
  --rail-w: 92px;
  padding-left: calc(var(--rail-w) + 24px);
  font-family: var(--font-ui);
  /* Ish maydoni SOKIN bo'lishi kerak: matn shu yerda o'qiladi.
     Avval ikkita to'yingan radial dog' + nuqtali to'r bor edi — endi
     bitta zo'rg'a sezilarli issiqlik manbai qoldi. */
  background:
    radial-gradient(120% 80% at 82% -25%, rgba(79, 214, 180, .07), transparent 60%),
    radial-gradient(90% 70% at 4% 112%, rgba(79, 214, 180, .07), transparent 60%),
    var(--bg);
}

/* --- Chap panel --- */

.app-rail {
  position: fixed;
  z-index: 85;
  top: var(--s-4);
  bottom: var(--s-4);
  left: var(--s-4);
  width: var(--rail-w);
  padding: var(--s-3) var(--s-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--elev-chrome), inset 0 1px 0 var(--sheen);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.rail-brand {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 auto;
  border-radius: var(--r);
  background: linear-gradient(145deg, var(--brand-mint), var(--brand-mint-deep));
  box-shadow: 0 10px 22px rgba(11, 26, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
  text-decoration: none;
}
.rail-brand i { width: 2.5px; border-radius: 4px; background: #08201f; }
.rail-brand i:nth-child(1) { height: 10px; }
.rail-brand i:nth-child(2) { height: 19px; }
.rail-brand i:nth-child(3) { height: 13px; }

.rail-nav,
.rail-secondary { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }
.rail-nav { margin-top: var(--s-6); }
.rail-secondary { margin-top: auto; padding-top: var(--s-3); }
.rail-secondary::before {
  content: '';
  width: 32px;
  height: 1px;
  margin: 0 auto var(--s-2);
  background: var(--border);
}

/* Har bir tugma IKONKA + YOZUV.
   Avval faqat ikonka bor edi va nomi kursorni ushlab turgandagina
   chiqardi — bu "bu tugma nima qiladi?" degan savolni har safar
   qaytaradi. Yozuv doimiy bo'lgani uchun tooltip ham kerak emas. */
.rail-link,
.rail-button,
.rail-user {
  position: relative;
  width: 76px;
  min-height: 60px;
  padding: var(--s-2) 2px var(--s-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  flex: 0 0 auto;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.rail-link::before,
.rail-button::before,
.rail-user::before {
  content: attr(data-short);
  order: 2;
  font-size: var(--fs-micro);
  font-weight: 750;
  letter-spacing: var(--track-caption);
  line-height: 1;
  white-space: nowrap;
}
.rail-link:hover,
.rail-button:hover,
.rail-user:hover { background: var(--surface-2); color: var(--text); }
.rail-link:active,
.rail-button:active,
.rail-user:active { transform: scale(.97); }

/* Faol bo'lim: to'ldirilgan chip + qalinroq yozuv. Farq faqat RANGDA
   emas — to'ldirilgan fon rangni ajrata olmaydigan foydalanuvchiga ham
   ko'rinadi. */
.rail-link.is-active { background: var(--accent-soft); color: var(--accent); }
.rail-link.is-active::before { font-weight: 850; }
.rail-link svg,
.rail-button svg,
.rail-user svg { width: 21px; height: 21px; }

.rail-user { margin-top: var(--s-1); }
.rail-user .js-user-avatar { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-micro); font-weight: 850; }
.rail-user .js-user-avatar.has-user { background: linear-gradient(145deg, var(--brand-mint), var(--brand-mint-deep)); color: #0b2528; }
.rail-user .js-user-avatar:not(.has-user)::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0115 0' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0115 0' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- Yuqori panel --- */

/* Uch zonali panjara: til juftligi HAR DOIM aniq markazda turadi, chap va
   o'ng zonalar esa bir xil kenglikda — shuning uchun tugmalar soni
   o'zgarganda ham markaz siljimaydi. */
.workspace-body .topbar,
.viewer-body .topbar {
  min-height: var(--header-h);
  margin: var(--s-4) var(--s-4) 0;
  padding: 0 var(--s-3) 0 var(--s-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  flex-wrap: nowrap;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--elev-card), inset 0 1px 0 var(--sheen);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.workspace-title { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.workspace-title b { color: var(--text); font-size: var(--fs-md); font-weight: 800; letter-spacing: var(--track-title); }
.workspace-title span { color: var(--text-muted); font-size: var(--fs-micro); font-weight: 650; }

/* Til juftligi — IKKI alohida tugma emas, BITTA boshqaruv.
   "Qaysi tildan qaysi tilga" degan savol bitta qutida javob topadi,
   almashtirish tugmasi esa ular orasidagi bo'g'in bo'lib turadi.
   Tinglovchi sahifasida juftlik yo'q (u faqat bitta til tanlaydi),
   shuning uchun bu guruh faqat ish maydoniga tegishli. */
.workspace-body .lang-bar {
  flex: 0 0 auto;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--elev-flat);
}
.viewer-body .lang-bar { flex: 0 0 auto; }

.workspace-body .lang-trigger {
  min-width: 156px;
  min-height: 40px;
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: none;
}
.viewer-body .lang-trigger {
  min-width: 150px;
  min-height: 42px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: var(--elev-flat);
}
.workspace-body .lang-trigger:hover,
.viewer-body .lang-trigger:hover { background: var(--surface-2); }
.workspace-body .swap-btn,
.viewer-body .swap-btn {
  position: relative;
  width: 36px;
  height: 36px;
  margin: 0 2px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
}
/* Ikki tomondagi ingichka chiziq — almashtirish tugmasi juftlikni
   "dan / ga" ga bo'lib turganini ko'rsatadi */
.workspace-body .swap-btn::before,
.workspace-body .swap-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1px;
  height: 18px;
  background: var(--border);
  transform: translateY(-50%);
}
.workspace-body .swap-btn::before { left: -2px; }
.workspace-body .swap-btn::after { right: -2px; }
.workspace-body .swap-btn:hover { background: var(--accent-soft); color: var(--accent); }
.workspace-body .swap-btn:hover::before,
.workspace-body .swap-btn:hover::after { opacity: 0; }
.workspace-body .swap-btn svg { transition: transform var(--dur-3) var(--ease-spring); }
.workspace-body .swap-btn:active svg { transform: rotate(180deg); }

.workspace-body .topbar-actions,
.viewer-body .topbar-actions { gap: var(--s-1); justify-self: end; }
.workspace-body .chip-btn,
.workspace-body .icon-btn,
.viewer-body .chip-btn,
.viewer-body .icon-btn {
  height: 42px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}
.workspace-body .icon-btn,
.viewer-body .icon-btn { width: 42px; }
.workspace-body .chip-btn,
.viewer-body .chip-btn { padding-inline: 13px; border-color: var(--border); background: var(--surface); color: var(--text-secondary); }
.workspace-body .chip-btn:hover,
.workspace-body .icon-btn:hover,
.viewer-body .chip-btn:hover,
.viewer-body .icon-btn:hover { background: var(--surface-2); color: var(--text); }
.workspace-body .chip-btn[aria-pressed='true'],
.viewer-body .chip-btn[aria-pressed='true'] { border-color: transparent; background: var(--accent-soft); color: var(--accent); }

/* Ulashish — asosiy harakat, shuning uchun to'ldirilgan */
.workspace-body .share-cta { border-color: transparent; background: var(--cta-bg); color: var(--cta-fg); }
.workspace-body .share-cta:hover { background: var(--cta-bg-hover); color: var(--cta-fg); }
/* Efir yoqilganda — jonli holat aniq ko'rinadi */
.workspace-body .share-cta.sharing,
.workspace-body .share-cta[aria-pressed='true'] { background: var(--rec); color: #fff; }
.workspace-body .share-cta.sharing:hover,
.workspace-body .share-cta[aria-pressed='true']:hover { background: var(--rec); color: #fff; filter: brightness(1.06); }

.workspace-body .voice-picker-btn { height: 42px; border-radius: var(--r-sm); }

.workspace-body .lang-panel,
.workspace-body .export-menu,
.viewer-body .lang-panel {
  margin-top: 4px;
  border-color: var(--border);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.workspace-body .lang-search { min-height: 42px; border-radius: var(--r-sm); }
.workspace-body .lang-opt,
.viewer-body .lang-opt { min-height: 42px; border-radius: var(--r-sm); }

/* --- Transkript --- */

.workspace-body .transcript { padding: var(--s-8) var(--s-10) var(--s-6); }
.workspace-body .transcript > * { max-width: var(--reading); }
.workspace-body .entry { padding: var(--s-5) var(--s-4) var(--s-5) var(--s-6); margin-bottom: 0; border-left-width: 3px; }
.workspace-body .entry + .entry { border-top-color: var(--border); }
.workspace-body .entry.active { border-radius: 0 var(--r-lg) var(--r-lg) 0; background: linear-gradient(90deg, var(--accent-soft), transparent 62%); }
.workspace-body .entry .original { font-family: var(--font-reading); font-size: var(--fs-md); line-height: 1.65; }
.workspace-body .entry .translation { font-family: var(--font-reading); font-size: clamp(20px, 2vw, 25px); line-height: 1.55; }
.workspace-body .speaker-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; }

/* --- Bo'sh holat --- */

/* Bu ish maydoni, reklama sahifasi emas. Shuning uchun bo'sh holat
   "LiveLator nima" ni emas, "hozir nima qilishim kerak" ni aytadi:
   qisqa sarlavha va uchta raqamlangan qadam. Sarlavha ham 56px dan
   28px ga tushdi — asosiy harakat pastdagi mikrofon, sarlavha emas. */
.workspace-body .empty-state {
  max-width: 620px;
  height: 100%;
  min-height: 380px;
  padding: var(--s-8) 0 var(--s-5);
  justify-content: center;
  color: var(--text-muted);
}
/* Bo'sh holat markazlashgan "sahna" emas, YO'RIQNOMA: chapga tekislangan,
   o'qish tartibi yuqoridan pastga. Diqqat markazi — bajariladigan qadam. */
.workspace-body .empty-state {
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto;
  padding-top: min(9vh, 72px);
  text-align: left;
}

.workspace-body .empty-kicker { margin: 0 0 var(--s-2); color: var(--accent); font-size: var(--fs-micro); font-weight: 850; letter-spacing: var(--track-label); text-transform: uppercase; }
.workspace-body .empty-title {
  max-width: 560px;
  margin: 0 0 var(--s-3);
  color: var(--text);
  font-size: var(--fs-4xl);
  font-weight: 780;
  letter-spacing: var(--track-title);
  line-height: var(--leading-title);
}
.workspace-body .empty-sub { max-width: 420px; margin: 0; color: var(--text-secondary); font-family: var(--font-reading); font-size: var(--fs-md); line-height: var(--leading-reading); }

/* Uch qadam — yonma-yon karta emas, ustma-ust QATOR: har biri bitta
   bajariladigan ish. Birinchi qadam allaqachon bajarilgan holatda. */
.empty-features {
  margin: var(--s-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  list-style: none;
}
.empty-features li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  text-align: left;
}
.empty-features li.is-done { border-color: var(--accent-ring); background: var(--accent-soft); }

.empty-features .step-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  font-weight: 850;
}
.empty-features li.is-done .step-mark { background: var(--accent); color: var(--text-on-accent); }

.empty-features .step-copy { min-width: 0; }
.empty-features .step-copy b { display: block; color: var(--text); font-size: var(--fs-lg); font-weight: 750; }
.empty-features .step-copy small {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.5;
}
.empty-features .step-copy kbd {
  padding: 2px 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  font: 700 var(--fs-xs) var(--font-ui);
}
.empty-features .step-state {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 750;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .empty-features li { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .empty-features .step-state { grid-column: 2; justify-self: start; }
}

/* --- Mikrofon doki ---
   Avval bu butun ekran kengligidagi panel edi va ichida bitta tugma bilan
   ulkan bo'sh joy qolardi. Endi u MAZMUNIGA qarab kengayadigan ixcham
   "tabletka": mikrofon markazda, yozuv chapda, yorliq o'ngda. */

.workspace-body .dock {
  width: fit-content;
  max-width: calc(100% - var(--s-8));
  min-height: 0;
  margin: 0 auto var(--s-4);
  padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, auto) auto minmax(0, auto);
  align-items: center;
  gap: var(--s-5);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  background: var(--glass);
  box-shadow: var(--elev-chrome), inset 0 1px 0 var(--sheen);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

/* Ish maydonida mikrofon — yumaloq emas, yumshoq kvadrat: dok chizig'iga
   o'tirib, "boshqaruv" tugmasidek ko'rinadi. Faol holatda marjon rangga
   o'tadi va halqa uradi. */
.workspace-body .mic-btn {
  grid-column: 2;
  grid-row: 1;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border: none;
  border-radius: 20px;
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-mic);
}
.workspace-body .mic-btn.active {
  border: none;
  border-radius: 20px;
  background: var(--rec);
  color: #2a0007;
}
.workspace-body .mic-btn.active::before,
.workspace-body .mic-btn.active::after { border-radius: 20px; }

.workspace-body .dock-hint {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: auto;
  height: auto;
  max-width: 200px;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 650;
  text-align: right;
}
.workspace-body .dock-hint::before {
  content: 'Mikrofon';
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: var(--track-title);
}

.dock-shortcuts {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 650;
}
.dock-shortcuts kbd { padding: 5px var(--s-2); border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface); color: var(--text-secondary); font: 700 var(--fs-micro) var(--font-ui); }

/* Holat tasmasi sarlavha ostida, butun kenglik bo'ylab: "jonli" ekani
   zalning orqa qatoridan ham ko'rinadi. Avval u dok ustida suzuvchi
   kichkina lavha edi — mikrofon yonida, ya'ni ko'z tushmaydigan joyda. */
.workspace-body .status {
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--border);
  border-inline: none;
  border-radius: 0;
  background: var(--glass-strong);
  font-size: var(--fs-sm);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.workspace-body .status.listening { border-color: var(--rec-soft); background: var(--rec-soft); }
.workspace-body .status.error { border-color: var(--rec-soft); background: var(--rec-soft); }

/* ============================================================
   7. Tarjimon ish maydoni
   ============================================================ */

/* Rejim tanlagich kontent ustunining CHAP chekkasi bilan bir chiziqda
   turadi — avval u ekran markazida "suzib", quyidagi kartalar bilan
   hech qanday bog'lanmagan edi. */
/* Rejim tanlagich kontent ustunining CHAP chekkasidan boshlanadi —
   avval u ekran markazida "suzib", quyidagi kartalar bilan hech
   qanday bog'lanmagan edi. 1088px = .tr-view ning 1120px maksimumi
   minus uning 16px yon to'ldirishi. */
.workspace-body .tr-tabs {
  width: min(100% - var(--s-8), 1088px);
  margin: var(--s-4) auto 0;
  padding: 0;
  align-self: center;
  justify-content: flex-start;
  gap: var(--s-1);
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.workspace-body .tr-tab {
  min-height: 38px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.workspace-body .tr-tab.is-active {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elev-flat);
}
.workspace-body .tr-tab.is-active svg { color: var(--accent); }

.workspace-body .tr-main { padding-top: 0; }
.workspace-body .tr-view { max-width: 1120px; padding: var(--s-4) var(--s-4) var(--s-6); }
.workspace-body .tr-grid { gap: var(--s-3); }

/* Kontent sirtlari QATTIQ. Shishani faqat suzuvchi qismlar (panel, dok,
   menyu) ishlatadi — shaffof sirt ustiga shaffof sirt qo'yilsa
   o'qish qiyinlashadi. */
.workspace-body .tr-card {
  min-height: 220px;
  border-color: var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--elev-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Natija kartasi — kirish kartasidan aniq ajralib turadi */
/* Natija kartasi yalpiz tusda: kirish va CHIQISH bir xil ko'rinmasligi
   kerak — ko'z darhol qaysi tomonda tarjima turganini topadi. */
.workspace-body .tr-card-out {
  border-color: var(--accent-ring);
  background: linear-gradient(180deg, var(--accent-soft), transparent 62%), var(--surface);
}
.workspace-body .tr-card-out .tr-card-lang { color: var(--accent); }
.workspace-body .tr-card-head { padding: var(--s-5) var(--s-5) var(--s-2); }
.workspace-body .tr-card-lang { font-size: var(--fs-xs); letter-spacing: var(--track-label); }
.workspace-body .tr-input { min-height: 0; padding: var(--s-2) var(--s-5) var(--s-4); font-family: var(--font-reading); font-size: var(--fs-2xl); line-height: var(--leading-body); }
.workspace-body .tr-input::placeholder { font-size: var(--fs-xl); }
.workspace-body .tr-output { padding: var(--s-2) var(--s-5) var(--s-4); font-family: var(--font-reading); font-size: 23px; line-height: var(--leading-body); }
.workspace-body .tr-card-foot { min-height: 66px; padding: var(--s-3) var(--s-4); border-top-color: var(--border); }
.workspace-body .tr-mic { height: 42px; padding-inline: var(--s-4); border-radius: var(--r-sm); background: var(--accent); }
.workspace-body .tr-action { height: 40px; border-radius: var(--r-sm); background: var(--surface); }
.workspace-body .tr-action:hover:not(:disabled) { background: var(--surface-2); }
.workspace-body .tr-mini { width: 40px; height: 40px; border-radius: var(--r-sm); }
.workspace-body .tr-tip { margin: var(--s-4) var(--s-1) 0; font-size: var(--fs-xs); }

/* 1088px — rejim tablari va matn kartalari bilan bir xil ustun kengligi */
.workspace-body .tr-talk {
  max-width: 1088px;
  height: calc(100% - var(--s-4));
  margin: 0 auto var(--s-4);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--glass);
  box-shadow: var(--shadow-md);
}
.workspace-body .talk-remote { background: var(--glass-flat); }
.workspace-body .talk-text { font-family: var(--font-reading); }
.workspace-body .talk-mic { background: var(--accent); }
.workspace-body .talk-divider { background: var(--surface); }

.workspace-body .phrase-cat { border-radius: var(--r-sm); background: var(--surface); }
.workspace-body .phrase-cat.is-active { border-color: transparent; background: var(--accent); color: var(--text-on-accent); }
.workspace-body .phrase-card {
  padding: 15px 13px 15px 18px;
  border-color: var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: var(--shadow-xs);
}
.workspace-body .phrase-card:hover { border-color: var(--border-strong); }
.workspace-body .phrase-target,
.workspace-body .phrase-source { font-family: var(--font-reading); }

/* ============================================================
   8. Tinglovchi sahifasi — sokinroq: panel yo'q, subtitr asosiy
   ============================================================ */

.viewer-body {
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 80% 0, rgba(79, 214, 180, .13), transparent 36%),
    radial-gradient(circle at 10% 100%, rgba(79, 214, 180, .14), transparent 34%),
    var(--bg);
}

.viewer-body .brand { gap: 11px; }
.viewer-body .brand-dot {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: linear-gradient(145deg, var(--brand-mint), var(--brand-mint-deep));
  box-shadow: 0 8px 18px rgba(11, 26, 24, .2), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.viewer-body .brand-dot::before {
  content: '';
  width: 16px;
  height: 18px;
  display: block;
  margin: 9px auto;
  background: #08201f;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8v8M12 5v14M16 9v6' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8v8M12 5v14M16 9v6' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.viewer-body .brand-name { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.03em; }

.viewer-body .transcript { padding-top: 42px; }
.viewer-body .entry .translation { font-family: var(--font-reading); font-size: clamp(22px, 2.5vw, 31px); }
.viewer-body .viewer-foot { border-top: none; color: var(--text-muted); font-size: var(--fs-xs); }

/* Tinglovchidagi bo'sh holat — /live dagi orb bilan bir tilda */
.viewer-body .empty-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--accent);
}
.viewer-body .empty-icon svg { width: 34px; height: 34px; }
.viewer-body .empty-title { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -.03em; }
.viewer-body .empty-sub { max-width: 400px; font-family: var(--font-reading); font-size: var(--fs-md); }

/* Ixcham interfeys sozlamasi */
[data-compact-ui] .workspace-body { --header-h: 64px; }
[data-compact-ui] .workspace-body .app-rail { top: 10px; bottom: 10px; }
[data-compact-ui] .workspace-body .topbar { margin-top: 10px; }
[data-compact-ui] .workspace-body .dock { min-height: 82px; }
[data-compact-ui] .workspace-body .tr-card { min-height: 320px; }

/* ============================================================
   9. Moslashuvchanlik
   ============================================================ */

@media (max-width: 1240px) {
  .workspace-body { --rail-w: 84px; }
  .workspace-title span { display: none; }
  .workspace-body .lang-trigger { min-width: 132px; max-width: 176px; }
  .workspace-body .chip-btn { padding-inline: 10px; }
  .workspace-body .topbar-actions { gap: 3px; }
  .workspace-body .dock-hint { max-width: 150px; }
  .rail-link, .rail-button, .rail-user { width: 68px; }
}

/* Kichik oyna: yozuvli chiplar sig'maydi — faqat ikonka qoladi va
   nomi kursor ostida tooltip bo'lib chiqadi. */
@media (max-width: 1100px) {
  .workspace-body .topbar-actions .chip-btn { width: 42px; padding: 0; justify-content: center; }
  .workspace-body .topbar-actions .chip-btn span:not(.share-count) { display: none; }
}

/* Planshet va telefon: chap panel pastki panelga aylanadi */
@media (max-width: 900px) {
  .workspace-body { padding-left: 0; padding-bottom: 86px; }
  .app-rail {
    top: auto;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    height: 68px;
    padding: 4px var(--s-2);
    flex-direction: row;
    justify-content: center;
    gap: var(--s-1);
    border-radius: var(--r-lg);
  }
  .rail-brand { display: none; }
  /* Narxlar — marketing havolasi, telefonda o'rin band qilmasin.
     Yordam va Sozlamalar esa OCHIQ qoladi (avval butunlay yashiringan edi). */
  .rail-link[href='/#pricing'] { display: none; }
  .rail-nav,
  .rail-secondary { width: auto; margin: 0; padding: 0; flex-direction: row; gap: var(--s-1); }
  .rail-secondary::before { display: none; }
  .rail-secondary { margin-left: var(--s-1); padding-left: 6px; border-left: 1px solid var(--border); }
  .rail-link,
  .rail-button,
  .rail-user { width: 58px; min-height: 58px; margin: 0; }
  /* Pastki panelda joy tor: yozuv faqat asosiy bo'limlarda qoladi,
     yordamchi tugmalar (yordam / sozlamalar / profil) ikonka bilan
     cheklanadi — ular aria-label orqali baribir nomlangan. */
  .rail-button::before,
  .rail-user::before { display: none; }
  .rail-button,
  .rail-user { justify-content: center; }
  .workspace-body .dock { margin-bottom: var(--s-1); }
  .workspace-title { min-width: 90px; }
  .workspace-body .topbar { margin-inline: 10px; }
  .workspace-body .tr-tabs { width: auto; margin-inline: 10px; }
}

@media (max-width: 700px) {
  .product-modal { padding: 0; align-items: flex-end; }
  .product-dialog,
  .product-dialog.dialog-small,
  .product-dialog.dialog-help { width: 100%; max-height: min(94svh, 850px); border-right: 0; border-bottom: 0; border-left: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(30px); }
  .auth-layout { min-height: auto; display: block; }
  .auth-art { display: none; }
  .auth-form-side { padding: 30px 22px calc(30px + env(safe-area-inset-bottom)); }
  .auth-heading { margin-top: 32px; }
  .auth-heading h2,
  .simple-dialog h2 { font-size: 30px; }
  .simple-dialog { padding: 32px 20px calc(34px + env(safe-area-inset-bottom)); }
  .dialog-icon { margin-bottom: 20px; }
  .product-dialog-close { top: 14px; right: 14px; width: 44px; height: 44px; }
  .help-topics { grid-template-columns: 1fr; }
  .help-topics button { min-height: 92px; }
  .help-contact { align-items: flex-start; flex-direction: column; gap: 8px; }
  .product-toast { right: 12px; bottom: calc(90px + env(safe-area-inset-bottom)); left: 12px; max-width: none; text-align: center; }

  .workspace-body { padding-bottom: 86px; }
  .workspace-body .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    min-height: auto;
    margin: 8px 8px 0;
    padding: max(10px, env(safe-area-inset-top)) 10px 10px;
    gap: 9px;
    border-radius: var(--r-lg);
    /* Filtrlangan ota-element mobil "sheet" uchun containing block yaratadi —
       shuning uchun bu yerda blur o'chiriladi. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--glass-strong);
  }
  .workspace-title { min-width: 0; grid-column: 1; grid-row: 1; }
  .workspace-title span { display: block; }
  /* Amallar ko'p bo'lganda sarlavha ikki qatorga tushmasin */
  .workspace-title b,
  .workspace-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Amallar ko'p — gorizontal siljiydi, hech biri yo'qolmaydi */
  .workspace-body .topbar-actions {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: 100%;
    padding-bottom: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .workspace-body .topbar-actions::-webkit-scrollbar { display: none; }
  .workspace-body .topbar-actions .mobile-hide { display: none; }
  .workspace-body .topbar-actions .chip-btn,
  .workspace-body .topbar-actions .icon-btn,
  .workspace-body .topbar-actions .voice-picker-btn { min-width: 42px; width: 42px; height: 42px; padding: 0; justify-content: center; }
  .workspace-body .topbar-actions .chip-btn span:not(.share-count) { display: none; }

  .workspace-body .lang-bar { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 6px; }
  .workspace-body .lang-select { min-width: 0; }
  .workspace-body .lang-trigger { width: 100%; max-width: none; min-width: 0; min-height: 46px; padding: 0 11px; font-size: var(--fs-xs); }
  .workspace-body .swap-btn { flex: 0 0 44px; width: 44px; height: 44px; }
  .workspace-body .lang-panel { right: 8px !important; bottom: calc(88px + env(safe-area-inset-bottom)); left: 8px !important; border-radius: var(--r-xl); }
  .workspace-body .export-menu { right: 8px; bottom: calc(88px + env(safe-area-inset-bottom)); left: 8px; border-radius: var(--r-xl); }

  .workspace-body .transcript { padding: var(--s-5) var(--s-3); }
  .workspace-body .empty-state { min-height: 320px; padding-top: var(--s-5); }
  .empty-visual { width: 88px; height: 88px; margin-bottom: var(--s-5); }
  .empty-visual::after { inset: 12px; }
  .empty-orb { width: 54px; height: 54px; }
  .empty-orb::after { width: 22px; height: 22px; }
  .workspace-body .empty-title { max-width: 320px; font-size: 26px; }
  .workspace-body .empty-sub { max-width: 320px; font-size: var(--fs-sm); }
  /* Telefonda uch qadam yonma-yon siqilib ketadi — ustunga tushadi */
  .empty-features { margin-top: var(--s-5); grid-template-columns: 1fr; gap: var(--s-1); }
  .empty-features li { flex-direction: row; align-items: center; gap: var(--s-3); padding: var(--s-3); font-size: var(--fs-xs); }
  .workspace-body .entry { padding: 16px 8px 16px 13px; }
  .workspace-body .entry .translation { font-size: 19px; }

  /* Telefonda dok butun kenglikni oladi, mikrofon esa panjara tufayli
     EKRAN MARKAZIDA qoladi — yozuv uzun yoki qisqa bo'lishidan qat'i
     nazar bosh barmoq har doim bir joyni topadi. */
  .workspace-body .dock {
    width: auto;
    max-width: none;
    min-height: 80px;
    margin: 0 var(--s-2) 2px;
    padding: 7px var(--s-3);
    /* Desktopda dok mazmuniga qarab kengayadi, shuning uchun ustunlar
       ham mazmun bo'yicha o'lchanadi. Telefonda esa dok butun kenglikni
       oladi — chap va o'ng ustunlar TENG bo'lishi shart, aks holda
       mikrofon markazdan siljiydi. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--s-3);
    border-radius: var(--r-lg);
  }
  .workspace-body .mic-btn { width: 60px; height: 60px; border-width: 5px; }
  .workspace-body .dock-hint { order: -1; max-width: 150px; font-size: var(--fs-micro); }
  .workspace-body .dock-hint::before { font-size: var(--fs-xs); }
  /* Klaviatura yorlig'i sensorli ekranda ma'nosiz */
  .dock-shortcuts { display: none; }
  .workspace-body .status { padding: 9px 14px; font-size: var(--fs-xs); }

  .app-rail { height: 64px; }
  .rail-link, .rail-button, .rail-user { width: 54px; min-height: 54px; }

  .workspace-body .tr-tabs { align-self: stretch; width: auto; margin: 8px 8px 0; }
  .workspace-body .tr-tab { flex: 1 1 0; padding: 0 8px; }
  .workspace-body .tr-view { padding: 13px 8px 24px; }
  .workspace-body .tr-grid { grid-template-columns: 1fr; gap: 10px; }
  .workspace-body .tr-card { min-height: 200px; border-radius: var(--r-lg); }
  .workspace-body .tr-card-head { padding: 14px 16px 5px; }
  .workspace-body .tr-input { min-height: 120px; padding: 6px 16px 12px; font-size: 18px; }
  .workspace-body .tr-output { min-height: 110px; padding: 6px 16px 12px; font-size: 19px; }
  .workspace-body .tr-card-foot { min-height: 56px; padding: 8px 10px; }
  .workspace-body .tr-tip { display: none; }
  .workspace-body .tr-talk { height: calc(100% - 10px); margin: 0 8px 10px; border-radius: var(--r-lg); }
  .workspace-body .phrase-card { border-radius: var(--r); }

  /* Tinglovchi paneli telefonda ikki qatorga bo'linadi: tepada brend va
     efir holati, pastda til tanlash + amallar. Avval uchala zona bitta
     qatorga siqilib, brend nomi holat lavhasi ostida qolib ketardi. */
  .viewer-body .topbar {
    margin: 8px 8px 0;
    padding: max(10px, env(safe-area-inset-top)) 10px 10px;
    min-height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-2) var(--s-3);
    border-radius: var(--r-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--glass-strong);
  }
  .viewer-body .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .viewer-body .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .viewer-body .lang-bar { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .viewer-body .topbar-actions { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-self: stretch; }
  .viewer-body .topbar-actions .lang-select { flex: 1 1 auto; min-width: 0; }
  .viewer-body .topbar-actions .lang-trigger { width: 100%; min-width: 0; }
  .viewer-body .lang-panel { right: 8px !important; left: 8px !important; border-radius: var(--r-xl); }
}

@media (max-width: 380px) {
  .rail-link, .rail-button, .rail-user { width: 48px; min-height: 50px; }
  .rail-link::before, .rail-button::before, .rail-user::before { font-size: 10px; }
  .workspace-body .empty-title { font-size: 24px; }
  .workspace-body .dock-hint { max-width: 108px; }
  .account-stats { grid-template-columns: 1fr; }
  .account-stats span + span { border-top: 1px solid var(--border); border-left: none; }
  .dialog-actions { grid-template-columns: 1fr; }
}