
    :root {
      --legal-footer-height: 2.9rem;
      --top-nav-offset: 4.4rem;
      --accessibility-sidebar-width: clamp(18.5rem, 24vw, 21rem);
      --accessibility-toggle-rail-width: 4.8rem;
      --page-zoom: 1;
    }
    html {
      zoom: var(--page-zoom);
    }
    @supports not (zoom: 0.8) {
      html {
        font-size: calc(100% * var(--page-zoom));
      }
    }
    body {
      padding-bottom: 0;
    }
    /* Título oculto visualmente (leitores de ecrã) */
    .visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    .embed-share-cta {
      display: none !important;
    }
    .accessibility-quick-rail {
      position: fixed;
      right: 0.85rem;
      top: calc(var(--top-nav-offset) + 0.5rem);
      z-index: 2054;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      width: 3.05rem;
      max-height: calc(100dvh - var(--top-nav-offset) - 4rem);
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .accessibility-quick-rail::-webkit-scrollbar {
      display: none;
    }
    @media (max-height: 40rem) {
      .accessibility-quick-rail {
        gap: 0.15rem;
        max-height: calc(100dvh - var(--top-nav-offset) - 2rem);
      }
      .accessibility-quick-btn {
        width: 2.4rem;
        min-width: 2.4rem;
        height: 2.2rem;
        min-height: 2.2rem;
      }
      .zoom-control-group {
        width: 2.4rem;
        min-width: 2.4rem;
      }
      .zoom-control-group .zoom-btn {
        height: 2.2rem;
        min-height: 2.2rem;
      }
    }
    .accessibility-quick-btn {
      width: 3.05rem;
      min-width: 3.05rem;
      height: 2.5rem;
      min-height: 2.5rem;
      padding: 0;
      border-radius: 0.55rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 10px rgba(13, 110, 253, 0.12);
    }
    .accessibility-quick-btn i {
      margin: 0 !important;
      font-size: 0.95rem;
    }
    .zoom-control-group {
      width: 3.05rem;
      min-width: 3.05rem;
    }
    .zoom-control-group .zoom-btn {
      flex: 1;
      min-width: 0;
      width: auto;
      padding: 0.25rem;
      height: 2.5rem;
      min-height: 2.5rem;
    }
    #replayTtsBtn {
      gap: 0.2rem;
    }
    #restartBtn.restart-btn-next {
      background: #0d6efd !important;
      border-color: #0d6efd !important;
    }
    #restartBtn.restart-btn-next:hover,
    #restartBtn.restart-btn-next:focus {
      background: #0b5ed7 !important;
      border-color: #0a58ca !important;
    }
    body.high-contrast #restartBtn.restart-btn-next,
    body.high-contrast #restartBtn.restart-btn-next:hover,
    body.high-contrast #restartBtn.restart-btn-next:focus {
      background: #000 !important;
      border-color: #fff !important;
      color: #fff !important;
    }
    #ttsLangIndicator {
      font-size: 0.55rem;
      padding: 0.06rem 0.3rem;
      font-weight: 700;
      line-height: 1;
    }
    body.high-contrast #ttsLangIndicator {
      background: #fff !important;
      color: #000 !important;
      border-color: #fff !important;
    }
    body.high-contrast .accessibility-quick-btn,
    body.high-contrast .accessibility-sidebar .btn {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
    }
    body.high-contrast .accessibility-quick-btn:hover,
    body.high-contrast .accessibility-quick-btn:focus,
    body.high-contrast .accessibility-quick-btn:active,
    body.high-contrast .accessibility-sidebar .btn:hover,
    body.high-contrast .accessibility-sidebar .btn:focus,
    body.high-contrast .accessibility-sidebar .btn:active {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
      box-shadow: 0 0 0 0.14rem rgba(255, 255, 255, 0.2) !important;
    }
    body.high-contrast .accessibility-quick-btn i,
    body.high-contrast .accessibility-sidebar .btn i {
      color: #fff !important;
    }
    body.high-contrast .accessibility-quick-btn.active,
    body.high-contrast .accessibility-quick-btn[aria-pressed="true"] {
      background: #000 !important;
      color: #fff !important;
      border-color: #ffd966 !important;
      box-shadow: 0 0 0 0.16rem rgba(255, 217, 102, 0.34) !important;
    }
    body.high-contrast #accessibilitySidebarToggle,
    body.high-contrast #accessibilitySidebarToggle:hover,
    body.high-contrast #accessibilitySidebarToggle:focus,
    body.high-contrast #accessibilitySidebarToggle:active {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
      box-shadow: 0 0 0 0.14rem rgba(255, 255, 255, 0.2) !important;
    }
    body.high-contrast #accessibilitySidebarToggle i {
      color: #fff !important;
    }
    /* Modo escuro (não aplicado quando alto contraste está ativo) */
    body.dark-mode:not(.high-contrast) {
      --bg: #1a1d24;
      --panel: #252830;
      --border: #3d4149;
      --text: #e8eaed;
      --muted: #9aa0a6;
      --pending: #6b7280;
      --current-bg: #1e3a5f;
      --ok: #34d399;
      --err: #f87171;
      background: radial-gradient(75rem 37.5rem at 20% -10%, #1e293b 0, transparent 45%), var(--bg) !important;
      color: var(--text) !important;
    }
    body.dark-mode:not(.high-contrast) #app,
    body.dark-mode:not(.high-contrast) .top-navbar {
      background: transparent !important;
      color: var(--text) !important;
    }
    body.dark-mode:not(.high-contrast) .alert,
    body.dark-mode:not(.high-contrast) .card,
    body.dark-mode:not(.high-contrast) .discipline-card,
    body.dark-mode:not(.high-contrast) .metric-box {
      background: var(--panel) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    body.dark-mode:not(.high-contrast) .small,
    body.dark-mode:not(.high-contrast) .text-secondary {
      color: var(--muted) !important;
    }
    body.dark-mode:not(.high-contrast) .typing-card {
      background: var(--panel) !important;
      border-color: var(--border) !important;
    }
    body.dark-mode:not(.high-contrast) .accessibility-sidebar {
      background: var(--panel) !important;
      border-color: var(--border) !important;
    }
    body.dark-mode:not(.high-contrast) .accessibility-sidebar-header {
      background: #1e293b !important;
      border-color: var(--border) !important;
    }
    body.dark-mode:not(.high-contrast) .accessibility-quick-btn {
      background: var(--panel) !important;
      color: var(--text) !important;
      border-color: var(--border) !important;
    }
    body.dark-mode:not(.high-contrast) .accessibility-quick-btn:hover,
    body.dark-mode:not(.high-contrast) .accessibility-quick-btn:focus {
      background: #334155 !important;
      border-color: #64748b !important;
    }
    body.dark-mode:not(.high-contrast) #darkModeBtn.active,
    body.dark-mode:not(.high-contrast) #darkModeBtn[aria-pressed="true"] {
      background: #f59e0b !important;
      color: #111827 !important;
      border-color: #f59e0b !important;
    }
    body.dark-mode:not(.high-contrast) #darkModeBtn.active i,
    body.dark-mode:not(.high-contrast) #darkModeBtn[aria-pressed="true"] i {
      color: #111827 !important;
    }
    body.dark-mode:not(.high-contrast) .top-navbar .brand-title,
    body.dark-mode:not(.high-contrast) .top-navbar .nav-link,
    body.dark-mode:not(.high-contrast) .top-navbar a {
      color: var(--text) !important;
    }
    body.dark-mode:not(.high-contrast) .navbar-selectors .menu-select {
      background: var(--panel) !important;
      color: var(--text) !important;
      border-color: var(--border) !important;
    }
    body.dark-mode:not(.high-contrast) .top-nav-tabs .nav-link {
      background: #1e293b !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    body.dark-mode:not(.high-contrast) .top-nav-tabs .nav-link:hover {
      background: #334155 !important;
      color: var(--text) !important;
    }
    body.dark-mode:not(.high-contrast) .top-nav-tabs .nav-link.active {
      background: #475569 !important;
      border-color: #64748b !important;
      color: #f8fafc !important;
    }
    body.dark-mode:not(.high-contrast) .action-bar {
      background: color-mix(in srgb, var(--bg) 92%, var(--panel) 8%) !important;
      border-color: var(--border) !important;
    }
    body.dark-mode:not(.high-contrast) .modal-content,
    body.dark-mode:not(.high-contrast) .modal-header,
    body.dark-mode:not(.high-contrast) .modal-body,
    body.dark-mode:not(.high-contrast) .modal-footer {
      background: var(--panel) !important;
      color: var(--text) !important;
      border-color: var(--border) !important;
    }
    body.dark-mode:not(.high-contrast) .modal-title,
    body.dark-mode:not(.high-contrast) .modal-body p,
    body.dark-mode:not(.high-contrast) .modal-body strong {
      color: var(--text) !important;
    }
    body.dark-mode:not(.high-contrast) .modal .border.rounded {
      background: color-mix(in srgb, var(--panel) 95%, var(--bg) 5%) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    body.dark-mode:not(.high-contrast) .modal .table,
    body.dark-mode:not(.high-contrast) .modal .table th,
    body.dark-mode:not(.high-contrast) .modal .table td {
      border-color: var(--border) !important;
      color: var(--text) !important;
    }
    body.dark-mode:not(.high-contrast) .modal .table thead th {
      background: #1e293b !important;
      color: #e2e8f0 !important;
    }
    body.dark-mode:not(.high-contrast) .modal .table tbody tr {
      background: var(--panel) !important;
      color: var(--text) !important;
    }
    body.dark-mode:not(.high-contrast) .modal .table tbody tr:nth-of-type(odd) {
      background: var(--panel) !important;
    }
    body.dark-mode:not(.high-contrast) .modal .table tbody tr:nth-of-type(even) {
      background: #1e293b !important;
    }
    body.dark-mode:not(.high-contrast) .modal .table tbody td {
      color: #e2e8f0 !important;
    }
    body.dark-mode:not(.high-contrast) .modal .table tbody .text-secondary {
      color: var(--muted) !important;
    }
    body.dark-mode:not(.high-contrast) .form-control,
    body.dark-mode:not(.high-contrast) .form-select {
      background-color: var(--panel) !important;
      color: var(--text) !important;
      border-color: var(--border) !important;
    }
    body.dark-mode:not(.high-contrast) .form-select option {
      background: var(--panel);
      color: var(--text);
    }
    body.dark-mode:not(.high-contrast) .dropdown-menu {
      background: var(--panel) !important;
      border-color: var(--border) !important;
    }
    body.dark-mode:not(.high-contrast) .dropdown-item {
      color: var(--text) !important;
      background: transparent !important;
    }
    body.dark-mode:not(.high-contrast) .dropdown-item:hover,
    body.dark-mode:not(.high-contrast) .dropdown-item:focus {
      background: #334155 !important;
      color: var(--text) !important;
    }
    .font-scale-quick-btn {
      font-weight: 800;
      font-size: 0.95rem;
      line-height: 1;
      letter-spacing: 0.01em;
    }
    @media (min-width: 48rem) {
      .top-navbar {
        right: var(--accessibility-toggle-rail-width);
      }
      #app {
        padding-right: calc(var(--accessibility-toggle-rail-width) + 0.55rem);
      }
    }
    .accessibility-sidebar-backdrop {
      position: fixed;
      inset: 0;
      z-index: 2056;
      background: rgba(15, 23, 42, 0.3);
    }
    .accessibility-sidebar {
      position: fixed;
      right: 0;
      top: 0;
      height: 100dvh;
      width: var(--accessibility-sidebar-width);
      z-index: 2057;
      background: #ffffff;
      border-left: 1px solid #d0d7e2;
      box-shadow: -10px 0 24px rgba(15, 23, 42, 0.18);
      transform: translateX(102%);
      transition: transform .24s ease;
      display: flex;
      flex-direction: column;
    }
    body.accessibility-sidebar-open .accessibility-sidebar {
      transform: translateX(0);
    }
    .top-navbar {
      transition: right .24s ease;
    }
    #app {
      transition: padding-right .24s ease;
    }
    body.accessibility-sidebar-open .top-navbar {
      right: var(--accessibility-sidebar-width);
    }
    body.accessibility-sidebar-open #app {
      padding-right: calc(var(--accessibility-sidebar-width) + 1.25rem);
    }
    body.accessibility-sidebar-open.compact-viewport #app {
      padding-right: calc(var(--accessibility-sidebar-width) + 0.75rem) !important;
    }
    body.accessibility-sidebar-open #accessibilitySidebarToggle {
      opacity: 0;
      pointer-events: none;
    }
    body.accessibility-sidebar-open .accessibility-quick-rail {
      opacity: 0;
      pointer-events: none;
    }
    .accessibility-sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.9rem 1rem;
      border-bottom: 1px solid #d0d7e2;
      background: #f8fbff;
    }
    .accessibility-sidebar-body {
      padding: 1rem;
      overflow-y: auto;
    }
    .sidebar-action-group {
      border-bottom: 1px dashed #d0d7e2;
      padding-bottom: 0.6rem;
    }
    .sidebar-action-btn {
      min-height: 2.65rem;
      border-radius: 0.65rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.55rem;
      font-weight: 600;
    }
    .accessibility-sidebar .quick-fullscreen-btn {
      position: static;
      z-index: auto;
      min-height: 2.65rem;
      padding: 0.5rem 0.75rem;
      border-radius: 0.65rem;
      justify-content: flex-start;
    }
    .accessibility-sidebar .quick-fullscreen-label {
      display: inline;
    }
    .feedback-top-link {
      border: 1px solid #f4b741;
      border-radius: 0.65rem;
      background: linear-gradient(180deg, #fff8dc, #ffe9a8);
      color: #6a4600 !important;
      font-weight: 800;
      box-shadow: 0 1px 0 rgba(166, 104, 0, 0.15);
      transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
    }
    .feedback-top-link:hover {
      border-color: #e6a100;
      background: linear-gradient(180deg, #fff3c2, #ffe08a);
      box-shadow: 0 4px 10px rgba(166, 104, 0, 0.2);
      transform: translateY(-1px);
    }
    .feedback-top-link:focus-visible {
      outline: none;
      border-color: #cc8f00;
      box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .35);
    }
    .playlist-hud {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      margin-bottom: .75rem;
    }
    @media (max-width: 48rem) {
      .playlist-hud {
        flex-direction: column;
        align-items: stretch;
      }
    }
    .playlist-panel-invite {
      background: linear-gradient(135deg, #fff8e7 0%, #ffe8cc 50%, #ffdfb8 100%);
      border: 1px solid rgba(251, 146, 60, 0.35);
      border-radius: 0.75rem;
      box-shadow: 0 2px 8px rgba(251, 146, 60, 0.12);
    }
    .playlist-panel-invite .playlist-counter-text {
      font-size: 0.95rem;
      color: #c2410c;
      letter-spacing: 0.02em;
    }
    .playlist-panel-invite .badge.text-bg-success {
      background: #16a34a !important;
      color: #fff !important;
      border: none;
      font-weight: 600;
    }
    .playlist-panel-invite .badge.text-bg-primary {
      background: #2563eb !important;
      color: #fff !important;
      border: none;
      font-weight: 600;
    }
    .playlist-panel-invite .badge.text-bg-secondary {
      background: #ea580c !important;
      color: #fff !important;
      border: none;
      font-weight: 600;
    }
    .playlist-panel-invite #exitPlaylistBtn {
      border-color: #94a3b8;
      color: #64748b;
    }
    .playlist-panel-invite #exitPlaylistBtn:hover {
      background: #f1f5f9;
      border-color: #64748b;
      color: #475569;
    }
    body.dark-mode .playlist-panel-invite {
      background: linear-gradient(135deg, #422006 0%, #78350f 50%, #92400e 100%);
      border-color: rgba(251, 191, 36, 0.3);
    }
    body.dark-mode .playlist-panel-invite .playlist-counter-text {
      color: #fef3c7;
    }
    body.high-contrast .playlist-panel-invite {
      background: #000 !important;
      border-color: #fff !important;
    }
    body.high-contrast .playlist-panel-invite .playlist-counter-text {
      color: #fff !important;
    }
    body.high-contrast .playlist-panel-invite .badge {
      background: #000 !important;
      color: #fff !important;
      border: 1px solid #fff !important;
    }
    body.high-contrast .playlist-panel-invite #exitPlaylistBtn {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
    }
    .embed-share-cta {
      position: fixed;
      right: 1rem;
      bottom: max(1rem, env(safe-area-inset-bottom));
      z-index: 2000;
      max-width: 21rem;
      pointer-events: auto;
    }
    @media (max-width: 90rem) {
      .embed-share-cta {
        position: static;
        display: block;
        max-width: 100%;
        margin: 0.75rem auto 0;
      }
    }
    body.embed-mode .embed-share-cta {
      display: none !important;
    }
    body.embed-mode #informacao-pedagogica,
    body.embed-mode #faq-estrategico,
    body.embed-mode #sobre-projeto,
    body.embed-mode .legal-footer {
      display: none !important;
    }
    body.embed-mode #app {
      max-width: 100%;
      padding-bottom: 1rem;
    }
    .menu-controls .form-select.is-placeholder,
    .menu-controls .menu-select.is-placeholder {
      color: #dc2626 !important;
      border-color: #f87171 !important;
      background-color: #fef2f2 !important;
      cursor: pointer;
      font-weight: 500;
    }
    body.high-contrast .menu-controls .form-select.is-placeholder,
    body.high-contrast .menu-controls .menu-select.is-placeholder {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
    }
    .discipline-dropdown,
    .difficulty-dropdown {
      position: relative;
      z-index: 1060;
    }
    .discipline-dropdown .dropdown-menu,
    .difficulty-dropdown .dropdown-menu {
      z-index: 1061;
    }
    .typing-card {
      cursor: text;
      transition: box-shadow 0.25s, border-color 0.25s, background-color 0.25s;
    }
    .typing-card.typing-inactive {
      border: 2px dashed var(--border);
      background-color: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
      opacity: 0.92;
    }
    .typing-card.typing-active {
      border: 2px solid #0d6efd;
      box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.3);
      background-color: var(--panel);
      opacity: 1;
    }
    .typing-card.typing-active.round-complete {
      border-color: rgba(25, 135, 84, 0.6);
      box-shadow: 0 0 0 0.24rem rgba(25, 135, 84, 0.22), 0 0.8rem 1.6rem rgba(25, 135, 84, 0.14);
    }
    .typing-card .typing-text {
      cursor: text;
    }
    .typed-preview-card .typed-preview-content {
      white-space: pre-wrap;
      word-break: break-all;
      max-height: 8rem;
      overflow-y: auto;
      margin: 0;
      font-size: 0.9rem;
    }
    .typing-text {
      --typing-text-scale-local: var(--typing-font-scale, 1);
      font-size: clamp(
        calc(1.2rem * var(--typing-text-scale-local)),
        calc(5vw * var(--typing-text-scale-local)),
        calc(2rem * var(--typing-text-scale-local))
      );
    }
    @media (max-width: 48rem) {
      .typing-text {
        font-size: clamp(
          calc(0.98rem * var(--typing-text-scale-local)),
          calc(8.1vw * var(--typing-text-scale-local)),
          calc(1.85rem * var(--typing-text-scale-local))
        );
      }
    }
    .typing-text.frase-longa {
      font-size: clamp(
        calc(0.95rem * var(--typing-text-scale-local)),
        calc(2.2vw * var(--typing-text-scale-local)),
        calc(1.35rem * var(--typing-text-scale-local))
      );
      line-height: 1.45;
    }
    .typing-text.modo-ditado {
      max-height: min(45vh, 18rem);
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      font-size: clamp(
        calc(0.9rem * var(--typing-text-scale-local)),
        calc(2vw * var(--typing-text-scale-local)),
        calc(1.2rem * var(--typing-text-scale-local))
      );
      line-height: 1.5;
    }
    .challenge-timer-bar {
      height: 0.5rem;
      background: #e2e8f0;
      border-radius: 0.5rem;
      overflow: hidden;
      position: relative;
    }
    .challenge-timer-fill {
      height: 100%;
      background: linear-gradient(90deg, #0d6efd, #198754);
      border-radius: 0.5rem;
      transition: width 0.25s linear;
    }
    .challenge-timer-label {
      position: absolute;
      right: 0.35rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.65rem;
      font-weight: 700;
      color: #334155;
      pointer-events: none;
    }
    body.dark-mode:not(.high-contrast) .challenge-timer-bar {
      background: #334155;
    }
    body.dark-mode:not(.high-contrast) .challenge-timer-label {
      color: #e2e8f0;
    }
    .action-bar.menu-retracted #menuControls,
    .action-bar.menu-retracted .menu-controls {
      display: none !important;
    }
    .action-bar.menu-retracted .menu-retract-toggle {
      display: none !important;
    }
    .action-bar.menu-retracted .menu-expand-btn {
      display: inline-flex !important;
      visibility: visible !important;
    }
    .action-bar.menu-retracted .menu-expand-btn[hidden] {
      display: inline-flex !important;
    }
    .action-bar:not(.menu-retracted) .menu-expand-btn {
      display: none !important;
    }
    body.compact-viewport .action-bar.menu-retracted .menu-expand-btn {
      grid-area: selectors;
    }
    .menu-retract-toggle {
      flex-shrink: 0;
      flex-direction: column;
      align-items: flex-start;
    }
    .keyboard-hint-card.keyboard-retracted .card-body {
      display: none !important;
    }
    .keyboard-hint-card.keyboard-retracted .keyboard-expand-btn {
      display: inline-flex !important;
    }
    .keyboard-hint-card.keyboard-retracted .keyboard-expand-btn[hidden] {
      display: inline-flex !important;
    }
    .keyboard-hint-card:not(.keyboard-retracted) .keyboard-expand-btn {
      display: none !important;
    }
    .keyboard-hint-card.keyboard-retracted {
      padding: 0.5rem 0.75rem;
    }
    .keyboard-hint-card.keyboard-retracted .keyboard-expand-btn {
      border-color: rgba(147, 197, 253, 0.5);
      color: #dbeafe;
    }
    .keyboard-hint-card.keyboard-retracted .keyboard-expand-btn:hover {
      background: rgba(96, 165, 250, 0.2);
      border-color: #93c5fd;
      color: #f8fafc;
    }
    .keyboard-hint-grid .kbd-key.kbd-key-help {
      pointer-events: auto;
      cursor: help;
    }
    .keyboard-hint-grid .kbd-key.kbd-key-help:focus-visible {
      outline: 2px solid #93c5fd;
      outline-offset: 1px;
    }
    body.high-contrast .keyboard-hint-grid .kbd-key.kbd-key-help:focus-visible {
      outline-color: #fff;
    }
    #keyboardHintCard {
      transform: scale(0.85);
      transform-origin: top center;
      -webkit-font-smoothing: antialiased;
      margin-top: 0.1rem;
      margin-bottom: 0.25rem !important;
    }
    #keyboardHintCard .keyboard-hint-grid {
      gap: 0.2rem;
    }
    #keyboardHintCard .kbd-row {
      gap: 0.15rem;
    }
    #keyboardHintCard .kbd-key {
      min-height: 1.45rem;
    }
    #keyboardHintCard .kbd-key .kbd-main {
      font-size: 0.98rem;
    }
    #actionButtons {
      margin-bottom: 0.25rem !important;
    }
    #statusLine {
      margin-bottom: 0.25rem !important;
    }
    #keyboardHintCard .card-body {
      padding: 0.25rem 0.4rem !important;
    }
    .quick-fullscreen-btn {
      position: static;
      z-index: 1;
      min-height: 2.75rem;
      padding: 0.5rem 0.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      border-radius: 0.6rem;
    }
    .quick-fullscreen-label {
      display: none;
    }
    .hint-popover-warning {
      --bs-popover-bg: #fff3cd;
      --bs-popover-border-color: #f2c96d;
      --bs-popover-body-color: #664d03;
      --bs-popover-max-width: 19rem;
      font-weight: 700;
    }
    .hint-popover-warning .popover-body {
      font-size: 1rem;
      line-height: 1.3;
      padding: 0.65rem 0.8rem;
    }
    .hint-popover-warning.bs-popover-top > .popover-arrow::before,
    .hint-popover-warning.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
      border-top-color: #f2c96d;
    }
    section[aria-labelledby="typing-title"] {
      position: relative;
    }
    .status-line {
      text-align: center;
    }
    .status-line.status-hint {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.55rem 0.75rem;
      border-radius: 0.75rem;
      border: 1px solid #f1aeb5;
      background: linear-gradient(180deg, #fff5f7, #ffecef);
      box-shadow: 0 4px 12px rgba(176, 42, 55, 0.08);
      font-size: 1rem;
      line-height: 1.32;
      color: #7b1f2a !important;
    }
    .status-hint-head {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-weight: 800;
      color: #8f1d2c;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    .status-hint-body {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.4rem;
      font-weight: 700;
      color: #7b1f2a;
    }
    .status-hint-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.1rem;
      padding: 0.14rem 0.56rem;
      border-radius: 0.62rem;
      border: 1px solid transparent;
      font-weight: 800;
      letter-spacing: 0;
      font-size: 1.06rem;
      line-height: 1.05;
      font-family: "Consolas", "Courier New", monospace;
      background: #ffffff;
    }
    .status-hint-pill-wrong {
      border-color: #e5a8b0;
      color: #8f1d2c;
      box-shadow: inset 0 -2px 0 rgba(176, 42, 55, 0.2);
    }
    .status-hint-pill-correct {
      border-color: #b7e4c7;
      color: #146c43;
      box-shadow: inset 0 -2px 0 rgba(20, 108, 67, 0.2);
    }
    .status-hint-arrow {
      color: #b02a37;
      font-weight: 900;
      font-size: 1rem;
    }
    .status-line.status-countdown {
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-width: 15.5rem;
      margin: 0 auto 0.4rem;
      padding: 0.62rem 1.3rem;
      border-radius: 1rem;
      border: 2px solid #b8d4ff;
      background: radial-gradient(circle at 16% 18%, #ffffff 0%, #e7f0ff 48%, #d9e8ff 100%);
      color: #154c91 !important;
      font-weight: 900;
      letter-spacing: 0.03em;
      font-size: clamp(1.16rem, 2.2vw, 1.5rem);
      box-shadow: 0 8px 20px rgba(13, 110, 253, 0.2);
      text-align: center;
      animation: countdownPulseSoft 1.05s ease-in-out infinite;
    }
    .status-line.status-countdown.status-countdown-go {
      border-color: #8cd2a8;
      background: radial-gradient(circle at 16% 18%, #ffffff 0%, #e9f9ef 50%, #d8f2e3 100%);
      color: #0f6a3b !important;
      animation: countdownGoPop 0.58s ease-out 1;
    }
    .countdown-overlay {
      position: fixed;
      inset: 0;
      z-index: 2060;
      background: rgba(0, 0, 0, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .countdown-overlay-text {
      padding: 1.5rem 2.5rem;
      border-radius: 1.2rem;
      font-weight: 900;
      font-size: clamp(2.5rem, 10vw, 5rem);
      text-align: center;
    }
    .countdown-overlay-text.status-countdown {
      border: 2px solid #b8d4ff;
      background: radial-gradient(circle at 16% 18%, #ffffff 0%, #e7f0ff 48%, #d9e8ff 100%);
      color: #154c91 !important;
      animation: countdownPulseSoft 1.05s ease-in-out infinite;
    }
    .countdown-overlay-text.status-countdown.status-countdown-go {
      border-color: #8cd2a8;
      background: radial-gradient(circle at 16% 18%, #ffffff 0%, #e9f9ef 50%, #d8f2e3 100%);
      color: #0f6a3b !important;
      animation: countdownGoPop 0.58s ease-out 1;
    }
    body.high-contrast .countdown-overlay {
      background: rgba(0, 0, 0, 0.7);
    }
    body.high-contrast .countdown-overlay-text.status-countdown,
    body.high-contrast .countdown-overlay-text.status-countdown.status-countdown-go {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
      box-shadow: none !important;
      animation: none !important;
    }
    .celebration-overlay {
      position: fixed;
      inset: 0;
      z-index: 2065;
      background: rgba(0, 0, 0, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: all;
    }
    .celebration-overlay-inner {
      position: relative;
      z-index: 1;
      overflow: hidden;
      padding: 2rem 3rem;
      border-radius: 1.4rem;
      border: 2px solid #8cd2a8;
      background: radial-gradient(circle at 20% 30%, #ffffff 0%, #e9f9ef 45%, #d8f2e3 100%);
      color: #0f6a3b;
      font-weight: 900;
      font-size: clamp(2rem, 8vw, 4rem);
      text-align: center;
      box-shadow: 0 12px 32px rgba(13, 110, 253, 0.25);
    }
    .celebration-overlay-inner::before,
    .celebration-overlay-inner::after {
      content: "";
      position: absolute;
      inset: -25% -15%;
      pointer-events: none;
    }
    .celebration-overlay-inner::before {
      background:
        radial-gradient(circle at 10% 25%, rgba(255, 193, 7, 0.7) 0 0.3rem, transparent 0.32rem),
        radial-gradient(circle at 24% 62%, rgba(13, 110, 253, 0.6) 0 0.28rem, transparent 0.3rem),
        radial-gradient(circle at 38% 32%, rgba(25, 135, 84, 0.65) 0 0.28rem, transparent 0.3rem),
        radial-gradient(circle at 52% 58%, rgba(220, 53, 69, 0.5) 0 0.26rem, transparent 0.28rem),
        radial-gradient(circle at 66% 28%, rgba(255, 193, 7, 0.65) 0 0.27rem, transparent 0.29rem),
        radial-gradient(circle at 80% 64%, rgba(13, 110, 253, 0.55) 0 0.25rem, transparent 0.27rem),
        radial-gradient(circle at 92% 38%, rgba(25, 135, 84, 0.6) 0 0.24rem, transparent 0.26rem);
      animation: eduConfettiBurst 1.2s ease-out;
    }
    .celebration-overlay-inner::after {
      background:
        radial-gradient(circle at 16% 48%, rgba(255, 255, 255, 0.85) 0 0.18rem, transparent 0.2rem),
        radial-gradient(circle at 46% 22%, rgba(255, 255, 255, 0.8) 0 0.15rem, transparent 0.17rem),
        radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.82) 0 0.16rem, transparent 0.18rem);
      animation: eduConfettiSparkle 1.2s ease-out;
    }
    body.high-contrast .celebration-overlay {
      background: rgba(0, 0, 0, 0.6);
    }
    body.high-contrast .celebration-overlay-inner {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
    }
    body.high-contrast .celebration-overlay-inner::before,
    body.high-contrast .celebration-overlay-inner::after {
      display: none !important;
    }
    .confetti-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }
    .confetti-particle {
      position: absolute;
      top: -12px;
      width: 8px;
      height: 8px;
      border-radius: 2px;
      animation: confettiFall linear forwards;
      opacity: 0.9;
    }
    @keyframes confettiFall {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.9;
      }
      100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
      }
    }
    body.high-contrast .confetti-container {
      display: none;
    }
    body.high-contrast .status-line.status-countdown,
    body.high-contrast .status-line.status-countdown.status-countdown-go {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
      box-shadow: none !important;
      animation: none !important;
    }
    body.high-contrast .status-line.status-hint {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
      box-shadow: none !important;
    }
    body.high-contrast .status-hint-head,
    body.high-contrast .status-hint-body,
    body.high-contrast .status-hint-arrow {
      color: #fff !important;
    }
    body.high-contrast .status-hint-pill,
    body.high-contrast .status-hint-pill-wrong,
    body.high-contrast .status-hint-pill-correct {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
      box-shadow: none !important;
      text-decoration: none !important;
    }
    body.high-contrast .status-line.text-danger {
      display: inline-flex;
      align-items: center;
      background: #000 !important;
      color: #fff !important;
      border: 1px solid #fff;
      border-radius: 0.72rem;
      padding: 0.42rem 0.72rem;
      font-weight: 800;
    }
    body.high-contrast .hint-popover-warning {
      --bs-popover-bg: #000;
      --bs-popover-border-color: #fff;
      --bs-popover-body-color: #fff;
      --bs-popover-header-bg: #000;
      --bs-popover-header-color: #fff;
      box-shadow: none !important;
    }
    body.high-contrast .hint-popover-warning .popover-body {
      color: #fff !important;
      font-weight: 800;
    }
    body.high-contrast .hint-popover-warning .popover-arrow::before,
    body.high-contrast .hint-popover-warning .popover-arrow::after {
      border-top-color: #fff !important;
      border-bottom-color: #fff !important;
      border-left-color: #fff !important;
      border-right-color: #fff !important;
    }
    body.high-contrast #informacao-pedagogica .info-panel,
    body.high-contrast #sobre-projeto .info-panel {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
    }
    body.high-contrast #informacao-pedagogica .info-panel h3,
    body.high-contrast #informacao-pedagogica .info-panel p,
    body.high-contrast #informacao-pedagogica .info-panel li,
    body.high-contrast #sobre-projeto .info-panel h3,
    body.high-contrast #sobre-projeto .info-panel p,
    body.high-contrast #sobre-projeto .info-panel li,
    body.high-contrast #sobre-projeto .info-panel strong {
      color: #fff !important;
    }
    body.high-contrast #faq-estrategico .accordion,
    body.high-contrast #faq-estrategico .accordion-item,
    body.high-contrast #faq-estrategico .accordion-button,
    body.high-contrast #faq-estrategico .accordion-body,
    body.high-contrast #sobre-projeto #embedAccordion .accordion,
    body.high-contrast #sobre-projeto #embedAccordion .accordion-item,
    body.high-contrast #sobre-projeto #embedAccordion .accordion-button,
    body.high-contrast #sobre-projeto #embedAccordion .accordion-body {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
      box-shadow: none !important;
    }
    body.high-contrast #faq-estrategico .accordion-button:not(.collapsed),
    body.high-contrast #sobre-projeto #embedAccordion .accordion-button:not(.collapsed) {
      background: #000 !important;
      color: #fff !important;
    }
    body.high-contrast #faq-estrategico .accordion-button:focus,
    body.high-contrast #sobre-projeto #embedAccordion .accordion-button:focus {
      border-color: #fff !important;
      box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.3) !important;
    }
    body.high-contrast #faq-estrategico .accordion-button::after,
    body.high-contrast #sobre-projeto #embedAccordion .accordion-button::after {
      filter: brightness(0) invert(1) !important;
    }
    body.high-contrast #sobre-projeto #embedAccordion textarea,
    body.high-contrast #sobre-projeto #embedAccordion .form-control {
      background: #000 !important;
      color: #fff !important;
      border-color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      caret-color: #fff !important;
    }
    @keyframes countdownPulseSoft {
      0% {
        transform: scale(0.99);
      }
      50% {
        transform: scale(1.02);
      }
      100% {
        transform: scale(0.99);
      }
    }
    @keyframes countdownGoPop {
      0% {
        transform: scale(0.94);
      }
      65% {
        transform: scale(1.06);
      }
      100% {
        transform: scale(1);
      }
    }
    @keyframes disciplineHintShake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-6px); }
      40% { transform: translateX(6px); }
      60% { transform: translateX(-4px); }
      80% { transform: translateX(4px); }
    }
    .discipline-hint-shake {
      animation: disciplineHintShake 0.5s ease-in-out;
    }
    .status-line.status-next-round {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.65rem 0.85rem;
      border-radius: 0.85rem;
      border: 1px solid #bcd3ff;
      background: linear-gradient(180deg, #f3f8ff, #e5efff);
      color: #123d78 !important;
      box-shadow: 0 5px 14px rgba(13, 110, 253, 0.12);
      font-size: 1rem;
      line-height: 1.3;
    }
    .status-next-round-head {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      font-weight: 800;
      color: #0f4d94;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    .status-next-round-body {
      font-weight: 650;
      color: #1a4f8f;
    }
    .status-next-round-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.16rem 0.58rem;
      border-radius: 999px;
      border: 1px solid #9ec5fe;
      background: #ffffff;
      color: #0b5ed7;
      font-weight: 800;
      letter-spacing: 0.01em;
    }
    .status-line.status-next-round.status-next-round-clickable {
      cursor: pointer;
      user-select: none;
      transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .status-line.status-next-round.status-next-round-clickable:hover {
      transform: translateY(-1px);
      border-color: #8fb8ff;
      box-shadow: 0 9px 20px rgba(13, 110, 253, 0.18);
    }
    .status-line.status-next-round.status-next-round-clickable:focus-visible {
      outline: none;
      border-color: #6ea8fe;
      box-shadow: 0 0 0 0.22rem rgba(13, 110, 253, 0.22), 0 9px 20px rgba(13, 110, 253, 0.16);
    }
    #keyboardHintText {
      color: #f8fbff !important;
      font-weight: 700;
      line-height: 1.34;
      text-wrap: pretty;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
    .action-bar {
      display: grid !important;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "checkboxes"
        "dropdowns";
      align-items: center;
      gap: 0.45rem !important;
      overflow-x: hidden;
      overflow-y: visible;
      padding-bottom: 0.25rem;
    }
    .action-bar .menu-retract-toggle {
      grid-area: checkboxes;
    }
    .action-bar .menu-expand-btn {
      grid-area: checkboxes;
    }
    .action-bar .menu-controls {
      grid-area: dropdowns;
      width: 100%;
      display: grid !important;
      grid-template-columns: minmax(10.5rem, 1fr) minmax(10.5rem, 1fr) minmax(12rem, 1fr);
      gap: 0.45rem !important;
    }
    .action-bar .control-row {
      display: flex;
      flex-wrap: nowrap !important;
      gap: 0.45rem;
      margin-bottom: 0 !important;
    }
    .action-bar .menu-controls {
      align-items: center;
      margin-left: 0.1rem;
      margin-right: 0.1rem;
    }
    .action-bar .field-group {
      min-width: auto;
    }
    .action-bar .menu-select {
      min-width: 14rem;
    }
    .action-bar .menu-controls .discipline-dropdown .menu-select {
      min-width: 14rem;
    }
    .action-bar .menu-select-small {
      min-width: 10rem;
    }
    .action-bar .control-btn,
    .action-bar .btn {
      white-space: nowrap;
    }
    @media (max-width: 80rem) {
      .action-bar .menu-select {
        min-width: 12rem;
      }
      .action-bar .menu-controls .discipline-dropdown .menu-select {
        min-width: 12rem;
      }
      .action-bar .menu-select-small {
        min-width: 9rem;
      }
      .action-bar .control-btn {
        padding: 0.52rem 0.78rem;
      }
    }
    @media (max-width: 64rem) {
      .navbar-expand-lg .navbar-toggler {
        display: block;
      }
      .navbar-expand-lg .navbar-collapse {
        display: none !important;
      }
      .navbar-expand-lg .navbar-collapse.show {
        display: block !important;
      }
      .navbar-expand-lg .navbar-nav {
        flex-direction: column;
      }
    }
    @media (max-width: 52rem) {
      .action-bar {
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        overflow-x: hidden;
        overflow-y: visible;
        min-width: 0;
      }
      .action-bar .control-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
      }
      .action-bar .menu-controls {
        width: 100%;
        min-width: 0;
        display: grid !important;
        grid-template-columns: minmax(10.5rem, 1fr) minmax(10.5rem, 1fr) minmax(12rem, 1fr);
        gap: 0.35rem !important;
      }
      .action-bar .menu-controls .field-group {
        min-width: 0;
      }
      .action-bar .menu-controls .field-group .menu-select,
      .action-bar .menu-controls .discipline-dropdown .menu-select {
        min-width: 0;
      }
      .action-bar .control-btn {
        min-height: 2.3rem;
        padding: 0.45rem 0.58rem;
        font-size: 0.92rem;
      }
    }
    @media (max-width: 50rem) and (max-height: 37.5rem) {
      .action-bar .menu-controls .discipline-dropdown .menu-select {
        min-height: 1.9rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
      }
      .action-bar .menu-controls .field-group .dropdown-toggle::after {
        margin-left: 0.2rem;
      }
      .action-bar .menu-controls {
        gap: 0.25rem !important;
      }
    }
    body.compact-viewport {
      overflow-x: hidden;
      overflow-y: auto;
      min-height: 100dvh;
    }
    body.compact-viewport main.container {
      overflow: visible;
      min-width: 0;
    }
    body.compact-viewport #app {
      width: 100%;
      min-width: 0;
      min-height: 0;
      margin-top: var(--top-nav-offset);
      max-height: none;
      overflow: visible;
      padding-top: 0.4rem !important;
      padding-bottom: 0.55rem !important;
    }
    body.compact-viewport .action-bar {
      margin-bottom: 0.35rem !important;
      display: grid !important;
      grid-template-columns: 1fr;
      grid-template-areas:
        "toggle"
        "selectors"
        "iniciar";
      gap: 0.35rem !important;
      overflow: visible;
    }
    body.compact-viewport .action-bar .menu-retract-toggle {
      grid-area: toggle;
      align-self: start;
    }
    body.compact-viewport .action-bar .menu-controls {
      grid-area: selectors;
      width: 100%;
      display: grid !important;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0.35rem !important;
      margin: 0;
    }
    body.compact-viewport .action-bar .control-row {
      display: none !important;
    }
    body.compact-viewport .action-bar .action-bar-actions,
    body.compact-viewport .action-bar #restartBtn {
      grid-area: iniciar;
      width: 100%;
    }
    body.compact-viewport .typing-card {
      min-height: 8.2rem;
      margin-bottom: 0.35rem !important;
    }
    body.compact-viewport .typing-card .card-body {
      min-height: 8.2rem;
      padding: 0.6rem 0.7rem;
    }
    body.compact-viewport .typing-text {
      min-height: 4.8rem;
      max-height: none;
      font-size: clamp(
        calc(1.45rem * var(--typing-text-scale-local)),
        calc(2.7vw * var(--typing-text-scale-local)),
        calc(2rem * var(--typing-text-scale-local))
      );
      line-height: 1.26;
      overflow: visible;
      overflow-wrap: anywhere;
    }
    body.compact-viewport .typing-text.frase-longa {
      font-size: clamp(
        calc(1.2rem * var(--typing-text-scale-local)),
        calc(2.1vw * var(--typing-text-scale-local)),
        calc(1.65rem * var(--typing-text-scale-local))
      );
      line-height: 1.22;
    }
    body.compact-viewport .typing-text.modo-ditado {
      max-height: min(40vh, 14rem);
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
    body.compact-viewport #statusLine {
      min-height: 1.2rem;
      margin-bottom: 0.35rem !important;
      font-size: 0.94rem;
    }
    body.compact-viewport #keyboardHintCard {
      margin-bottom: 0 !important;
      transform: scale(0.9);
      transform-origin: top center;
    }
    body.compact-viewport .embed-share-cta {
      display: none !important;
    }
    @media (max-height: 43.75rem) {
      body.compact-viewport #keyboardHintCard {
        transform: scale(0.85);
      }
    }
    @media (min-width: 87.5rem) and (max-height: 64rem) {
      .action-bar {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
          "checkboxes"
          "dropdowns";
        gap: 0.35rem !important;
        width: 100%;
        overflow: visible;
      }
      .action-bar > * {
        min-width: 0;
      }
      .action-bar .control-row {
        display: none !important;
      }
      .action-bar .menu-retract-toggle {
        grid-area: checkboxes;
        align-self: start;
      }
      .action-bar .menu-controls {
        grid-area: dropdowns;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.35rem !important;
        width: 100%;
        margin: 0;
      }
      .action-bar .menu-controls .field-group {
        min-width: 0;
      }
      .action-bar #restartBtn {
        grid-area: iniciar;
        width: 100%;
      }
      .action-bar .control-btn,
      .action-bar .menu-select,
      .action-bar .menu-select-small,
      .action-bar #restartBtn {
        width: 100%;
      }
      .action-bar .menu-select {
        min-width: 0;
      }
      .action-bar .menu-select-small {
        min-width: 0;
      }
      .action-bar .control-btn {
        min-height: 2.45rem;
        padding: 0.4rem 0.6rem;
      }
    }
    #informacao-pedagogica,
    #faq-estrategico,
    #sobre-projeto {
      padding-top: 1.05rem !important;
      padding-bottom: 1.05rem !important;
    }
    #informacao-pedagogica p,
    #faq-estrategico .accordion-body,
    #sobre-projeto p,
    #sobre-projeto li {
      font-size: 0.95rem;
      line-height: 1.42;
    }
    .info-panel {
      border: 1px solid #d0d7e2;
      border-radius: 0.8rem;
      padding: 0.85rem 0.95rem;
      background: #fff;
      height: 100%;
    }
    .compact-section-title {
      margin-bottom: 0.55rem !important;
    }
    .compact-grid {
      --bs-gutter-x: 0.9rem;
      --bs-gutter-y: 0.9rem;
    }
    .legal-footer {
      display: flex !important;
      position: static;
      z-index: 1045;
      margin: 0.35rem 0 0;
      min-height: var(--legal-footer-height);
      padding: 0.33rem 0.6rem;
      background: rgba(248, 250, 253, 0.96);
      -webkit-backdrop-filter: saturate(140%) blur(6px);
      backdrop-filter: saturate(140%) blur(6px);
      border-top: 1px solid #d0d7e2;
      justify-content: center !important;
    }
    .legal-links {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      width: 100%;
      white-space: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      font-size: 0.8rem;
      line-height: 1.1;
    }
    .legal-links a + a::before {
      content: "|";
      color: #9aa3b2;
      margin: 0 0.38rem 0 0.08rem;
    }
    .legal-links::-webkit-scrollbar {
      display: none;
    }
    .legal-links a {
      text-decoration: none;
    }
    .top-navbar .nav-link,
    #sobre-projeto a,
    .legal-links a {
      min-height: 44px;
      padding: 10px 12px;
      display: inline-flex;
      align-items: center;
    }
    .legal-links a:hover,
    .legal-links a:focus {
      text-decoration: underline;
    }
    @media (max-width: 47.99rem) {
      .accessibility-quick-rail,
      .accessibility-sidebar,
      .accessibility-sidebar-backdrop {
        display: none !important;
      }
      :root {
        --legal-footer-height: 3.1rem;
      }
      #informacao-pedagogica,
      #faq-estrategico,
      #sobre-projeto {
        padding-top: 0.85rem !important;
        padding-bottom: 0.85rem !important;
      }
    }

    /* Modais em primeiro plano (acima da barra de navegação, painel de acessibilidade e overlays) */
    body .modal-backdrop {
      z-index: 9998 !important;
    }
    body .modal {
      z-index: 9999 !important;
    }
    /* Limitar altura dos modais para não tapar o teclado virtual */
    .modal-dialog {
      max-height: 85vh;
    }
    .modal-dialog .modal-body {
      max-height: 60vh;
      overflow-y: auto;
    }

  
