@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Outfit', sans-serif;
    background: #f8fafc;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
}

/* ── Brand ── */
.brand-gradient { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); }
.text-brand     { background: linear-gradient(135deg, #4338ca, #6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Views ── */
.view-section        { display: none; }
.view-section.active { display: block; animation: fadeIn 0.2s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Branch chip active state ── */
.branch-chip.active {
    background: #4338ca !important;
    color: #fff !important;
    border-color: #4338ca !important;
    box-shadow: 0 4px 12px rgba(67,56,202,0.3);
}

/* ── Branch themes ── */
.branch-cs   { --b-clr: #4f46e5; --b-bg: #eef2ff; }
.branch-elec { --b-clr: #d97706; --b-bg: #fffbeb; }
.branch-extc { --b-clr: #e11d48; --b-bg: #fff1f2; }
.branch-mech { --b-clr: #0891b2; --b-bg: #ecfeff; }
.branch-civil{ --b-clr: #059669; --b-bg: #f0fdf4; }

/* ── Subject card ── */
.subject-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.subject-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* ── No scrollbar ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Auth tabs ── */
.auth-tab        { border-bottom: 2px solid transparent; color: #94a3b8; }
.auth-tab.active { border-bottom-color: #4338ca; color: #4338ca; }

/* ── Glass nav ── */
.glass {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ── Floating animation ── */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-20px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* ── Loading spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.8s linear infinite; }

/* ── Storage banner ── */
#storage-banner { font-family: 'Outfit', sans-serif; }