/* ============================================================================
   BRIGHT MINDS ACADEMY — STUDENT PORTAL  ·  "Inspire · Learn · Achieve"
   ---------------------------------------------------------------------------
   The student side of the crest: warm ivory paper by day, a starry navy sky by
   night, a floating sidebar, big soft cards and gold stars rising up the page.
   Friendly and roomy where the admin panel is dense and engraved.

   Loaded only on student pages and the student login/register pages by
   database/brand.php, after each page's own CSS. Pages keep their markup.
   Companion script: assets/brand/student.js
   ========================================================================== */

html[data-bm="student"], html[data-bm="login"] {
    --st-navy:    #071c40;
    --st-navy-2:  #0e2b5e;
    --st-night:   #020d22;
    --st-gold:    #d9b566;
    --st-gold-hi: #f6e2ab;
    --st-gold-lo: #a67f2e;
    --st-grad:    linear-gradient(135deg, #f6e2ab 0%, #d9b566 50%, #b58b35 100%);
    --st-navy-grad: linear-gradient(145deg, #16386f 0%, #071c40 58%, #020d22 100%);
    --st-spring:  cubic-bezier(.34,1.56,.64,1);
    --st-ease:    cubic-bezier(.2,.8,.2,1);
    --st-display: 'Cinzel', 'Noto Sans Sinhala', Georgia, serif;
}

/* ── tokens ──────────────────────────────────────────────────────────────── */
html[data-bm="student"] {
    --bg-app: #f8f4e9 !important; --bg-card: #fffefb !important;
    --text-primary: #0a1f44 !important; --text-secondary: #5d6880 !important;
    --accent: #0e2b5e !important; --accent-soft: #fbf1d8 !important;
    --primary: #0e2b5e !important;
    --border: #ebe3cf !important;
    --shadow: 0 12px 34px rgba(14,43,94,.08) !important;
    --radius-lg: 24px !important; --radius-md: 16px !important;
    --st-glow-a: rgba(217,181,102,.27); --st-glow-b: rgba(22,56,111,.11);
    --st-sparkle: 176,136,48;
}
html[data-bm="student"][data-theme="dark"] {
    --bg-app: #020d22 !important; --bg-card: #0a2149 !important;
    --text-primary: #f6f3ea !important; --text-secondary: #a9b5cc !important;
    --accent: #e4c67f !important; --accent-soft: rgba(217,181,102,.15) !important;
    --primary: #e4c67f !important;
    --border: rgba(217,181,102,.2) !important;
    --shadow: 0 16px 38px rgba(0,5,18,.45) !important;
    --st-glow-a: rgba(217,181,102,.14); --st-glow-b: rgba(44,92,180,.27);
    --st-sparkle: 244,223,166;
}

/* the full-page gate screens (terms, registration fee, intro video) name their
   colours differently and follow the device's dark mode: pin them to the crest */
html[data-bm="student"] {
    --bg: #f8f4e9 !important; --card: #fffefb !important; --tx: #0a1f44 !important; --tx2: #5d6880 !important;
}
html[data-bm="student"][data-theme="dark"] {
    --bg: #020d22 !important; --card: #0a2149 !important; --tx: #f6f3ea !important; --tx2: #a9b5cc !important;
}
html[data-bm="student"] .wrap > .card { border-radius: 26px; border-color: rgba(217,181,102,.55) !important; box-shadow: 0 26px 60px rgba(14,43,94,.14) !important; animation: stIn .66s var(--st-ease) backwards; }
html[data-bm="student"] .wrap > .card .brand { font-family: var(--st-display); letter-spacing: .03em; }
html[data-bm="student"] .wrap > .card .brand i { color: var(--st-gold-lo) !important; }
html[data-bm="student"] .wrap > .card h1 { font-family: var(--st-display); letter-spacing: .01em; }

/* ── page canvas ─────────────────────────────────────────────────────────── */
html[data-bm="student"] body { background-color: var(--bg-app) !important; }
html[data-bm="student"] body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(38% 38% at 84% 10%, var(--st-glow-a), transparent 72%),
        radial-gradient(44% 42% at 16% 90%, var(--st-glow-b), transparent 72%),
        radial-gradient(30% 28% at 58% 58%, var(--st-glow-a), transparent 74%);
}
html[data-bm="student"] .main-content { background: transparent !important; }
#bmStars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ── sidebar: a floating island on desktop ───────────────────────────────── */
html[data-bm="student"] .sidebar {
    background:
        radial-gradient(300px 220px at 50% -20px, rgba(217,181,102,.26), transparent 72%),
        var(--st-navy-grad) !important;
    border: 1px solid rgba(217,181,102,.26) !important; color: #fff;
    view-transition-name: bm-sidebar;
    scrollbar-width: thin; scrollbar-color: rgba(217,181,102,.42) transparent;
    padding: 20px 14px !important;
}
@media (min-width: 769px) {
    html[data-bm="student"] .sidebar {
        top: 14px !important; left: 14px !important; height: calc(100vh - 28px) !important; width: 262px !important;
        border-radius: 28px !important; box-shadow: 0 26px 60px rgba(4,18,44,.34) !important;
    }
    html[data-bm="student"] .main-content { margin-left: 292px !important; padding: 26px 30px 40px 14px !important; }
}
html[data-bm="student"] .sidebar .logo {
    display: flex !important; flex-shrink: 0; justify-content: center; margin: 0 0 12px !important; padding: 0 0 12px !important; min-height: 0 !important;
    background: none !important; border-radius: 0 !important; box-shadow: none !important; position: relative;
}
html[data-bm="student"] .sidebar .logo::after {
    content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--st-gold), transparent);
}
html[data-bm="student"] .sidebar .logo img {
    content: url("../../uploads/settings/bm-logo-full-light.png");
    width: 172px !important; max-width: 100% !important; height: auto !important; max-height: none !important;
    border-radius: 0 !important; filter: drop-shadow(0 8px 20px rgba(217,181,102,.22));
}
html[data-bm="student"] .sidebar .logo span:not(.bm-crest), html[data-bm="student"] .sidebar .logo h2 { display: none; }
html[data-bm="student"] .sidebar .logo-icon { background: var(--st-grad) !important; color: var(--st-navy) !important; }
.bm-crest { position: relative; display: block; line-height: 0; width: 172px; max-width: 100%; }
.bm-crest::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    -webkit-mask: var(--crest) center / contain no-repeat; mask: var(--crest) center / contain no-repeat;
    background: linear-gradient(105deg, transparent 38%, rgba(255,250,232,.95) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%; background-position: 130% 0; animation: stSheen 6.5s ease-in-out infinite;
}
.bm-motto {
    display: block; text-align: center; color: var(--st-gold); font-size: 9.5px; font-weight: 800; letter-spacing: .24em;
    text-transform: uppercase; height: 15px; margin: 0 0 12px; overflow: hidden; position: relative; flex-shrink: 0;
}
.bm-motto b { position: absolute; left: 0; right: 0; font-weight: 800; opacity: 0; animation: stMotto 9s infinite; }
.bm-motto b:nth-child(2) { animation-delay: 3s; }
.bm-motto b:nth-child(3) { animation-delay: 6s; }

