/* ============================================================
   Portal do Árbitro — Nova identidade visual ("brand")
   Minimal/limpo + acentos dos cartões de árbitro.
   TUDO scoped a .pa-brand: este ficheiro coexiste com style.css
   nas páginas da app (homepage, resultado) sem colisões.
   Base futura para migração progressiva do site inteiro.
   ============================================================ */

.pa-brand {
    /* --- Tokens: cor --- */
    --pa-primary: 140 65% 33%;        /* verde-relvado */
    --pa-primary-hover: 140 65% 26%;
    --pa-primary-soft: 140 50% 94%;   /* fundos de ilustrações/ícones */
    --pa-yellow: 45 96% 51%;          /* cartão amarelo — só acentos */
    --pa-red: 353 78% 47%;            /* cartão vermelho — só acentos */

    /* Neutros: mesma escala zinc do style.css (migração futura = troca de tokens) */
    --pa-bg: 0 0% 100%;
    --pa-bg-subtle: 240 5% 97%;
    --pa-card: 0 0% 100%;
    --pa-text: 240 10% 4%;
    --pa-text-muted: 240 4% 46%;
    --pa-border: 240 6% 90%;

    --pa-danger: 353 78% 47%;
    --pa-danger-soft: 353 78% 47%;
    --pa-success: 140 65% 33%;

    /* --- Tokens: forma --- */
    --pa-radius: 12px;
    --pa-radius-input: 8px;
    --pa-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
    --pa-shadow-md: 0 6px 24px rgba(24, 24, 27, 0.07);
    --pa-shadow-lg: 0 18px 50px rgba(24, 24, 27, 0.14);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: hsl(var(--pa-text));
}

.dark-mode .pa-brand,
html.dark-mode .pa-brand {
    --pa-primary: 140 55% 42%;
    --pa-primary-hover: 140 55% 50%;
    --pa-primary-soft: 140 40% 14%;
    --pa-bg: 240 6% 8%;
    --pa-bg-subtle: 240 5% 11%;
    --pa-card: 240 5% 10%;
    --pa-text: 0 0% 95%;
    --pa-text-muted: 240 5% 63%;
    --pa-border: 240 5% 20%;
    --pa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --pa-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45);
    --pa-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6);
}

/* ============ Página de auth (body.pa-brand) ============ */

body.pa-brand {
    margin: 0;
    min-height: 100vh;
    background: hsl(var(--pa-bg-subtle));
    -webkit-font-smoothing: antialiased;
}

.pa-brand *, .pa-brand *::before, .pa-brand *::after { box-sizing: border-box; }

.pa-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 28px;
}

.pa-auth-home-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: hsl(var(--pa-text-muted));
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease;
}
.pa-auth-home-link:hover { color: hsl(var(--pa-text)); }

.pa-card {
    background: hsl(var(--pa-card));
    border: 1px solid hsl(var(--pa-border));
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-md);
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
}

.pa-card-wide { max-width: 560px; }

.pa-card-header {
    text-align: center;
    margin-bottom: 28px;
}

.pa-card-header .pa-illustration { margin-bottom: 16px; }

.pa-card-header h1 {
    margin: 0 0 6px;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: hsl(var(--pa-text));
}

.pa-card-header p {
    margin: 0;
    color: hsl(var(--pa-text-muted));
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ============ Logomark ============ */

.pa-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: hsl(var(--pa-text));
    font-weight: 800;
    letter-spacing: -0.01em;
}
.pa-logo svg { flex-shrink: 0; }
.pa-logo-word { font-size: 1.02rem; }

/* ============ Ilustrações ============ */

.pa-illustration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: hsl(var(--pa-primary-soft));
}

/* ============ Formulários ============ */

.pa-field { margin-bottom: 18px; }

.pa-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 480px) { .pa-field-row { grid-template-columns: 1fr; } }

.pa-label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: hsl(var(--pa-text));
}

.pa-input-wrap { position: relative; }

.pa-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid hsl(var(--pa-border));
    border-radius: var(--pa-radius-input);
    background: hsl(var(--pa-bg));
    color: hsl(var(--pa-text));
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pa-input:focus {
    outline: none;
    border-color: hsl(var(--pa-primary));
    box-shadow: 0 0 0 3px hsl(var(--pa-primary) / 0.15);
}
.pa-input.pa-input-error { border-color: hsl(var(--pa-danger)); }
.pa-input::placeholder { color: hsl(var(--pa-text-muted) / 0.7); }

select.pa-input { appearance: auto; }

.pa-input-action {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: hsl(var(--pa-text-muted));
    display: inline-flex;
}
.pa-input-action:hover { color: hsl(var(--pa-text)); }

.pa-field-error {
    display: none;
    margin-top: 6px;
    font-size: 0.82rem;
    color: hsl(var(--pa-danger));
}
.pa-field-error.visible { display: block; }

.pa-field-hint {
    margin-top: 6px;
    font-size: 0.8rem;
    color: hsl(var(--pa-text-muted));
}

/* ============ Botões ============ */

.pa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--pa-radius-input);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.2;
}
.pa-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pa-btn-primary {
    background: hsl(var(--pa-primary));
    color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 14px hsl(var(--pa-primary) / 0.28);
}
.pa-btn-primary:hover:not(:disabled) { background: hsl(var(--pa-primary-hover)); }

