/* static/adaptive.css */

/* ======================================== */
/* АДАПТИВНЫЙ ДИЗАЙН ДЛЯ РАЗНЫХ ЭКРАНОВ */
/* ======================================== */

/* ===== ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (до 320px) ===== */
@media (max-width: 320px) {
  :root {
    --base-font-size: 13px;
    --base-padding: 12px;
    --base-margin: 8px;
    --base-border-radius: 8px;
    --button-height: 44px;
    --container-max-width: 100%;
  }

  body {
    padding: 8px;
  }

  .app-container-designed {
    min-height: calc(100vh - 16px);
    /* border-radius и max-width уже используют переменные из :root */
  }

  .view-header-designed {
    padding: 12px 15px;
  }

  .view-header-designed h1,
  .view-header-designed h2 {
    font-size: 1.1em; /* Будет масштабироваться с --global-font-scale из base.css */
  }

  .view-block > main {
    padding: 15px;
  }

  .btn-designed {
    padding: 10px 12px;
    /* font-size, min-height, border-radius уже используют переменные */
  }

  /* Специфичные для этого разрешения адаптации компонентов и представлений */
  .question-prefix {
      font-size: calc(1.2em * var(--global-font-scale, 1));
      margin-right: 6px;
  }
}

/* ===== МАЛЕНЬКИЕ ЭКРАНЫ (321px - 375px) ===== */
@media (min-width: 321px) and (max-width: 375px) {
  :root {
    --base-font-size: 14px;
    --base-padding: 16px;
    --base-margin: 10px;
    --base-border-radius: 10px;
    --button-height: 46px;
    --container-max-width: 100%;
  }

  body {
    padding: 12px;
  }

  .app-container-designed {
    min-height: calc(100vh - 24px);
  }

  .view-header-designed {
    padding: 14px 16px;
  }

  .view-header-designed h1,
  .view-header-designed h2 {
    font-size: 1.15em;
  }

  .view-block > main {
    padding: 16px;
  }

  .btn-designed {
    padding: 11px 14px;
  }

  /* Мобильные стили для контейнера кнопки "Перейти" */
  .go-to-question-container-designed {
    gap: 6px;
  }
  .go-to-question-container-designed input[type="number"] {
      padding: 10px 6px;
      font-size: calc(12px * var(--global-font-scale));
      min-width: 50px;
  }
  .go-to-question-container-designed button {
      min-width: 85px;
      max-width: 100px;
      padding: 12px 8px;
      font-size: calc(13px * var(--global-font-scale));
  }

  /* Мобильные стили для результатов экзамена */
  .result-buttons-container {
      gap: 8px;
      margin: 12px 0 8px 0;
  }

  .btn-result-action {
      padding: 6px 10px;
      font-size: calc(12px * var(--global-font-scale));
  }

  .all-answers-container, .help-container {
      padding: 10px;
      margin-top: 10px;
  }

  .all-answers-container h4, .help-container h4 {
      font-size: calc(13px * var(--global-font-scale));
      margin-bottom: 6px;
  }

  .all-answers-list .answer-item {
      padding: 6px 10px;
      font-size: calc(12px * var(--global-font-scale));
      margin: 3px 0;
  }

  .help-container p {
      font-size: calc(12px * var(--global-font-scale));
  }

  /* Адаптивные формы и инпуты */
  .go-to-question-container-designed input[type="number"] { /* Повтор, но уточнение для этого брекпоинта */
    padding: 8px 6px;
    font-size: calc(var(--base-font-size) * 0.85 * var(--global-font-scale)); /* base-font-size здесь 14px */
    min-width: 45px;
  }

  .go-to-question-container-designed button { /* Повтор */
    padding: 8px 6px;
    font-size: calc(var(--base-font-size) * 0.85 * var(--global-font-scale));
    max-width: 85px;
  }

  .practice-errors-container-designed input[type="number"] {
    width: 60px;
    padding: 8px 6px;
    font-size: calc(var(--base-font-size) * 0.85 * var(--global-font-scale));
  }

  .practice-errors-container-designed button {
    padding: 8px 6px;
    font-size: calc(var(--base-font-size) * 0.85 * var(--global-font-scale));
  }

  /* Адаптивные модальные окна */
  .custom-modal {
    max-width: 280px;
    padding: calc(var(--base-padding) * 0.8);
  }

  .custom-modal-title {
    font-size: calc(var(--base-font-size) * 1.0 * var(--global-font-scale));
  }

  .custom-modal-message {
    font-size: calc(var(--base-font-size) * 0.85 * var(--global-font-scale));
  }

  .custom-modal-btn {
    padding: 8px 12px;
    font-size: calc(var(--base-font-size) * 0.85 * var(--global-font-scale));
  }

  /* Адаптивный таймер */
  .exam-timer-container {
    margin-bottom: 12px;
  }

  .timer-display-designed {
    padding: 6px 12px;
    font-size: calc(var(--base-font-size) * 0.8 * var(--global-font-scale));
    border-radius: 15px;
  }

  /* Адаптивные результаты экзамена */
  .exam-score-designed {
    font-size: calc(var(--base-font-size) * 1.1 * var(--global-font-scale));
  }

  .exam-time-spent-designed {
    font-size: calc(var(--base-font-size) * 0.8 * var(--global-font-scale));
    margin-bottom: 12px;
  }

  .exam-detailed-results-designed .result-item {
    padding: 8px 10px;
    margin-bottom: 8px;
  }

  .exam-detailed-results-designed .result-question-text {
    font-size: calc(var(--base-font-size) * 0.9 * var(--global-font-scale));
    margin-bottom: 6px;
  }

  .exam-detailed-results-designed .result-answer {
    font-size: calc(var(--base-font-size) * 0.75 * var(--global-font-scale));
    padding-left: 15px;
  }

  .result-buttons-container { /* Повтор, но специфично */
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 10px 0 6px 0;
  }

  .btn-result-action { /* Повтор, но специфично */
    padding: 6px 10px;
    font-size: calc(var(--base-font-size) * 0.8 * var(--global-font-scale));
  }
}