html[data-bm="student"] .sidebar .menu { gap: 3px !important; }
html[data-bm="student"] .sidebar .menu a {
    color: rgba(238,235,224,.78) !important; border-radius: 15px !important; padding: 10px 13px !important;
    font-size: 14px !important; gap: 12px !important; position: relative;
    transition: background .22s, color .22s, transform .32s var(--st-spring), box-shadow .22s !important;
}
html[data-bm="student"] .sidebar .menu a i {
    color: var(--st-gold-hi) !important; font-size: 20px !important; transition: transform .42s var(--st-spring);
}
html[data-bm="student"] .sidebar .menu a:hover { background: rgba(255,255,255,.09) !important; color: #fff !important; transform: translateX(4px); }
html[data-bm="student"] .sidebar .menu a:hover i { transform: scale(1.24) rotate(-9deg); }
html[data-bm="student"] .sidebar .menu a.active {
    background: var(--st-grad) !important; color: var(--st-navy) !important; font-weight: 800 !important;
    box-shadow: 0 10px 24px rgba(181,139,53,.42), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
html[data-bm="student"] .sidebar .menu a.active i { color: var(--st-navy) !important; }
html[data-bm="student"] .sidebar .menu a.active::after {
    content: ''; position: absolute; right: 12px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
    background: var(--st-navy);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    animation: stSpinStar 5s ease-in-out infinite;
}
html[data-bm="student"] .sidebar .menu a.active:has(.nav-badge)::after { display: none; }
html[data-bm="student"] .sidebar .menu a.ai-badge { border-left: 0 !important; background: rgba(217,181,102,.11); }
html[data-bm="student"] .sidebar .menu a.ai-badge.active { background: var(--st-grad) !important; }
html[data-bm="student"] .sidebar .menu a[href$="logout.php"], html[data-bm="student"] .sidebar .menu a[href$="logout.php"] i { color: #ff9c9c !important; }
html[data-bm="student"] .sidebar .fee-note { background: rgba(255,90,80,.16); color: #ffd6d2; border-color: rgba(255,120,110,.4); }
html[data-bm="student"] .sidebar .fee-note.due { background: rgba(217,181,102,.16); color: var(--st-gold-hi); border-color: rgba(217,181,102,.44); }
html[data-bm="student"] .sidebar .menu a .nav-badge { animation: stPop 2.4s ease-out infinite; }

.bm-nav-search { position: relative; flex-shrink: 0; margin: 0 2px 10px; }
.bm-nav-search input {
    width: 100%; padding: 9px 12px 9px 34px; border-radius: 13px; border: 1px solid rgba(217,181,102,.32); background: rgba(255,255,255,.08);
    color: #fff; font: inherit; font-size: 13px; outline: 0;
}
.bm-nav-search input::placeholder { color: rgba(238,235,224,.6); }
.bm-nav-search input:focus { border-color: var(--st-gold) !important; box-shadow: none !important; }
.bm-nav-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--st-gold-hi); font-size: 16px; }
.bm-push-ask {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2500; width: min(560px, calc(100vw - 24px));
    display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 18px; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.45;
    background: var(--st-navy-grad); border: 1px solid rgba(217,181,102,.5); box-shadow: 0 22px 50px rgba(4,18,44,.5); animation: stIn .5s var(--st-ease) backwards;
}
.bm-push-ask i { font-size: 24px; color: var(--st-gold-hi); flex-shrink: 0; }
.bm-push-ask span { flex: 1; }
.bm-push-ask button { flex-shrink: 0; border: 0; border-radius: 30px; padding: 9px 14px; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.bm-push-ask .yes { background: var(--st-grad); color: var(--st-navy); }
.bm-push-ask .no { background: transparent; color: rgba(238,235,224,.8); padding: 9px 6px; }
@media (max-width: 768px) { .bm-push-ask { bottom: 96px; flex-wrap: wrap; } .bm-push-ask span { flex-basis: calc(100% - 40px); } }

/* ── header ──────────────────────────────────────────────────────────────── */
html[data-bm="student"] .header-left h1, html[data-bm="student"] .main-content > h1 {
    font-family: var(--st-display) !important; font-weight: 700 !important; letter-spacing: .01em !important; color: var(--text-primary);
    font-size: clamp(22px, 2.5vw, 30px) !important;
}
html[data-bm="student"] .header-left p { color: var(--text-secondary) !important; font-weight: 600 !important; }
html[data-bm="student"] .icon-btn {
    background: var(--bg-card) !important; border: 1px solid rgba(217,181,102,.55) !important; color: var(--accent) !important;
    box-shadow: 0 7px 18px rgba(14,43,94,.1); transition: transform .4s var(--st-spring), box-shadow .22s, background .22s !important;
}
html[data-bm="student"] .icon-btn:hover { transform: translateY(-3px) rotate(-8deg) scale(1.05); box-shadow: 0 12px 24px rgba(181,139,53,.34); background: var(--st-grad) !important; color: var(--st-navy) !important; }
html[data-bm="student"] .menu-toggle { color: var(--accent) !important; }

/* ── the dashboard hero: drawn scene ─────────────────────────────────────── */
html[data-bm="student"] .hero-card {
    position: relative; overflow: hidden; isolation: isolate; min-height: 244px; padding: 34px 38px !important; border-radius: 28px !important;
    background:
        radial-gradient(520px 300px at 82% 18%, rgba(217,181,102,.32), transparent 66%),
        var(--st-navy-grad) !important;
    color: #fff !important; border: 1px solid rgba(217,181,102,.38);
    box-shadow: 0 26px 56px rgba(7,28,64,.34) !important;
}
html[data-bm="student"] .hero-card .hero-bg-shape { display: none !important; }
html[data-bm="student"] .hero-card > div:not(.bm-scene) { position: relative; z-index: 2; max-width: 56%; }
html[data-bm="student"] .hero-card h2 {
    font-family: var(--st-display) !important; font-weight: 700 !important; font-size: clamp(25px, 3vw, 38px) !important; line-height: 1.16;
    letter-spacing: .01em; color: #fff !important;
}
html[data-bm="student"] .hero-card p { color: rgba(240,236,224,.82) !important; }
html[data-bm="student"] .hero-card .btn {
    display: inline-flex; background: var(--st-grad) !important; color: var(--st-navy) !important; font-weight: 800 !important; border-radius: 40px !important;
    padding: 13px 26px !important; border: 0 !important; box-shadow: 0 13px 28px rgba(181,139,53,.46); position: relative; overflow: hidden;
    transition: transform .36s var(--st-spring), box-shadow .22s !important;
}
html[data-bm="student"] .hero-card .btn:hover { transform: translateY(-3px) scale(1.04); }
html[data-bm="student"] .hero-card .btn::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 38%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.72), transparent); animation: stSweep 3.8s ease-in-out infinite;
}
.bm-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; list-style: none; padding: 0; }
.bm-steps li {
    font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--st-gold-hi);
    padding: 5px 11px; border: 1px solid rgba(217,181,102,.46); border-radius: 30px; background: rgba(217,181,102,.1);
    animation: stChip 6s ease-in-out infinite;
}
.bm-steps li:nth-child(2) { animation-delay: 2s; }
.bm-steps li:nth-child(3) { animation-delay: 4s; }