.pa-btn-ghost {
    background: transparent;
    border-color: hsl(var(--pa-border));
    color: hsl(var(--pa-text));
}
.pa-btn-ghost:hover { background: hsl(var(--pa-bg-subtle)); }

.pa-btn-google {
    background: hsl(var(--pa-bg));
    border-color: hsl(var(--pa-border));
    color: hsl(var(--pa-text));
}
.pa-btn-google:hover { background: hsl(var(--pa-bg-subtle)); }

/* ============ Divisor ============ */

.pa-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: hsl(var(--pa-text-muted));
    font-size: 0.82rem;
}
.pa-divider::before, .pa-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: hsl(var(--pa-border));
}

/* ============ Alertas ============ */

.pa-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 15px;
    border-radius: var(--pa-radius-input);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 20px;
}
.pa-alert svg { flex-shrink: 0; margin-top: 1px; }

.pa-alert-error {
    background: hsl(var(--pa-danger) / 0.08);
    border: 1px solid hsl(var(--pa-danger) / 0.25);
    color: hsl(var(--pa-danger));
}

.pa-alert-success {
    background: hsl(var(--pa-success) / 0.08);
    border: 1px solid hsl(var(--pa-success) / 0.25);
    color: hsl(var(--pa-success));
}

/* ============ Rodapé do cartão / links ============ */

.pa-card-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid hsl(var(--pa-border));
    text-align: center;
    font-size: 0.9rem;
    color: hsl(var(--pa-text-muted));
}

.pa-link {
    color: hsl(var(--pa-primary));
    font-weight: 600;
    text-decoration: none;
}
.pa-link:hover { text-decoration: underline; }

.pa-terms-note {
    margin: 16px 0 0;
    font-size: 0.8rem;
    color: hsl(var(--pa-text-muted));
    text-align: center;
    line-height: 1.5;
}

.pa-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 0.88rem;
}
.pa-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: hsl(var(--pa-text-muted));
}
.pa-checkbox-label input { accent-color: hsl(var(--pa-primary)); width: 16px; height: 16px; }

/* ============ <details> de campos opcionais ============ */

.pa-details {
    border: 1px solid hsl(var(--pa-border));
    border-radius: var(--pa-radius-input);
    margin-bottom: 18px;
}
.pa-details summary {
    padding: 12px 14px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: hsl(var(--pa-text-muted));
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pa-details summary::-webkit-details-marker { display: none; }
.pa-details summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.pa-details[open] summary::after { transform: rotate(-135deg); }
.pa-details-body { padding: 4px 14px 14px; }

/* ============ Modal de conversão ============ */

.pa-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 16, 20, 0.55);
    backdrop-filter: blur(3px);
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pa-modal-overlay.open { display: flex; }

.pa-modal {
    background: hsl(var(--pa-card));
    border: 1px solid hsl(var(--pa-border));
    border-radius: 16px;
    box-shadow: var(--pa-shadow-lg);
    width: 100%;
    max-width: 430px;
    padding: 32px 30px;
    position: relative;
    text-align: center;
    animation: pa-pop 0.2s ease;
    color: hsl(var(--pa-text));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@keyframes pa-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pa-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: hsl(var(--pa-text-muted));
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
}
.pa-modal-close:hover { background: hsl(var(--pa-bg-subtle)); color: hsl(var(--pa-text)); }

.pa-modal .pa-illustration { margin-bottom: 18px; }

.pa-modal h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.pa-modal-sub {
    margin: 0 0 20px;
    color: hsl(var(--pa-text-muted));
    font-size: 0.92rem;
    line-height: 1.55;
}

.pa-benefit-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    text-align: left;
}
.pa-benefit-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}
.pa-benefit-list .pa-benefit-check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: hsl(var(--pa-primary-soft));
    color: hsl(var(--pa-primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pa-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ============ Barra de separadores (navegação mobile) ============
   Visível só no telemóvel (≤768px): ao alcance do polegar e sempre à vista,
   em vez de escondida atrás de um menu. Em tablet mantém-se o drawer e em
   desktop a sidebar. */

.pa-tabbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Acima do #page-loader (99999) para a barra continuar visível e destacada
       enquanto a página seguinte carrega — como numa app nativa. */
    z-index: 100000;
    background: hsl(var(--pa-card));
    border-top: 1px solid hsl(var(--pa-border));
    box-shadow: 0 -2px 12px rgba(24, 24, 27, 0.06);
    padding-bottom: env(safe-area-inset-bottom); /* iPhone: barra de gestos */
}

.pa-tabbar-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 560px;
    margin: 0 auto;
}

.pa-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Alvo de toque confortável */
    min-height: 58px;
    padding: 8px 4px;
    text-decoration: none;
    color: hsl(var(--pa-text-muted));
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
}

.pa-tab svg {
    width: 22px;
    height: 22px;
}

.pa-tab.active {
    color: hsl(var(--pa-primary));
}

/* Toque: resposta tátil imediata */
.pa-tab:active {
    background: hsl(var(--pa-primary) / 0.06);
}

/* Separador tocado enquanto a página seguinte não chega */
.pa-tab.is-loading .pa-tab-label {
    opacity: 0.6;
}

.pa-tab-label {
    line-height: 1;
}

/* Um só padrão até ao desktop: barra inferior em telemóvel E tablet.
   (Antes o tablet usava um drawer — mais um padrão para manter e testar,
   sem vantagem real.) */
@media (max-width: 1024px) {
    .pa-tabbar { display: block; }
}

