/* ==================== FONTS ==================== */
    @font-face {
      font-family: "IRANSansXFaNum";
      src: url("../../font/IRANSansXFaNum-Regular.woff2") format("woff2"),
           url("../../font/IRANSansXFaNum-Regular.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "IRANSansXFaNum";
      src: url("../../font/IRANSansXFaNum-Bold.woff2") format("woff2"),
           url("../../font/IRANSansXFaNum-Bold.woff") format("woff");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    /* ==================== RESET & BASE ==================== */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    :root{
      color-scheme: light;
      --page-pad: clamp(0.5rem, 2vw, 1rem);
      --card-radius: 0.5rem;
      --control-radius: 0.625rem;
      --card-pad-desktop: clamp(1.35rem, 2.4vw, 2rem);
      --card-pad-mobile: 1rem;
      --primary: #146c63;
      --primary-strong: #0f5049;
      --secondary: #6f5038;
      --accent: #b45a3c;
      --bg-gradient-start: #f4f7f3;
      --bg-gradient-mid: #e9f0ee;
      --bg-gradient-end: #f8efe7;
      --surface-bg: rgba(255, 255, 255, 0.98);
      --surface-raised: #ffffff;
      --surface-subtle: #f5f8f6;
      --surface-warm: #fff6ee;
      --surface-border: #d7e3de;
      --surface-border-strong: #b7cbc4;
      --text-primary: #17231f;
      --text-muted: #52625d;
      --text-soft: #6f7a77;
      --focus-ring: #0b5fff;
      --danger: #a33131;
      --danger-bg: #fff2f2;
      --disabled-bg: #e0e6e3;
      --disabled-border: #c8d3ce;
      --disabled-text: #67736f;
      --disabled-next-bg: #d6e1dd;
      --disabled-next-border: #bfcdc7;
      --disabled-next-text: #52625d;
      --shadow: 0 1.1rem 2.8rem rgba(19, 44, 37, 0.14);
      --shadow-soft: 0 0.45rem 1rem rgba(19, 44, 37, 0.1);
    }

    html {
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      height: 100%;
      background: var(--bg-gradient-start);
    }

    body {
      font-family: "IRANSansXFaNum", "Segoe UI", Tahoma, sans-serif;
      background: linear-gradient(145deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 56%, var(--bg-gradient-end) 100%);
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: var(--page-pad);
      line-height: 1.8;
      color: var(--text-primary);
      touch-action: manipulation;

      /* ✅ جلوگیری از اسکرول کل صفحه */
      overflow: hidden;
      overscroll-behavior: none;
    }

    .skip-link {
      position: fixed;
      top: calc(0.75rem + env(safe-area-inset-top));
      right: calc(0.75rem + env(safe-area-inset-right));
      z-index: 1600;
      background: var(--text-primary);
      color: #fff;
      border-radius: var(--control-radius);
      padding: 0.55rem 0.8rem;
      font-size: 0.9rem;
      font-weight: 700;
      text-decoration: none;
      transform: translateY(-180%);
      transition: transform 0.18s ease-out;
    }

    .skip-link:focus-visible {
      transform: translateY(0);
      outline: 0.14rem solid var(--focus-ring);
      outline-offset: 0.16rem;
    }

    /* ==================== CONTAINER ==================== */
    .container {
      background: var(--surface-bg);
      border: 1px solid var(--surface-border);
      border-radius: var(--card-radius);
      box-shadow: var(--shadow);
      width: 100%;
      max-width: 68.75rem;

      /* ✅ همیشه داخل ویوپورت جا می‌گیرد (بدون اسکرول صفحه) */
      height: calc(100vh - (var(--page-pad) * 2));
      height: calc(100dvh - (var(--page-pad) * 2));
      max-height: calc(100vh - (var(--page-pad) * 2));
      max-height: calc(100dvh - (var(--page-pad) * 2));

      padding: var(--card-pad-desktop);
      overflow: hidden; /* فقط داخل هر صفحه (screen) در صورت نیاز اسکرول می‌شود */
      animation: fadeIn 0.35s ease-in;
      display: flex;
      flex-direction: column;
      backdrop-filter: blur(10px);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ==================== SCREENS ==================== */
    .screen {
      flex: 1 1 auto;
      min-height: 0; /* برای اسکرول داخلی صحیح */
      overflow: auto; /* اگر محتوای یک صفحه خیلی زیاد شد، فقط همان صفحه اسکرول می‌شود */
      padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
      scrollbar-gutter: stable;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    /* ==================== TYPOGRAPHY ==================== */
    h1 {
      color: var(--text-primary);
      text-align: center;
      margin-bottom: 0.65rem;
      font-size: clamp(1.85rem, 5vw, 2.75rem);
      font-weight: 700;
      line-height: 1.25;
      text-wrap: balance;
    }

    h2 {
      color: var(--primary);
      margin-bottom: 1rem;
      font-size: clamp(1.16rem, 3.6vw, 1.55rem);
      text-align: center;
      font-weight: 700;
      line-height: 1.45;
      text-wrap: balance;
    }

    h1:focus,
    h2:focus {
      outline: none;
    }

    .screen-kicker {
      width: fit-content;
      margin: 0 auto 0.7rem;
      padding: 0.28rem 0.72rem;
      border: 1px solid var(--surface-border-strong);
      border-radius: 999rem;
      color: var(--secondary);
      background: var(--surface-warm);
      font-size: clamp(0.78rem, 2.5vw, 0.9rem);
      font-weight: 700;
      line-height: 1.5;
    }

    /* ==================== INSTRUCTIONS ==================== */
    .instructions {
      color: var(--text-primary);
      text-align: right;
      font-weight: 400;
      max-width: 68rem;
      margin-inline: auto;
    }

    .instructions p { margin-bottom: 0.75rem; }
    .instructions ul {
      margin-right: 1.35rem;
      margin-bottom: 0.75rem;
      list-style-type: disc;
    }
    .instructions li { margin-bottom: 0.45rem; }
    .instructions li::marker { color: var(--accent); }
    .note-muted {
      margin-top: 0.75rem;
      color: var(--text-muted);
      font-size: 0.95rem;
    }
    .mt-sm { margin-top: 0.5rem; }
    .ready-note {
      margin-top: 1rem;
      color: var(--primary);
      font-weight: 700;
    }

    .example-box {
      background: var(--surface-subtle);
      border: 1px solid var(--surface-border);
      border-right: 0.25rem solid var(--accent);
      padding: 0.9rem 1rem;
      margin: 1rem 0;
      border-radius: var(--control-radius);
      box-shadow: 0 0.18rem 0.6rem rgba(19, 44, 37, 0.04);
    }

    /* ==================== SPLIT LAYOUT (DESKTOP: IMAGE + TEXT SIDE BY SIDE) ==================== */
    .split {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      align-items: start;
      margin-top: 0.5rem;
    }

    .split-media { text-align: center; }
    .split-content { min-width: 0; }

    /* ==================== BUTTONS ==================== */
    .button {
      background: var(--primary);
      color: #fff;
      border: 0.125rem solid var(--primary);
      padding: 0.84rem 2.2rem;
      font-size: clamp(1rem, 3vw, 1.125rem);
      border-radius: var(--control-radius);
      cursor: pointer;
      transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s ease-out, border-color 0.18s ease-out, color 0.18s ease-out;
      display: block;
      margin: 1.25rem auto 0;
      box-shadow: var(--shadow-soft);
      font-weight: 700;
      font-family: "IRANSansXFaNum", sans-serif;
      min-height: max(3rem, 44px);
      min-width: 10rem;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .button:hover {
      background: var(--primary-strong);
      border-color: var(--primary-strong);
      transform: translateY(-1px);
      box-shadow: 0 0.55rem 1.1rem rgba(20, 108, 99, 0.2);
    }
    .button-link {
      text-decoration: none;
      text-align: center;
    }
    .button:active { transform: translateY(1px); box-shadow: none; }
    .button:disabled {
      cursor: not-allowed;
      opacity: 1;
      background: var(--disabled-bg);
      border: 2px solid var(--disabled-border);
      color: var(--disabled-text);
      transform: none;
      box-shadow: none;
    }
    .button-secondary {
      background: #fff;
      color: var(--primary);
      border: 0.125rem solid var(--primary);
      box-shadow: none;
    }
    .button-secondary:hover,
    .button-secondary:focus-visible {
      background: #ecf5f2;
      color: var(--primary-strong);
      border-color: var(--primary-strong);
      box-shadow: 0 0.35rem 0.85rem rgba(20, 108, 99, 0.1);
    }
    .button:focus-visible,
    .nav-button:focus-visible,
    .option-button:focus-visible,
    .likert-button:focus-visible,
    .config-input:focus-visible {
      outline: 0.14rem solid var(--focus-ring);
      outline-offset: 0.15rem;
    }

    /* ==================== NAVIGATION BUTTONS ==================== */
    .nav-buttons {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
      margin-top: 1rem;
      align-items: center;
    }
    .nav-button {
      width: 100%;
      border: 0.125rem solid transparent;
      padding: 0.8rem 1.25rem;
      font-size: 1rem;
      border-radius: var(--control-radius);
      cursor: pointer;
      transition: transform 0.18s ease-out, background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, box-shadow 0.18s ease-out;
      font-weight: 700;
      font-family: "IRANSansXFaNum", sans-serif;
      min-height: max(2.9rem, 44px);
      -webkit-tap-highlight-color: transparent;
      white-space: nowrap;
      touch-action: manipulation;
    }

    .nav-button-prev {
      background: #fff;
      color: var(--primary);
      border-color: var(--surface-border-strong);
    }

    .nav-button-prev:hover,
    .nav-button-prev:focus-visible {
      background: #ecf5f2;
      color: var(--primary-strong);
      transform: translateY(-1px);
    }

    .nav-button-next {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
      box-shadow: var(--shadow-soft);
    }

    .nav-button-next:hover,
    .nav-button-next:focus-visible {
      background: var(--primary-strong);
      color: #fff;
      border-color: var(--primary-strong);
      transform: translateY(-1px);
      box-shadow: 0 0.35rem 1rem rgba(20, 108, 99, 0.2);
    }

    .nav-button:active { transform: translateY(1px); box-shadow: none; }

    .nav-button-prev:disabled {
      background: var(--disabled-bg);
      color: var(--disabled-text);
      border-color: var(--disabled-border);
      opacity: 1;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .nav-button-next:disabled {
      background: var(--disabled-next-bg);
      color: var(--disabled-next-text);
      border-color: var(--disabled-next-border);
      opacity: 1;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* ==================== UTILITY ==================== */
    .hidden { display: none !important; }
    .bot-field {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 1px !important;
      height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .validation-message {
      margin-top: 0.55rem;
      padding: 0.75rem 0.9rem;
      border-radius: var(--control-radius);
      border: 1px solid #efc6c6;
      border-right: 0.25rem solid var(--danger);
      background: var(--danger-bg);
      color: #7f2424;
      font-size: clamp(0.9rem, 2.8vw, 1rem);
      font-weight: 600;
      text-align: right;
    }
    .validation-message:focus {
      outline: 0.14rem solid #c62828;
      outline-offset: 0.15rem;
    }
    .practice-helper {
      margin-top: 0.55rem;
      padding: 0.6rem 0.8rem;
      border-radius: var(--control-radius);
      border: 1px solid var(--surface-border);
      border-right: 0.2rem solid var(--primary);
      background: #ecf5f2;
      color: var(--primary-strong);
      font-size: clamp(0.86rem, 2.6vw, 0.96rem);
      font-weight: 600;
      text-align: right;
      line-height: 1.55;
    }
    .emotion-help-hint {
      width: fit-content;
      max-width: min(100%, 42rem);
      margin: -0.35rem auto 0.65rem;
      padding: 0.38rem 0.7rem;
      border-radius: var(--control-radius);
      border: 1px solid var(--surface-border);
      background: var(--surface-subtle);
      color: var(--text-muted);
      font-size: clamp(0.78rem, 2.4vw, 0.9rem);
      font-weight: 600;
      line-height: 1.55;
      text-align: center;
    }
    .emotion-help-popover {
      position: fixed;
      z-index: 1250;
      width: min(19rem, calc(100vw - 1.25rem));
      max-height: min(15rem, calc(100vh - 1.25rem));
      overflow: auto;
      padding: 0.75rem 0.85rem;
      border-radius: var(--control-radius);
      border: 1px solid var(--surface-border-strong);
      background: rgba(255, 255, 255, 0.99);
      color: var(--text-primary);
      box-shadow: 0 0.65rem 1.5rem rgba(19, 44, 37, 0.2);
      direction: rtl;
      text-align: right;
      font-size: 0.92rem;
      font-weight: 600;
      line-height: 1.7;
      opacity: 0;
      transform: translateY(0.25rem) scale(0.98);
      transition: opacity 0.18s ease-out, transform 0.18s ease-out;
      pointer-events: none;
      overscroll-behavior: contain;
    }
    .emotion-help-popover.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .orientation-tip {
      display: none;
      margin: 0 0 0.6rem;
      padding: 0.5rem 0.7rem;
      border-radius: var(--control-radius);
      background: var(--surface-warm);
      border: 1px solid #ead5c4;
      color: #75513c;
      font-size: 0.86rem;
      font-weight: 600;
      text-align: center;
      line-height: 1.5;
    }
    @media (max-width: 399px) {
      #test-screen .orientation-tip.orientation-tip-warning,
      #practice-screen .orientation-tip.orientation-tip-warning {
        background: #fff1f1;
        border-color: #ef9a9a;
        color: #b71c1c;
        font-weight: 700;
      }
    }
    .image-load-error {
      margin: 0.8rem auto 0;
      padding: 0.9rem;
      max-width: 34rem;
      border-radius: var(--control-radius);
      border: 1px solid #ef9a9a;
      background: var(--danger-bg);
      color: #7f2424;
      text-align: right;
    }
    .image-load-error-message {
      margin: 0;
      font-weight: 700;
      line-height: 1.6;
    }
    .image-load-error-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.55rem;
      margin-top: 0.8rem;
    }
    .image-error-action-button {
      width: 100%;
      min-width: 0;
      margin: 0;
      min-height: max(2.9rem, 44px);
      border-radius: var(--control-radius);
      padding-inline: 0.65rem;
      font-size: 0.94rem;
    }
    .app-notice {
      position: fixed;
      left: 50%;
      bottom: calc(0.95rem + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      z-index: 1200;
      width: min(92vw, 34rem);
      padding: 0.72rem 0.9rem;
      border-radius: var(--control-radius);
      background: #1f2937;
      color: #fff;
      text-align: center;
      font-size: 0.9rem;
      font-weight: 600;
      box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.26);
    }
    .app-notice.success { background: #1f7a43; }
    .app-modal {
      position: fixed;
      inset: 0;
      z-index: 1300;
      background: rgba(15, 23, 42, 0.58);
      display: grid;
      place-items: center;
      padding: 1rem;
      overscroll-behavior: contain;
    }
    .app-modal-card {
      width: min(94vw, 28rem);
      background: var(--surface-bg);
      border: 1px solid var(--surface-border);
      border-radius: var(--card-radius);
      padding: 1rem;
      box-shadow: 0 0.9rem 2rem rgba(15, 23, 42, 0.22);
      text-align: right;
    }
    .app-modal-title {
      margin: 0;
      color: var(--text-primary);
      font-size: 1.15rem;
      font-weight: 700;
    }
    .app-modal-message {
      margin-top: 0.65rem;
      color: var(--text-primary);
      font-size: 0.95rem;
      line-height: 1.7;
    }
    .app-modal-progress {
      margin-top: 0.35rem;
      color: var(--text-muted);
      font-size: 0.87rem;
      font-weight: 700;
    }
    .app-modal-actions {
      margin-top: 0.95rem;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.6rem;
    }
    .app-modal-actions .button {
      margin: 0;
      width: 100%;
      min-width: 0;
      min-height: max(2.9rem, 44px);
      border-radius: var(--control-radius);
      padding-inline: 0.7rem;
      font-size: 0.95rem;
    }
    .modal-background-inert #app-root,
    .modal-background-inert #timer,
    .modal-background-inert #app-notice {
      pointer-events: none;
      user-select: none;
    }

    /* ==================== QUESTION LAYOUT ==================== */
    .question-container {
      text-align: center;
      width: 100%;
    }

    .progress-bar {
      background: #dce6e1;
      height: 0.625rem;
      border-radius: 0.313rem;
      margin-bottom: 1rem;
      overflow: hidden;
    }

    .progress-fill {
      background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
      width: 0;
      height: 100%;
      transition: width 0.3s ease;
      border-radius: 0.313rem;
    }

    .question-number {
      color: var(--text-muted);
      font-size: clamp(1rem, 3vw, 1.125rem);
      margin-bottom: 0.75rem;
      text-align: center;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    /* ==================== IMAGES ==================== */
    .test-image {
      width: 100%;
      max-width: 100%;
      height: auto;
      aspect-ratio: 602 / 352;
      max-height: 46vh; /* ✅ کنترل ارتفاع برای جلوگیری از اسکرول در دسکتاپ */
      object-fit: contain;
      margin: 0.75rem auto 0;
      border: 1px solid var(--surface-border);
      border-radius: var(--control-radius);
      display: block;
      background: var(--surface-raised);
      box-shadow: 0 0.45rem 1rem rgba(19, 44, 37, 0.08);
    }

    .practice-sample-image {
      aspect-ratio: 588 / 425;
    }

    .split-media .test-image {
      aspect-ratio: 587 / 429;
      background: var(--surface-subtle);
    }

    .question-text {
      font-size: clamp(1.05rem, 3.2vw, 1.35rem);
      color: var(--text-primary);
      margin: 1rem 0;
      font-weight: 700;
      text-align: center;
      line-height: 1.55;
      text-wrap: balance;
    }

    /* ==================== OPTIONS (2x2) ==================== */
    .options-container {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ جلوگیری از بیرون‌زدگی */
      gap: 0.75rem;
      margin: 0 auto;
      max-width: 50rem;
      direction: rtl;
      width: 100%;
    }

    .option-button {
      width: 100%;
      min-width: 0; /* ✅ مهم برای جلوگیری از overflow در grid */
      background: #fff;
      border: 0.125rem solid var(--surface-border-strong);
      padding: 1rem;
      font-size: clamp(0.98rem, 3.2vw, 1.1rem);
      border-radius: var(--control-radius);
      cursor: pointer;
      transition: transform 0.18s ease-out, background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, box-shadow 0.18s ease-out;
      color: var(--text-primary);
      font-family: "IRANSansXFaNum", sans-serif;
      font-weight: 700;
      min-height: max(3.9rem, 44px);

      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;

      /* ✅ متن‌های طولانی داخل دکمه‌ها نترکند */
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;

      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .option-button:hover {
      background: #ecf5f2;
      border-color: var(--primary);
      color: var(--primary-strong);
      transform: translateY(-1px);
      box-shadow: 0 0.35rem 0.85rem rgba(20, 108, 99, 0.1);
    }
    .option-button:active { transform: translateY(1px); box-shadow: none; }

    .option-button.selected {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary-strong);
      box-shadow: inset 0 0 0 0.08rem rgba(255, 255, 255, 0.36), 0 0.35rem 0.85rem rgba(20, 108, 99, 0.18);
    }

    /* ==================== LIKERT (✅ بدون بیرون‌زدگی روی موبایل) ==================== */
    .likert-scale {
      display: grid;
      grid-template-columns: repeat(9, minmax(0, 1fr)); /* دسکتاپ: ۹تایی کنار هم */
      gap: clamp(0.35rem, 1vw, 0.75rem);
      margin: 0 auto;
      max-width: 50rem;
      direction: ltr;
      width: 100%;
    }

    .likert-button {
      width: 100%;
      min-width: 0; /* ✅ جلوگیری از overflow */
      background: #fff;
      border: 0.125rem solid var(--surface-border-strong);
      padding: 0.85rem 0.25rem;
      font-size: clamp(1.08rem, 3.6vw, 1.24rem);
      border-radius: var(--control-radius);
      cursor: pointer;
      transition: transform 0.18s ease-out, background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, box-shadow 0.18s ease-out;
      min-height: max(3.4rem, 44px);
      font-family: "IRANSansXFaNum", sans-serif;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      font-variant-numeric: tabular-nums;
    }
    .likert-button:hover {
      background: #ecf5f2;
      border-color: var(--primary);
      color: var(--primary-strong);
      transform: translateY(-1px);
      box-shadow: 0 0.35rem 0.85rem rgba(20, 108, 99, 0.1);
    }
    .likert-button:active { transform: translateY(1px); box-shadow: none; }

    .likert-button.selected {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary-strong);
      box-shadow: inset 0 0 0 0.08rem rgba(255, 255, 255, 0.36), 0 0.35rem 0.85rem rgba(20, 108, 99, 0.18);
    }

    .likert-labels {
      display: grid;
      grid-template-columns: repeat(9, minmax(0, 1fr));
      margin: 0.6rem auto 0;
      color: var(--text-soft);
      font-size: clamp(0.85rem, 2.4vw, 1rem);
      width: 100%;
      max-width: 50rem;
      direction: ltr;
      gap: clamp(0.35rem, 1vw, 0.75rem);
    }
    .likert-labels span {
      text-align: center;
      font-weight: 600;
    }
    .likert-label-1 { grid-column: 1; }
    .likert-label-5 { grid-column: 5; }
    .likert-label-9 { grid-column: 9; }

    /* ==================== RESULTS ==================== */
    .results-container {
      text-align: right;
      display: grid;
      gap: 0.75rem;
      max-width: 52rem;
      margin-inline: auto;
    }
    .completion-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: safe center;
      text-align: center;
    }
    .completion-image {
      display: block;
      width: min(100%, 37rem);
      max-height: min(50vh, 21rem);
      height: auto;
      object-fit: contain;
      margin: 0 auto 0.5rem;
      border-radius: 1rem;
    }
    .completion-screen h1,
    .completion-screen h2 {
      color: var(--primary-strong);
      margin-bottom: 1rem;
    }
    .completion-screen .results-container {
      width: min(100%, 34rem);
      justify-items: center;
    }
    .completion-save-section {
      width: 100%;
    }
    .completion-next {
      width: fit-content;
      margin: 0;
    }
    .result-section {
      background: var(--surface-subtle);
      padding: 1rem;
      border-radius: var(--control-radius);
      margin: 0;
      border: 1px solid var(--surface-border);
      border-right: 0.25rem solid var(--primary);
    }
    /* ==================== IRI QUESTIONNAIRE ==================== */
    .iri-page .container {
      max-width: 74rem;
    }
    .iri-container {
      align-items: stretch;
    }
    .iri-screen h1 {
      margin-bottom: 0.45rem;
    }
    .iri-start-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: center;
      align-items: center;
      margin-top: 1.25rem;
    }
    .iri-start-actions .button {
      margin: 0;
    }
    .iri-form-header {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .iri-form-header h1 {
      text-align: right;
    }
    .iri-form-header .screen-kicker {
      margin-inline: 0;
    }
    .iri-progress {
      flex: 0 0 auto;
      min-width: 8.5rem;
      padding: 0.7rem 0.9rem;
      border: 1px solid var(--surface-border);
      border-radius: var(--control-radius);
      background: var(--surface-subtle);
      color: var(--text-muted);
      text-align: center;
      font-size: 0.92rem;
      line-height: 1.5;
    }
    .iri-progress strong,
    .iri-progress span:first-child {
      display: block;
      color: var(--primary);
      font-size: 1.12rem;
      font-weight: 700;
    }
    .iri-question-list {
      display: grid;
      gap: 0.8rem;
    }
    .iri-question {
      border: 1px solid var(--surface-border);
      border-right: 0.25rem solid var(--primary);
      border-radius: var(--control-radius);
      padding: 1rem;
      background: var(--surface-raised);
      box-shadow: 0 0.18rem 0.7rem rgba(19, 44, 37, 0.04);
      transition: border-color 0.18s ease-out, background-color 0.18s ease-out, box-shadow 0.18s ease-out;
    }
    .iri-question.is-answered {
      border-right-color: var(--surface-border-strong);
    }
    .iri-question.is-missing {
      border-color: #efb4b4;
      border-right-color: var(--danger);
      background: #fff7f7;
      box-shadow: 0 0.35rem 1rem rgba(163, 49, 49, 0.1);
    }
    .iri-question legend {
      display: flex;
      gap: 0.65rem;
      align-items: start;
      color: var(--text-primary);
      font-weight: 700;
      line-height: 1.8;
      padding-inline: 0;
      margin-bottom: 0.45rem;
    }
    .iri-question-number {
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      font-size: 0.95rem;
      line-height: 1;
      transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, opacity 0.18s ease-out;
    }
    .iri-question.is-answered .iri-question-number {
      background: #eef2f0;
      border: 1px solid var(--surface-border-strong);
      color: var(--text-soft);
      opacity: 0.78;
    }
    .iri-question.is-missing .iri-question-number {
      background: var(--danger);
      border: 1px solid var(--danger);
      color: #fff;
      opacity: 1;
    }
    .iri-options {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0.45rem;
      margin-right: 2.65rem;
    }
    .iri-option {
      position: relative;
      min-height: 4.6rem;
      border: 1px solid var(--surface-border);
      border-radius: var(--control-radius);
      background: var(--surface-subtle);
      cursor: pointer;
      display: grid;
      place-items: center;
      gap: 0.1rem;
      padding: 0.52rem 0.35rem;
      text-align: center;
      transition: border-color 0.18s ease-out, background-color 0.18s ease-out, box-shadow 0.18s ease-out, transform 0.18s ease-out;
      -webkit-tap-highlight-color: transparent;
    }
    .iri-option:hover {
      border-color: var(--surface-border-strong);
      background: #eef5f2;
    }
    .iri-option input {
      position: absolute;
      opacity: 0;
      inset: 0;
      cursor: pointer;
    }
    .iri-option span {
      display: grid;
      place-items: center;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background: #fff;
      color: var(--primary);
      border: 1px solid var(--surface-border);
      font-weight: 700;
      line-height: 1;
    }
    .iri-option small {
      color: var(--text-muted);
      font-size: 0.76rem;
      line-height: 1.45;
    }
    .iri-option:has(input:focus-visible) {
      outline: 0.14rem solid var(--focus-ring);
      outline-offset: 0.12rem;
    }
    .iri-option:has(input:checked) {
      border-color: var(--primary);
      background: #e7f3ef;
      box-shadow: 0 0.3rem 0.8rem rgba(20, 108, 99, 0.12);
    }
    .iri-option:has(input:checked) span {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }
    .iri-option:has(input:checked) small {
      color: var(--text-primary);
      font-weight: 700;
    }
    .iri-submit-row {
      padding-bottom: 0.3rem;
    }
    .result-label {
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 0.25rem;
      font-size: clamp(1rem, 3vw, 1.1rem);
    }
    .result-value {
      font-size: clamp(0.95rem, 3vw, 1.1rem);
      color: var(--text-primary);
      line-height: 1.8;
      font-weight: 400;
      font-variant-numeric: tabular-nums;
    }
    .result-value.status-saving { color: #1f2937; }
    .result-value.status-success { color: #2e7d32; }
    .result-value.status-error { color: #c62828; }
    .result-value.status-pending { color: #b26a00; }
    .save-progress {
      margin-top: 0.6rem;
      display: flex;
      align-items: center;
      gap: 0.55rem;
      color: #4b5563;
      font-size: 0.92rem;
      font-weight: 600;
      line-height: 1.5;
    }
    .save-spinner {
      width: 1rem;
      height: 1rem;
      border: 0.14rem solid #cfe0db;
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      flex: 0 0 auto;
    }
    .save-next-step {
      margin-top: 0.65rem;
      color: #4b5563;
      font-size: 0.92rem;
      font-weight: 600;
      line-height: 1.6;
    }
    .retry-save-button {
      margin-top: 0.85rem;
      margin-inline: 0;
      min-width: auto;
      width: auto;
      padding-inline: 1.2rem;
    }

    /* ==================== TIMER ==================== */
    .timer {
      position: fixed;
      top: calc(var(--page-pad) + env(safe-area-inset-top));
      right: calc(var(--page-pad) + env(safe-area-inset-right));
      left: auto;
      background: rgba(255, 255, 255, 0.98);
      padding: 0.58rem 0.9rem;
      border: 1px solid var(--surface-border);
      border-radius: var(--control-radius);
      box-shadow: var(--shadow-soft);
      font-size: clamp(1rem, 3vw, 1.125rem);
      color: var(--primary);
      font-weight: 700;
      direction: ltr;
      z-index: 1000;
      font-variant-numeric: tabular-nums;
    }
    html[dir="ltr"] .timer {
      left: calc(var(--page-pad) + env(safe-area-inset-left));
      right: auto;
    }

    /* ==================== CONFIG ==================== */
    .config-section {
      margin-top: 1rem;
      padding: 1rem;
      background: var(--surface-subtle);
      border: 1px solid var(--surface-border);
      border-radius: var(--control-radius);
    }
    .config-label {
      display: block;
      margin-bottom: 0.5rem;
      color: #333;
      font-weight: 700;
      font-size: clamp(0.95rem, 3vw, 1rem);
    }
    .config-input {
      width: 100%;
      padding: 0.75rem;
      border: 0.125rem solid var(--surface-border-strong);
      border-radius: var(--control-radius);
      font-size: clamp(0.95rem, 3vw, 1rem);
      font-family: "IRANSansXFaNum", sans-serif;
      direction: ltr;
      transition: border-color 0.2s ease;
    }
    .config-input:focus { border-color: var(--primary); }

    /* ==================== TEST SCREEN LAYOUT ==================== */
    #test-screen {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      min-height: 0;
      overflow: hidden;
    }

    #practice-screen {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      min-height: 0;
      overflow: hidden;
    }

    #test-screen .question-container {
      min-height: 0;
      overflow: auto;
      padding-bottom: 0.5rem;
    }

    #practice-screen .question-container {
      min-height: 0;
      overflow: auto;
      padding-bottom: 0.5rem;
    }

    /* ✅ دکمه‌های قبلی/بعدی همیشه قابل مشاهده */
    #test-screen .nav-buttons {
      margin-top: 0;
      padding-top: 0.75rem;
      padding-bottom: calc(0.3rem + env(safe-area-inset-bottom));
      background: var(--surface-bg);
      border-top: 1px solid var(--surface-border);
      position: static;
    }

    #practice-screen .nav-buttons {
      margin-top: 0;
      padding-top: 0.75rem;
      padding-bottom: calc(0.3rem + env(safe-area-inset-bottom));
      background: var(--surface-bg);
      border-top: 1px solid var(--surface-border);
      position: static;
    }

    /* ==================== RESPONSIVE ==================== */
    @media (min-width: 1024px) {
      /* ✅ دسکتاپ: راهنما و تمرین دو ستونه برای حذف اسکرول */
      .split {
        grid-template-columns: 1.05fr 1.25fr;
        gap: 1.5rem;
      }

      .test-image {
        max-height: 44vh;
      }

      #test-screen .question-container,
      #practice-screen .question-container {
        display: block;
        overflow: auto;
      }

      #test-screen .test-image,
      #practice-screen .test-image {
        margin: 0.4rem auto 0;
        max-height: min(44vh, 19.25rem);
      }

      #test-screen #cognitive-question,
      #test-screen #emotional-question,
      #practice-screen #practice-cognitive,
      #practice-screen #practice-emotional {
        width: 100%;
      }

      #test-screen .question-text,
      #practice-screen .question-text {
        margin: 0.55rem 0;
        font-size: clamp(1rem, 1.1vw, 1.18rem);
        line-height: 1.4;
      }

      #test-screen .emotion-help-hint,
      #practice-screen .emotion-help-hint {
        margin: -0.2rem auto 0.45rem;
        padding: 0.28rem 0.58rem;
        font-size: clamp(0.72rem, 0.72vw, 0.82rem);
        line-height: 1.45;
      }

      #test-screen .options-container,
      #practice-screen .options-container {
        gap: 0.5rem;
      }

      #test-screen .option-button,
      #practice-screen .option-button {
        min-height: max(3.1rem, 44px);
        padding: 0.7rem 0.6rem;
        font-size: clamp(0.9rem, 0.95vw, 1.04rem);
      }

      #test-screen .likert-scale,
      #practice-screen .likert-scale {
        gap: 0.25rem;
      }

      #test-screen .likert-button,
      #practice-screen .likert-button {
        min-height: max(2.75rem, 44px);
        padding: 0.5rem 0.12rem;
        font-size: clamp(0.94rem, 1vw, 1.1rem);
      }

      #test-screen .likert-labels,
      #practice-screen .likert-labels {
        margin-top: 0.35rem;
        font-size: clamp(0.7rem, 0.72vw, 0.84rem);
        gap: 0.25rem;
      }
    }

    @media (min-width: 1024px) and (max-height: 820px) {
      #test-screen {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
      }

      #test-screen .progress-bar {
        height: 0.48rem;
        margin-bottom: 0.45rem;
      }

      #test-screen .question-number {
        margin-bottom: 0.38rem;
        font-size: 0.95rem;
      }

      #test-screen .question-container {
        overflow: hidden;
        display: grid;
        grid-template-rows: auto auto;
        align-content: start;
        padding-bottom: 0.35rem;
      }

      #test-screen .orientation-tip {
        margin-bottom: 0.35rem;
      }

      #test-screen .test-image {
        max-height: min(30vh, 13.5rem);
        margin-top: 0.2rem;
      }

      #test-screen .question-text {
        margin: 0.38rem 0 0.45rem;
        font-size: clamp(0.95rem, 1vw, 1.08rem);
        line-height: 1.32;
      }

      #test-screen .emotion-help-hint {
        margin: -0.25rem auto 0.35rem;
        padding: 0.24rem 0.5rem;
        font-size: 0.72rem;
        line-height: 1.35;
      }

      #test-screen .options-container {
        gap: 0.42rem;
      }

      #test-screen .option-button {
        min-height: 44px;
        padding: 0.45rem 0.55rem;
        font-size: clamp(0.88rem, 0.92vw, 0.98rem);
      }

      #test-screen .likert-scale {
        gap: 0.22rem;
      }

      #test-screen .likert-button {
        min-height: 44px;
        padding: 0.42rem 0.1rem;
        font-size: clamp(0.9rem, 0.95vw, 1rem);
      }

      #test-screen .likert-labels {
        margin-top: 0.25rem;
        font-size: 0.68rem;
        gap: 0.22rem;
      }

      #test-screen .nav-buttons {
        gap: 0.55rem;
        padding-top: 0.5rem;
        padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
      }

      #test-screen .nav-button {
        min-height: 44px;
        padding: 0.5rem 0.85rem;
        font-size: 0.94rem;
      }
    }

    @media (min-width: 560px) and (max-height: 900px) {
      #practice-screen {
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
      }

      #practice-screen h2 {
        margin-bottom: 0.45rem;
      }

      #practice-screen > .instructions {
        line-height: 1.55;
      }

      #practice-screen > .instructions p {
        margin-bottom: 0.35rem;
      }

      #test-screen .question-container,
      #practice-screen .question-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, auto) auto;
        gap: 0;
        align-items: start;
        align-content: start;
        overflow: hidden;
        padding-bottom: 0.25rem;
      }

      #test-screen .orientation-tip,
      #practice-screen .orientation-tip {
        grid-column: 1 / -1;
        margin: 0;
      }

      #test-screen .test-image,
      #practice-screen .test-image {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: min(100%, 58rem);
        max-height: min(40vh, 20rem);
        margin: 0 auto 0.85rem;
      }

      #test-screen #cognitive-question,
      #test-screen #emotional-question,
      #practice-screen #practice-cognitive,
      #practice-screen #practice-emotional {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        width: 100%;
        min-width: 0;
      }

      #test-screen .image-load-error {
        grid-column: 1 / -1;
      }

      #test-screen .question-text,
      #practice-screen .question-text {
        width: fit-content;
        max-width: min(100%, 42rem);
        margin: 0 auto 0.55rem;
        padding: 0.3rem 1rem 0.38rem;
        border: 1px solid var(--surface-border);
        border-radius: var(--control-radius);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 0.25rem 0.75rem rgba(19, 44, 37, 0.08);
        color: var(--text-primary);
        font-size: clamp(1rem, 1.05vw, 1.16rem);
        line-height: 1.3;
      }

      #test-screen .emotion-help-hint,
      #practice-screen .emotion-help-hint {
        margin: -0.35rem auto 0.42rem;
        padding: 0.24rem 0.55rem;
        font-size: 0.72rem;
        line-height: 1.35;
      }

      #test-screen .options-container,
      #practice-screen .options-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.48rem;
      }

      #test-screen .option-button,
      #practice-screen .option-button {
        min-height: 44px;
        padding: 0.48rem 0.55rem;
        font-size: clamp(0.9rem, 0.95vw, 1rem);
      }

      #test-screen .likert-scale,
      #practice-screen .likert-scale {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        max-width: 50rem;
        gap: 0.25rem;
      }

      #test-screen .likert-button,
      #practice-screen .likert-button {
        min-height: 44px;
        padding: 0.48rem 0.2rem;
        font-size: clamp(0.95rem, 1vw, 1.08rem);
      }

      #test-screen .likert-labels,
      #practice-screen .likert-labels {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        max-width: 50rem;
        margin-top: 0.25rem;
        gap: 0.25rem;
      }

      #test-screen .likert-label-1,
      #practice-screen .likert-label-1 { grid-column: 1; }
      #test-screen .likert-label-5,
      #practice-screen .likert-label-5 { grid-column: 5; }
      #test-screen .likert-label-9,
      #practice-screen .likert-label-9 { grid-column: 9; }

      #test-screen .nav-buttons,
      #practice-screen .nav-buttons {
        padding-top: 0.5rem;
        padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
      }

      #test-screen .nav-button,
      #practice-screen .nav-button {
        min-height: 44px;
        padding: 0.5rem 0.8rem;
      }
    }

    @media (max-width: 768px) {
      html { font-size: 15px; }

      body {
        align-items: stretch;
        overflow: auto;
        padding: 0;
        background: linear-gradient(145deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 56%, var(--bg-gradient-end) 100%);
      }

      .container {
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
        padding: var(--card-pad-mobile);
        border-radius: 0;
        box-shadow: none;
        background: var(--surface-bg);
      }

      .iri-page .container {
        min-height: 100dvh;
      }

      .iri-form-header {
        display: block;
      }

      .iri-progress {
        width: 100%;
        margin-top: 0.75rem;
      }

      .iri-question {
        padding: 0.85rem;
      }

      .iri-question legend {
        gap: 0.5rem;
      }

      .iri-options {
        margin-right: 0;
      }

      .iri-options {
        grid-template-columns: 1fr;
      }

      .iri-option {
        min-height: 3.35rem;
        grid-template-columns: 2.2rem 1fr;
        justify-items: start;
        text-align: right;
        padding: 0.5rem 0.65rem;
      }

      .iri-option small {
        font-size: 0.9rem;
      }

      .test-image {
        max-height: 38vh;
        border-radius: var(--control-radius);
      }

      #test-screen .test-image {
        max-height: min(30vh, 13rem);
        margin-top: 0.25rem;
      }

      #test-screen .question-text {
        margin: 0.5rem 0 0.55rem;
        line-height: 1.35;
      }

      #test-screen .emotion-help-hint {
        margin: -0.34rem auto 0.45rem;
        font-size: clamp(0.72rem, 2.35vw, 0.82rem);
      }

      #test-screen .options-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
      }

      #test-screen .option-button {
        min-height: 44px;
        padding: 0.5rem 0.45rem;
        font-size: clamp(0.88rem, 2.8vw, 1rem);
      }

      .split { gap: 0.75rem; }

      .options-container {
        grid-template-columns: 1fr;
        gap: 0.55rem;
      }

      .option-button {
        padding: 0.85rem;
        min-height: max(3.45rem, 44px);
      }

      .likert-scale {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: clamp(0.18rem, 0.9vw, 0.3rem);
        max-width: none;
        width: calc(100% + 0.2rem);
        margin-inline: -0.1rem;
        padding-inline: 0.1rem;
        box-sizing: border-box;
      }

      .likert-button {
        min-height: max(clamp(2.75rem, 8.8vw, 3.05rem), 44px);
        font-size: clamp(1.02rem, 3.7vw, 1.14rem);
        padding: 0.5rem 0.12rem;
      }

      .likert-labels {
        display: grid;
        grid-template-columns: repeat(9, minmax(0, 1fr));
        max-width: none;
        width: calc(100% + 0.2rem);
        margin-inline: -0.1rem;
        padding-inline: 0.1rem;
        box-sizing: border-box;
        gap: clamp(0.18rem, 0.9vw, 0.3rem);
        font-size: clamp(0.7rem, 2.7vw, 0.8rem);
      }
      .likert-label-1 { grid-column: 1; }
      .likert-label-5 { grid-column: 5; }
      .likert-label-9 { grid-column: 9; }

      .timer { padding: 0.6rem 1rem; font-size: 0.95rem; }
      .button { width: min(100%, 22rem); }

      .image-load-error-actions {
        grid-template-columns: 1fr;
      }

      #test-screen .nav-buttons,
      #practice-screen .nav-buttons {
        position: sticky;
        bottom: 0;
      }
    }

    /* ✅ موبایل‌های کوچک */
    @media (max-width: 480px) {
      html { font-size: 14px; }

      .container { padding: 0.9rem; }

      .question-number { margin-bottom: 0.6rem; }

      .likert-button {
        min-height: max(2.8rem, 44px);
        font-size: 0.98rem;
        padding: 0.45rem 0.06rem;
      }

      .likert-scale { gap: 0.16rem; }
      .likert-labels { font-size: 0.66rem; gap: 0.16rem; }

      .question-text { margin: 0.8rem 0; }
      .test-image { max-height: 34vh; }
      .orientation-tip { font-size: 0.79rem; }

      .nav-button { font-size: 0.95rem; }
    }

    @media (max-width: 600px) and (orientation: portrait) {
      #test-screen .orientation-tip,
      #practice-screen .orientation-tip {
        display: block;
      }
    }

    /* ✅ خیلی کوچک: دکمه‌های ناوبری زیر هم (نه بیرون صفحه) */
    @media (max-width: 390px) {
      .nav-buttons { grid-template-columns: 1fr; }
      .nav-button { min-height: max(3rem, 44px); }
    }

    /* ✅ تبلت‌ها (عمودی و افقی) */
    @media (min-width: 769px) and (max-width: 1023px) {
      .container {
        max-width: 100%;
        padding: 1.4rem;
      }
      .split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 1.1rem;
      }
      .test-image { max-height: 46vh; }
      #test-screen .question-container,
      #practice-screen .question-container {
        display: block;
      }
      .option-button { min-height: max(3.6rem, 44px); }
      .likert-button { min-height: max(3.1rem, 44px); }
      .likert-labels { font-size: 0.84rem; }
    }

    /* ✅ اگر ارتفاع صفحه کم بود (لپ‌تاپ 768px و کمتر): فشرده‌تر برای حذف اسکرول */
    @media (max-height: 760px) {
      .container { padding: 1.25rem; }
      .test-image { max-height: 42vh; }
      .instructions p { margin-bottom: 0.6rem; }
      .instructions li { margin-bottom: 0.35rem; }
      .button { margin-top: 1rem; }
    }

    /* ✅ گوشی در حالت افقی: بدون نیاز به اسکرول در صفحه سوال */
    @media (max-height: 500px) and (max-width: 932px) and (orientation: landscape) {
      :root { --page-pad: 0.35rem; }

      .container {
        padding: 0.6rem 0.75rem;
        border-radius: 0.7rem;
      }

      #test-screen,
      #practice-screen {
        overflow: hidden;
      }

      #test-screen .progress-bar {
        height: 0.45rem;
        margin-bottom: 0.45rem;
      }

      #test-screen .question-number {
        margin-bottom: 0.4rem;
        font-size: 0.95rem;
      }

      #test-screen .question-container,
      #practice-screen .question-container {
        display: block;
        overflow: auto;
      }

      #test-screen .test-image,
      #practice-screen .test-image {
        margin: 0.2rem auto 0;
        max-height: min(42vh, 12rem);
      }

      #test-screen #cognitive-question,
      #test-screen #emotional-question,
      #practice-screen #practice-cognitive,
      #practice-screen #practice-emotional {
        width: 100%;
      }

      #test-screen .question-text,
      #practice-screen .question-text {
        margin: 0 0 0.5rem;
        font-size: clamp(0.95rem, 1.8vw, 1.05rem);
        line-height: 1.35;
      }

      #test-screen .emotion-help-hint,
      #practice-screen .emotion-help-hint {
        margin: -0.32rem auto 0.4rem;
        padding: 0.22rem 0.5rem;
        font-size: 0.7rem;
        line-height: 1.3;
      }

      #test-screen .options-container,
      #practice-screen .options-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
      }

      #test-screen .option-button,
      #practice-screen .option-button {
        min-height: max(2.45rem, 44px);
        padding: 0.5rem 0.4rem;
        font-size: 0.9rem;
      }

      #test-screen .likert-scale,
      #practice-screen .likert-scale {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        max-width: 100%;
        gap: 0.2rem;
      }

      #test-screen .likert-button,
      #practice-screen .likert-button {
        min-height: max(2.6rem, 44px);
        padding: 0.45rem 0.1rem;
        font-size: 1rem;
      }

      #test-screen .likert-labels,
      #practice-screen .likert-labels {
        display: grid;
        grid-template-columns: repeat(9, minmax(0, 1fr));
        margin-top: 0.35rem;
        font-size: 0.68rem;
        max-width: 100%;
        gap: 0.2rem;
      }
      #test-screen .likert-label-1,
      #practice-screen .likert-label-1 { grid-column: 1; }
      #test-screen .likert-label-5,
      #practice-screen .likert-label-5 { grid-column: 5; }
      #test-screen .likert-label-9,
      #practice-screen .likert-label-9 { grid-column: 9; }

      #test-screen .nav-buttons,
      #practice-screen .nav-buttons {
        gap: 0.45rem;
        padding-top: 0.45rem;
        padding-bottom: calc(0.2rem + env(safe-area-inset-bottom));
      }

      #test-screen .nav-button,
      #practice-screen .nav-button {
        min-height: max(2.65rem, 44px);
        padding: 0.55rem 0.8rem;
        font-size: 0.9rem;
      }
    }

    /* ==================== ACCESSIBILITY ==================== */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .emotion-help-popover {
        transform: none !important;
      }
    }