.bm-scene { position: absolute; right: 2%; top: 50%; width: min(44%, 400px); transform: translateY(-50%); z-index: 1; pointer-events: none; }
.bm-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.bm-scene .s-ring { transform-origin: 200px 150px; animation: stSpin 44s linear infinite; }
.bm-scene .s-ring2 { transform-origin: 200px 150px; animation: stSpin 28s linear infinite reverse; }
.bm-scene .s-crown { transform-origin: 200px 94px; animation: stBob 4.6s ease-in-out infinite; }
.bm-scene .s-leaf-l { transform-box: view-box; transform-origin: 0 0; animation: stSwayL 5.6s ease-in-out infinite; }
.bm-scene .s-page { transform-origin: 200px 238px; transform-box: view-box; animation: stPage 6.6s cubic-bezier(.45,.05,.55,.95) infinite; }
.bm-scene .s-page.p2 { animation-delay: 2.2s; }
.bm-scene .s-page.p3 { animation-delay: 4.4s; }
.bm-scene .s-tw { transform-box: fill-box; transform-origin: center; animation: stTw 2.8s ease-in-out infinite; }
.bm-scene .s-tw.a { animation-delay: .7s; } .bm-scene .s-tw.b { animation-delay: 1.4s; } .bm-scene .s-tw.c { animation-delay: 2.1s; }
.bm-scene .s-orb { transform-box: fill-box; transform-origin: center; animation: stRiseStar 5.2s ease-in infinite; }
.bm-scene .s-orb.a { animation-delay: 1.3s; } .bm-scene .s-orb.b { animation-delay: 2.6s; } .bm-scene .s-orb.c { animation-delay: 3.9s; }

