/* =====================================
   Tahouri Edu Platform
   Learning: Grade Selection
   Page-owned styles
   ===================================== */

#app > .screen:has(> .tahouri-app-header) #gradesContainer {
    width: min(680px, 100%);
    margin: 28px auto 12px;
    display: flex;
    justify-content: center;
}

#app > .screen:has(> .tahouri-app-header) #gradesContainer .gradeBtn {
    width: min(520px, 100%);
    min-height: 92px;
    padding: 18px 24px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card-large);
    background: linear-gradient(135deg, var(--ui-surface) 0%, #f7faff 100%);
    color: var(--ui-text);
    font-family: inherit;
    font-size: clamp(19px, 3vw, 23px);
    font-weight: 800;
    line-height: 1.5;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}

#app > .screen:has(> .tahouri-app-header) #gradesContainer .gradeBtn:hover { transform: translateY(-2px); border-color: #c7d5e5; box-shadow: 0 12px 28px rgba(31, 41, 55, .10); }
#app > .screen:has(> .tahouri-app-header) #gradesContainer .gradeBtn:active { transform: translateY(0); }
#app > .screen:has(> .tahouri-app-header) #gradesContainer .gradeBtn:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }

@media (max-width: 520px) {
    #app > .screen:has(> .tahouri-app-header) #gradesContainer { margin-top: 22px; }
    #app > .screen:has(> .tahouri-app-header) #gradesContainer .gradeBtn { min-height: 82px; padding: 16px 18px; border-radius: 19px; }
}