/* ============ Runner de teste ============
   Layout em coluna com altura de viewport dinâmica (dvh): ao contrário do
   antigo `position:fixed` + `100vh` + `overflow:hidden`, o conteúdo nunca é
   cortado quando a barra de URL do Safari colapsa. */

.pa-runner {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: hsl(var(--pa-bg-subtle));
}

/* --- Topo --- */
.pa-runner-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: hsl(var(--pa-card));
    border-bottom: 1px solid hsl(var(--pa-border));
    padding-top: env(safe-area-inset-top);
}

.pa-runner-topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pa-runner-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    white-space: nowrap;
}

.pa-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: hsl(var(--pa-bg-subtle));
    border: 1px solid hsl(var(--pa-border));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.pa-timer.warning {
    background: hsl(var(--pa-danger) / 0.12);
    border-color: hsl(var(--pa-danger) / 0.3);
    color: hsl(var(--pa-danger));
    animation: pa-timer-pulse 1s ease-in-out infinite;
}

@keyframes pa-timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.62; }
}

.pa-runner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pa-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Alvo de toque */
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid hsl(var(--pa-border));
    background: hsl(var(--pa-card));
    color: hsl(var(--pa-text-muted));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pa-icon-btn:hover { background: hsl(var(--pa-bg-subtle)); color: hsl(var(--pa-text)); }

.pa-exit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid hsl(var(--pa-border));
    background: hsl(var(--pa-card));
    color: hsl(var(--pa-text));
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.pa-exit-btn:hover {
    border-color: hsl(var(--pa-danger) / 0.4);
    color: hsl(var(--pa-danger));
}

/* Indicador de gravação */
.pa-sync {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: hsl(var(--pa-text-muted));
}
.pa-sync.saving { color: hsl(var(--pa-primary)); }
.pa-sync.saving svg { animation: pa-spin 1s linear infinite; }
.pa-sync.saved { color: hsl(var(--pa-success)); }
.pa-sync.error { color: hsl(var(--pa-danger)); }

@keyframes pa-spin { to { transform: rotate(360deg); } }

/* --- Barra de progresso --- */
.pa-progress-track {
    height: 4px;
    background: hsl(var(--pa-border));
}

.pa-progress-fill {
    height: 100%;
    background: hsl(var(--pa-primary));
    transition: width 0.3s ease;
}

/* --- Corpo: índice + pergunta --- */
.pa-runner-body {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 16px 120px;
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 22px;
    align-items: start;
}

/* Índice de perguntas */
.pa-qnav {
    position: sticky;
    top: 84px;
    background: hsl(var(--pa-card));
    border: 1px solid hsl(var(--pa-border));
    border-radius: var(--pa-radius);
    padding: 16px;
    box-shadow: var(--pa-shadow-sm);
}

.pa-qnav-title {
    margin: 0 0 12px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(var(--pa-text-muted));
}