/* ===== СРЕДНИЕ ЭКРАНЫ (376px - 428px) ===== */
@media (min-width: 376px) and (max-width: 428px) {
  :root {
    /* --base-font-size: 15px; --base-padding: 18px; и т.д. уже в base.css по умолчанию */
    --container-max-width: 400px; /* Может быть специфично для этого диапазона */
  }
  body {
    padding: 16px;
  }
  .app-container-designed {
    min-height: calc(100vh - 32px);
  }
  .view-header-designed {
    padding: 16px 18px;
  }
  .view-header-designed h1, .view-header-designed h2 {
    font-size: 1.2em;
  }
  .view-block > main {
    padding: 18px;
  }
  .btn-designed {
    padding: 12px 16px;
  }

  /* Адаптивные формы и инпуты для этого диапазона */
  .go-to-question-container-designed {
    gap: calc(var(--base-margin) * 0.6);
  }
  .go-to-question-container-designed input[type="number"] {
    padding: calc(var(--base-padding) * 0.5) calc(var(--base-padding) * 0.4);
    font-size: calc(var(--base-font-size) * 0.9 * var(--global-font-scale));
    min-width: 60px;
  }
  .go-to-question-container-designed button {
    padding: calc(var(--base-padding) * 0.5) calc(var(--base-padding) * 0.4);
    font-size: calc(var(--base-font-size) * 0.9 * var(--global-font-scale));
    min-width: 100px;
    max-width: 120px;
  }
  .practice-errors-container-designed input[type="number"] {
    width: 80px;
    padding: calc(var(--base-padding) * 0.5) calc(var(--base-padding) * 0.4);
    font-size: calc(var(--base-font-size) * 0.9 * var(--global-font-scale));
  }
  .practice-errors-container-designed button {
    padding: calc(var(--base-padding) * 0.5) calc(var(--base-padding) * 0.4);
    font-size: calc(var(--base-font-size) * 0.9 * var(--global-font-scale));
  }
}

/* ===== ОБЩИЕ МОБИЛЬНЫЕ СТИЛИ (до 400px - пересекается с предыдущими, но может содержать общие правила) ===== */
@media (max-width: 400px) {
  body { padding: 10px; } /* Это может конфликтовать с более специфичными выше, нужно проверить */
  .app-container-designed { min-height: calc(100vh - 20px); border-radius: 16px; }
  .view-header-designed { padding: 15px; }
  .view-block > main { padding: 15px; }
  .btn-designed { padding: 12px 15px; /*font-size: 14px;*/ }
  .question-text-designed { font-size: calc(0.95em * var(--global-font-scale)); }
  .answers-grid-designed li button { padding: 12px; font-size: calc(0.85em * var(--global-font-scale)); }

  .navigation-footer-designed { gap: 8px; }
  .question-counter-nav-designed { padding: 8px 12px; font-size: calc(0.85em * var(--global-font-scale)); min-width: 55px;}
  .btn-nav-designed { padding: 10px 14px; font-size: calc(13px * var(--global-font-scale)); }
}

