/* The practice heading owns a quiet numeric badge; the CTA stays unchanged. */
#practicePanel { min-width: 0; }
#practicePanel select { min-width: 0; max-width: 100%; }
@media (max-width: 1023px) {
    /* The implicit auto track used the adjacent statistics card's min-content
       width at 320px, stretching both cards. Keep this one mobile track fluid. */
    #startScreen > .grid { grid-template-columns: minmax(0, 1fr); }
    #practicePanel + div { min-width: 0; }
}
.practice-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.practice-heading h2 { min-width: 0; margin: 0; }
.generation-quota {
    --quota-ink: #24465e;
    --quota-muted: #365066;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    min-width: 40px;
    min-height: 36px;
    padding: 5px 10px;
    border: 1px solid #ffffffb3;
    border-radius: 12px;
    background: #ffffff80;
    color: var(--quota-ink);
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 24px;
    text-align: center;
}
.generation-quota[data-state="empty"], .generation-quota[data-state="loading"], .generation-quota[data-state="unavailable"] { color: var(--quota-muted); }
.generation-quota[hidden] { display: none !important; }
@media (max-width: 360px) {
    .practice-heading { gap: 8px; }
    .practice-heading h2 { font-size: 22px; }
    .generation-quota { min-width: 36px; padding: 5px 8px; font-size: 15px; }
    #practicePanel + div > div:first-child { gap: 8px; }
    #practicePanel + div > div:first-child h3 { min-width: 0; font-size: 18px; }
    #practicePanel + div > div:first-child > div { flex-shrink: 0; }
}