.pa-qnav-grid {
    display: grid;
    /* 4 colunas: com a largura do painel dá células de ~40px, confortáveis.
       Mais colunas obrigariam a células demasiado pequenas. */
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.pa-qnav-btn {
    aspect-ratio: 1;
    /* Sem min-width/min-height: combinados com aspect-ratio impediam a célula
       de encolher e faziam a grelha transbordar o painel. */
    min-width: 0;
    border-radius: 8px;
    border: 1.5px solid hsl(var(--pa-border));
    background: hsl(var(--pa-bg-subtle));
    color: hsl(var(--pa-text-muted));
    font-family: inherit;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pa-qnav-btn.answered {
    background: hsl(var(--pa-primary) / 0.12);
    border-color: hsl(var(--pa-primary) / 0.35);
    color: hsl(var(--pa-primary-hover));
}

.pa-qnav-btn.current {
    background: hsl(var(--pa-primary));
    border-color: hsl(var(--pa-primary));
    color: #fff;
    box-shadow: 0 3px 10px hsl(var(--pa-primary) / 0.32);
}

.pa-qnav-legend {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid hsl(var(--pa-border));
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 0.74rem;
    color: hsl(var(--pa-text-muted));
}

.pa-qnav-legend-item { display: flex; align-items: center; gap: 8px; }

.pa-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pa-legend-dot.answered { background: hsl(var(--pa-primary) / 0.5); }
.pa-legend-dot.unanswered { background: hsl(var(--pa-bg-subtle)); border: 1.5px solid hsl(var(--pa-border)); }

.pa-qnav-count {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: hsl(var(--pa-text-muted));
}
.pa-qnav-count strong { color: hsl(var(--pa-text)); }

/* Painel da pergunta */
.pa-qpanel {
    /* Explícito: é um <main>, e o style.css antigo põe `display:flex` em main */
    display: block;
    background: hsl(var(--pa-card));
    border: 1px solid hsl(var(--pa-border));
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-sm);
    padding: 26px 28px;
}

.pa-question-block { animation: pa-q-fade 0.25s ease; }

@keyframes pa-q-fade {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.pa-q-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.pa-q-index {
    font-weight: 800;
    font-size: 0.95rem;
    font-family: inherit;
}
.pa-q-index span { color: hsl(var(--pa-text-muted)); font-weight: 600; }

.pa-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: hsl(var(--pa-bg-subtle));
    color: hsl(var(--pa-text-muted));
    border: 1px solid hsl(var(--pa-border));
}

.pa-report-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid hsl(var(--pa-border));
    background: transparent;
    color: hsl(var(--pa-text-muted));
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.pa-report-btn:hover { color: hsl(var(--pa-danger)); border-color: hsl(var(--pa-danger) / 0.35); }

.pa-question-text {
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.55;
    margin-bottom: 22px;
    letter-spacing: -0.01em;
}

.pa-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa-option-input { position: absolute; opacity: 0; pointer-events: none; }

.pa-option-label {
    display: flex;
    align-items: center;
    gap: 13px;
    /* Alvo de toque folgado */
    min-height: 56px;
    padding: 14px 16px;
    border: 1.5px solid hsl(var(--pa-border));
    border-radius: 12px;
    background: hsl(var(--pa-bg-subtle) / 0.5);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Só em dispositivos com rato — em touch o :hover fica "colado" */
@media (hover: hover) {
    .pa-option-label:hover {
        border-color: hsl(var(--pa-primary) / 0.45);
        background: hsl(var(--pa-primary) / 0.04);
    }
}

.pa-option-letter {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: hsl(var(--pa-bg-subtle));
    border: 1px solid hsl(var(--pa-border));
    color: hsl(var(--pa-text-muted));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}

.pa-option-text { font-size: 0.97rem; line-height: 1.45; }

.pa-option-check {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid hsl(var(--pa-border));
    background: hsl(var(--pa-card));
    display: flex;
    align-items: center;
    justify-content: center;
}
.pa-option-check svg { display: none; width: 12px; height: 12px; }

.pa-option-input:checked + .pa-option-label {
    border-color: hsl(var(--pa-primary));
    background: hsl(var(--pa-primary) / 0.07);
}
.pa-option-input:checked + .pa-option-label .pa-option-letter {
    background: hsl(var(--pa-primary));
    border-color: hsl(var(--pa-primary));
    color: #fff;
}
.pa-option-input:checked + .pa-option-label .pa-option-check {
    background: hsl(var(--pa-primary));
    border-color: hsl(var(--pa-primary));
}
.pa-option-input:checked + .pa-option-label .pa-option-check svg { display: block; stroke: #fff; }

/* Foco por teclado visível */
.pa-option-input:focus-visible + .pa-option-label {
    outline: 2px solid hsl(var(--pa-primary));
    outline-offset: 2px;
}

/* --- Barra de controlo inferior --- */
.pa-runner-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    background: hsl(var(--pa-card));
    border-top: 1px solid hsl(var(--pa-border));
    box-shadow: 0 -4px 18px rgba(24, 24, 27, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
}

.pa-runner-controls-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pa-controls-status {
    flex: 1;
    text-align: center;
    font-size: 0.8rem;
    color: hsl(var(--pa-text-muted));
}

.pa-runner-controls .pa-btn { width: auto; min-width: 120px; }

/* --- Esqueleto de carregamento --- */
.pa-skeleton-line {
    background: hsl(var(--pa-border));
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.pa-skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, hsl(var(--pa-card) / 0.6), transparent);
    animation: pa-shimmer 1.4s infinite;
}
@keyframes pa-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* --- Scrim do índice em mobile --- */
.pa-qnav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 16, 20, 0.5);
    z-index: 60;
}
.pa-qnav-scrim.open { display: block; }

/* --- Responsivo --- */
@media (max-width: 900px) {
    .pa-runner-body {
        grid-template-columns: 1fr;
        padding: 16px 14px 110px;
    }

    /* O índice deixa de ocupar coluna e passa a gaveta lateral */
    .pa-qnav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(300px, 84vw);
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 61;
        padding-top: calc(16px + env(safe-area-inset-top));
    }

    .pa-qnav.open { transform: translateX(0); box-shadow: var(--pa-shadow-lg); }

    /* Na gaveta há mais largura: 5 colunas dão células grandes para o dedo */
    .pa-qnav-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }

    .pa-qpanel { padding: 20px 16px; }
    .pa-question-text { font-size: 1.08rem; }
    .pa-runner-brand span { display: none; }
}

/* Telemóveis estreitos (Galaxy S25 e afins, 360px): o cabeçalho não cabe com
   o botão "Sair" por extenso — passa a ícone e tudo aperta um pouco. */
@media (max-width: 430px) {
    .pa-runner-topbar-inner {
        padding: 8px 10px;
        gap: 8px;
    }

    .pa-runner-actions { gap: 6px; }

    .pa-icon-btn,
    .pa-exit-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
    }

    .pa-exit-label { display: none; }

    .pa-timer {
        padding: 7px 12px;
        font-size: 0.9rem;
    }

    .pa-sync { width: 18px; }
}

@media (min-width: 901px) {
    /* Em desktop o índice está sempre visível — o botão não faz falta */
    #qnav-toggle { display: none; }
}

/* ============ Dashboard ============ */

.pa-dashboard { width: 100%; max-width: 980px; margin: 0 auto; }

.pa-dash-hero {
    padding: 4px 0 20px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.pa-dash-greeting { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }

.pa-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 22px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.98rem;
    color: #fff;
    background: hsl(var(--pa-primary));
    box-shadow: 0 6px 18px hsl(var(--pa-primary) / 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
@media (hover: hover) {
    .pa-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px hsl(var(--pa-primary) / 0.4); }
}

.pa-cta-resume { background: hsl(var(--pa-yellow)); color: #1a1400; box-shadow: 0 6px 18px hsl(var(--pa-yellow) / 0.35); }
.pa-cta-done { background: hsl(var(--pa-success)); box-shadow: 0 6px 18px hsl(var(--pa-success) / 0.32); }

.pa-cta-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pa-cta-label { line-height: 1.2; }
.pa-cta-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    opacity: 0.85;
}
.pa-cta-sep { opacity: 0.6; }

.pa-dash-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.pa-dash-stat {
    background: hsl(var(--pa-card));
    border: 1px solid hsl(var(--pa-border));
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-sm);
    padding: 14px 12px;
    text-align: center;
}