/* ===== АДАПТИВНАЯ СТАТИСТИКА (до 480px) ===== */
@media (max-width: 480px) {
  .stats-grid-designed {
    grid-template-columns: 1fr;
    gap: calc(var(--base-margin) * 0.5);
  }
  .stat-item-designed {
    padding: 6px 10px;
  }
  .section-stat-summary-designed {
    flex-direction: column;
    gap: 4px;
  }
  .statistics-header-designed {
    flex-direction: column;
    align-items: stretch;
  }
  .overview-stats-designed {
    padding: 12px;
  }
  .overview-item-designed {
    padding: 6px 0;
  }
  .overview-label-designed {
    font-size: calc(13px * var(--global-font-scale));
  }
  .overview-value-designed {
    font-size: calc(15px * var(--global-font-scale));
  }
  .overview-accuracy-value-designed {
    font-size: calc(16px * var(--global-font-scale));
  }
  .question-metrics-designed {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    gap: calc(var(--base-margin) * 0.6); /* Добавлено из более позднего блока */
  }
  .stat-chip-designed {
    padding: 6px 4px;
  }
  .stat-number-designed {
    font-size: calc(14px * var(--global-font-scale));
    font-size: calc(var(--base-font-size) * 0.9 * var(--global-font-scale)); /* Добавлено из более позднего блока */
  }
  .stat-label-designed {
    font-size: calc(11px * var(--global-font-scale));
  }
}

/* ===== БОЛЬШИЕ ЭКРАНЫ (429px - 768px) и ПЛАНШЕТЫ ===== */
@media (min-width: 429px) and (max-width: 768px) {
  :root {
    --base-font-size: 16px;
    --base-padding: 22px;
    --base-margin: 15px;
    --base-border-radius: 14px;
    --button-height: 52px;
    --container-max-width: 450px;
  }
  body { padding: 20px; }
  .app-container-designed { min-height: calc(100vh - 40px); }
  .view-header-designed { padding: 18px 22px; }
  .view-header-designed h1, .view-header-designed h2 { font-size: 1.3em; }
  .view-block > main { padding: 22px; }
  .btn-designed { padding: 14px 18px; /* font-size: 16px; */ }

  /* Адаптивные модальные окна */
  .custom-modal {
    max-width: 350px;
    padding: var(--base-padding);
  }
  .custom-modal-title {
    font-size: calc(var(--base-font-size) * 1.15 * var(--global-font-scale));
  }
  .custom-modal-message {
    font-size: calc(var(--base-font-size) * 0.95 * var(--global-font-scale));
  }
  .custom-modal-btn {
    padding: calc(var(--base-padding) * 0.6) calc(var(--base-padding) * 0.8);
    font-size: calc(var(--base-font-size) * 0.95 * var(--global-font-scale));
  }
  .image-modal-content {
    width: 95vw;
    height: 95vh;
  }
  .zoom-btn {
    width: 45px;
    height: 45px;
    font-size: calc(18px * var(--global-font-scale));
  }
  .zoom-btn-close {
    font-size: calc(18px * var(--global-font-scale)) !important;
  }

  /* Адаптивный таймер */
  .exam-timer-container {
    margin-bottom: calc(var(--base-margin) * 1.2);
  }
  .timer-display-designed {
    padding: calc(var(--base-padding) * 0.4) calc(var(--base-padding) * 0.8);
    font-size: calc(var(--base-font-size) * 0.95 * var(--global-font-scale));
    border-radius: calc(var(--base-border-radius) * 1.5);
  }

  /* Адаптивные результаты экзамена */
  .exam-score-designed {
    font-size: calc(var(--base-font-size) * 1.3 * var(--global-font-scale));
  }
  .exam-time-spent-designed {
    font-size: calc(var(--base-font-size) * 0.95 * var(--global-font-scale));
    margin-bottom: calc(var(--base-margin) * 1.2);
  }
  .exam-detailed-results-designed .result-item {
    padding: calc(var(--base-padding) * 0.6) calc(var(--base-padding) * 0.75);
    margin-bottom: calc(var(--base-margin) * 0.8);
  }
  .exam-detailed-results-designed .result-question-text {
    font-size: calc(var(--base-font-size) * 0.95 * var(--global-font-scale));
    margin-bottom: calc(var(--base-margin) * 0.5);
  }
  .exam-detailed-results-designed .result-answer {
    font-size: calc(var(--base-font-size) * 0.85 * var(--global-font-scale));
    padding-left: 18px;
  }
  .result-buttons-container {
    gap: calc(var(--base-margin) * 0.6);
    margin: calc(var(--base-margin) * 0.8) 0;
  }
  .btn-result-action {
    padding: calc(var(--base-padding) * 0.4) calc(var(--base-padding) * 0.6);
    font-size: calc(var(--base-font-size) * 0.9 * var(--global-font-scale));
  }
  .all-answers-container, .help-container {
    padding: calc(var(--base-padding) * 0.6);
    margin-top: calc(var(--base-margin) * 0.8);
  }
  .all-answers-container h4, .help-container h4 {
    font-size: calc(var(--base-font-size) * 0.95 * var(--global-font-scale));
    margin-bottom: calc(var(--base-margin) * 0.5);
  }
  .all-answers-list .answer-item {
    padding: calc(var(--base-padding) * 0.4) calc(var(--base-padding) * 0.6);
    font-size: calc(var(--base-font-size) * 0.9 * var(--global-font-scale));
    margin: calc(var(--base-margin) * 0.3) 0;
  }
  .help-container p {
    font-size: calc(var(--base-font-size) * 0.9 * var(--global-font-scale));
  }

  /* Адаптивная статистика (481px - 768px) */
  .stats-grid-designed {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--base-margin);
  }
  .question-metrics-designed {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--base-margin);
  }
}

