:root {
      --app-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    html, body {
      overflow-x: hidden !important;
      max-width: 100vw !important;
      width: 100% !important;
      position: relative;
    }

    #screen-role-select, #app-role-athlete, #app-role-coach, #app-role-admin {
      overflow-x: hidden !important;
      max-width: 100vw !important;
      width: 100% !important;
    }

    body {
      font-family: var(--app-font-family) !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
      letter-spacing: -0.01em;
    }

    /* Calibrate aggressive weights to prevent text merging into blobs / cartoonish look */
    .font-black {
      font-weight: 750 !important;
      letter-spacing: -0.012em;
    }

    .font-extrabold {
      font-weight: 700 !important;
      letter-spacing: -0.008em;
    }

    .font-bold {
      font-weight: 600 !important;
      letter-spacing: -0.004em;
    }

    .scrollbar-none {
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
    }
    .scrollbar-none::-webkit-scrollbar {
      display: none !important;
    }

    /* Mobile-only 3D Touch Tactile Buttons & Embossed Numbers (Coach Profile & Tools) */
    @media (max-width: 767px) {
      .btn-touch-3d {
        width: 100% !important;
        min-height: 62px !important;
        border-radius: 1rem !important; /* 16px */
        background: linear-gradient(180deg, #242735 0%, #161822 100%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-bottom: none !important;
        box-shadow: 0 4px 0 #0c0d12, 0 8px 16px rgba(0, 0, 0, 0.5) !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform 0.08s ease, box-shadow 0.08s ease !important;
      }
      .btn-touch-3d:active {
        transform: translateY(3px) !important;
        box-shadow: 0 1px 0 #0c0d12, 0 3px 6px rgba(0, 0, 0, 0.4) !important;
      }

      .btn-touch-3d-emerald {
        width: 100% !important;
        min-height: 62px !important;
        border-radius: 1rem !important;
        background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: none !important;
        box-shadow: 0 4px 0 #064e3b, 0 8px 16px rgba(0, 0, 0, 0.5) !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform 0.08s ease, box-shadow 0.08s ease !important;
      }
      .btn-touch-3d-emerald:active {
        transform: translateY(3px) !important;
        box-shadow: 0 1px 0 #064e3b, 0 3px 6px rgba(0, 0, 0, 0.4) !important;
      }

      .num-3d-silver {
        font-weight: 900 !important;
        letter-spacing: -0.025em !important;
        background: linear-gradient(180deg, #FFFFFF 20%, #8E95A5 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.15)) !important;
        display: inline-block;
      }

      .num-3d-red {
        font-weight: 900 !important;
        letter-spacing: -0.025em !important;
        background: linear-gradient(180deg, #FF5252 0%, #B71C1C 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.15)) !important;
        display: inline-block;
      }
    }

    /* ======================================================== */
    /* BOXING TIMER: SKEUOMORPHIC 3D TACTILITY & EMBOSSED NUMS  */
    /* ======================================================== */
    .timer-btn-3d {
      background: linear-gradient(180deg, #161820 0%, #1c1f28 100%) !important;
      box-shadow: 0 4px 0 #0d0e12,
                  0 6px 12px rgba(0, 0, 0, 0.4),
                  inset 0 1px 0 rgba(255, 255, 255, 0.1),
                  inset 1px 0 0 rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
      -webkit-tap-highlight-color: transparent !important;
      transition: transform 0.08s ease, box-shadow 0.08s ease !important;
      user-select: none;
    }
    .timer-btn-3d:active {
      transform: translateY(3px) !important;
      box-shadow: 0 1px 0 #0d0e12,
                  0 3px 6px rgba(0, 0, 0, 0.4),
                  inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }

    .timer-panel-3d {
      background: linear-gradient(180deg, #161820 0%, #1c1f28 100%) !important;
      box-shadow: 0 4px 0 #0d0e12,
                  0 6px 12px rgba(0, 0, 0, 0.4),
                  inset 0 1px 0 rgba(255, 255, 255, 0.1),
                  inset 1px 0 0 rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    /* Start Button (Massive Physical Green Key) */
    .timer-btn-start-3d {
      background: linear-gradient(180deg, #1cb870 0%, #158a56 100%) !important;
      box-shadow: 0 6px 0 #0f623e,
                  0 8px 16px rgba(0, 0, 0, 0.5),
                  inset 0 1px 0 rgba(255, 255, 255, 0.2),
                  inset 1px 0 0 rgba(255, 255, 255, 0.08) !important;
      border: 1px solid #13774a !important;
      border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
      -webkit-tap-highlight-color: transparent !important;
      transition: transform 0.08s ease, box-shadow 0.08s ease !important;
      user-select: none;
    }
    .timer-btn-start-3d:active {
      transform: translateY(3px) !important;
      box-shadow: 0 1px 0 #0f623e,
                  0 3px 6px rgba(0, 0, 0, 0.4),
                  inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }

    /* Pause Button (Massive Physical Red/Rose Key) */
    .timer-btn-pause-3d {
      background: linear-gradient(180deg, #e11d48 0%, #be123c 100%) !important;
      box-shadow: 0 6px 0 #881337,
                  0 8px 16px rgba(0, 0, 0, 0.5),
                  inset 0 1px 0 rgba(255, 255, 255, 0.2),
                  inset 1px 0 0 rgba(255, 255, 255, 0.08) !important;
      border: 1px solid #9f1239 !important;
      border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
      -webkit-tap-highlight-color: transparent !important;
      transition: transform 0.08s ease, box-shadow 0.08s ease !important;
      user-select: none;
    }
    .timer-btn-pause-3d:active {
      transform: translateY(3px) !important;
      box-shadow: 0 1px 0 #881337,
                  0 3px 6px rgba(0, 0, 0, 0.4),
                  inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }

    /* Central Display Card (Skeuomorphic Deep Inset & Bevel) */
    .timer-central-card-3d {
      box-shadow: 0 6px 0 #0d0e12,
                  0 12px 24px rgba(0, 0, 0, 0.6),
                  inset 0 1px 0 rgba(255, 255, 255, 0.18),
                  inset 1px 0 0 rgba(255, 255, 255, 0.08) !important;
    }

    /* Sports Scoreboard Giant Countdown Digits (Strict Monospace + Tabular Nums + 3D Multi-Layer Text Shadow) */
    #fight-time-display,
    #live-timer-digits,
    .timer-digits-embossed,
    .timer-digits-amber-embossed,
    .timer-digits-red-embossed,
    .timer-digits-blue-embossed,
    .timer-digits-emerald-embossed {
      font-size: clamp(5.5rem, 22vw, 8.5rem) !important;
      line-height: 0.9 !important;
      font-weight: 900 !important;
      font-variant-numeric: tabular-nums !important;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
      letter-spacing: -0.04em !important;
    }

    .timer-digits-embossed {
      text-shadow: 
        0 1px 0 #000,
        0 2px 0 #111,
        0 3px 0 #1a1a1a,
        0 4px 0 #222,
        0 5px 6px rgba(0, 0, 0, 0.7),
        0 8px 16px rgba(0, 0, 0, 0.5) !important;
    }

    .timer-digits-amber-embossed {
      color: #ffd64f !important;
      text-shadow: 
        0 1px 0 #b38600,
        0 2px 0 #997300,
        0 3px 0 #806000,
        0 4px 0 #664d00,
        0 5px 6px rgba(0, 0, 0, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.4) !important;
    }

    .timer-digits-red-embossed {
      color: #ffe4e6 !important;
      text-shadow: 
        0 1px 0 #9f1239,
        0 2px 0 #881337,
        0 3px 0 #700c2a,
        0 4px 0 #4c0519,
        0 5px 6px rgba(0, 0, 0, 0.7),
        0 8px 16px rgba(0, 0, 0, 0.5) !important;
    }

    .timer-digits-blue-embossed {
      color: #dbeafe !important;
      text-shadow: 
        0 1px 0 #1e40af,
        0 2px 0 #1e3a8a,
        0 3px 0 #172554,
        0 4px 0 #0f172a,
        0 5px 6px rgba(0, 0, 0, 0.7),
        0 8px 16px rgba(0, 0, 0, 0.5) !important;
    }

    .timer-digits-emerald-embossed {
      color: #d1fae5 !important;
      text-shadow: 
        0 1px 0 #065f46,
        0 2px 0 #064e3b,
        0 3px 0 #022c22,
        0 4px 0 #000,
        0 5px 6px rgba(0, 0, 0, 0.7),
        0 8px 16px rgba(0, 0, 0, 0.5) !important;
    }

    .timer-digits-fixed {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
      font-size: clamp(4.8rem, 19vw, 7.5rem) !important;
      line-height: 0.9 !important;
      font-weight: 900 !important;
      font-variant-numeric: tabular-nums !important;
      letter-spacing: -0.04em !important;
      display: inline-block !important;
      text-shadow: 
        0 1px 0 #b38600,
        0 2px 0 #997300,
        0 3px 0 #806000,
        0 4px 0 #664d00,
        0 5px 6px rgba(0, 0, 0, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.4) !important;
    }

    /* ── TIMER LAYOUT: чисте базове центрування ── */
    #fight-display-box {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    #fight-time-display {
        font-size: clamp(4.5rem, 16vw, 6.2rem) !important;
        line-height: 0.92 !important;
        font-weight: 900 !important;
        text-align: center !important;
        margin: auto 0 !important;
    }

    /* ── BOXING TIMER: MOBILE PORTRAIT OPTIMIZATION (Крупні спортивні цифри) ── */
    @media (max-width: 768px) and (orientation: portrait) {
      #fight-time-display {
        font-size: clamp(6.2rem, 25vw, 8.8rem) !important;
        line-height: 0.88 !important;
      }
    }

    /* ── BOXING TIMER: DESKTOP & LARGE SCREEN DISPLAY (Гігантське табло для залу) ── */
    @media (min-width: 769px) and (min-height: 551px) {
      #timer-modal-container {
        padding-left: clamp(1rem, 2.5vw, 2.5rem) !important;
        padding-right: clamp(1rem, 2.5vw, 2.5rem) !important;
        padding-top: 0.75rem !important;
        padding-bottom: 1rem !important;
      }

      /* Головний контейнер бою та вкладені блоки: єдина максимальна ширина для ідеального вирівнювання */
      #timer-rounds-fight,
      #timer-stopwatch,
      #timer-countdown {
        max-width: min(94vw, 1050px) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }

      /* Усі блоки мають точно однакову ширину 100% від контейнера, без випирання */
      #timer-rounds-fight > div:first-child,
      #fight-display-box,
      #fight-controls-row,
      #fight-secondary-actions-row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
      }

      /* Центральна картка табло: акуратні внутрішні відступи для віконного та повноекранного режимів */
      #fight-display-box {
        padding: clamp(0.6rem, 1.6vh, 1.4rem) clamp(1rem, 2vw, 1.75rem) !important;
        margin-top: 0.4rem !important;
        margin-bottom: 0.4rem !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
      }

      /* Цифри зворотного відліку: великі, чіткі для залу, але делікатно підібрані під висоту екрана */
      #fight-time-display,
      #live-timer-digits,
      .timer-digits-fixed {
        font-size: clamp(6.2rem, min(16vw, 24vh), 14rem) !important;
        line-height: 0.85 !important;
        letter-spacing: -0.04em !important;
        font-weight: 900 !important;
        margin: auto 0 !important;
      }

      /* Верхній рядок табло (Раунд та Фаза бою): акуратний розмір, що гармонійно вписується */
      #fight-display-box > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 0.25rem !important;
      }

      #fight-round-title {
        font-size: clamp(1rem, 1.35vw, 1.3rem) !important;
        font-weight: 800 !important;
        letter-spacing: 0.03em !important;
      }

      #fight-phase-badge {
        font-size: clamp(0.85rem, 1.1vw, 1.05rem) !important;
        padding: 0.35rem 1.1rem !important;
        border-radius: 9999px !important;
      }

      #fight-phase-emoji {
        font-size: 1.1em !important;
      }

      /* Шкала спливання часу поточної фази бою */
      #fight-round-time-bar-bg {
        width: 100% !important;
        max-width: 100% !important;
        height: 8px !important;
        margin-top: 0.4rem !important;
        margin-bottom: 0.4rem !important;
      }

      /* Нижній рядок (Далі: наступна фаза та загальний прогрес) */
      #fight-display-box > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 0.25rem !important;
      }

      #fight-next-preview,
      #fight-progress-pct {
        font-size: clamp(0.85rem, 1.1vw, 1.05rem) !important;
        font-weight: 700 !important;
      }

      #fight-display-box > div:last-child .rounded-full.overflow-hidden {
        height: 12px !important;
      }

      /* Нижні кнопки керування (Пауза / Раунди) */
      #fight-pause-btn {
        min-height: 56px !important;
        font-size: 1.15rem !important;
      }

      /* Секундомір та Зворотний відлік на десктопі */
      #stopwatch-display-box,
      #countdown-display-box {
        padding: clamp(1rem, 2vh, 2rem) 1.5rem !important;
      }

      #stopwatch-display {
        font-size: clamp(5.5rem, min(16vw, 24vh), 13rem) !important;
        line-height: 0.88 !important;
      }

      #countdown-display {
        font-size: clamp(6rem, min(17vw, 25vh), 14rem) !important;
        line-height: 0.88 !important;
      }
    }

    /* ── BOXING TIMER: EXTRA LARGE MONITORS / 4K / GYM TV SCREENS ── */
    @media (min-width: 1921px) and (min-height: 900px) {
      #timer-rounds-fight,
      #timer-stopwatch,
      #timer-countdown {
        max-width: min(90vw, 1350px) !important;
      }
      #fight-time-display,
      #live-timer-digits,
      .timer-digits-fixed {
        font-size: clamp(10rem, min(19vw, 28vh), 18rem) !important;
        line-height: 0.84 !important;
      }
      #fight-round-title {
        font-size: 1.6rem !important;
      }
      #fight-phase-badge {
        font-size: 1.3rem !important;
        padding: 0.5rem 1.5rem !important;
      }
    }

    /* ── BOXING TIMER: MOBILE LANDSCAPE OPTIMIZATION (Кнопка старту завжди на екрані при перевороті) ── */
    @media (max-height: 550px) and (orientation: landscape) {
      #timer-modal-container {
        padding-top: max(env(safe-area-inset-top, 4px), 4px) !important;
        padding-bottom: max(env(safe-area-inset-bottom, 6px), 6px) !important;
        padding-left: max(env(safe-area-inset-left, 8px), 8px) !important;
        padding-right: max(env(safe-area-inset-right, 8px), 8px) !important;
        overflow-y: auto !important;
      }

      /* Компактна верхня панель вкладок */
      #modal-timer > div > div:first-child {
        padding-bottom: 3px !important;
      }

      /* Компактний блок шаблону */
      #timer-rounds-fight > div:first-child {
        padding: 3px 6px !important;
        gap: 2px !important;
      }
      #fight-presets-select {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        font-size: 11px !important;
      }
      /* Приховуємо громіздкі 3 кнопки в ландшафті, оскільки дані вже є на табло */
      #timer-rounds-fight > div:first-child .grid-cols-3 {
        display: none !important;
      }

      /* Компактна центральна картка табло */
      #fight-display-box {
        cursor: pointer !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        min-height: 0 !important;
      }

      /* Цифри табло адаптовані до висоти горизонтального екрана */
      #fight-time-display {
        font-size: clamp(3.6rem, 24vh, 5.2rem) !important;
        line-height: 0.88 !important;
        margin: 1px 0 !important;
        padding: 0 !important;
      }
      #fight-phase-badge {
        padding: 2px 8px !important;
        font-size: 10px !important;
      }
      #fight-round-title {
        font-size: 12px !important;
        font-weight: 800 !important;
      }
      #fight-round-time-bar-bg {
        height: 3px !important;
        margin-top: 1px !important;
        margin-bottom: 1px !important;
      }
      /* Приховуємо нижній товстий бар прогресу в ландшафті для економії місця */
      #fight-display-box > div:last-child {
        display: none !important;
      }

      /* Кнопки старту та перемикання раундів: завжди повністю видимі */
      #fight-controls-row {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        gap: 6px !important;
      }
      #fight-pause-btn {
        min-height: 42px !important;
        height: 42px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        font-size: 15px !important;
      }
      #fight-controls-row button[onclick*="skipFightRound"] {
        min-height: 42px !important;
        height: 42px !important;
        padding: 4px 12px !important;
      }

      /* Вторинні кнопки (Рестарт, Опції, Завершити) */
      #fight-secondary-actions-row {
        padding-top: 2px !important;
        gap: 4px !important;
        border-top: none !important;
      }
      #fight-secondary-actions-row button {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        font-size: 10px !important;
      }

      /* ── STOPWATCH LANDSCAPE COMPACT STYLES ── */
      #timer-pane-stopwatch {
        space-y: 0 !important;
        gap: 4px !important;
      }
      #timer-pane-stopwatch > div:first-child {
        padding: 3px 8px !important;
      }
      #stopwatch-display-box {
        min-height: 0 !important;
        height: auto !important;
        padding: 4px 10px !important;
        margin: 2px 0 !important;
      }
      #stopwatch-display {
        font-size: clamp(2.4rem, 14vh, 3.8rem) !important;
        line-height: 0.9 !important;
        margin: auto 0 !important;
        padding: 0 !important;
      }
      #stopwatch-status-label, #stopwatch-last-lap-badge {
        font-size: 9px !important;
        line-height: 1 !important;
      }
      #stopwatch-controls-row {
        gap: 6px !important;
        margin-top: 2px !important;
      }
      #stopwatch-toggle-btn, #stopwatch-lap-btn {
        min-height: 38px !important;
        height: 38px !important;
        padding: 4px 12px !important;
        font-size: 13px !important;
      }
      #stopwatch-controls-row button[onclick*="resetStopwatch"] {
        min-height: 38px !important;
        height: 38px !important;
        padding: 4px 10px !important;
      }
      #stopwatch-laps-card {
        height: 50px !important;
        max-height: 50px !important;
        padding: 3px 6px !important;
        margin-top: 2px !important;
      }

      /* ── COUNTDOWN LANDSCAPE COMPACT STYLES ── */
      #timer-pane-countdown {
        space-y: 0 !important;
        gap: 3px !important;
      }
      #timer-pane-countdown > div:first-child {
        padding: 3px 8px !important;
      }
      #countdown-presets-row {
        gap: 3px !important;
        margin: 2px 0 !important;
      }
      #countdown-presets-row button {
        height: 24px !important;
        padding: 2px 4px !important;
        font-size: 10px !important;
      }
      #countdown-display-box {
        min-height: 0 !important;
        height: auto !important;
        padding: 4px 10px !important;
        margin: 2px 0 !important;
      }
      #countdown-display {
        font-size: clamp(2.6rem, 15vh, 4.2rem) !important;
        line-height: 0.9 !important;
        margin: auto 0 !important;
        padding: 0 !important;
      }
      #countdown-status-badge {
        font-size: 9px !important;
        line-height: 1 !important;
      }
      #countdown-progress-bar-bg {
        height: 5px !important;
        margin-top: 2px !important;
      }
      #countdown-finetune-box {
        padding: 3px 6px !important;
        margin: 2px 0 !important;
      }
      #countdown-finetune-box > div:first-child {
        font-size: 9px !important;
      }
      #countdown-finetune-box .grid {
        gap: 2px !important;
      }
      #countdown-finetune-box button {
        height: 22px !important;
        padding: 1px 2px !important;
        font-size: 9px !important;
      }
      #countdown-controls-row {
        gap: 6px !important;
        margin-top: 2px !important;
      }
      #countdown-toggle-btn {
        min-height: 38px !important;
        height: 38px !important;
        padding: 4px 12px !important;
        font-size: 13px !important;
      }
      #countdown-controls-row button[onclick*="resetCountdown"] {
        min-height: 38px !important;
        height: 38px !important;
        padding: 4px 10px !important;
      }
    }

    #fight-progress-bar, #fight-round-time-bar {
      border-radius: 9999px !important;
      box-shadow: 0 0 12px currentColor !important;
    }

    /* ══════════════════════════════════════════════════════════════════════
       🥊 BOXING TIMER: COMPANION EXERCISE VIDEO SPLIT-SCREEN MODE
       ══════════════════════════════════════════════════════════════════════ */
    #timer-body-split-layout {
      width: 100%;
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    #timer-video-companion-panel {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #timer-comp-video-player iframe,
    #timer-comp-video-player video,
    #live-workout-video-player iframe,
    #live-workout-video-player video {
      width: 100% !important;
      height: 100% !important;
      border: 0;
      border-radius: 0.75rem;
    }

    /* ── Desktop & Tablet Split View (Планшети, Ноутбуки, Комп'ютери) ── */
    @media (min-width: 769px) {
      #timer-body-split-layout.has-companion-video {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 1.25rem !important;
        overflow: hidden !important;
      }
      #timer-body-split-layout.has-companion-video #timer-video-companion-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 48% !important;
        max-width: 48% !important;
        flex: 0 0 48% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
      }
      #timer-body-split-layout.has-companion-video #timer-active-content-pane {
        width: 52% !important;
        max-width: 52% !important;
        flex: 1 1 52% !important;
        min-width: 0 !important;
      }
      #timer-body-split-layout.has-companion-video #timer-rounds-fight,
      #timer-body-split-layout.has-companion-video #timer-stopwatch,
      #timer-body-split-layout.has-companion-video #timer-countdown {
        max-width: 100% !important;
      }
      #timer-body-split-layout.has-companion-video #fight-display-box {
        padding: clamp(0.5rem, 1.4vh, 1.1rem) clamp(0.75rem, 1.5vw, 1.25rem) !important;
      }
      #timer-body-split-layout.has-companion-video #fight-time-display,
      #timer-body-split-layout.has-companion-video #live-timer-digits,
      #timer-body-split-layout.has-companion-video .timer-digits-fixed {
        font-size: clamp(4.4rem, min(10vw, 18vh), 9.2rem) !important;
        line-height: 0.86 !important;
      }
    }

    /* ── Mobile Landscape Split View (Смартфон горизонтально) ── */
    @media (max-height: 550px) and (orientation: landscape) {
      #timer-body-split-layout.has-companion-video {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        overflow: hidden !important;
      }
      #timer-body-split-layout.has-companion-video #timer-video-companion-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 46% !important;
        max-width: 46% !important;
        flex: 0 0 46% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 0.5rem !important;
      }
      #timer-body-split-layout.has-companion-video #timer-active-content-pane {
        width: 54% !important;
        max-width: 54% !important;
        flex: 1 1 54% !important;
        min-width: 0 !important;
      }
      #timer-body-split-layout.has-companion-video #fight-display-box {
        padding: 3px 8px !important;
      }
      #timer-body-split-layout.has-companion-video #fight-time-display {
        font-size: clamp(2.8rem, 20vh, 4.4rem) !important;
      }
    }

    /* ── Mobile Portrait Companion View (Смартфон вертикально) ── */
    @media (max-width: 768px) and (orientation: portrait) {
      #timer-body-split-layout.has-companion-video {
        flex-direction: column !important;
        gap: 0.5rem !important;
      }
      #timer-body-split-layout.has-companion-video #timer-video-companion-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-height: 40vh !important;
        flex-shrink: 0 !important;
        overflow-y: auto !important;
        padding: 0.5rem !important;
      }
      #timer-body-split-layout.has-companion-video #timer-active-content-pane {
        width: 100% !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
      }
      #timer-body-split-layout.has-companion-video #fight-time-display {
        font-size: clamp(4.4rem, 18vw, 6.5rem) !important;
      }
    }


    /* Secondary Digits & Labels with Crisp Shadow */
    .timer-text-sharp {
      font-weight: 900 !important;
      text-shadow: 0 1px 1px #000, 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    }

    /* Wheel Picker Component Styling */
    .wheel-picker-col {
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .wheel-picker-col::-webkit-scrollbar {
      display: none;
    }
    .wheel-picker-item {
      height: 48px;
      scroll-snap-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    }

    /* Micro-badges, counters and uppercase pills breathing room */
    .text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\] {
      letter-spacing: 0.015em;
    }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #090d16; }
    ::-webkit-scrollbar-thumb { background: #212d4a; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #33446e; }

    .ath-nav-active {
      color: #f43f5e !important;
      background: rgba(244, 63, 94, 0.15) !important;
      border-color: rgba(244, 63, 94, 0.4) !important;
    }

    .coach-nav-active {
      color: #60a5fa !important;
      background: rgba(37, 99, 235, 0.18) !important;
      border-color: rgba(59, 130, 246, 0.4) !important;
    }

    .builder-tab-active {
      background: rgba(59, 130, 246, 0.25) !important;
      border-color: #3b82f6 !important;
      color: #60a5fa !important;
    }

    .builder-tech-tab-active {
      background: rgba(244, 63, 94, 0.2) !important;
      border-color: #f43f5e !important;
      color: #fb7185 !important;
    }

    .builder-tab-technique-active {
      background: rgba(245, 158, 11, 0.22) !important;
      border-color: #f59e0b !important;
      color: #fef08a !important;
      box-shadow: 0 0 14px rgba(245, 158, 11, 0.3) !important;
    }

    .builder-tab-pairs-active {
      background: rgba(6, 182, 212, 0.22) !important;
      border-color: #06b6d4 !important;
      color: #a5f3fc !important;
      box-shadow: 0 0 14px rgba(6, 182, 212, 0.3) !important;
    }

    .builder-tab-bags-active {
      background: rgba(244, 63, 94, 0.22) !important;
      border-color: #f43f5e !important;
      color: #fecdd3 !important;
      box-shadow: 0 0 14px rgba(244, 63, 94, 0.3) !important;
    }

    /* Application Print & Preview Density Modes */
    #printable-boxing-application {
      border: none !important;
      outline: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
    #printable-boxing-application.density-compact {
      font-size: 8pt !important;
      line-height: 1.15 !important;
    }
    #printable-boxing-application.density-compact th {
      padding: 2px 3px !important;
      font-size: 7.5pt !important;
    }
    #printable-boxing-application.density-compact td {
      padding: 1.5px 3px !important;
      font-size: 7.5pt !important;
    }
    #printable-boxing-application.density-compact input {
      font-size: 7.5pt !important;
    }
    #printable-boxing-application.density-compact .app-header-block {
      margin-bottom: 4px !important;
    }
    #printable-boxing-application.density-compact .app-table-block {
      margin-top: 3px !important;
      margin-bottom: 3px !important;
    }
    #printable-boxing-application.density-compact .app-footer-block {
      margin-top: 22px !important;
      font-size: 8pt !important;
    }

    #printable-boxing-application.density-standard {
      font-size: 8.5pt !important;
      line-height: 1.25 !important;
    }
    #printable-boxing-application.density-standard th {
      padding: 3px 4px !important;
      font-size: 8pt !important;
    }
    #printable-boxing-application.density-standard td {
      padding: 2.5px 4px !important;
      font-size: 8pt !important;
    }
    #printable-boxing-application.density-standard input {
      font-size: 8pt !important;
    }
    #printable-boxing-application.density-standard .app-footer-block {
      margin-top: 42px !important;
      font-size: 8.5pt !important;
    }

    /* Global Dark Theme Settings for Native Controls & Pickers */
    :root, html, body {
      color-scheme: dark;
    }

    /* Prevent accidental text selection on mobile/touch controls, tables, and buttons */
    body, #portal-coach, #portal-athlete, button, th, td, select, nav, header {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
    input, textarea, [contenteditable="true"] {
      -webkit-user-select: text;
      user-select: text;
    }

    /* Custom Unified Dark Styling for Dropdown Menus & Options */
    select {
      color-scheme: dark !important;
      background-color: #0f172a;
      color: #f8fafc;
    }
    select option {
      background-color: #0f172a !important;
      color: #f8fafc !important;
      padding: 8px 12px !important;
    }
    select option:checked,
    select option:hover {
      background-color: #1e293b !important;
      color: #f59e0b !important;
    }
    select optgroup {
      background-color: #020617 !important;
      color: #94a3b8 !important;
      font-weight: 700 !important;
    }

    /* Native Date & Time Pickers in Dark Theme */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
      color-scheme: dark !important;
      background-color: #0f172a;
      color: #f8fafc;
    }

    @media print {
      .no-print { display: none !important; }
      body {
        background: white !important;
        color: black !important;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
      }
      /* Hide everything except printable application when printing */
      body > *:not(#modal-competition-application) {
        display: none !important;
      }
      #modal-competition-application {
        position: static !important;
        display: block !important;
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
      }
      #modal-competition-application .no-print {
        display: none !important;
      }
      #printable-boxing-application {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 2mm 5mm !important;
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        border: none !important;
      }
      #printable-boxing-application table {
        width: 100% !important;
        border-collapse: collapse !important;
        color: black !important;
      }
      #printable-boxing-application thead {
        display: table-header-group !important;
      }
      #printable-boxing-application tr {
        page-break-inside: avoid !important;
      }
      #printable-boxing-application th,
      #printable-boxing-application td {
        border: 1px solid black !important;
        color: black !important;
      }
      #printable-boxing-application.density-compact th,
      #printable-boxing-application.density-compact td {
        padding: 1.5px 3px !important;
        font-size: 7.5pt !important;
        line-height: 1.1 !important;
      }
      #printable-boxing-application.density-standard th,
      #printable-boxing-application.density-standard td {
        padding: 2.5px 4px !important;
        font-size: 8pt !important;
        line-height: 1.2 !important;
      }
      #printable-boxing-application.density-compact .app-footer-block {
        margin-top: 18px !important;
      }
      #printable-boxing-application.density-standard .app-footer-block {
        margin-top: 36px !important;
      }
      #printable-boxing-application input,
      #printable-boxing-application textarea {
        border: none !important;
        outline: none !important;
        background: transparent !important;
        color: black !important;
        font-family: inherit !important;
        font-weight: bold !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        text-align: inherit !important;
      }
      #comp-app-table-body td input {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
      }
      #comp-app-signatures-block {
        page-break-inside: avoid !important;
      }
      @page {
        size: A4 landscape;
        margin: 5mm 8mm;
      }
    }
  
    /* Custom High-Contrast Scrollbar for Attendance Matrix */
    .custom-journal-scroll::-webkit-scrollbar {
      width: 9px;
      height: 9px;
    }
    .custom-journal-scroll::-webkit-scrollbar-track {
      background: #090d16;
      border-radius: 8px;
    }
    .custom-journal-scroll::-webkit-scrollbar-thumb {
      background: #2563eb;
      border-radius: 8px;
      border: 2px solid #090d16;
    }
    .custom-journal-scroll::-webkit-scrollbar-thumb:hover {
      background: #3b82f6;
    }

    /* Official Application Sheet Input Cleansing (Eliminate dark boxes on screen) */
    #printable-boxing-application input,
    #printable-boxing-application textarea,
    #printable-boxing-application select {
      background: transparent !important;
      background-color: transparent !important;
      color: #000000 !important;
      -webkit-text-fill-color: #000000 !important;
      box-shadow: none !important;
      outline: none !important;
    }
    #printable-boxing-application input::placeholder {
      color: #64748b !important;
      -webkit-text-fill-color: #64748b !important;
    }

    /* Competition Hub Dropdown Mobile Safety */
    #comp-hub-tourney-select {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      overflow: hidden !important;
    }

    /* ========================================================================== */
    /* UNIVERSAL MOBILE LANDSCAPE (ГОРИЗОНТАЛЬНИЙ РЕЖИМ СМАРТФОНІВ)               */
    /* Забезпечує 100% функціональність при перевороті будь-якого смартфона       */
    /* ========================================================================== */
    @media (orientation: landscape) and (max-height: 600px) {
      /* 1. Глобальний скрол та скидання фіксованих висот */
      html, body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100% !important;
        -webkit-overflow-scrolling: touch !important;
      }

      /* 2. Екран вибору ролей та входу: вирівнювання зверху для доступу до всіх кнопок */
      #screen-role-select {
        min-height: 100vh !important;
        height: auto !important;
        justify-content: flex-start !important;
        padding-top: 1rem !important;
        padding-bottom: 2.5rem !important;
        overflow-y: auto !important;
      }

      /* 3. Головні контейнери кабінетів */
      #portal-athlete, #portal-coach, #portal-admin {
        padding-bottom: 56px !important;
        overflow-y: visible !important;
      }

      main {
        padding-bottom: 56px !important;
      }

      /* 4. Мобільна нижня панель (Bottom Nav) ЗАЛИШАЄТЬСЯ ВИДИМОЮ в альбомному режимі */
      nav.md\:hidden {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 48px !important;
        padding-top: 2px !important;
        padding-bottom: max(env(safe-area-inset-bottom, 2px), 2px) !important;
        background-color: rgba(15, 23, 42, 0.98) !important;
        backdrop-filter: blur(16px) !important;
        z-index: 50 !important;
      }
      nav.md\:hidden button {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
      }
      nav.md\:hidden button i,
      nav.md\:hidden button svg {
        width: 16px !important;
        height: 16px !important;
      }
      nav.md\:hidden button span {
        font-size: 8.5px !important;
        line-height: 1 !important;
      }
      /* Неонова кругла кнопка таймера в нижній панелі боксера */
      #ath-mtab-timer {
        width: 40px !important;
        height: 40px !important;
        top: -6px !important;
      }
      #ath-mtab-timer > div:last-child {
        width: 40px !important;
        height: 40px !important;
      }
      #ath-mtab-timer i {
        width: 18px !important;
        height: 18px !important;
      }

      /* 5. Приховуємо громіздку десктопну панель навігації у шапці */
      header > div.hidden.md\:block {
        display: none !important;
      }
      header {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
      }
      header > div.max-w-6xl {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
      }

      /* 6. Кабінет боксера: сітка швидких дій (5 кнопок) залишається активною */
      #ath-quick-actions-grid.sm\:hidden {
        display: grid !important;
      }
      #ath-desktop-detailed-plan-zone.hidden.sm\:block {
        display: none !important;
      }

      /* 7. Усі модальні вікна: скрол і максимальна висота */
      [id^="modal-"] > div:not(#timer-modal-container),
      .modal-container {
        max-height: 94vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }
    }





/* Screen Orientation Animation */
@keyframes rotate-cw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.rotate-cw {
  animation: rotate-cw 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}