/* ── cards ───────────────────────────────────────────────────────────────── */
html[data-bm="student"] .main-content .card {
    border-radius: 24px !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important;
    position: relative; background: var(--bg-card) !important;
    transition: box-shadow .3s, border-color .3s, transform .4s var(--st-ease);
}
html[data-bm="student"] .main-content .card::before {
    content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; border-radius: 0 0 4px 4px; pointer-events: none;
    background: var(--st-grad); transform: scaleX(.14); transform-origin: left; transition: transform .56s var(--st-ease);
}
html[data-bm="student"] .main-content .card:hover { border-color: rgba(217,181,102,.65) !important; box-shadow: 0 20px 46px rgba(14,43,94,.13) !important; }
html[data-bm="student"][data-theme="dark"] .main-content .card:hover { box-shadow: 0 22px 50px rgba(0,5,18,.6) !important; }
html[data-bm="student"] .main-content .card:hover::before { transform: scaleX(1); }
html[data-bm="student"] .card-title { font-family: var(--st-display); font-weight: 700 !important; letter-spacing: .015em; }
html[data-bm="student"] .card-title i { color: var(--st-gold-lo) !important; }
html[data-bm="student"][data-theme="dark"] .card-title i { color: var(--st-gold) !important; }

/* stat tiles: a shield-badged, tilting tile */
html[data-bm="student"] .stat-box {
    background: var(--bg-card) !important; border-radius: 22px !important; border: 1px solid var(--border) !important;
    box-shadow: 0 9px 24px rgba(14,43,94,.06); position: relative; overflow: hidden; will-change: transform;
    transition: box-shadow .3s, border-color .3s, transform .18s ease-out !important;
}
html[data-bm="student"] .stat-box:hover { border-color: rgba(217,181,102,.72) !important; box-shadow: 0 20px 38px rgba(181,139,53,.22); }
html[data-bm="student"] .stat-box i {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 62px; margin-bottom: 10px;
    color: var(--st-gold-hi) !important; font-size: 25px !important; background: var(--st-navy-grad);
    clip-path: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%);
    transition: transform .46s var(--st-spring);
}
html[data-bm="student"] .stat-box:hover i { transform: translateY(-4px) scale(1.1); }
html[data-bm="student"] .stat-box h3 { font-family: var(--st-display); font-weight: 700 !important; color: var(--text-primary) !important; font-variant-numeric: tabular-nums; }
html[data-bm="student"] .stat-box p { letter-spacing: .1em; font-size: 10.5px !important; }