/* ===== ПЛАНШЕТЫ И БОЛЬШИЕ ЭКРАНЫ (769px+) ===== */
@media (min-width: 769px) {
  :root {
    --base-font-size: 18px;
    --base-padding: 28px;
    --base-margin: 20px;
    --base-border-radius: 16px;
    --button-height: 56px;
    --container-max-width: 500px;
  }
  body { padding: 30px; }
  .app-container-designed { min-height: calc(100vh - 60px); }
  .view-header-designed { padding: 24px 28px; }
  .view-header-designed h1, .view-header-designed h2 { font-size: 1.4em; }
  .view-block > main { padding: 28px; }
  .btn-designed { padding: 16px 24px; /* font-size: 18px; */ }

  .question-prefix {
      font-size: calc(1.4em * var(--global-font-scale, 1));
      margin-right: 10px;
  }

  /* Адаптивные модальные окна */
  .custom-modal {
    max-width: 420px;
    padding: calc(var(--base-padding) * 1.2);
  }
  .custom-modal-title {
    font-size: calc(var(--base-font-size) * 1.25 * var(--global-font-scale));
  }
  .custom-modal-message {
    font-size: calc(var(--base-font-size) * var(--global-font-scale));
  }
  .custom-modal-btn {
    padding: calc(var(--base-padding) * 0.7) calc(var(--base-padding) * 1.0);
    font-size: calc(var(--base-font-size) * var(--global-font-scale));
  }
  .image-modal-content {
    width: 90vw;
    height: 90vh;
  }
  .zoom-btn {
    width: 55px;
    height: 55px;
    font-size: calc(22px * var(--global-font-scale));
  }
  .zoom-btn-close {
    font-size: calc(22px * var(--global-font-scale)) !important;
  }
  .image-modal-controls {
    top: 25px;
    right: 25px;
    gap: 12px;
  }
  .zoom-indicator {
    top: 25px;
    left: 25px;
    font-size: calc(var(--base-font-size) * 1.0 * var(--global-font-scale));
    padding: 10px 15px;
  }

  /* Адаптивный таймер */
  .exam-timer-container {
    margin-bottom: calc(var(--base-margin) * 1.5);
  }
  .timer-display-designed {
    padding: calc(var(--base-padding) * 0.5) calc(var(--base-padding) * 1.0);
    font-size: calc(var(--base-font-size) * 1.1 * var(--global-font-scale));
    border-radius: calc(var(--base-border-radius) * 1.8);
  }

  /* Адаптивные результаты экзамена */
  .exam-score-designed {
    font-size: calc(var(--base-font-size) * 1.5 * var(--global-font-scale));
  }
  .exam-time-spent-designed {
    font-size: calc(var(--base-font-size) * 1.1 * var(--global-font-scale));
    margin-bottom: calc(var(--base-margin) * 1.5);
  }
  .exam-detailed-results-designed .result-item {
    padding: calc(var(--base-padding) * 0.8) calc(var(--base-padding) * 1.0);
    margin-bottom: calc(var(--base-margin) * 1.2);
  }
  .exam-detailed-results-designed .result-question-text {
    font-size: calc(var(--base-font-size) * 1.05 * var(--global-font-scale));
    margin-bottom: calc(var(--base-margin) * 0.7);
  }
  .exam-detailed-results-designed .result-answer {
    font-size: calc(var(--base-font-size) * 0.95 * var(--global-font-scale));
    padding-left: 22px;
  }
  .result-buttons-container {
    gap: calc(var(--base-margin) * 1.0);
    margin: calc(var(--base-margin) * 1.2) 0;
  }
  .btn-result-action {
    padding: calc(var(--base-padding) * 0.5) calc(var(--base-padding) * 0.8);
    font-size: calc(var(--base-font-size) * 1.0 * var(--global-font-scale));
  }
  .all-answers-container, .help-container {
    padding: calc(var(--base-padding) * 0.8);
    margin-top: calc(var(--base-margin) * 1.0);
  }
  .all-answers-container h4, .help-container h4 {
    font-size: calc(var(--base-font-size) * 1.05 * var(--global-font-scale));
    margin-bottom: calc(var(--base-margin) * 0.7);
  }
  .all-answers-list .answer-item {
    padding: calc(var(--base-padding) * 0.5) calc(var(--base-padding) * 0.8);
    font-size: calc(var(--base-font-size) * 1.0 * var(--global-font-scale));
    margin: calc(var(--base-margin) * 0.4) 0;
  }
  .help-container p {
    font-size: calc(var(--base-font-size) * 1.0 * var(--global-font-scale));
  }

  /* Адаптивная статистика */
  .stats-grid-designed {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--base-margin) * 1.2);
  }
  .question-metrics-designed {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--base-margin) * 1.2);
  }
  .stat-chip-designed {
    padding: 10px 8px;
  }
  .stat-number-designed {
    font-size: calc(var(--base-font-size) * 1.1 * var(--global-font-scale));
  }
}

