/* Visual source: acme/cbt-mockup.html. Production behavior remains in CI controllers. */

        :root {
            --app-primary: #6558f5;
            --app-primary-dark: #5146d9;
            --app-primary-soft: #efedff;
            --app-ink: #20243d;
            --app-muted: #767b91;
            --app-bg: #f7f8fc;
            --app-border: #e8eaf2;
            --app-green: #25b98b;
            --app-green-soft: #e9fbf5;
            --app-yellow: #ffb84d;
            --app-yellow-soft: #fff5df;
            --app-pink: #f36f9b;
            --app-pink-soft: #fff0f5;
            --app-blue: #4796ff;
            --app-blue-soft: #ebf4ff;
            --app-danger: #ef5f6c;
            --app-danger-soft: #fff0f1;
            --app-radius: 22px;
            --app-shadow: 0 14px 38px rgba(33, 38, 68, .07);
        }

        * { box-sizing: border-box; }
        body {
            min-height: 100vh;
            color: var(--app-ink);
            background: var(--app-bg);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        a { text-decoration: none; }
        .text-muted-app { color: var(--app-muted) !important; }
        .app-shell { min-height: calc(100vh - 72px); }
        .page-wrap { padding: 30px 0 46px; }
        .section-title { letter-spacing: -.02em; }

        .app-navbar {
            min-height: 72px;
            background: rgba(255, 255, 255, .92);
            border-bottom: 1px solid rgba(232, 234, 242, .9);
            backdrop-filter: blur(14px);
        }
        .brand-mark {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: linear-gradient(135deg, #7569ff 0%, #5748e7 100%);
            box-shadow: 0 9px 20px rgba(101, 88, 245, .25);
        }
        .brand-name { font-weight: 800; letter-spacing: -.03em; }
        .role-switch {
            padding: 4px;
            background: #f3f4f8;
            border: 1px solid #eaebf2;
            border-radius: 14px;
        }
        .role-switch .btn {
            border: 0;
            border-radius: 10px;
            color: var(--app-muted);
            font-weight: 700;
            padding: 8px 13px;
        }
        .role-switch .btn.active {
            background: #fff;
            color: var(--app-ink);
            box-shadow: 0 3px 10px rgba(33, 38, 68, .08);
        }

        .surface {
            background: #fff;
            border: 1px solid var(--app-border);
            border-radius: var(--app-radius);
            box-shadow: var(--app-shadow);
        }
        .surface-flat {
            background: #fff;
            border: 1px solid var(--app-border);
            border-radius: var(--app-radius);
        }
        .soft-panel {
            border: 1px solid transparent;
            border-radius: 18px;
        }
        .soft-primary { background: var(--app-primary-soft); border-color: #dfdcff; }
        .soft-green { background: var(--app-green-soft); border-color: #d2f4e8; }
        .soft-yellow { background: var(--app-yellow-soft); border-color: #ffe7bb; }
        .soft-pink { background: var(--app-pink-soft); border-color: #ffd8e5; }
        .soft-blue { background: var(--app-blue-soft); border-color: #d7e9ff; }
        .soft-danger { background: var(--app-danger-soft); border-color: #ffd8dc; }

        .icon-box {
            width: 46px;
            height: 46px;
            flex: 0 0 46px;
            border-radius: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        .icon-primary { color: var(--app-primary); background: var(--app-primary-soft); }
        .icon-green { color: #15966f; background: var(--app-green-soft); }
        .icon-yellow { color: #b9750b; background: var(--app-yellow-soft); }
        .icon-pink { color: #cc4f79; background: var(--app-pink-soft); }
        .icon-blue { color: #2377e3; background: var(--app-blue-soft); }

        .btn {
            font-weight: 700;
            border-radius: 13px;
        }
        .btn-primary {
            --bs-btn-bg: var(--app-primary);
            --bs-btn-border-color: var(--app-primary);
            --bs-btn-hover-bg: var(--app-primary-dark);
            --bs-btn-hover-border-color: var(--app-primary-dark);
            --bs-btn-active-bg: var(--app-primary-dark);
            --bs-btn-active-border-color: var(--app-primary-dark);
            box-shadow: 0 8px 18px rgba(101, 88, 245, .2);
        }
        .btn-soft {
            background: #f4f5f8;
            border-color: #eceef4;
            color: #40455d;
        }
        .btn-soft:hover { background: #eceef4; color: #252a40; }
        .btn-outline-primary {
            --bs-btn-color: var(--app-primary);
            --bs-btn-border-color: #cfcaff;
            --bs-btn-hover-bg: var(--app-primary-soft);
            --bs-btn-hover-color: var(--app-primary-dark);
            --bs-btn-hover-border-color: #bbb4ff;
        }
        .btn-icon {
            width: 42px;
            height: 42px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .form-control, .form-select, .input-group-text {
            border-color: #e3e5ee;
            border-radius: 13px;
            min-height: 46px;
        }
        .form-control:focus, .form-select:focus {
            border-color: #aaa2ff;
            box-shadow: 0 0 0 .2rem rgba(101, 88, 245, .12);
        }
        .input-group > .form-control:not(:last-child),
        .input-group > .form-select:not(:last-child),
        .input-group > .input-group-text:not(:last-child) { border-radius: 13px 0 0 13px; }
        .input-group > .form-control:not(:first-child),
        .input-group > .form-select:not(:first-child),
        .input-group > .input-group-text:not(:first-child) { border-radius: 0 13px 13px 0; }

        .pill-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 10px;
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 800;
            line-height: 1;
        }
        .status-live { color: #127c5d; background: var(--app-green-soft); }
        .status-soon { color: #99630a; background: var(--app-yellow-soft); }
        .status-done { color: #545a70; background: #f0f1f5; }
        .status-danger { color: #b73f4a; background: var(--app-danger-soft); }
        .status-primary { color: #5446dc; background: var(--app-primary-soft); }
        .status-blue { color: #246cc6; background: var(--app-blue-soft); }

        .eyebrow {
            font-size: .76rem;
            font-weight: 800;
            letter-spacing: .09em;
            text-transform: uppercase;
        }

        .hero-card {
            position: relative;
            overflow: hidden;
            min-height: 310px;
            color: #fff;
            background: linear-gradient(135deg, #6658f6 0%, #7769ff 50%, #4e84f4 100%);
            border-radius: 28px;
            box-shadow: 0 18px 42px rgba(92, 79, 232, .22);
        }
        .hero-card::before,
        .hero-card::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 18px solid rgba(255, 255, 255, .08);
        }
        .hero-card::before { width: 220px; height: 220px; right: -75px; top: -75px; }
        .hero-card::after { width: 160px; height: 160px; right: 105px; bottom: -105px; }
        .hero-bubble {
            width: 120px;
            height: 120px;
            border-radius: 34px;
            background: rgba(255, 255, 255, .15);
            border: 1px solid rgba(255, 255, 255, .2);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.2rem;
            transform: rotate(5deg);
        }
        .hero-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 11px;
            color: #fff;
            background: rgba(255, 255, 255, .15);
            border: 1px solid rgba(255, 255, 255, .19);
            border-radius: 999px;
            font-size: .8rem;
            font-weight: 700;
        }

        .metric-card { min-height: 138px; }
        .metric-number { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
        .mini-stat {
            padding: 16px;
            background: #fafbfe;
            border: 1px solid #eef0f5;
            border-radius: 17px;
        }

        .exam-card {
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .exam-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 34px rgba(33, 38, 68, .09);
            border-color: #d9d6ff;
        }
        .exam-meta { display: flex; flex-wrap: wrap; gap: 12px 18px; color: var(--app-muted); font-size: .88rem; }
        .exam-meta span { display: inline-flex; align-items: center; gap: 6px; }

        .timeline-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--app-primary);
            box-shadow: 0 0 0 5px var(--app-primary-soft);
        }

        .login-page {
            min-height: calc(100vh - 72px);
            display: flex;
            align-items: center;
            padding: 36px 0;
        }
        .login-art {
            min-height: 570px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(145deg, #6355f0 0%, #7165f8 52%, #4d91f0 100%);
            border-radius: 30px;
            color: #fff;
        }
        .login-art .shape {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, .09);
        }
        .login-art .shape.one { width: 220px; height: 220px; right: -65px; top: -55px; }
        .login-art .shape.two { width: 130px; height: 130px; left: -50px; bottom: 110px; }
        .login-art .shape.three { width: 90px; height: 90px; right: 80px; bottom: -35px; }
        .login-visual {
            width: 220px;
            height: 220px;
            margin-inline: auto;
            border-radius: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6rem;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.2);
            transform: rotate(-4deg);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
        }

        .question-layout { min-height: 100vh; background: #f8f9fc; }
        .exam-topbar {
            background: rgba(255,255,255,.96);
            border-bottom: 1px solid var(--app-border);
            backdrop-filter: blur(12px);
        }
        .timer-box {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 12px;
            border-radius: 13px;
            color: #a73944;
            background: var(--app-danger-soft);
            font-weight: 800;
        }
        .question-card { border-radius: 24px; }
        .answer-option {
            cursor: pointer;
            position: relative;
            display: flex;
            gap: 14px;
            align-items: center;
            min-height: 66px;
            padding: 13px 16px;
            border: 1.5px solid #e5e7ef;
            border-radius: 17px;
            background: #fff;
            transition: all .16s ease;
        }
        .answer-option:hover { border-color: #bdb7ff; background: #fbfaff; }
        .answer-option:has(input:checked) {
            border-color: var(--app-primary);
            background: var(--app-primary-soft);
            box-shadow: 0 0 0 3px rgba(101,88,245,.07);
        }
        .answer-option input { position: absolute; opacity: 0; pointer-events: none; }
        .answer-letter {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f2f3f7;
            font-weight: 800;
            color: #52576e;
        }
        .answer-option:has(input:checked) .answer-letter { background: var(--app-primary); color: #fff; }
        .question-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0,1fr));
            gap: 8px;
        }
        .question-number {
            aspect-ratio: 1;
            border-radius: 12px;
            border: 1px solid #e5e7ef;
            background: #fff;
            color: #62677d;
            font-size: .84rem;
            font-weight: 800;
        }
        .question-number.answered { background: var(--app-primary-soft); border-color: #d8d4ff; color: var(--app-primary-dark); }
        .question-number.flagged { background: var(--app-yellow-soft); border-color: #ffe0a6; color: #99630a; }
        .question-number.current { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }

        .review-cell {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 13px 14px;
            border: 1px solid var(--app-border);
            border-radius: 15px;
            background: #fff;
        }
        .review-cell .num {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            background: #f4f5f8;
        }

        .score-ring {
            width: 170px;
            height: 170px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: conic-gradient(var(--app-primary) 0 88%, #eceef5 88% 100%);
            position: relative;
        }
        .score-ring::after {
            content: "";
            position: absolute;
            width: 132px;
            height: 132px;
            border-radius: 50%;
            background: #fff;
        }
        .score-content { position: relative; z-index: 1; text-align: center; }

        .teacher-hero {
            background: linear-gradient(135deg, #252a47 0%, #34395e 100%);
            color: #fff;
            border-radius: 27px;
            overflow: hidden;
            position: relative;
        }
        .teacher-hero::after {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            right: -70px;
            bottom: -95px;
            border-radius: 50%;
            background: rgba(118, 104, 255, .3);
        }
        .live-pulse {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #31d6a4;
            box-shadow: 0 0 0 5px rgba(49,214,164,.14);
        }

        .teacher-nav {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 2px;
            scrollbar-width: none;
        }
        .teacher-nav::-webkit-scrollbar { display: none; }
        .teacher-nav .btn { white-space: nowrap; }

        .app-table { margin-bottom: 0; }
        .app-table thead th {
            color: #878b9f;
            font-size: .76rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            border-bottom-color: #eef0f5;
            padding-top: 12px;
            padding-bottom: 12px;
        }
        .app-table tbody td { border-bottom-color: #f0f1f5; padding-top: 15px; padding-bottom: 15px; }
        .app-table tbody tr:last-child td { border-bottom: 0; }

        .avatar {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            border-radius: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            background: var(--app-primary-soft);
            color: var(--app-primary-dark);
        }

        .progress { background: #eceef5; }
        .progress-bar { background-color: var(--app-primary); }

        .toast { border-radius: 16px; }
        .modal-content { border-radius: 24px !important; }

        .mobile-action-bar { display: none; }
        @media (max-width: 991.98px) {
            .page-wrap { padding-top: 22px; }
            .hero-card { min-height: 0; }
            .login-art { min-height: 390px; }
            .login-visual { width: 160px; height: 160px; font-size: 4.5rem; border-radius: 42px; }
            .question-grid { grid-template-columns: repeat(8, minmax(0,1fr)); }
        }
        @media (max-width: 767.98px) {
            body { font-size: .9rem; }
            .container { --bs-gutter-x: 1.35rem; }
            .app-navbar { min-height: 58px; }
            .app-navbar .container { min-height: 58px; }
            .app-shell { min-height: calc(100vh - 58px); }
            .brand-mark { width: 32px; height: 32px; border-radius: 10px; font-size: .9rem; }
            .brand-name { font-size: .96rem; }
            .btn-icon { width: 36px; height: 36px; border-radius: 11px; }

            .page-wrap { padding: 14px 0 28px; }
            .row.g-4 { --bs-gutter-x: .9rem; --bs-gutter-y: .9rem; }
            .row.g-3 { --bs-gutter-x: .7rem; --bs-gutter-y: .7rem; }
            .gap-4 { gap: 1rem !important; }
            .gap-3 { gap: .65rem !important; }
            .mb-4 { margin-bottom: 1rem !important; }
            .mb-3 { margin-bottom: .75rem !important; }

            .surface, .surface-flat { border-radius: 16px; }
            .surface.p-4, .surface-flat.p-4,
            .hero-card.p-4, .teacher-hero.p-4,
            .question-card.p-4 { padding: 1rem !important; }
            .surface.p-3, .surface-flat.p-3 { padding: .8rem !important; }
            .soft-panel { border-radius: 14px; }

            .section-title { line-height: 1.15; }
            h1.section-title, .h1.section-title { font-size: 1.6rem; }
            h2.section-title, .h2.section-title { font-size: 1.3rem; }
            h3.section-title, .h3.section-title { font-size: 1.12rem; }
            .display-5 { font-size: 2rem; }
            .lead { font-size: .98rem; }
            .eyebrow { font-size: .66rem; letter-spacing: .075em; }

            .btn { border-radius: 11px; font-size: .82rem; padding: .42rem .68rem; }
            .btn-lg { font-size: .88rem; padding: .58rem .8rem; border-radius: 12px; }
            .btn-sm { font-size: .74rem; padding: .32rem .54rem; }
            .form-control, .form-select, .input-group-text {
                min-height: 40px;
                border-radius: 11px;
                font-size: .84rem;
            }
            .input-group > .form-control:not(:last-child),
            .input-group > .form-select:not(:last-child),
            .input-group > .input-group-text:not(:last-child) { border-radius: 11px 0 0 11px; }
            .input-group > .form-control:not(:first-child),
            .input-group > .form-select:not(:first-child),
            .input-group > .input-group-text:not(:first-child) { border-radius: 0 11px 11px 0; }

            .pill-status { gap: 4px; padding: 5px 8px; font-size: .68rem; }
            .icon-box { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; font-size: 1rem; }
            .avatar { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; font-size: .78rem; }

            .hero-card { min-height: 0; border-radius: 19px; }
            .hero-card::before { width: 160px; height: 160px; right: -65px; top: -70px; }
            .hero-card::after { width: 115px; height: 115px; right: 70px; bottom: -80px; }
            .hero-bubble { width: 86px; height: 86px; border-radius: 25px; font-size: 2.25rem; }
            .hero-chip { gap: 5px; padding: 5px 8px; font-size: .68rem; }
            .metric-card { min-height: 102px; }
            .metric-number { font-size: 1.55rem; }
            .mini-stat { padding: 11px; border-radius: 13px; }
            .exam-meta { gap: 7px 12px; font-size: .76rem; }

            .question-card { border-radius: 16px; }
            .answer-option { min-height: 54px; padding: 9px 11px; gap: 9px; border-radius: 13px; }
            .answer-letter { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; font-size: .78rem; }
            .question-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
            .question-number { border-radius: 9px; font-size: .72rem; }
            .review-cell { gap: 7px; padding: 9px 10px; border-radius: 12px; }
            .review-cell .num { width: 28px; height: 28px; border-radius: 8px; font-size: .75rem; }

            .score-ring { width: 138px; height: 138px; }
            .score-ring::after { width: 108px; height: 108px; }
            .teacher-hero { border-radius: 18px; }
            .teacher-nav { gap: 6px; }
            .teacher-nav .btn { font-size: .76rem; padding: .38rem .6rem; }
            .app-table { font-size: .79rem; }
            .app-table thead th { font-size: .65rem; padding-top: 9px; padding-bottom: 9px; }
            .app-table tbody td { padding-top: 10px; padding-bottom: 10px; }

            .login-page { align-items: flex-start; padding: 14px 0 28px; }
            .login-art { min-height: 260px; border-radius: 19px; }
            .login-art.p-4, .login-art.p-md-5 { padding: 1.15rem !important; }
            .login-visual { width: 100px; height: 100px; font-size: 2.75rem; border-radius: 28px; }
            .modal-content { border-radius: 18px !important; }
            .toast { border-radius: 13px; font-size: .82rem; }

            .desktop-only { display: none !important; }
            .mobile-action-bar {
                display: block;
                position: sticky;
                bottom: 0;
                z-index: 1020;
                padding: 7px 0 calc(7px + env(safe-area-inset-bottom));
                background: rgba(248,249,252,.94);
                border-top: 1px solid var(--app-border);
                backdrop-filter: blur(12px);
            }
        }

        @media (max-width: 390px) {
            body { font-size: .86rem; }
            .container { --bs-gutter-x: 1.1rem; }
            .page-wrap { padding-top: 11px; }
            h1.section-title, .h1.section-title { font-size: 1.45rem; }
            h2.section-title, .h2.section-title { font-size: 1.2rem; }
            .hero-card.p-4, .surface.p-4, .surface-flat.p-4, .teacher-hero.p-4, .question-card.p-4 { padding: .85rem !important; }
            .metric-number { font-size: 1.4rem; }
            .question-grid { gap: 5px; }
            .answer-option { padding: 8px 9px; }
        }

        /* Extended application mockup */
        .student-nav {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 2px;
            scrollbar-width: none;
        }
        .student-nav::-webkit-scrollbar { display: none; }
        .student-nav .btn { white-space: nowrap; }
        .feature-card {
            height: 100%;
            padding: 20px;
            border: 1px solid var(--app-border);
            border-radius: 20px;
            background: #fff;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .feature-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 30px rgba(33,38,68,.08);
            border-color: #dcd9ff;
        }
        .feature-card .feature-arrow {
            width: 34px;
            height: 34px;
            border-radius: 11px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f4f5f8;
            color: var(--app-ink);
        }
        .calendar-strip {
            display: grid;
            grid-template-columns: repeat(7, minmax(0,1fr));
            gap: 8px;
        }
        .calendar-day {
            min-height: 74px;
            padding: 10px 6px;
            border: 1px solid var(--app-border);
            border-radius: 15px;
            background: #fff;
            text-align: center;
        }
        .calendar-day.active {
            color: #fff;
            border-color: transparent;
            background: var(--app-primary);
            box-shadow: 0 8px 18px rgba(101,88,245,.2);
        }
        .calendar-day.has-event:not(.active) { background: var(--app-primary-soft); border-color: #dad6ff; }
        .calendar-day .day-name { font-size: .68rem; font-weight: 800; text-transform: uppercase; opacity: .7; }
        .calendar-day .day-num { font-size: 1.05rem; font-weight: 800; margin-top: 4px; }
        .calendar-day .event-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin: 6px auto 0; opacity: .75; }
        .result-grade {
            width: 62px;
            height: 62px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
            font-weight: 900;
            background: var(--app-green-soft);
            color: #11805f;
        }
        .question-preview {
            padding: 18px;
            border-radius: 18px;
            border: 1px solid var(--app-border);
            background: #fbfbfe;
        }
        .question-preview.correct { border-color: #cfeee4; background: #f6fffb; }
        .question-preview.wrong { border-color: #ffd7dc; background: #fffafb; }
        .builder-step {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--app-muted);
            font-size: .82rem;
            font-weight: 700;
        }
        .builder-step .step-num {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eff0f5;
            color: #666c80;
        }
        .builder-step.active { color: var(--app-primary-dark); }
        .builder-step.active .step-num { color:#fff; background: var(--app-primary); }
        .builder-step.done .step-num { color:#157a5c; background: var(--app-green-soft); }
        .question-type-card {
            cursor: pointer;
            padding: 14px;
            border: 1px solid var(--app-border);
            border-radius: 16px;
            background: #fff;
        }
        .question-type-card.active { border-color: #aaa2ff; background: var(--app-primary-soft); }
        .dropzone {
            min-height: 130px;
            border: 1.5px dashed #cfd3e2;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: #fafbfe;
        }
        .class-cover {
            min-height: 128px;
            border-radius: 18px;
            padding: 18px;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        .class-cover::after {
            content:"";
            width: 120px;
            height: 120px;
            position:absolute;
            right:-38px;
            bottom:-45px;
            border-radius:50%;
            border:16px solid rgba(255,255,255,.12);
        }
        .class-purple { background: linear-gradient(135deg,#6f61ff,#4f48d8); }
        .class-blue { background: linear-gradient(135deg,#4596ff,#4470e7); }
        .class-green { background: linear-gradient(135deg,#20b88b,#11986f); }
        .class-pink { background: linear-gradient(135deg,#f06d9d,#dc577f); }
        .donut {
            --value: 72;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: conic-gradient(var(--app-primary) calc(var(--value) * 1%), #eceef5 0);
            position: relative;
            display: grid;
            place-items: center;
        }
        .donut::after {
            content:"";
            position:absolute;
            inset:17px;
            border-radius:50%;
            background:#fff;
        }
        .donut > div { position:relative; z-index:1; text-align:center; }
        .activity-line {
            position: relative;
            padding-left: 24px;
        }
        .activity-line::before {
            content:"";
            position:absolute;
            left:7px;
            top:6px;
            bottom:-18px;
            width:2px;
            background:#eceef4;
        }
        .activity-line:last-child::before { display:none; }
        .activity-dot {
            position:absolute;
            left:2px;
            top:5px;
            width:12px;
            height:12px;
            border:3px solid #fff;
            border-radius:50%;
            background:var(--app-primary);
            box-shadow:0 0 0 1px #d8d5ff;
        }
        .setting-row {
            padding: 16px 0;
            border-bottom: 1px solid #eef0f5;
        }
        .setting-row:last-child { border-bottom: 0; }
        .sticky-summary { position: sticky; top: 92px; }
        .mock-chart {
            height: 210px;
            display:flex;
            align-items:flex-end;
            gap:12px;
            padding: 18px 8px 0;
            border-bottom:1px solid #e9ebf2;
        }
        .mock-bar {
            flex:1;
            min-width:18px;
            border-radius:10px 10px 3px 3px;
            background: linear-gradient(180deg,#7b70ff,#6053e9);
            opacity:.92;
            position:relative;
        }
        .mock-bar span {
            position:absolute;
            left:50%;
            bottom:-25px;
            transform:translateX(-50%);
            font-size:.68rem;
            color:var(--app-muted);
            white-space:nowrap;
        }
        @media (max-width: 767.98px) {
            .student-nav { gap: 6px; }
            .student-nav .btn { font-size: .76rem; padding: .38rem .6rem; }
            .feature-card { padding: 14px; border-radius: 16px; }
            .calendar-strip { gap: 5px; }
            .calendar-day { min-height: 58px; padding: 7px 3px; border-radius: 11px; }
            .calendar-day .day-name { font-size: .56rem; }
            .calendar-day .day-num { font-size: .9rem; }
            .result-grade { width: 50px; height: 50px; border-radius: 14px; font-size: 1.05rem; }
            .builder-step { font-size: .72rem; gap: 6px; }
            .builder-step .step-num { width: 26px; height: 26px; border-radius: 8px; }
            .question-type-card { padding: 10px; border-radius: 13px; }
            .class-cover { min-height: 105px; border-radius: 15px; padding: 14px; }
            .donut { width: 120px; height: 120px; }
            .donut::after { inset:14px; }
            .sticky-summary { position: static; }
            .mock-chart { height: 170px; gap:7px; }
        }