/* quick links */
html[data-bm="student"] .q-link {
    border-radius: 16px !important; border: 1px solid var(--border) !important; background: transparent !important; position: relative; overflow: hidden; font-weight: 700;
    transition: transform .34s var(--st-spring), border-color .22s, box-shadow .22s !important; z-index: 0;
}
html[data-bm="student"] .q-link::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--accent-soft), transparent);
    transform: scaleX(0); transform-origin: left; transition: transform .38s var(--st-ease);
}
html[data-bm="student"] .q-link:hover { transform: translateX(6px); border-color: rgba(217,181,102,.72) !important; box-shadow: 0 10px 22px rgba(181,139,53,.18); }
html[data-bm="student"] .q-link:hover::before { transform: scaleX(1); }
html[data-bm="student"] .q-link i { color: var(--st-gold-lo) !important; transition: transform .42s var(--st-spring); }
html[data-bm="student"][data-theme="dark"] .q-link i { color: var(--st-gold) !important; }
html[data-bm="student"] .q-link:hover i { transform: scale(1.24) rotate(-10deg); }

/* ── buttons & fields ────────────────────────────────────────────────────── */
html[data-bm="student"] .btn-primary, html[data-bm="student"] .primary-btn, html[data-bm="student"] .btn.primary, html[data-bm="student"] .btn-submit, html[data-bm="student"] .btn-pay, html[data-bm="student"] .btn-join {
    background: var(--st-navy-grad) !important; color: #fff !important; border: 0 !important; border-radius: 40px !important;
    box-shadow: 0 11px 24px rgba(7,28,64,.3), inset 0 -2px 0 var(--st-gold) !important; position: relative; overflow: hidden;
    transition: transform .34s var(--st-spring), box-shadow .22s !important;
}
html[data-bm="student"][data-theme="dark"] .btn-primary, html[data-bm="student"][data-theme="dark"] .primary-btn, html[data-bm="student"][data-theme="dark"] .btn.primary,
html[data-bm="student"][data-theme="dark"] .btn-submit, html[data-bm="student"][data-theme="dark"] .btn-pay, html[data-bm="student"][data-theme="dark"] .btn-join {
    background: var(--st-grad) !important; color: var(--st-navy) !important; box-shadow: 0 11px 24px rgba(181,139,53,.34) !important;
}
html[data-bm="student"] .btn-primary:hover, html[data-bm="student"] .primary-btn:hover, html[data-bm="student"] .btn-submit:hover,
html[data-bm="student"] .btn-pay:hover, html[data-bm="student"] .btn-join:hover { transform: translateY(-3px) scale(1.03); }
html[data-bm="student"] .btn-line, html[data-bm="student"] .btn-ghost { border-radius: 40px !important; }
html[data-bm="student"] input:focus, html[data-bm="student"] select:focus, html[data-bm="student"] textarea:focus {
    border-color: var(--st-gold) !important; box-shadow: 0 0 0 4px rgba(217,181,102,.22) !important; outline: 0 !important;
}
html[data-bm="student"] input[type=checkbox], html[data-bm="student"] input[type=radio] { accent-color: var(--st-gold-lo); }
html[data-bm="student"] .modal-card, html[data-bm="student"] .modal-content { border-radius: 24px !important; border: 1px solid rgba(217,181,102,.46) !important; }
html[data-bm="student"] .live-badge { background: #d92c3a !important; }

/* ── mobile dock ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html[data-bm="student"] .sidebar { width: 280px !important; border-radius: 0 26px 26px 0 !important; border-width: 0 1px 0 0 !important; }
    html[data-bm="student"] .main-content { padding: 18px 16px 112px !important; }
    html[data-bm="student"] .mobile-nav {
        left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; padding: 9px 7px !important;
        border-radius: 26px !important; border: 1px solid rgba(217,181,102,.4) !important;
        background: var(--st-navy-grad) !important; box-shadow: 0 18px 40px rgba(4,18,44,.44) !important;
    }
    html[data-bm="student"] .mobile-nav .nav-item {
        color: rgba(238,235,224,.76) !important; border-radius: 16px; padding: 5px 7px; position: relative;
        transition: transform .36s var(--st-spring), color .2s, background .2s;
    }
    html[data-bm="student"] .mobile-nav .nav-item i { color: var(--st-gold-hi) !important; }
    html[data-bm="student"] .mobile-nav .nav-item:active { transform: scale(.88); }
    html[data-bm="student"] .mobile-nav .nav-item.active {
        background: var(--st-grad) !important; color: var(--st-navy) !important; transform: translateY(-9px);
        box-shadow: 0 10px 20px rgba(181,139,53,.5);
    }
    html[data-bm="student"] .mobile-nav .nav-item.active i { color: var(--st-navy) !important; }
    html[data-bm="student"] .hero-card { padding: 24px 24px 196px !important; justify-content: flex-start !important; }
    html[data-bm="student"] .hero-card > div:not(.bm-scene) { max-width: 100%; }
    .bm-scene { top: auto; bottom: -6px; right: 50%; width: 220px; transform: translateX(50%); opacity: .95; }
    html[data-bm="student"] .hero-card .btn { width: auto !important; }
}

/* ── entrance ────────────────────────────────────────────────────────────── */
.bm-pop { animation: stIn .66s var(--st-ease) backwards; animation-delay: calc(var(--i, 0) * 65ms); }
.bm-burst { position: fixed; width: 12px; height: 12px; margin: -6px 0 0 -6px; z-index: 99990; pointer-events: none; background: var(--st-gold);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: stBurst .72s var(--st-ease) forwards; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: stVtOut .15s ease-in both; }
::view-transition-new(root) { animation: stVtIn .34s var(--st-ease) both; }

/* ── first-visit intro ───────────────────────────────────────────────────── */
html.bm-intro::before {
    content: ''; position: fixed; inset: 0; z-index: 99998; background: var(--st-night, #020d22);
    animation: stCoverEnd 0s linear 3.4s forwards;
}
#bmIntro {
    position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer;
    background: radial-gradient(640px 500px at 50% 44%, #16386f, #020d22 74%); animation: stIntroOut .5s ease-in 2s forwards; overflow: hidden;
}
#bmIntro img { width: min(56vw, 260px); height: auto; opacity: 0; animation: stCrestDrop .8s var(--st-spring) .1s forwards; filter: drop-shadow(0 16px 40px rgba(217,181,102,.32)); }
#bmIntro .st-i-words { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
#bmIntro .st-i-words span { font: 700 clamp(12px,2.2vw,15px) var(--st-display); letter-spacing: .18em; color: var(--st-gold-hi); opacity: 0; animation: stWord .46s var(--st-spring) forwards; }
#bmIntro .st-i-words span:nth-child(1) { animation-delay: .62s; }
#bmIntro .st-i-words span:nth-child(2) { animation-delay: .94s; }
#bmIntro .st-i-words span:nth-child(3) { animation-delay: 1.26s; }
#bmIntro i { position: absolute; bottom: -20px; width: 14px; height: 14px; background: var(--st-gold-hi);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: stIntroStar 2.1s ease-out forwards; }

/* ── student login & register ────────────────────────────────────────────── */
html[data-bm="login"] .brand-section {
    background: radial-gradient(560px 440px at 50% 24%, rgba(217,181,102,.26), transparent 70%), var(--st-navy-grad) !important;
}
html[data-bm="login"] .brand-section::after { border-top-color: rgba(217,181,102,.55) !important; animation: stFloat 7s ease-in-out infinite; }
html[data-bm="login"] .bm-login-logo { animation: stFloat 6s ease-in-out infinite; }
html[data-bm="login"] .logic-particle { color: rgba(217,181,102,.22) !important; }
html[data-bm="login"] .brand-section h1, html[data-bm="login"] .brand-section h2 { font-family: var(--st-display) !important; }
html[data-bm="login"] .login-header h2 { font-family: var(--st-display) !important; }

/* ── keyframes ───────────────────────────────────────────────────────────── */
@keyframes stIn { from { opacity: 0; transform: translateY(22px) scale(.985); } }
@keyframes stSheen { 0%, 62% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
@keyframes stMotto { 0%, 4% { opacity: 0; transform: translateY(8px); } 8%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes stSpinStar { 0%, 100% { transform: rotate(0) scale(.82); } 50% { transform: rotate(90deg) scale(1.1); } }
@keyframes stPop { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
@keyframes stSweep { 0%, 58% { left: -45%; } 100% { left: 125%; } }
@keyframes stChip { 0%, 22%, 100% { background: rgba(217,181,102,.1); color: var(--st-gold-hi); } 8%, 16% { background: var(--st-gold); color: var(--st-navy); } }
@keyframes stSpin { to { transform: rotate(360deg); } }
@keyframes stBob { 50% { transform: translateY(-7px); } }
@keyframes stSwayL { 50% { transform: rotate(-4deg); } }
@keyframes stPage { 0%, 8% { transform: rotateY(0); opacity: 0; } 12% { opacity: 1; } 42% { transform: rotateY(-180deg); opacity: 1; } 48%, 100% { transform: rotateY(-180deg); opacity: 0; } }
@keyframes stTw { 0%, 100% { transform: scale(.42) rotate(0); opacity: .3; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes stRiseStar { 0% { transform: translateY(0) scale(.5); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(-122px) scale(1) rotate(160deg); opacity: 0; } }
@keyframes stFloat { 50% { transform: translateY(-10px); } }
@keyframes stBurst { from { transform: translate(0,0) scale(.4) rotate(0); opacity: 1; } to { transform: translate(var(--dx),var(--dy)) scale(1.1) rotate(180deg); opacity: 0; } }
@keyframes stVtOut { to { opacity: 0; } }
@keyframes stVtIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes stCoverEnd { to { visibility: hidden; opacity: 0; } }
@keyframes stIntroOut { to { opacity: 0; visibility: hidden; transform: scale(1.03); } }
@keyframes stCrestDrop { from { opacity: 0; transform: translateY(-28px) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes stWord { from { opacity: 0; transform: translateY(13px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes stIntroStar { 0% { transform: translateY(0) rotate(0); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(-105vh) rotate(260deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    html[data-bm="student"] *, html[data-bm="student"] *::before, html[data-bm="student"] *::after,
    html[data-bm="login"] *, html[data-bm="login"] *::before, html[data-bm="login"] *::after { animation: none !important; transition-duration: .01ms !important; }
    @view-transition { navigation: none; }
    html.bm-intro::before { display: none; }
    .bm-motto b:first-child { opacity: 1; }
    .bm-scene .s-page { display: none; }
}