/* ======================================== */
/* АДАПТИВНОСТЬ ПО ОРИЕНТАЦИИ ЭКРАНА     */
/* ======================================== */

/* ===== ПОРТРЕТНАЯ ОРИЕНТАЦИЯ ===== */
@media (orientation: portrait) {
  .app-container-designed {
    width: 100%;
    /* max-width уже использует переменную --container-max-width */
  }
  .btn-designed {
    padding: calc(var(--base-padding) * 0.6) calc(var(--base-padding) * 0.8);
    margin-bottom: 8px;
  }
  .navigation-footer-designed {
    gap: 8px;
    margin-bottom: 12px;
  }
  .question-counter-nav-designed {
    padding: 6px 12px;
    font-size: calc(13px * var(--global-font-scale));
    min-width: 50px;
  }
  .answers-grid-designed li button {
    padding: 12px 14px;
    font-size: calc(var(--base-font-size) * 0.93 * var(--global-font-scale));
    line-height: 1.3;
  }
}

/* ===== ЛАНДШАФТНАЯ ОРИЕНТАЦИЯ ===== */
@media (orientation: landscape) {
  body {
    padding: calc(var(--base-padding) * 0.5);
  }
  .app-container-designed {
    width: 90%;
    max-width: calc(var(--container-max-width) * 1.3);
    min-height: calc(100vh - var(--base-padding));
  }
  .btn-designed {
    padding: calc(var(--base-padding) * 0.5) calc(var(--base-padding) * 1.1);
    margin-bottom: 10px;
  }
  .navigation-footer-designed {
    gap: 16px;
    margin-bottom: 16px;
  }
  .question-counter-nav-designed {
    padding: 8px 20px;
    font-size: calc(var(--base-font-size) * 0.95 * var(--global-font-scale));
    min-width: 80px;
  }
  .btn-nav-designed {
    padding: 10px 20px;
    font-size: calc(var(--base-font-size) * 0.95 * var(--global-font-scale));
  }
  .answers-grid-designed li button {
    padding: 10px 18px;
    font-size: calc(var(--base-font-size) * var(--global-font-scale));
    line-height: 1.4;
  }
  .view-header-designed {
    padding: calc(var(--base-padding) * 0.7) var(--base-padding);
  }
  .view-header-designed h1,
  .view-header-designed h2 {
    font-size: calc(var(--base-font-size) * 1.1 * var(--global-font-scale));
  }
  .view-block > main {
    padding: calc(var(--base-padding) * 0.8);
  }
}