.pa-dash-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    background: hsl(var(--pa-bg-subtle));
    color: hsl(var(--pa-text-muted));
}
.pa-dash-stat-icon.rank { background: hsl(var(--pa-yellow) / 0.15); color: hsl(var(--pa-yellow)); }
.pa-dash-stat-icon.tests { background: hsl(var(--pa-primary) / 0.12); color: hsl(var(--pa-primary)); }
.pa-dash-stat-icon.correct { background: hsl(var(--pa-success) / 0.12); color: hsl(var(--pa-success)); }
.pa-dash-stat-icon.wrong { background: hsl(var(--pa-danger) / 0.12); color: hsl(var(--pa-danger)); }

.pa-dash-stat-value { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.pa-dash-stat-value.good { color: hsl(var(--pa-success)); }
.pa-dash-stat-value.bad { color: hsl(var(--pa-danger)); }
.pa-dash-stat-label { font-size: 0.72rem; font-weight: 600; color: hsl(var(--pa-text-muted)); margin-top: 2px; }

.pa-dash-list { display: flex; flex-direction: column; gap: 8px; }

.pa-dash-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid hsl(var(--pa-border));
    background: hsl(var(--pa-bg-subtle) / 0.5);
    text-decoration: none;
    color: hsl(var(--pa-text));
}
@media (hover: hover) {
    .pa-dash-item:hover { background: hsl(var(--pa-bg-subtle)); border-color: hsl(var(--pa-primary) / 0.4); }
}

.pa-dash-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pa-dash-item-icon.pass { background: hsl(var(--pa-success) / 0.14); color: hsl(var(--pa-success)); }
.pa-dash-item-icon.fail { background: hsl(var(--pa-danger) / 0.14); color: hsl(var(--pa-danger)); }

.pa-dash-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pa-dash-item-mode { font-size: 0.88rem; font-weight: 700; }
.pa-dash-item-date { font-size: 0.76rem; color: hsl(var(--pa-text-muted)); }

.pa-dash-item-score { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pa-dash-item-score.pass { color: hsl(var(--pa-success)); }
.pa-dash-item-score.fail { color: hsl(var(--pa-danger)); }

@media (max-width: 720px) {
    .pa-dash-hero { padding: 4px 0 16px; }
    .pa-dash-greeting { font-size: 1.55rem; text-align: left; }
    .pa-cta { display: none; }
    .pa-dash-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 420px) {
    .pa-dash-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Iniciar teste ============ */

.pa-start { width: 100%; max-width: 900px; margin: 0 auto; }
/* Compensa o header absoluto (ver partials/guest_navbar_fix.php) em qualquer
   página sem hero por baixo dele, e dá-lhe a margem lateral que o modo
   sidebar recebe de --main-content-- mas o <main> em modo navbar não tem
   nenhuma. Especificidade a dobrar (.pa-brand junto) de propósito: páginas
   como .pa-result definem o seu próprio `padding` shorthand mais abaixo no
   ficheiro e, com a mesma especificidade, a ordem no ficheiro ganhava —
   isto teria de ganhar sempre, independentemente de onde a outra regra vive. */
/* Propriedades individuais, não o shorthand `padding`: assim não apaga o
   padding-bottom que .pa-result já define (o shorthand reporia a 0). */
.pa-brand.pa-navbar-page { padding-top: 96px; padding-left: 20px; padding-right: 20px; }
@media (max-width: 620px) {
    .pa-brand.pa-navbar-page { padding-top: 84px; padding-left: 16px; padding-right: 16px; }
}

.pa-start-head { text-align: center; margin-bottom: 22px; }
.pa-start-head h1 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
.pa-start-head p { margin: 0; color: hsl(var(--pa-text-muted)); font-size: 0.92rem; }

.pa-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.pa-mode-card {
    text-align: left;
    cursor: pointer;
    padding: 18px;
    border: 1.5px solid hsl(var(--pa-border));
    border-radius: var(--pa-radius);
    background: hsl(var(--pa-card));
    box-shadow: var(--pa-shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pa-mode-card h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; }
.pa-mode-card p { margin: 0 0 12px; font-size: 0.84rem; color: hsl(var(--pa-text-muted)); }

.pa-mode-card.selected {
    border-color: hsl(var(--pa-primary));
    box-shadow: 0 0 0 3px hsl(var(--pa-primary) / 0.12);
}

.pa-mode-card.disabled {
    cursor: not-allowed;
    opacity: 0.55;
    background: hsl(var(--pa-bg-subtle));
}

.pa-mode-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }

.pa-mode-badge {
    padding: 4px 9px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: hsl(var(--pa-bg-subtle));
    color: hsl(var(--pa-text-muted));
}
.pa-mode-badge.recommended { background: hsl(var(--pa-primary) / 0.12); color: hsl(var(--pa-primary)); }
.pa-mode-badge.hard { background: hsl(var(--pa-danger) / 0.12); color: hsl(var(--pa-danger)); }
.pa-mode-badge.quick { background: hsl(210 90% 55% / 0.12); color: hsl(210 90% 55%); }

.pa-mode-check { width: 20px; height: 20px; color: transparent; flex-shrink: 0; }
.pa-mode-card.selected .pa-mode-check { color: hsl(var(--pa-primary)); }

.pa-mode-meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: hsl(var(--pa-text));
}
.pa-mode-meta span { display: flex; align-items: center; gap: 4px; }
.pa-mode-meta svg { color: hsl(var(--pa-text-muted)); }

/* .pa-btn é inline-flex, por isso `margin: 0 auto` não o centrava — quem centra
   é o contentor. */
.pa-start-actions { display: flex; justify-content: center; }

.pa-start-submit {
    width: 100%;
    max-width: 380px;
    padding: 14px 24px;
    font-size: 1rem;
}

/* Em telemóvel o JS move o botão para dentro da grelha, logo abaixo do modo
   escolhido; aí ocupa a largura toda do cartão. */
.pa-mode-grid > .pa-start-submit { max-width: none; }

.pa-start-back { text-align: center; margin-top: 16px; }

.pa-spin { width: 18px; height: 18px; animation: pa-spin-rotate 1s linear infinite; }
@keyframes pa-spin-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 620px) {
    .pa-mode-grid { grid-template-columns: 1fr; }
    .pa-start-head h1 { font-size: 1.25rem; }
}

