/* استایل‌های پایه‌ای مشترک همهٔ صفحات: فونت وزیرمتن، هدر سایت، منو و فوتر.
   ------------------------------------------------------------------
   Zuvor ein Inline-<style>-Block in templates/base.html (rund 12 KB) und
   damit in JEDER einzelnen HTML-Antwort der Seite enthalten - nicht
   cachebar, bei jedem Seitenwechsel erneut uebertragen und render-blockierend
   im <head>. Als eigene Datei liefert Whitenoise den Inhalt gehasht und mit
   "Cache-Control: immutable" aus: der Browser laedt ihn einmal und danach
   nie wieder.

   Die @font-face-Regel unten nutzt bewusst einen RELATIVEN Pfad
   ("../fonts/...") statt des frueheren {% static %}-Tags: CSS-Dateien werden
   von Django nicht als Template gerendert. CompressedManifestStaticFilesStorage
   (core/settings/production.py) schreibt url()-Referenzen beim collectstatic
   ohnehin automatisch auf den gehashten Dateinamen um - das Cache-Busting
   der Schriftdatei bleibt also vollstaendig erhalten. */

    @font-face {
      font-family: "Vazirmatn";
      src: url("../fonts/Vazirmatn-Variable.f6d31671339d.woff2") format("woff2-variations"), url("../fonts/Vazirmatn-Variable.f6d31671339d.woff2") format("woff2");
      font-weight: 100 900;
      font-display: swap;
    }
    html, body {
      font-family: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
    }

    /* Sticky Footer: <body> ist "min-h-screen" (base.html), aber erst als
       Flex-Spalte fuellt <main> die Resthoehe - sonst rutscht der Copyright-
       Footer auf Seiten mit wenig Inhalt nach oben statt am unteren Rand zu
       sitzen. "width: 100%" haelt das bisherige Block-Verhalten von <main>
       ("mx-auto max-w-5xl" zentriert bei voller Breite, statt als Flex-Item
       auf Inhaltsbreite zu schrumpfen). */
    body {
      display: flex;
      flex-direction: column;
    }
    body > main {
      flex: 1 0 auto;
      width: 100%;
    }

    /* HTMX-Ladeindikator: standardmäßig versteckt, während .htmx-request sichtbar */
    .htmx-indicator { display: none; }
    .htmx-request .htmx-indicator,
    .htmx-request.htmx-indicator { display: flex; }

    /* ── Site-Header: grafisches Farbschema (Cyan / Amber) ── */
    .hz-site-header {
      position: relative;
      z-index: 50; /* über Hero/Main, damit Dropdowns nicht darunter liegen */
      isolation: isolate;
      /* overflow darf NICHT hidden sein — sonst werden Dropdown-Panels abgeschnitten */
      border-bottom: 1px solid rgba(14, 143, 189, 0.18);
      background:
        radial-gradient(ellipse 55% 120% at 8% 0%, rgba(26, 184, 232, 0.22), transparent 58%),
        radial-gradient(ellipse 45% 100% at 92% 100%, rgba(245, 166, 35, 0.18), transparent 55%),
        linear-gradient(180deg, #e8f6fc 0%, #f3fafd 48%, #ffffff 100%);
    }
    .hz-site-header::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.35;
      background-image:
        linear-gradient(rgba(14, 143, 189, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 143, 189, 0.06) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
    }
    .hz-site-header__inner {
      position: relative;
      z-index: 1;
    }
    .hz-nav-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: 9999px;
      border: 1px solid rgba(14, 143, 189, 0.16);
      background: rgba(255, 255, 255, 0.88);
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.25;
      color: #334155;
      box-shadow: 0 1px 2px rgba(11, 31, 46, 0.04);
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    .hz-nav-link:hover {
      border-color: rgba(26, 184, 232, 0.45);
      color: #0e7490;
      background: #fff;
      box-shadow: 0 4px 12px rgba(26, 184, 232, 0.12);
    }
    /* Auth-CTA: gefüllter Knopf — klar anders als die weißen Outline-Nav-Items */
    .hz-nav-link--auth {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: 9999px;
      border: none;
      background: linear-gradient(135deg, #0b1f2e 0%, #0e8fbd 100%);
      padding: 0.55rem 1.15rem;
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.25;
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(11, 31, 46, 0.28);
      transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }
    .hz-nav-link--auth:hover {
      background: linear-gradient(135deg, #0e8fbd 0%, #1ab8e8 100%);
      color: #ffffff;
      box-shadow: 0 6px 20px rgba(26, 184, 232, 0.35);
      transform: translateY(-1px);
    }
    /* Einheitliche Icon-Größe in allen Nav-Listen (20×20) */
    .hz-nav-icon {
      width: 20px !important;
      height: 20px !important;
      min-width: 20px;
      min-height: 20px;
      max-width: 20px;
      max-height: 20px;
      flex-shrink: 0;
      display: block;
      align-self: center;
    }
    .hz-nav-icon--chevron {
      width: 16px !important;
      height: 16px !important;
      min-width: 16px;
      min-height: 16px;
      max-width: 16px;
      max-height: 16px;
    }
    .hz-nav-panel {
      z-index: 40;
      border: 1px solid rgba(14, 143, 189, 0.16);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 12px 28px rgba(11, 31, 46, 0.12);
    }
    .hz-nav-panel a:hover,
    .hz-nav-panel button:hover {
      background: #ecfeff;
      color: #0e7490;
    }

    /* ══════════════ ناوبری موبایل (اپ‌مانند): نوار بالا + نوار پایین + منوها ══════════════
       فقط زیر 768px نمایش داده می‌شوند (md:hidden) — دسکتاپ دقیقاً همان چیزی است که بود. */
    :root {
      --hz-ink: #0b1f2e;
      --hz-ink-soft: #143047;
      --hz-cyan: #1ab8e8;
      --hz-cyan-deep: #0e8fbd;
    }

    /* نوار باریک بالای صفحه در موبایل: لوگو + دکمهٔ همبرگر
       توجه: «display» عمداً اینجا تنظیم نشده، چون این <style> بعد از لینک
       Tailwind لود می‌شود و با همان specificity، بی‌قید-و-شرط بودنش روی
       «md:hidden» غالب می‌شد و نوار موبایل را در دسکتاپ هم نشان می‌داد.
       مقدار «display» را @media (max-width: 767px) پایین همین بلوک تنظیم می‌کند. */
    .hz-mobile-topbar {
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.6rem 1rem;
      background: linear-gradient(180deg, #e8f6fc 0%, #f3fafd 100%);
      border-bottom: 1px solid rgba(14, 143, 189, 0.16);
      position: sticky;
      top: 0;
      z-index: 40;
    }
    .hz-mobile-brand {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none !important;
      min-width: 0;
    }
    .hz-mobile-brand img {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      object-fit: contain;
      background: #e2e8f0;
      flex-shrink: 0;
    }
    .hz-mobile-brand span {
      font-weight: 800;
      font-size: 0.95rem;
      color: #115e73;
      white-space: nowrap;
    }
    .hz-mobile-iconbtn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.35rem;
      height: 2.35rem;
      flex-shrink: 0;
      border-radius: 999px;
      border: 1px solid rgba(14, 143, 189, 0.18);
      background: #fff;
      color: #0e7490;
    }
    .hz-mobile-iconbtn svg { width: 20px; height: 20px; }

    /* نوار پایین ثابت: خانه / خدمات / سفارش‌ها / حساب من (همان دلیل بالا: «display» عمداً اینجا نیست) */
    .hz-bottom-nav {
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      z-index: 50;
      grid-template-columns: repeat(4, 1fr);
      background: linear-gradient(180deg, #0f2a3d 0%, var(--hz-ink) 100%);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 -6px 20px rgba(11, 31, 46, 0.25);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .hz-bnav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.2rem;
      padding: 0.55rem 0.25rem 0.6rem;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.7rem;
      font-weight: 600;
      line-height: 1;
      text-decoration: none !important;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .hz-bnav-item svg { width: 20px; height: 20px; }
    .hz-bnav-icon-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 999px;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .hz-bnav-item.is-active { color: #fff; }
    .hz-bnav-item.is-active .hz-bnav-icon-wrap {
      background: linear-gradient(135deg, var(--hz-cyan), var(--hz-cyan-deep));
      box-shadow: 0 4px 12px rgba(26, 184, 232, 0.4);
    }

    /* پس‌زمینهٔ تیرهٔ مشترک، پشت کشوی همبرگر و شیت‌های پایین‌صفحه */
    .hz-overlay-backdrop {
      position: fixed;
      inset: 0;
      z-index: 60;
      background: rgba(11, 31, 46, 0.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
    .hz-overlay-backdrop.is-open { opacity: 1; pointer-events: auto; }

    /* کشوی همبرگر: بقیهٔ آیتم‌های منو (فعلی و هر آیتمی که بعداً اضافه شود) */
    .hz-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 61;
      width: min(78vw, 300px);
      background: #fff;
      box-shadow: -8px 0 28px rgba(11, 31, 46, 0.18);
      transform: translateX(100%);
      transition: transform 0.22s ease;
      flex-direction: column; /* «display» عمداً حذف شد، همان دلیل .hz-mobile-topbar بالا */
      padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
      overflow-y: auto;
    }
    .hz-drawer.is-open { transform: translateX(0); }
    .hz-drawer__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid #eef2f7;
    }
    .hz-drawer__head strong { font-size: 0.95rem; color: var(--hz-ink); }
    .hz-drawer__nav { display: flex; flex-direction: column; gap: 0.3rem; }
    .hz-drawer__nav a,
    .hz-drawer__nav button {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.8rem 0.7rem;
      border-radius: 12px;
      font-size: 0.92rem;
      font-weight: 600;
      color: #334155;
      text-decoration: none !important;
      border: none;
      background: transparent;
      text-align: right;
      width: 100%;
      cursor: pointer;
    }
    .hz-drawer__nav svg { width: 19px; height: 19px; flex-shrink: 0; color: #0e8fbd; }
    .hz-drawer__nav a:hover,
    .hz-drawer__nav button:hover { background: #ecfeff; color: #0e7490; }

    /* Bottom-Sheet: زیرمنوی «خدمات» و «حساب من» */
    .hz-sheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 61;
      background: #fff;
      border-radius: 22px 22px 0 0;
      box-shadow: 0 -10px 30px rgba(11, 31, 46, 0.2);
      transform: translateY(100%);
      transition: transform 0.22s ease;
      padding: 0.6rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
      max-height: 70vh;
      overflow-y: auto;
    }
    .hz-sheet.is-open { transform: translateY(0); }
    .hz-sheet__handle {
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: #e2e8f0;
      margin: 0.5rem auto 0.9rem;
    }
    /* Kein <h3>: das Bottom-Sheet steht im DOM vor dem <h1> jeder Seite. */
    .hz-sheet__title { margin: 0 0 0.3rem; font-size: 1rem; font-weight: 800; color: var(--hz-ink); }
    .hz-sheet a,
    .hz-sheet button {
      display: flex;
      align-items: center;
      padding: 0.85rem 0.2rem;
      border-radius: 10px;
      font-size: 0.92rem;
      font-weight: 600;
      color: #334155;
      text-decoration: none !important;
      border: none;
      background: transparent;
      width: 100%;
      text-align: right;
      cursor: pointer;
      border-bottom: 1px solid #f1f5f9;
    }
    .hz-sheet a:last-child,
    .hz-sheet button:last-child { border-bottom: none; }
    .hz-sheet__phone { padding: 0.3rem 0.2rem 0.6rem; font-size: 0.8rem; color: #94a3b8; }
    .hz-sheet__danger { color: #dc2626 !important; }

    /* «display» نوار بالا/پایین/کشوی موبایل - فقط پایین‌تر از 768px (همان
       آستانهٔ md: Tailwind)، تا با «md:hidden» به‌جای رقابت هم‌سطح، هرگز
       هم‌زمان تعریف نشوند (توضیح کامل بالای هرکدام). */
    @media (max-width: 767px) {
      .hz-mobile-topbar { display: flex; }
      .hz-bottom-nav { display: grid; }
      .hz-drawer { display: flex; }
    }

    /* جای خالی معادل ارتفاع نوار پایین، فقط وقتی خودِ نوار در صفحه وجود دارد
       (صفحات waiting-room که page_header را بازنویسی می‌کنند نوار را ندارند) */
    @media (max-width: 767px) {
      body:has(.hz-bottom-nav) {
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
      }
    }

    /* در نمای موبایل فقط پیوند «مجوزها و منابع» در فوتر می‌ماند (الزام قانونی ذکر منبع)؛ فوتر کم‌ارتفاع‌تر است.
       جملهٔ «تمامی حقوق مادی و معنوی …» دیگر در فوتر نیست و ابتدای صفحهٔ «مجوزها و منابع» آمده است. */
    @media (max-width: 767px) {
      .hz-site-footer > div { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    }

    /* جملهٔ حقوق در ابتدای صفحهٔ «مجوزها و منابع»: با دو خط آبی بالا و پایین (همان نشانهٔ قبلی فوتر). */
    .hz-lic__rights {
      width: fit-content;
      max-width: 100%;
      margin: 0 auto 1.25rem;
      font-weight: 500;
      line-height: 1.9;
      color: #64748b;
      text-align: center;
    }
    .hz-lic__rights::before,
    .hz-lic__rights::after {
      content: "";
      display: block;
      height: 1px;
      background: rgba(26, 184, 232, 0.45);
    }
    .hz-lic__rights::before { margin-bottom: 0.6rem; }
    .hz-lic__rights::after { margin-top: 0.6rem; }

    /* پیوند «مجوزها و منابع» در فوتر: آبی با کنتراست کافی (≈ ۶٫۷:۱ روی سفید)، همیشه زیرخط‌دار
       (رنگ تنها حامل معنا نیست) و با حلقهٔ فوکوس واضح برای کاربران صفحه‌کلید. */
    .hz-legal { margin: 0.5rem 0 0; }
    .hz-legal__link,
    .hz-lic__link,
    .hz-lic__toc a {
      color: #1d4ed8;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .hz-legal__link:hover,
    .hz-lic__link:hover,
    .hz-lic__toc a:hover { color: #1e3a8a; }
    .hz-legal__link:focus-visible,
    .hz-lic__link:focus-visible,
    .hz-lic__toc a:focus-visible {
      outline: 3px solid #1d4ed8;
      outline-offset: 2px;
      border-radius: 2px;
    }

    /* صفحهٔ «مجوزها و منابع» (templates/licenses/page.html): متن مجوز کامل و بدون اسکرول افقی (pre-wrap). */
    .hz-lic { max-width: 48rem; color: #334155; line-height: 1.9; }
    .hz-lic__title { margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid #f1f5f9; font-size: 1.25rem; font-weight: 700; color: #1e293b; }
    .hz-lic__intro { margin: 0 0 1.25rem; font-size: 0.9375rem; }
    .hz-lic__toc { margin: 0 0 1.5rem; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; background: #f8fafc; }
    .hz-lic__toc-title { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 700; color: #1e293b; }
    .hz-lic__toc ol { margin: 0; padding: 0 1.25rem 0 0; list-style: decimal; }
    .hz-lic__item { margin: 0 0 1.75rem; padding-top: 1.25rem; border-top: 1px solid #e2e8f0; scroll-margin-top: 1rem; }
    .hz-lic__name { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 700; color: #0f172a; }
    .hz-lic__meta { margin: 0 0 0.75rem; font-size: 0.875rem; }
    .hz-lic__meta > div { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0.15rem 0; }
    .hz-lic__meta dt { flex: 0 0 9rem; font-weight: 700; color: #1e293b; }
    .hz-lic__meta dd { flex: 1 1 14rem; margin: 0; min-width: 0; overflow-wrap: anywhere; }
    .hz-lic__textlabel { margin: 0.5rem 0 0.35rem; font-size: 0.8125rem; font-weight: 700; color: #475569; }
    .hz-lic__text {
      margin: 0;
      padding: 0.85rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      background: #f8fafc;
      color: #1e293b;
      font: 0.8125rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      text-align: left;
    }
    .hz-lic__back { margin: 1.5rem 0 0; }

    /* بنر اطلاعیه‌ها (apps.announcements، templates/components/_announcements.html).
       در جریان عادی صفحه و بالای هدر است؛ نوار موبایل «sticky» است و پس از بنر می‌چسبد.
       عمداً کلاس‌های خود پروژه، نه Tailwind: Purge فقط کلاس‌های دیده‌شده در قالب‌ها را نگه می‌دارد. */
    .hz-announcements { display: flex; flex-direction: column; }
    .hz-announce {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.7rem 1rem;
      background: linear-gradient(90deg, #0e7490 0%, #0891b2 100%);
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }
    .hz-announce__body {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 1rem;
      flex: 1 1 auto;
      min-width: 0;
      justify-content: center;
    }
    .hz-announce__text { margin: 0; font-size: 0.92rem; line-height: 1.9; overflow-wrap: anywhere; text-align: center; }
    .hz-announce__button {
      flex-shrink: 0;
      padding: 0.3rem 0.95rem;
      border-radius: 999px;
      background: #fff;
      color: #0e7490 !important;
      font-size: 0.85rem;
      font-weight: 700;
      text-decoration: none !important;
    }
    .hz-announce__button:hover { background: #ecfeff; }
    .hz-announce__close {
      flex-shrink: 0;
      width: 1.9rem;
      height: 1.9rem;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.16);
      color: #fff;
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
    }
    .hz-announce__close:hover { background: rgba(255, 255, 255, 0.3); }

    /* Seite «تبدیل متن به گفتار» (templates/text_to_speech/page.html): eigene Klassen statt Tailwind (Purge).
       Der Text der Hörprobe bleibt unveraendert; nur Gliederung (Titel, Zwischenueberschriften, Listenpunkte). */
    .hz-tts-page { max-width: 64rem; margin: 0 auto; }
    .hz-tts-card { position: relative; display: grid; gap: 1rem; align-items: center; overflow: hidden; padding: 1.75rem 1.5rem; border-radius: 1.75rem; color: #fff;
      background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.16), transparent 42%), linear-gradient(135deg, #5b21b6 0%, #4338ca 55%, #1d4ed8 100%);
      box-shadow: 0 22px 44px -20px rgba(67, 56, 202, 0.7); }
    .hz-tts-card__art { display: flex; justify-content: center; }
    .hz-tts-card__art img { display: block; width: 100%; max-width: 17rem; height: auto; border-radius: 1.5rem; background: #e0e7ff; box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.55), 0 0 0 6px rgba(255,255,255,.18); }
    .hz-tts-card__title { margin: 0 0 0.75rem; font-size: 1.9rem; font-weight: 800; color: #fff; }
    .hz-tts-card__lead { margin: 0 0 1rem; font-size: 1.05rem; line-height: 2; color: #e0e7ff; }
    .hz-tts-card__note { margin: 0 0 1.25rem; padding: 0.8rem 1rem; border-radius: 1rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); font-size: 0.9rem; line-height: 2; color: #fff; }
    .hz-tts-card__btn { display: inline-block; padding: 0.85rem 2rem; border-radius: 999px; background: linear-gradient(135deg, #fde047, #f59e0b); color: #3b2300; font-size: 1rem; font-weight: 800; text-decoration: none; box-shadow: 0 10px 22px -8px rgba(0,0,0,.45); transition: transform .15s, box-shadow .15s; }
    .hz-tts-card__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(0,0,0,.5); }
    .hz-tts-card__soon { margin: 0; font-size: 0.9rem; line-height: 2; color: #e0e7ff; }
    @media (min-width: 768px) { .hz-tts-card { grid-template-columns: 1.25fr 1fr; padding: 2.5rem 3rem; gap: 2rem; } .hz-tts-card__title { font-size: 2.4rem; } }

    .hz-tts-sample { margin-top: 1.5rem; overflow: hidden; border-radius: 1.75rem; background: linear-gradient(180deg, #f5f3ff 0%, #eef2ff 100%); border: 1px solid #ddd6fe; box-shadow: 0 16px 34px -18px rgba(76, 29, 149, 0.35); }
    .hz-tts-sample__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding: 1.1rem 1.5rem; background: linear-gradient(135deg, #ede9fe, #e0e7ff); border-bottom: 1px solid #ddd6fe; }
    .hz-tts-sample__head { margin: 0; flex: 1 1 16rem; font-size: 1rem; font-weight: 800; color: #4c1d95; }
    .hz-tts-sample__audio { display: block; flex: 2 1 18rem; width: 100%; min-width: 0; }
    .hz-tts-sample__text { padding: 1.5rem; font-size: 0.92rem; line-height: 2.05; color: #475569; }
    .hz-tts-sample__text p { margin: 0 0 0.75rem; }
    .hz-tts-sample__text strong { color: #1e293b; font-weight: 700; }
    .hz-tts-sample__text .hz-tts-sample__title { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 800; line-height: 1.9; color: #4c1d95; }
    .hz-tts-sample__text .hz-tts-sample__intro { max-width: 52rem; margin-bottom: 1.25rem; font-size: 1rem; color: #334155; }
    .hz-tts-sample__text .hz-tts-sample__sub { margin: 0 0 0.75rem; padding-right: 0.7rem; border-right: 4px solid #7c3aed; font-size: 1rem; font-weight: 800; color: #1e293b; }
    .hz-tts-sample__text ul { margin: 0; padding: 0; list-style: none; }
    .hz-tts-sample__features { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: tts-feat; margin-bottom: 1.5rem !important; }
    .hz-tts-sample__features li { position: relative; counter-increment: tts-feat; padding: 3.1rem 1.1rem 1rem; border-radius: 1.1rem; background: #fff; border: 1px solid #ddd6fe; box-shadow: 0 8px 18px -12px rgba(76, 29, 149, 0.4); }
    .hz-tts-sample__features li::before { content: counter(tts-feat, persian); position: absolute; top: 0.85rem; right: 1.1rem; width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: linear-gradient(135deg, #8b5cf6, #4f46e5); color: #fff; font-weight: 800; font-size: 0.95rem; line-height: 1; }
    .hz-tts-sample__cols { display: grid; gap: 1rem; }
    @media (min-width: 768px) { .hz-tts-sample__cols { grid-template-columns: 1fr 1.25fr; align-items: start; } .hz-tts-sample__text { padding: 2rem 2.25rem; } }
    .hz-tts-sample__col { padding: 1.25rem 1.35rem; border-radius: 1.25rem; border: 1px solid; }
    .hz-tts-sample__col--warn { background: #fffbeb; border-color: #fcd34d; }
    .hz-tts-sample__col--warn strong { color: #92400e; }
    .hz-tts-sample__col--tip { background: #ecfdf5; border-color: #6ee7b7; }
    .hz-tts-sample__col--tip .hz-tts-sample__sub { border-right-color: #059669; }
    .hz-tts-sample__col li { position: relative; margin: 0 0 0.6rem; padding-right: 1.2rem; }
    .hz-tts-sample__col li:last-child { margin-bottom: 0; }
    .hz-tts-sample__col li::before { content: ""; position: absolute; right: 0; top: 0.8rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; }
    .hz-tts-sample__col--warn li::before { background: #f59e0b; }
    .hz-tts-sample__col--tip li::before { background: #10b981; }