/* ===== СПЕЦИАЛЬНЫЕ СЛУЧАИ ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ В ЛАНДШАФТЕ ===== */
@media (orientation: landscape) and (max-height: 500px) {
  body {
    padding: 8px;
  }
  .app-container-designed {
    min-height: calc(100vh - 16px);
    border-radius: 8px; /* Это может быть var(--base-border-radius) на этом этапе */
  }
  .view-header-designed {
    padding: 8px 12px;
  }
  .view-header-designed h1,
  .view-header-designed h2 {
    font-size: calc(14px * var(--global-font-scale));
  }
  .view-block > main {
    padding: 12px;
  }
  .btn-designed {
    padding: 6px 12px;
    font-size: calc(13px * var(--global-font-scale));
    min-height: 36px;
    margin-bottom: 6px;
  }
  .answers-grid-designed li button {
    padding: 8px 12px;
    font-size: calc(13px * var(--global-font-scale));
  }
  .navigation-footer-designed {
    gap: 6px;
    margin-bottom: 8px;
  }
  .question-counter-nav-designed {
    padding: 4px 8px;
    font-size: calc(12px * var(--global-font-scale));
    min-width: 40px;
  }
  .btn-nav-designed {
    padding: 6px 12px;
    font-size: calc(12px * var(--global-font-scale));
  }
}

/* Учет динамической высоты viewport на мобильных (в adaptive.css, так как это адаптация) */
@supports (height: 100dvh) {
  /* body min-height уже в base.css */
  .app-container-designed {
    min-height: calc(100dvh - var(--base-padding) * 2);
  }
  @media (orientation: landscape) and (max-height: 500px) {
    .app-container-designed {
      min-height: calc(100dvh - 16px);
    }
  }
}

/* Fallback для старых браузеров (в adaptive.css) */
@supports not (height: 100dvh) {
  @media (max-height: 600px) {
    .app-container-designed {
      min-height: calc(100vh - var(--base-padding));
    }
  }
}

/* ======================================== */
/* ВЫСОКАЯ ПЛОТНОСТЬ ПИКСЕЛЕЙ (RETINA)    */
/* ======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .btn-designed {
    /* border-width: 0.5px; - тонкие линии могут плохо рендериться, лучше оставить как есть или использовать box-shadow */
  }
  .answers-grid-designed li button {
    /* border-width: 1px; */
  }
  .question-card-designed {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); /* Менее жирная тень */
    /* border-width: 0.5px; */
  }
  .app-container-designed {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Менее жирная тень */
    /* border-width: 0.5px; */
  }
}

/* Адаптация для модального окна изображений (контролы) */
@media (max-width: 768px) { /* Общие мобильные для image-modal */
    .image-modal-controls {
        top: 10px;
        right: 10px;
        gap: 8px;
    }
    .zoom-btn {
        width: 45px;
        height: 45px;
        font-size: calc(18px * var(--global-font-scale));
    }
    .zoom-indicator {
        top: 10px;
        left: 10px;
        font-size: calc(12px * var(--global-font-scale));
        padding: 6px 10px;
    }
}

@media (max-width: 375px) { /* Совсем маленькие для image-modal */
    .zoom-btn-close {
        font-size: calc(16px * var(--global-font-scale)) !important;
    }
    .image-modal-controls {
        top: 8px;
        right: 8px;
        gap: 6px;
    }
    .zoom-indicator {
        top: 8px;
        left: 8px;
        font-size: calc(var(--base-font-size) * 0.8 * var(--global-font-scale)); /* base-font-size здесь 13px */
        padding: 4px 8px;
    }
}