/* ============ Perfil ============ */

.pa-profile { width: 100%; max-width: 780px; margin: 0 auto; }

.pa-profile-hero { text-align: center; padding: 34px 26px; position: relative; }

.pa-profile-edit {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid hsl(var(--pa-border));
    background: hsl(var(--pa-bg));
    color: hsl(var(--pa-text-muted));
    cursor: pointer;
}
@media (hover: hover) { .pa-profile-edit:hover { background: hsl(var(--pa-bg-subtle)); color: hsl(var(--pa-text)); } }

.pa-profile-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background: hsl(var(--pa-primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 800;
    border: 4px solid hsl(var(--pa-bg-subtle));
    box-shadow: var(--pa-shadow-sm);
    overflow: hidden;
}
.pa-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pa-profile-hero h1 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }

.pa-profile-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    color: hsl(var(--pa-text-muted));
    font-weight: 500;
    font-size: 0.92rem;
}
.pa-profile-meta-sep { opacity: 0.6; }

/* Sempre por baixo da linha de associação/categoria — não disputam espaço
   com esse texto nem ficam presos ao fim de uma frase longa. Entre si podem
   ficar lado a lado. */
.pa-profile-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.pa-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: help;
}
.pa-profile-badge.verified { background: hsl(var(--pa-success) / 0.12); color: hsl(var(--pa-success)); }
.pa-profile-badge.admin { background: hsl(var(--pa-danger) / 0.12); color: hsl(var(--pa-danger)); }

.pa-profile-updated {
    margin-top: 14px;
    color: hsl(var(--pa-success));
    font-weight: 600;
    font-size: 0.88rem;
}

.pa-profile-stats { grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }

.pa-milestone-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.pa-milestone-card {
    flex-shrink: 0;
    min-width: 120px;
    text-align: center;
    padding: 18px 14px;
    background: hsl(var(--pa-bg-subtle));
    border: 1px solid hsl(var(--pa-border));
    border-radius: var(--pa-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pa-milestone-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pa-milestone-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: hsl(var(--pa-text-muted));
}
.pa-milestone-value { font-weight: 800; font-size: 0.92rem; }

.pa-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pa-modal-form {
    max-width: 620px;
    text-align: left;
    max-height: 88vh;
    overflow-y: auto;
}
.pa-modal-form h3 { text-align: center; margin-bottom: 18px; }

.pa-modal-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}
.pa-modal-form-actions .pa-btn { width: auto; padding: 11px 22px; }

@media (max-width: 620px) {
    .pa-profile-hero { padding: 26px 18px; }
    .pa-profile-stats { grid-template-columns: repeat(2, 1fr); }
    .pa-modal-form-actions { flex-direction: column-reverse; }
    .pa-modal-form-actions .pa-btn { width: 100%; }
}

/* ============ Conquistas ============ */

.pa-achievements { width: 100%; max-width: 980px; margin: 0 auto; }

.pa-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: hsl(var(--pa-text-muted));
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    margin-bottom: 10px;
}
.pa-back-link:hover { color: hsl(var(--pa-text)); }

.pa-achievements-head { margin-bottom: 20px; }
.pa-achievements-head h1 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }

