body { margin:0; font-family: Arial, Helvetica, sans-serif; background:#f4f7fb; color:#1f2937; }
a { color:#0b5ed7; text-decoration:none; }
.header { background:#103b63; color:white; padding:16px 24px; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.header h1 { margin:0; font-size:22px; letter-spacing:.2px; }
.container { max-width:1120px; margin:24px auto; padding:0 16px; }
.card { background:white; border-radius:12px; padding:22px; margin-bottom:18px; box-shadow:0 2px 14px rgba(15,23,42,.08); }
.card h2 { margin-top:0; color:#103b63; }
.grid { width:100%; border-collapse:collapse; background:white; }
.grid th { background:#e9f1fb; color:#103b63; text-align:left; }
.grid th, .grid td { border:1px solid #d7dee8; padding:9px; font-size:14px; }
.form-row { margin-bottom:12px; }
label { display:block; font-weight:bold; margin-bottom:5px; }
input[type=text], input[type=password], input[type=number], select { width:100%; max-width:420px; padding:9px; border:1px solid #cbd5e1; border-radius:7px; box-sizing:border-box; }
.btn { display:inline-block; border:none; background:#0b5ed7; color:white; padding:9px 16px; border-radius:7px; cursor:pointer; margin-right:6px; }
.btn.secondary { background:#64748b; }
.btn.danger { background:#b91c1c; }
.btn.success { background:#047857; }
.notice { padding:11px 14px; border-radius:8px; margin:10px 0; background:#eef6ff; color:#103b63; border:1px solid #cfe6ff; }
.error { background:#fff1f2; color:#991b1b; border-color:#fecdd3; }
.success-msg { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.nav { margin-top:12px; }
.nav a { display:inline-block; background:#e9f1fb; padding:9px 12px; border-radius:8px; margin:4px; color:#103b63; font-weight:bold; }
.small { color:#64748b; font-size:13px; }
.badge { display:inline-block; padding:4px 8px; border-radius:99px; background:#e2e8f0; color:#334155; font-size:12px; }
.badge.full { background:#fee2e2; color:#991b1b; }
.badge.open { background:#dcfce7; color:#166534; }

.type-tabs { margin:16px 0; display:flex; flex-wrap:wrap; gap:8px; }
.type-tab { border:1px solid #cbd5e1; background:#f8fafc; color:#103b63; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:bold; }
.type-tab.active { background:#0b5ed7; color:#fff; border-color:#0b5ed7; }
.type-panel-wrap { border:1px solid #d7dee8; border-radius:10px; padding:16px; background:#fbfdff; }
.type-section h3 { margin:0 0 6px 0; color:#103b63; }
.paper-option { display:block; border:1px solid #d7dee8; border-radius:10px; background:#fff; padding:12px; margin:10px 0; cursor:pointer; }
.paper-option:hover { border-color:#0b5ed7; box-shadow:0 2px 8px rgba(11,94,215,.12); }
.paper-option.disabled { opacity:.55; cursor:not-allowed; }
.paper-option input { margin-right:10px; }
.paper-title { display:inline-block; min-width:300px; vertical-align:middle; }
.paper-meta { display:inline-block; color:#64748b; font-size:13px; margin:4px 12px 0 0; }
.save-row { margin-top:16px; }

/* Advanced student UI */
body.student-page {
    min-height:100vh;
    background:
      radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 30%),
      linear-gradient(135deg, #eef4ff 0%, #f8fbff 48%, #eefdf7 100%);
}
.student-shell { max-width:1180px; margin:0 auto; padding:24px 18px 88px; }
.student-topbar {
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    color:#fff; padding:26px 30px; border-radius:24px;
    background:linear-gradient(135deg, #0f3d63 0%, #0b5ed7 56%, #047857 100%);
    box-shadow:0 20px 45px rgba(15,61,99,.22); margin-bottom:18px;
}
.student-topbar h1 { margin:4px 0 6px; font-size:32px; line-height:1.1; letter-spacing:-.4px; }
.student-topbar p { margin:0; color:rgba(255,255,255,.84); }
.brand-kicker { text-transform:uppercase; font-size:12px; letter-spacing:1.6px; color:rgba(255,255,255,.75); font-weight:bold; }
.logout-link { color:#103b63; background:#fff; padding:11px 16px; border-radius:14px; font-weight:bold; box-shadow:0 8px 20px rgba(0,0,0,.14); white-space:nowrap; }
.logout-link:hover { transform:translateY(-1px); }
.student-profile-card, .student-card {
    background:rgba(255,255,255,.92); border:1px solid rgba(203,213,225,.72);
    border-radius:22px; box-shadow:0 14px 36px rgba(15,23,42,.08); backdrop-filter: blur(10px);
}
.student-profile-card { display:flex; align-items:center; gap:18px; padding:20px 22px; margin-bottom:18px; }
.avatar-circle { width:60px; height:60px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; color:#fff; background:linear-gradient(135deg,#0b5ed7,#047857); box-shadow:0 10px 18px rgba(11,94,215,.25); }
.profile-label, .section-kicker { font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:#64748b; font-weight:800; }
.profile-main h2 { margin:2px 0 8px; color:#0f172a; font-size:24px; }
.profile-meta { display:flex; flex-wrap:wrap; gap:10px; color:#475569; }
.profile-meta span { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:7px 12px; font-size:13px; }
.student-card { padding:24px 22px; margin-bottom:18px; }
.section-title-row { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:16px; }
.section-title-row h2 { margin:3px 0 6px; color:#0f3d63; font-size:24px; }
.section-title-row p { margin:0; color:#64748b; line-height:1.45; }
.submitted-grid { overflow:hidden; border-radius:14px; }
.choice-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.advanced-tabs { margin:0 0 16px; gap:10px; }
.advanced-tabs .type-tab { position:relative; border:none; background:#eaf2ff; color:#0f3d63; padding:12px 16px 12px 42px; border-radius:16px; box-shadow:inset 0 0 0 1px rgba(11,94,215,.10); }
.advanced-tabs .type-tab:before { content:""; position:absolute; left:14px; top:50%; width:16px; height:16px; transform:translateY(-50%); border-radius:50%; background:#fff; border:2px solid #93c5fd; }
.advanced-tabs .type-tab.completed:before { background:#047857; border-color:#047857; box-shadow:inset 0 0 0 3px #fff; }
.advanced-tabs .type-tab.active { background:linear-gradient(135deg,#0b5ed7,#0f3d63); color:#fff; box-shadow:0 10px 20px rgba(11,94,215,.20); }
.advanced-tabs .type-tab.active:before { border-color:#fff; }
.advanced-panel { border:1px solid #dbe7f5; background:linear-gradient(180deg,#ffffff,#fbfdff); border-radius:22px; padding:20px; min-height:260px; }
.type-section h3 { font-size:22px; color:#0f172a; margin-bottom:4px; }
.type-section .small { font-size:14px; color:#64748b; margin-bottom:16px; }
.paper-option {
    display:flex; align-items:center; gap:14px; border:1px solid #dbe7f5; border-radius:18px;
    background:#fff; padding:16px; margin:12px 0; cursor:pointer; box-shadow:0 7px 22px rgba(15,23,42,.05);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.paper-option:hover { border-color:#60a5fa; box-shadow:0 14px 28px rgba(37,99,235,.12); transform:translateY(-1px); }
.paper-option input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
.custom-radio { width:20px; height:20px; border-radius:50%; border:2px solid #93a4b8; background:#fff; flex:0 0 20px; box-shadow:inset 0 0 0 4px #fff; }
.paper-option:has(input:checked), .paper-option.selected { border-color:#047857; background:#f0fdf4; box-shadow:0 14px 28px rgba(4,120,87,.13); }
.paper-option input[type=radio]:checked + .custom-radio { border-color:#047857; background:#047857; }
.paper-content { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.paper-code { color:#0b5ed7; font-weight:800; font-size:13px; letter-spacing:.3px; }
.paper-name { color:#0f172a; font-weight:800; font-size:16px; line-height:1.3; }
.paper-option .badge { margin-left:auto; flex:0 0 auto; }
.paper-option.disabled { opacity:.62; background:#f8fafc; }
.paper-option.disabled:hover { transform:none; box-shadow:none; border-color:#dbe7f5; }
.choice-summary-card { position:sticky; top:18px; border-radius:22px; background:linear-gradient(180deg,#0f3d63,#0f172a); color:#fff; padding:20px; box-shadow:0 20px 40px rgba(15,23,42,.20); }
.summary-title { font-weight:800; font-size:18px; }
.summary-subtitle { color:rgba(255,255,255,.70); font-size:13px; margin:5px 0 14px; }
.summary-empty { background:rgba(255,255,255,.10); border:1px dashed rgba(255,255,255,.25); color:rgba(255,255,255,.74); border-radius:14px; padding:12px; font-size:13px; margin-bottom:10px; }
.summary-item { border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); border-radius:14px; padding:12px; margin-bottom:10px; }
.summary-item span { display:block; color:#bfdbfe; text-transform:uppercase; letter-spacing:.8px; font-size:11px; font-weight:800; margin-bottom:4px; }
.summary-item strong { display:block; color:#fff; font-size:14px; line-height:1.35; }
.summary-item em { color:rgba(255,255,255,.60); font-style:normal; }
.summary-item.selected { background:rgba(4,120,87,.34); border-color:rgba(167,243,208,.35); }
.summary-note { color:rgba(255,255,255,.66); font-size:12px; line-height:1.45; margin-top:12px; }
.sticky-save-bar { margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; border-radius:18px; background:#f8fafc; border:1px solid #e2e8f0; box-shadow:0 8px 18px rgba(15,23,42,.06); }
.sticky-save-bar strong { display:block; color:#0f172a; }
.sticky-save-bar span { color:#64748b; font-size:13px; }
.modern-save { padding:13px 22px; border-radius:14px; font-weight:800; box-shadow:0 10px 20px rgba(4,120,87,.22); }
@media (max-width: 900px) {
    .choice-layout { grid-template-columns:1fr; }
    .choice-summary-card { position:static; }
    .student-topbar { flex-direction:column; align-items:flex-start; }
    .profile-degree { display:none; }
    .sticky-save-bar { flex-direction:column; align-items:stretch; }
    .modern-save { width:100%; }
}

/* AI integration styles */
.top-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.ai-link{background:#eef7ff!important;color:#064b84!important;border:1px solid #cce7ff!important}
.ai-question-box{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.ai-question-box textarea,.ai-question-box input[type=text],.ai-question-box input[type=password]{width:100%;box-sizing:border-box;border:1px solid #cbd8e8;border-radius:12px;padding:13px 14px;font-size:14px;background:#fff;outline:none}
.ai-question-box textarea:focus,.ai-question-box input:focus{border-color:#0b6bcb;box-shadow:0 0 0 3px rgba(11,107,203,.11)}
.ai-answer{white-space:pre-wrap;word-break:break-word;background:linear-gradient(135deg,#f7fbff,#ffffff);border:1px solid #dbe8f6;border-radius:16px;padding:18px 20px;line-height:1.55;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#12324f}
.ai-student-card{border:1px solid #dbeafe}
.notice.info{background:#eef7ff;border:1px solid #cce7ff;color:#104b76;border-radius:12px;padding:12px 14px}
.btn.secondary{background:#eef3f8;color:#12324f;border:1px solid #cbd8e8;margin-left:8px}
.btn.secondary:hover{background:#dfeaf4}

/* Modern student login page */
body.login-page {
    min-height:100vh;
}
.login-hero-bar {
    min-height: 180px;
}
.login-hero-side {
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:flex-end;
}
.login-hero-chip {
    display:inline-block;
    background:rgba(255,255,255,.16);
    color:#fff;
    border:1px solid rgba(255,255,255,.20);
    border-radius:999px;
    padding:9px 14px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.2px;
    backdrop-filter: blur(8px);
}
.login-layout {
    display:grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 460px);
    gap:20px;
    align-items:stretch;
}
.login-info-card,
.login-form-card {
    background:rgba(255,255,255,.94);
    border:1px solid rgba(203,213,225,.72);
    border-radius:24px;
    box-shadow:0 18px 38px rgba(15,23,42,.08);
    backdrop-filter: blur(10px);
}
.login-info-card {
    padding:26px 24px;
}
.login-form-card {
    padding:26px 24px;
}
.login-info-card h2,
.login-form-card h2 {
    margin:4px 0 10px;
    color:#0f3d63;
    font-size:30px;
    line-height:1.15;
}
.login-intro {
    color:#475569;
    line-height:1.65;
    margin-bottom:18px;
}
.login-step-list {
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:18px 0 22px;
}
.login-step-item {
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px 14px;
    border-radius:18px;
    background:linear-gradient(180deg,#f8fbff,#ffffff);
    border:1px solid #dbe7f5;
}
.login-step-item strong {
    display:block;
    color:#0f172a;
    font-size:15px;
    margin-bottom:4px;
}
.login-step-item span {
    display:block;
    color:#64748b;
    font-size:14px;
    line-height:1.5;
}
.step-no {
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:linear-gradient(135deg,#0b5ed7,#047857);
    color:#fff;
    font-weight:800;
    box-shadow:0 10px 18px rgba(11,94,215,.18);
}
.login-note-box {
    padding:14px 16px;
    border-radius:16px;
    background:#eef7ff;
    border:1px solid #cfe6ff;
    color:#12324f;
    line-height:1.5;
}
.login-note-box strong {
    display:block;
    margin-bottom:4px;
}
.modern-input {
    width:100% !important;
    max-width:none !important;
    height:52px;
    padding:12px 14px;
    border:1px solid #cbd5e1;
    border-radius:14px !important;
    background:#fff;
    font-size:15px;
    transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.modern-input:focus {
    outline:none;
    border-color:#60a5fa;
    box-shadow:0 0 0 4px rgba(96,165,250,.16);
    background:#fbfdff;
}
.login-form-card .form-row {
    margin-bottom:16px;
}
.login-form-card label {
    color:#0f172a;
    font-size:15px;
    margin-bottom:7px;
}
.login-actions {
    margin-top:18px;
}
.login-btn {
    min-width:140px;
    padding:13px 22px;
    border-radius:14px;
    font-size:15px;
    font-weight:800;
    box-shadow:0 10px 20px rgba(11,94,215,.20);
}
@media (max-width: 980px) {
    .login-layout {
        grid-template-columns:1fr;
    }
    .login-hero-side {
        width:100%;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:flex-start;
        justify-content:flex-start;
    }
}
@media (max-width: 640px) {
    .login-info-card,
    .login-form-card {
        padding:20px 18px;
        border-radius:20px;
    }
    .login-info-card h2,
    .login-form-card h2 {
        font-size:26px;
    }
    .login-step-item {
        padding:12px;
    }
}


/* Final mobile responsive fixes for student pages */
html {
    -webkit-text-size-adjust: 100%;
}
body.student-page {
    overflow-x: hidden;
}
.student-shell {
    width: 100%;
    box-sizing: border-box;
}
.student-topbar,
.student-profile-card,
.student-card,
.login-info-card,
.login-form-card {
    box-sizing: border-box;
}
@media (max-width: 760px) {
    .student-shell {
        padding: 10px 8px 72px;
    }
    .student-topbar {
        margin: 0 0 10px;
        padding: 16px 14px;
        border-radius: 16px;
        min-height: auto;
        flex-direction: row;
        align-items: center;
    }
    .student-topbar h1 {
        font-size: 20px;
        line-height: 1.2;
        margin: 2px 0 4px;
    }
    .student-topbar p,
    .brand-kicker {
        font-size: 11px;
        line-height: 1.35;
    }
    .logout-link {
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 12px;
    }
    .student-profile-card {
        padding: 12px;
        border-radius: 16px;
        gap: 10px;
        align-items: flex-start;
    }
    .avatar-circle {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 20px;
    }
    .profile-main h2 {
        font-size: 17px;
        margin: 0 0 6px;
    }
    .profile-meta {
        gap: 6px;
    }
    .profile-meta span {
        font-size: 11px;
        padding: 5px 8px;
    }
    .student-card {
        padding: 14px 12px;
        border-radius: 16px;
        margin-bottom: 10px;
    }
    .section-title-row {
        display: block;
        margin-bottom: 10px;
    }
    .section-title-row h2 {
        font-size: 20px;
        margin: 2px 0 6px;
    }
    .section-title-row p,
    .type-section .small,
    .student-card p.small {
        font-size: 12px;
        line-height: 1.45;
    }
    .choice-layout {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    .advanced-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 6px;
        margin-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .advanced-tabs .type-tab,
    .type-tab {
        flex: 0 0 auto;
        padding: 9px 12px 9px 32px;
        border-radius: 12px;
        font-size: 12px;
        white-space: nowrap;
    }
    .advanced-tabs .type-tab:before {
        left: 10px;
        width: 13px;
        height: 13px;
    }
    .advanced-panel {
        min-height: auto;
        padding: 12px;
        border-radius: 16px;
    }
    .type-section h3 {
        font-size: 18px;
        margin-bottom: 4px;
    }
    .paper-option {
        padding: 12px;
        margin: 9px 0;
        border-radius: 14px;
        align-items: flex-start;
        gap: 10px;
    }
    .custom-radio {
        margin-top: 2px;
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }
    .paper-content {
        width: calc(100% - 44px);
    }
    .paper-code {
        font-size: 12px;
    }
    .paper-name {
        font-size: 14px;
        line-height: 1.35;
    }
    .paper-option .badge {
        margin-left: 0;
        margin-top: 6px;
        align-self: flex-start;
        font-size: 11px;
        padding: 3px 7px;
    }
    .choice-summary-card {
        position: static;
        padding: 14px;
        border-radius: 16px;
        margin-top: 4px;
        box-shadow: 0 10px 24px rgba(15,23,42,.14);
    }
    .summary-title {
        font-size: 16px;
    }
    .summary-subtitle,
    .summary-note,
    .summary-empty {
        font-size: 12px;
    }
    .summary-item {
        padding: 10px;
        border-radius: 12px;
    }
    .sticky-save-bar {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin: 10px -12px -14px;
        padding: 12px;
        border-radius: 14px 14px 0 0;
        flex-direction: column;
        align-items: stretch;
    }
    .sticky-save-bar strong {
        font-size: 14px;
    }
    .sticky-save-bar span {
        font-size: 12px;
    }
    .modern-save {
        width: 100%;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 14px;
    }
    .submitted-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .grid th, .grid td {
        font-size: 12px;
        padding: 7px;
    }
}

@media (max-width: 760px) and (orientation: landscape) {
    .student-shell {
        padding: 8px 8px 60px;
    }
    .student-topbar {
        padding: 12px 14px;
    }
    .student-topbar h1 {
        font-size: 18px;
    }
    .student-profile-card {
        padding: 10px 12px;
    }
    .student-card {
        padding: 12px;
    }
    .choice-summary-card {
        max-height: 190px;
        overflow-y: auto;
    }
    .advanced-panel {
        padding: 10px;
    }
    .paper-option {
        padding: 10px;
        margin: 7px 0;
    }
}

@media (max-width: 480px) {
    .student-topbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .logout-link {
        align-self: flex-start;
    }
    .student-profile-card {
        flex-direction: row;
    }
    .profile-meta span {
        display: inline-block;
    }
    .login-layout {
        grid-template-columns: 1fr;
    }
    .login-hero-side {
        display: none;
    }
    .login-info-card,
    .login-form-card {
        padding: 16px 14px;
    }
    .modern-input {
        height: 46px;
        font-size: 14px;
    }
}


/* ERP subject selector */
.inline-form {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}
.inline-form input[type=text] {
    flex:1 1 320px;
    max-width:620px;
}
#ddlERPSubject {
    width:100%;
    max-width:760px;
}
@media (max-width:640px) {
    .inline-form {
        align-items:stretch;
    }
    .inline-form .btn {
        width:100%;
        margin-right:0;
    }
}

/* ============================================================
   MOBILE-FIRST STUDENT EXPERIENCE — JULY 2026
   Student pages only. Admin pages remain unchanged.
   ============================================================ */
:root {
    --student-blue:#0b4f8a;
    --student-blue-2:#1167b1;
    --student-ink:#122033;
    --student-muted:#66758a;
    --student-line:#dbe5ef;
    --student-surface:#ffffff;
    --student-soft:#f3f7fb;
    --student-success:#087c63;
}

body.mobile-login-page,
body.mobile-choice-page {
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
    color:var(--student-ink);
    background:
        radial-gradient(circle at 8% 0%, rgba(31,111,184,.16), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(15,132,105,.10), transparent 34%),
        #f4f8fc;
    -webkit-font-smoothing:antialiased;
}

/* Login */
.mobile-auth-shell {
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding:max(22px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}
.mobile-auth-brand {
    width:100%;
    max-width:430px;
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}
.mcc-brand-mark {
    width:52px;
    height:52px;
    flex:0 0 52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:17px;
    color:#fff;
    font-size:15px;
    font-weight:900;
    letter-spacing:.8px;
    background:linear-gradient(145deg,var(--student-blue-2),#07345d);
    box-shadow:0 12px 24px rgba(11,79,138,.22);
}
.mcc-brand-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.mcc-brand-copy strong { color:#123451; font-size:15px; letter-spacing:.1px; }
.mcc-brand-copy span { color:var(--student-muted); font-size:13px; }
.mobile-auth-card {
    width:100%;
    max-width:430px;
    box-sizing:border-box;
    padding:30px 26px 24px;
    border:1px solid rgba(203,216,230,.92);
    border-radius:28px;
    background:rgba(255,255,255,.96);
    box-shadow:0 26px 60px rgba(20,53,83,.13);
}
.mobile-auth-icon {
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:20px;
    color:#fff;
    background:linear-gradient(145deg,var(--student-blue-2),var(--student-success));
    box-shadow:0 13px 27px rgba(17,103,177,.22);
}
.mobile-auth-icon svg { width:30px; height:30px; fill:currentColor; }
.mobile-auth-heading span,
.mobile-section-heading > span {
    display:block;
    color:var(--student-blue-2);
    font-size:11px;
    font-weight:850;
    letter-spacing:1.25px;
    text-transform:uppercase;
}
.mobile-auth-heading h1 {
    margin:5px 0 7px;
    color:#102b43;
    font-size:30px;
    line-height:1.14;
    letter-spacing:-.55px;
}
.mobile-auth-heading p {
    margin:0 0 22px;
    color:var(--student-muted);
    font-size:14px;
    line-height:1.55;
}
.mobile-field { margin-bottom:17px; }
.mobile-field > label {
    margin:0 0 7px;
    color:#23354a;
    font-size:13px;
    font-weight:750;
}
.mobile-input-wrap { position:relative; }
.mobile-input-icon {
    position:absolute;
    z-index:2;
    left:14px;
    top:50%;
    width:20px;
    height:20px;
    color:#65809a;
    transform:translateY(-50%);
    pointer-events:none;
}
.mobile-input-icon svg { width:20px; height:20px; fill:currentColor; }
input.mobile-input {
    width:100% !important;
    max-width:none !important;
    height:56px;
    box-sizing:border-box;
    padding:0 15px 0 45px;
    border:1px solid #cbd9e7;
    border-radius:16px;
    outline:none;
    color:#172a3e;
    background:#fbfdff;
    font-size:16px;
    transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input.mobile-input::placeholder { color:#93a1b2; }
input.mobile-input:focus {
    border-color:#4b91cf;
    background:#fff;
    box-shadow:0 0 0 4px rgba(39,117,184,.12);
}
.mobile-field-help {
    display:block;
    margin-top:7px;
    color:#8190a1;
    font-size:11.5px;
}
.mobile-primary-btn,
.mobile-submit-btn,
.mobile-secondary-btn {
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    margin:4px 0 0;
    border:none;
    border-radius:16px;
    font-size:16px;
    font-weight:850;
    text-align:center;
    cursor:pointer;
    transition:transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.mobile-primary-btn {
    color:#fff;
    background:linear-gradient(135deg,#0e69ba,#0b4f8a);
    box-shadow:0 13px 25px rgba(11,79,138,.25);
}
.mobile-primary-btn:active,
.mobile-submit-btn:active,
.mobile-secondary-btn:active { transform:scale(.985); }
.mobile-secure-note {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    color:#7c8b9c;
    font-size:11.5px;
}
.secure-dot { width:7px; height:7px; border-radius:50%; background:#18a17f; box-shadow:0 0 0 4px rgba(24,161,127,.10); }
.mobile-auth-footer { margin-top:17px; color:#8a98a8; font-size:11.5px; }
.mobile-auth-card .notice { margin:0 0 17px; border-radius:14px; font-size:13px; line-height:1.45; }

/* Choice page */
.mobile-choice-shell {
    width:100%;
    max-width:720px;
    margin:0 auto;
    box-sizing:border-box;
    padding:max(14px, env(safe-area-inset-top)) 14px calc(90px + env(safe-area-inset-bottom));
}
.mobile-app-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
    padding:14px 15px;
    border-radius:21px;
    color:#fff;
    background:linear-gradient(135deg,#0a3f70,#0e69ba 60%,#0a8069);
    box-shadow:0 16px 34px rgba(12,74,125,.20);
}
.mobile-app-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.mcc-mini-mark {
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.28);
    border-radius:14px;
    background:rgba(255,255,255,.14);
    font-size:12px;
    font-weight:900;
    letter-spacing:.6px;
}
.mobile-app-brand div:last-child { display:flex; flex-direction:column; min-width:0; }
.mobile-app-brand strong { font-size:16px; line-height:1.2; }
.mobile-app-brand span { margin-top:2px; color:rgba(255,255,255,.74); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-logout {
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
    padding:9px 10px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:13px;
    color:#fff;
    background:rgba(255,255,255,.12);
    font-size:11.5px;
    font-weight:750;
}
.mobile-logout svg { width:17px; height:17px; fill:currentColor; }
.mobile-student-card,
.mobile-content-card {
    box-sizing:border-box;
    border:1px solid rgba(207,220,233,.95);
    background:rgba(255,255,255,.96);
    box-shadow:0 13px 34px rgba(25,57,87,.08);
}
.mobile-student-card {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:11px 13px;
    align-items:center;
    margin-bottom:12px;
    padding:16px;
    border-radius:22px;
}
.mobile-student-avatar {
    width:49px;
    height:49px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:17px;
    color:#fff;
    background:linear-gradient(145deg,#1473c3,#0b8069);
}
.mobile-student-avatar svg { width:26px; height:26px; fill:currentColor; }
.mobile-student-main { min-width:0; }
.mobile-welcome { display:block; color:#738397; font-size:11px; font-weight:700; }
.mobile-student-main h1 { margin:2px 0 4px; color:#102a43; font-size:20px; line-height:1.2; word-break:break-word; }
.mobile-student-id { color:#66768a; font-size:11.5px; }
.mobile-student-id strong { color:#2d4259; }
.mobile-student-details {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    padding-top:11px;
    border-top:1px solid #e8eef4;
}
.mobile-student-details div {
    min-width:0;
    padding:9px;
    border-radius:12px;
    background:#f4f8fb;
}
.mobile-student-details span { display:block; margin-bottom:3px; color:#8290a0; font-size:9.5px; font-weight:750; text-transform:uppercase; letter-spacing:.4px; }
.mobile-student-details strong { display:block; overflow:hidden; color:#2d4157; font-size:11.5px; line-height:1.3; text-overflow:ellipsis; }
.mobile-choice-shell > .notice { margin:0 0 12px; border-radius:15px; font-size:13px; line-height:1.45; }
.mobile-content-card { margin-bottom:12px; padding:20px 16px; border-radius:23px; }
.mobile-section-heading { margin-bottom:15px; }
.mobile-section-heading.centered { text-align:center; }
.mobile-section-heading h2 { margin:4px 0 6px; color:#102a43; font-size:24px; line-height:1.18; letter-spacing:-.35px; }
.mobile-section-heading p { margin:0; color:#728196; font-size:13px; line-height:1.5; }
.mobile-paper-list { display:flex; flex-direction:column; gap:10px; }
.mobile-paper-option.paper-option {
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    margin:0;
    padding:16px 13px;
    border:1.5px solid #d7e3ee;
    border-radius:17px;
    background:#fff;
    box-shadow:none;
    -webkit-tap-highlight-color:transparent;
}
.mobile-paper-option.paper-option:hover { transform:none; border-color:#aac8e2; box-shadow:none; }
.mobile-paper-option.paper-option.selected,
.mobile-paper-option.paper-option:has(input:checked) {
    border-color:#0b8069;
    background:#eefaf6;
    box-shadow:0 10px 22px rgba(11,128,105,.10);
}
.mobile-paper-option .custom-radio {
    width:22px;
    height:22px;
    flex-basis:22px;
    border:2px solid #9badbe;
    box-shadow:inset 0 0 0 5px #fff;
}
.mobile-paper-option input[type=radio]:checked + .custom-radio {
    border-color:#0b8069;
    background:#0b8069;
}
.mobile-paper-option .paper-content { gap:4px; }
.mobile-paper-option .paper-name { order:1; color:#1a2d42; font-size:15px; line-height:1.35; }
.mobile-paper-option .paper-code { order:2; color:#6d7d90; font-size:10.5px; font-weight:750; letter-spacing:.3px; }
.mobile-paper-option .badge { margin:0; padding:4px 7px; font-size:9.5px; font-weight:800; }
.mobile-paper-option.disabled { opacity:.57; background:#f7f9fb; }
.mobile-submit-bar {
    position:sticky;
    bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:30;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    margin:18px -4px -4px;
    padding:11px;
    border:1px solid rgba(204,218,231,.95);
    border-radius:19px;
    background:rgba(255,255,255,.94);
    box-shadow:0 17px 38px rgba(19,51,80,.17);
    backdrop-filter:blur(16px);
}
.mobile-selection-summary { min-width:0; padding-left:3px; }
.mobile-selection-summary span { display:block; color:#8492a2; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.mobile-selection-summary strong { display:block; margin-top:3px; overflow:hidden; color:#23384d; font-size:12.5px; white-space:nowrap; text-overflow:ellipsis; }
.mobile-submit-btn {
    width:auto;
    min-width:135px;
    min-height:48px;
    margin:0;
    padding:0 18px;
    color:#fff;
    background:linear-gradient(135deg,#0a8a6f,#06715d);
    box-shadow:0 10px 20px rgba(6,113,93,.22);
    font-size:13.5px;
}
.mobile-submit-btn:disabled { cursor:not-allowed; opacity:.45; box-shadow:none; }
.mobile-status-icon {
    width:66px;
    height:66px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 15px;
    border-radius:23px;
}
.mobile-status-icon.success { color:#fff; background:linear-gradient(145deg,#19a17f,#08745d); box-shadow:0 14px 28px rgba(8,116,93,.22); }
.mobile-status-icon svg { width:36px; height:36px; fill:currentColor; }
.mobile-allotment-result { margin:18px 0; }
.mobile-secondary-btn {
    min-height:50px;
    color:#174b73;
    border:1px solid #cadceb;
    background:#edf5fb;
    text-decoration:none;
    box-shadow:none;
}

/* Turn the submitted GridView into a clean mobile result card. */
.mobile-allotment-result .grid { border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid #dce7f0; border-radius:17px; }
.mobile-allotment-result .grid th { padding:10px; border:0; border-bottom:1px solid #dce7f0; background:#eef5fb; font-size:11px; }
.mobile-allotment-result .grid td { padding:12px 10px; border:0; border-right:1px solid #edf1f5; color:#2d4156; font-size:13px; }
.mobile-allotment-result .grid td:last-child { border-right:0; }

@media (max-width:520px) {
    .mobile-auth-shell { justify-content:flex-start; padding-top:max(26px, env(safe-area-inset-top)); }
    .mobile-auth-brand { margin-bottom:16px; }
    .mobile-auth-card { padding:24px 19px 20px; border-radius:24px; }
    .mobile-auth-icon { width:52px; height:52px; border-radius:18px; }
    .mobile-auth-heading h1 { font-size:27px; }
    .mobile-primary-btn { min-height:54px; }

    .mobile-choice-shell { padding-left:9px; padding-right:9px; }
    .mobile-app-header { padding:12px; border-radius:18px; }
    .mobile-logout span { display:none; }
    .mobile-logout { padding:9px; }
    .mobile-student-card { padding:14px 12px; border-radius:19px; }
    .mobile-student-details { grid-template-columns:1fr 1fr; }
    .mobile-student-details div:nth-child(3) { grid-column:1 / -1; }
    .mobile-content-card { padding:18px 12px; border-radius:20px; }
    .mobile-section-heading h2 { font-size:22px; }
    .mobile-paper-option.paper-option { padding:15px 11px; gap:10px; }
    .mobile-paper-option .paper-name { font-size:14px; }
    .mobile-submit-bar { grid-template-columns:1fr; gap:9px; padding:10px; }
    .mobile-selection-summary { padding:2px 4px 0; }
    .mobile-submit-btn { width:100%; min-width:0; }

    .mobile-allotment-result .grid,
    .mobile-allotment-result .grid tbody,
    .mobile-allotment-result .grid tr,
    .mobile-allotment-result .grid td { display:block; width:100%; box-sizing:border-box; }
    .mobile-allotment-result .grid tr:first-child { display:none; }
    .mobile-allotment-result .grid tr:not(:first-child) { padding:7px 13px; border:1px solid #dbe7f0; border-radius:16px; background:#f8fbfd; }
    .mobile-allotment-result .grid td { display:grid; grid-template-columns:105px 1fr; gap:10px; padding:9px 0; border:0; border-bottom:1px solid #e7eef4; font-size:13px; }
    .mobile-allotment-result .grid td:last-child { border-bottom:0; }
    .mobile-allotment-result .grid td::before { color:#8090a1; font-size:10px; font-weight:850; letter-spacing:.45px; text-transform:uppercase; }
    .mobile-allotment-result .grid td:nth-child(1)::before { content:"Subject Code"; }
    .mobile-allotment-result .grid td:nth-child(2)::before { content:"Activity"; }
    .mobile-allotment-result .grid td:nth-child(3)::before { content:"Status"; }
}

@media (min-width:768px) {
    .mobile-choice-shell { padding-top:24px; }
    .mobile-auth-card { padding:34px 32px 27px; }
}


/* Login transition loader */
body.login-is-loading { overflow:hidden; }
.mobile-primary-btn.is-loading {
    cursor:wait;
    opacity:.92;
}
.login-loading-overlay {
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding:24px;
    background:rgba(239,246,252,.76);
    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, visibility .18s ease;
}
.login-loading-overlay.show {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.login-loading-card {
    width:min(290px, 88vw);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 24px 25px;
    border:1px solid rgba(195,213,229,.92);
    border-radius:25px;
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 55px rgba(20,53,83,.18);
    text-align:center;
    transform:translateY(8px) scale(.98);
    transition:transform .18s ease;
}
.login-loading-overlay.show .login-loading-card {
    transform:translateY(0) scale(1);
}
.login-loading-spinner {
    position:relative;
    width:58px;
    height:58px;
    margin-bottom:17px;
    border-radius:20px;
    background:linear-gradient(145deg,#1167b1,#087c63);
    box-shadow:0 13px 27px rgba(17,103,177,.22);
}
.login-loading-spinner::before {
    content:"MCC";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.7px;
}
.login-loading-spinner span {
    position:absolute;
    inset:-7px;
    border:3px solid rgba(17,103,177,.16);
    border-top-color:#1167b1;
    border-right-color:#087c63;
    border-radius:50%;
    animation:loginSpinnerRotate .85s linear infinite;
}
.login-loading-card strong {
    color:#102b43;
    font-size:18px;
    line-height:1.25;
}
.login-loading-card > span {
    margin-top:7px;
    color:#708095;
    font-size:12.5px;
    line-height:1.45;
}
@keyframes loginSpinnerRotate {
    to { transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .login-loading-overlay,
    .login-loading-card { transition:none; }
    .login-loading-spinner span { animation-duration:1.7s; }
}