/**
 * @file mode-select.css
 * @description Mode selection screen styles (Student/Writer choice)
 *
 * @requires base.css (CSS variables)
 * @requires components.css (mode-card)
 * @usedBy index.php (#mode-screen)
 *
 * @status COMPLETE
 */

/* ==================== MODE SELECT SCREEN ==================== */
#mode-screen {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mode-title {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 6px;
    opacity: 0.8;
}

.mode-subtitle {
    font-size: 0.85rem;
    opacity: 0.5;
    margin-bottom: 30px;
}

.mode-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}