.pa-achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.pa-achievement-card {
    background: hsl(var(--pa-card));
    border: 1px solid hsl(var(--pa-border));
    border-radius: 16px;
    box-shadow: var(--pa-shadow-sm);
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.pa-achievement-card:not(.unlocked) { opacity: 0.72; }

.pa-achievement-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.pa-achievement-card h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.pa-achievement-card p { margin: 0 0 14px; font-size: 0.85rem; color: hsl(var(--pa-text-muted)); line-height: 1.4; }

.pa-achievement-status {
    margin-top: auto;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}
.pa-achievement-status.unlocked { color: hsl(var(--pa-success)); background: hsl(var(--pa-success) / 0.12); }
.pa-achievement-status.locked { color: hsl(var(--pa-text-muted)); background: hsl(var(--pa-border) / 0.6); }

/* ============ Página de resultado ============ */

.pa-result {
    /* width:100% é necessário: o .main-content é flex-column e, num flex item,
       as margens automáticas absorvem o espaço livre em vez de o esticar. */
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 4px 0 40px;
}

/* --- Hero: pontuação --- */
.pa-result-hero {
    background: hsl(var(--pa-card));
    border: 1px solid hsl(var(--pa-border));
    border-radius: 18px;
    box-shadow: var(--pa-shadow-md);
    padding: 26px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 26px;
    align-items: center;
}

.pa-ring { position: relative; width: 118px; height: 118px; flex-shrink: 0; }
.pa-ring svg { transform: rotate(-90deg); }
.pa-ring-bg { stroke: hsl(var(--pa-border)); }
.pa-ring-fill {
    stroke: hsl(var(--pa-danger));
    stroke-linecap: round;
    transition: stroke-dashoffset 0.9s cubic-bezier(.4, 0, .2, 1);
}
.pa-ring-fill.pass { stroke: hsl(var(--pa-primary)); }

.pa-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pa-ring-pct { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.02em; }
.pa-ring-frac { font-size: 0.72rem; font-weight: 600; color: hsl(var(--pa-text-muted)); }

.pa-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
}
.pa-result-badge.pass { background: hsl(var(--pa-success) / 0.12); color: hsl(var(--pa-success)); }
.pa-result-badge.fail { background: hsl(var(--pa-danger) / 0.12); color: hsl(var(--pa-danger)); }

.pa-result-title {
    margin: 0 0 10px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.pa-stat-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pa-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 9px;
    background: hsl(var(--pa-bg-subtle));
    border: 1px solid hsl(var(--pa-border));
    font-size: 0.78rem;
    font-weight: 600;
    color: hsl(var(--pa-text-muted));
    white-space: nowrap;
}

.pa-result-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 170px;
}
.pa-result-actions .pa-btn { padding: 10px 16px; font-size: 0.87rem; }

/* --- Desempenho por lei --- */
.pa-panel {
    background: hsl(var(--pa-card));
    border: 1px solid hsl(var(--pa-border));
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-sm);
    padding: 20px 22px;
    margin-bottom: 18px;
}

.pa-panel-title {
    margin: 0 0 14px;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--pa-text-muted));
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Correção --- */
.pa-review-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.pa-filters {
    display: inline-flex;
    gap: 4px;
    background: hsl(var(--pa-bg-subtle));
    border: 1px solid hsl(var(--pa-border));
    border-radius: 10px;
    padding: 4px;
}

.pa-filter {
    border: none;
    background: transparent;
    padding: 8px 13px;
    min-height: 40px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: hsl(var(--pa-text-muted));
    cursor: pointer;
    white-space: nowrap;
}
.pa-filter.active {
    background: hsl(var(--pa-card));
    color: hsl(var(--pa-text));
    box-shadow: var(--pa-shadow-sm);
}

.pa-review-item {
    background: hsl(var(--pa-card));
    border: 1px solid hsl(var(--pa-border));
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
.pa-review-item.hidden { display: none; }

.pa-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    text-align: left;
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    color: inherit;
}

.pa-review-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pa-review-icon.correct { background: hsl(var(--pa-success) / 0.14); color: hsl(var(--pa-success)); }
.pa-review-icon.incorrect { background: hsl(var(--pa-danger) / 0.14); color: hsl(var(--pa-danger)); }

.pa-review-q {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    /* Duas linhas no máximo quando fechado */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pa-chevron { flex-shrink: 0; color: hsl(var(--pa-text-muted)); transition: transform 0.2s ease; }
.pa-review-item.open .pa-chevron { transform: rotate(180deg); }
.pa-review-item.open .pa-review-q { -webkit-line-clamp: unset; }

.pa-review-body { display: none; padding: 0 16px 18px; }
.pa-review-item.open .pa-review-body { display: block; }

.pa-review-options {
    display: grid;
    /* 2 colunas fixas (2×2): com auto-fit as quatro opções ficavam 3+1,
       desalinhadas. Em telemóvel passam a 4 linhas. */
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.pa-review-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1.5px solid hsl(var(--pa-border));
    background: hsl(var(--pa-bg-subtle) / 0.5);
    font-size: 0.85rem;
    line-height: 1.4;
}
.pa-review-option .pa-opt-letter {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: hsl(var(--pa-border));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.72rem;
}
.pa-review-option.correct { border-color: hsl(var(--pa-success)); background: hsl(var(--pa-success) / 0.1); }
.pa-review-option.correct .pa-opt-letter { background: hsl(var(--pa-success)); color: #fff; }
.pa-review-option.wrong { border-color: hsl(var(--pa-danger)); background: hsl(var(--pa-danger) / 0.1); }
.pa-review-option.wrong .pa-opt-letter { background: hsl(var(--pa-danger)); color: #fff; }
.pa-opt-mark { margin-left: auto; flex-shrink: 0; }

.pa-explanation {
    background: hsl(var(--pa-info) / 0.09);
    border-left: 3px solid hsl(var(--pa-info));
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.55;
}
.pa-explanation strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: hsl(var(--pa-info));
    font-size: 0.78rem;
    margin-bottom: 5px;
}

.pa-review-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid hsl(var(--pa-border));
    font-size: 0.75rem;
    color: hsl(var(--pa-text-muted));
}

.pa-review-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.pa-review-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.pa-review-meta-item svg { flex-shrink: 0; opacity: 0.8; }

.pa-empty {
    text-align: center;
    padding: 40px 20px;
    color: hsl(var(--pa-text-muted));
}

@media (max-width: 720px) {
    .pa-result-hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 22px 16px;
        gap: 18px;
    }
    .pa-ring { margin: 0 auto; }
    .pa-stat-chips { justify-content: center; }
    .pa-result-actions { min-width: 0; }
    .pa-panel { padding: 16px 14px; }
    .pa-review-toolbar { flex-direction: column; align-items: stretch; }
    /* Preenche a largura toda, opções equidistantes, em vez de agrupadas
       à esquerda com scroll horizontal escondido. */
    .pa-filters { display: flex; }
    .pa-filter { flex: 1; }
    .pa-review-options { grid-template-columns: 1fr; }
}

