@media (max-width: 640px) {
    body { font-size: 15px; }
    button, input, select, textarea { min-height: 44px; }

    .bottom-nav {
        bottom: calc(10px + env(safe-area-inset-bottom, 0));
        width: calc(100% - 20px);
    }

    .content-area { padding: 0.8rem 0.8rem calc(100px + env(safe-area-inset-bottom, 0)); }

    .feed-container { height: calc(100vh - 180px - env(safe-area-inset-bottom, 0)); }
    .feed-item { height: calc(100vh - 190px - env(safe-area-inset-bottom, 0)); padding: 1.2rem; }

    .header-content { padding: 0.8rem 1rem; }
    .auth-container { padding: 2rem 1rem; }
    .auth-form { padding: 1.6rem 1.2rem; }

    input, select, textarea { font-size: 16px; }
    .modal-content { padding: 1.6rem 1.2rem; }
    .form-row { flex-direction: column; gap: 0; }
    .setup-buttons { flex-direction: column; }
    .setup-buttons .btn-primary { width: 100%; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .auth-container { padding: 1rem; }
    .feed-item { height: calc(100vh - 130px); padding: 0.8rem; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #f2f2f7;
        --text-2: rgba(235, 235, 245, 0.6);
        --glass-bg: rgba(28, 28, 30, 0.5);
        --glass-border: rgba(255, 255, 255, 0.12);
        --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    body { background: #101318; }
    body::before { background: #123a6b; opacity: 0.3; }
    body::after { background: #4a1560; opacity: 0.3; }

    .glass::before, .glass-card::before {
        background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 32%);
    }

    .role-btn.active, .quarter-tab.active { background: rgba(255,255,255,0.15); color: var(--text); }

    .auth-form input, .role-form input, .form-group input, .form-group select,
    .form-group textarea, .create-post textarea, .class-selector select, .subject-selector select {
        background: rgba(255, 255, 255, 0.08);
        color: var(--text);
    }

    .lesson-item, .class-code-item, .day-column { background: rgba(255, 255, 255, 0.07); }

    .action-btn, .btn-glass, .file-input-label, .subject-chip, .class-chip span,
    .feed-type-badge, .icon-btn {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text);
    }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}