/* ============ Histórico de testes ============
   Em ecrã largo é uma tabela; abaixo de 780px cada linha vira cartão, porque
   6 colunas em 360px eram simplesmente cortadas (o contentor não tinha sequer
   scroll horizontal). */

.pa-history { width: 100%; max-width: 980px; margin: 0 auto; }

.pa-history-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.pa-history-head h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.pa-table-wrap {
    background: hsl(var(--pa-card));
    border: 1px solid hsl(var(--pa-border));
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-sm);
    overflow: hidden;
}

.pa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.pa-table th {
    text-align: left;
    padding: 13px 16px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--pa-text-muted));
    border-bottom: 1px solid hsl(var(--pa-border));
    white-space: nowrap;
}

.pa-table td {
    padding: 14px 16px;
    border-bottom: 1px solid hsl(var(--pa-border));
    vertical-align: middle;
}

.pa-table tr:last-child td { border-bottom: 0; }

.pa-cell-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: hsl(var(--pa-text));
}
.pa-cell-inline svg { color: hsl(var(--pa-text-muted)); flex-shrink: 0; }

.pa-score-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 7px;
    font-weight: 800;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.pa-score-badge.good {
    background: hsl(var(--pa-success) / 0.12);
    color: hsl(var(--pa-success));
    border: 1px solid hsl(var(--pa-success) / 0.3);
}
.pa-score-badge.bad {
    background: hsl(var(--pa-danger) / 0.12);
    color: hsl(var(--pa-danger));
    border: 1px solid hsl(var(--pa-danger) / 0.3);
}

.pa-mode-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: hsl(var(--pa-bg-subtle));
    border: 1px solid hsl(var(--pa-border));
    font-size: 0.8rem;
    font-weight: 600;
    color: hsl(var(--pa-text-muted));
}

.pa-row-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 13px;
    border-radius: 8px;
    border: 1px solid hsl(var(--pa-border));
    background: hsl(var(--pa-card));
    color: hsl(var(--pa-text));
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 600;
    white-space: nowrap;
}
.pa-row-link:hover {
    background: hsl(var(--pa-primary));
    border-color: hsl(var(--pa-primary));
    color: #fff;
}

/* Rótulo só visível no modo cartão */
.pa-cell-label { display: none; }

@media (max-width: 780px) {
    .pa-table,
    .pa-table tbody,
    .pa-table tr,
    .pa-table td { display: block; width: 100%; }

    .pa-table thead { display: none; }

    .pa-table tr {
        border: 1px solid hsl(var(--pa-border));
        border-radius: 12px;
        padding: 6px 14px;
        margin-bottom: 10px;
        background: hsl(var(--pa-card));
    }

    .pa-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px dashed hsl(var(--pa-border));
    }

    .pa-table tr td:last-child {
        border-bottom: 0;
        padding-top: 12px;
    }

    .pa-cell-label {
        display: inline;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: hsl(var(--pa-text-muted));
    }

    .pa-table-wrap {
        background: none;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    .pa-row-link { width: 100%; justify-content: center; }
}

/* ============ Convite a instalar a PWA ============ */
/* Vive dentro de .pa-brand (dashboard), por isso pode usar os tokens --pa-*.
   A folha de instruções do iOS NÃO pode: é injetada no <body>, fora do scope,
   e está no pwa.js com cores explícitas. */

.pa-install-invite {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.pa-install-invite[hidden] { display: none; }

.pa-install-invite-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: hsl(var(--pa-primary-soft));
    color: hsl(var(--pa-primary));
    display: flex;
    align-items: center;
    justify-content: center;
}

.pa-install-invite-text {
    flex: 1 1 240px;
    min-width: 0;
}

.pa-install-invite-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.pa-install-invite-body {
    margin: 0;
    font-size: 0.88rem;
    color: hsl(var(--pa-text-muted));
}

.pa-install-invite-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pa-install-invite-actions .pa-btn {
    padding: 10px 18px;
    font-size: 0.87rem;
    min-height: 44px;
}

/* Abaixo dos 560px a linha única deixa de caber: o ícone e o texto ficam
   lado a lado e os botões passam para baixo, a toda a largura. */
@media (max-width: 560px) {
    .pa-install-invite-actions {
        width: 100%;
        gap: 10px;
    }

    .pa-install-invite-actions .pa-btn { flex: 1 1 0; }
}

/* ============ Utilidades ============ */

.pa-text-center { text-align: center; }
.pa-mt-0 { margin-top: 0; }
.pa-muted { color: hsl(var(--pa-text-muted)); }

@media (max-width: 480px) {
    .pa-card { padding: 30px 22px; }
    .pa-modal { padding: 28px 20px; }
}