:root {
    --navy: #12344f;
    --navy-deep: #0d2b43;
    --teal: #148b85;
    --mint: #49d6c6;
    --ink: #183c58;
    --muted: #718b9d;
    --line: #e2ebf2;
    --soft: #f5f9fb;
    --white: #fff;
    --shadow: 0 12px 34px rgba(24, 63, 89, .06);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--soft); }
body { margin: 0; min-width: 320px; background: var(--soft); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, .button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(96, 207, 194, .35); outline-offset: 2px; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 255px; flex: 0 0 255px; display: flex; flex-direction: column; min-height: 100vh; padding: 25px 20px; background: var(--navy); color: #fff; }
.brand, .public-brand { display: flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 800; letter-spacing: -.05em; }
.brand strong, .public-brand strong { color: var(--mint); }
.brand small { display: block; margin-top: 3px; color: #a8bed0; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; border-radius: 13px; background: var(--mint); color: var(--navy); font-size: 29px; line-height: 1; font-weight: 900; box-shadow: 0 8px 18px rgba(73, 214, 198, .2); }
.sidebar-label { margin: 48px 12px 12px; color: #7f9aaf; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: 6px; }
.sidebar-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 11px; color: #a9bfd0; font-size: 13px; font-weight: 750; transition: .2s ease; }
.sidebar-nav a span { width: 18px; color: #8eaabd; font-size: 18px; text-align: center; }
.sidebar-nav a:hover { background: #1a465e; color: #fff; }
.sidebar-nav a.active { background: #1d5266; color: #fff; box-shadow: inset 3px 0 var(--mint); }
.sidebar-nav a.active span { color: var(--mint); }
.sidebar-bottom { margin-top: auto; }
.student-side-card { padding: 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.06); }
.student-side-card > div { display: flex; gap: 9px; }
.student-side-card .mini-icon { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 9px; background: var(--mint); color: var(--navy); }
.student-side-card strong, .student-side-card small { display: block; }
.student-side-card strong { font-size: 12px; }
.student-side-card small { margin-top: 3px; color: #aac1cf; font-size: 10px; line-height: 1.4; }
.student-side-card a { display: block; margin-top: 12px; color: #65e1d1; font-size: 11px; font-weight: 800; }
.logout-link { display: block; margin: 18px 12px 0; color: #8eaabd; font-size: 12px; font-weight: 700; }
.logout-link:hover { color: #fff; }
.app-main { min-width: 0; flex: 1; }
.topbar { display: flex; min-height: 76px; align-items: center; justify-content: space-between; padding: 0 40px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); }
.eyebrow { color: #8ba2b2; font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.teal-text { color: var(--teal); }
.topbar-title { margin-top: 4px; color: var(--ink); font-size: 15px; font-weight: 800; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.top-student-link { color: var(--teal); font-size: 12px; font-weight: 800; }
.top-student-link:hover { color: var(--navy); }
.avatar { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: #e8f8f6; color: var(--teal); font-size: 13px; font-weight: 850; }
.content-wrap { max-width: 1420px; margin: 0 auto; padding: 37px 40px 55px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-heading h1 { margin: 8px 0 0; color: var(--ink); font-size: 31px; letter-spacing: -.05em; line-height: 1.05; }
.page-heading p { margin: 9px 0 0; color: var(--muted); font-size: 14px; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 9px; padding: 10px 16px; border: 0; border-radius: 11px; font-size: 13px; font-weight: 850; transition: .2s ease; }
.button-primary { background: var(--teal); color: #fff; box-shadow: 0 8px 18px rgba(20, 139, 133, .2); }
.button-primary:hover { background: #0b6968; transform: translateY(-1px); }
.button-light { background: #fff; color: var(--teal); box-shadow: 0 8px 20px rgba(16, 54, 80, .08); }
.button-light:hover { background: #eaf8f6; }
.button-full { width: 100%; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 28px; }
.stat-card { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; border-radius: 11px; font-size: 18px; font-weight: 900; }
.stat-icon.blue, .discipline-number.n0 { background: #edf3ff; color: #2d6cdf; }
.stat-icon.teal, .discipline-number.n1 { background: #e9f8f6; color: #178e87; }
.stat-icon.amber, .discipline-number.n2 { background: #fff5e4; color: #d78926; }
.stat-icon.violet, .discipline-number.n3 { background: #f1edff; color: #7a5af8; }
.stat-card strong { display: block; margin-top: 13px; color: var(--ink); font-size: 24px; letter-spacing: -.05em; }
.stat-card small { display: block; margin-top: 2px; color: #7892a1; font-size: 11px; font-weight: 650; }
.dashboard-grid, .two-column { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr); gap: 28px; margin-top: 35px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.section-heading h2, .panel h2 { margin: 0; color: #1d3e59; font-size: 17px; letter-spacing: -.02em; }
.section-heading p, .panel-title p { margin: 4px 0 0; color: #7892a1; font-size: 12px; }
.text-link { color: var(--teal); font-size: 12px; font-weight: 850; white-space: nowrap; }
.text-link:hover { color: #0c6264; }
.discipline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.discipline-grid.full-grid { grid-template-columns: repeat(4, 1fr); margin-top: 28px; }
.discipline-card { position: relative; display: flex; min-height: 112px; flex-direction: column; justify-content: flex-end; padding: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); transition: .2s ease; }
.discipline-card:hover { border-color: #9bded7; box-shadow: 0 14px 30px rgba(24, 63, 89, .1); transform: translateY(-2px); }
.discipline-card.large { min-height: 145px; }
.discipline-number { position: absolute; top: 13px; right: 13px; display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 24px; border-radius: 8px; font-size: 10px; font-weight: 900; }
.discipline-number.n4 { background: #fff0ed; color: #e05d44; }.discipline-number.n5 { background: #f1edff; color: #7057c7; }.discipline-number.n6 { background: #e8f7f5; color: #268f8a; }.discipline-number.n7 { background: #fff0f3; color: #d94f70; }.discipline-number.n8 { background: #fff1eb; color: #e2764d; }.discipline-number.n9 { background: #edf6ef; color: #4f7a62; }
.discipline-card strong { max-width: 90%; color: #1d3e59; font-size: 13px; line-height: 1.25; }
.discipline-card.large strong { font-size: 15px; }
.card-arrow { position: absolute; right: 15px; bottom: 14px; color: #9eb2bf; font-size: 16px; font-weight: 800; }
.discipline-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; color: #7892a1; font-size: 11px; font-weight: 650; }.discipline-meta span { color: var(--teal); font-weight: 850; }
.empty-state { display: flex; min-height: 215px; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border: 1px dashed #cbdde8; border-radius: 18px; background: #fbfdfe; text-align: center; }.empty-state.large-empty { min-height: 300px; margin-top: 28px; }.empty-state strong { margin-top: 10px; color: #1d3e59; font-size: 14px; }.empty-state small { max-width: 280px; margin-top: 5px; color: #718b9d; font-size: 12px; line-height: 1.5; }.empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 43px; border-radius: 14px; background: #e8f8f6; color: var(--teal); font-size: 20px; font-weight: 900; }
.response-list { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }.response-row { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid #edf2f5; }.response-row:last-child { border-bottom: 0; }.response-row:hover { background: #fbfdfe; }.student-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; background: #edf6f8; color: var(--teal); font-size: 12px; font-weight: 850; }.response-person { min-width: 0; flex: 1; }.response-person strong, .response-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.response-person strong { color: #26485e; font-size: 12px; }.response-person small { margin-top: 3px; color: #8ba1af; font-size: 10px; }.score-badge { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border-radius: 8px; font-size: 11px; font-weight: 900; }.score-badge.good { background: #e8f7f0; color: #14805e; }.score-badge.attention { background: #fff6df; color: #a66c10; }
.panel { padding: 21px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: var(--shadow); }.panel-title { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 22px; }.panel-icon { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 11px; font-size: 20px; font-weight: 800; }.panel-icon.teal { background: #e8f8f6; color: var(--teal); }
.form-stack { display: grid; gap: 14px; }.form-stack label { display: grid; gap: 6px; color: #456478; font-size: 12px; font-weight: 800; }.form-stack input, .form-stack select { width: 100%; min-height: 43px; padding: 9px 12px; border: 1px solid #d9e6ed; border-radius: 10px; background: #fbfdfe; color: var(--ink); outline: none; }.form-stack input:focus, .form-stack select:focus { border-color: #60cfc2; box-shadow: 0 0 0 4px rgba(96,207,194,.15); }.form-stack input::placeholder { color: #a0b2bf; }.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-hint { color: #8ba1af; font-size: 10px; font-weight: 600; line-height: 1.4; }
.class-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.class-card { padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }.class-top { display: flex; align-items: center; justify-content: space-between; }.class-disc { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 11px; background: #e8f8f6; color: var(--teal); font-size: 15px; font-weight: 900; }.active-label { display: inline-flex; align-items: center; gap: 5px; color: #40987d; font-size: 10px; font-weight: 850; }.active-label i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #40b987; }.class-card h3 { margin: 15px 0 4px; color: #1d3e59; font-size: 15px; }.class-card > p { margin: 0; color: #7892a1; font-size: 11px; }.class-bottom { display: flex; justify-content: space-between; gap: 15px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #edf2f5; }.class-bottom small, .class-bottom strong { display: block; }.class-bottom small { color: #9aadb9; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.class-bottom strong { margin-top: 5px; color: #177b7c; font-size: 13px; letter-spacing: .08em; }.class-count { text-align: right; }.class-count strong { color: var(--ink); letter-spacing: 0; }.class-action { display: block; margin-top: 16px; padding: 10px; border-radius: 9px; background: #f1f8f9; color: #177b7c; font-size: 11px; font-weight: 850; text-align: center; }.class-action:hover { background: #e4f4f2; }
.table-panel { padding: 0; }.table-scroll { overflow-x: auto; }.table-panel table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }.table-panel th { padding: 14px 18px; border-bottom: 1px solid #edf2f5; background: #fbfdfe; color: #8ca4b4; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }.table-panel td { padding: 15px 18px; border-bottom: 1px solid #edf2f5; color: #466579; font-size: 12px; }.table-panel td strong { color: #1d3e59; font-size: 13px; }.table-view { color: var(--teal); font-weight: 850; }.table-view:hover { color: #0c6264; }
.answer-heading { align-items: center; margin-top: 22px; }.answer-heading p { margin-top: 6px; }.answer-total { padding: 9px 13px; font-size: 16px; }.answer-list { display: grid; gap: 13px; margin-top: 25px; }.answer-card { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }.answer-question { display: flex; align-items: flex-start; gap: 10px; }.answer-question span { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px; background: #e8f8f6; color: var(--teal); font-size: 11px; font-weight: 900; }.answer-question strong { color: #24465e; font-size: 13px; line-height: 1.55; }.answer-options { display: grid; gap: 6px; margin: 13px 0 0 35px; }.answer-option { padding: 9px 11px; border-radius: 8px; background: #f8fafb; color: #718b9d; font-size: 12px; }.answer-option b { margin-right: 6px; }.answer-option.correct { background: #e8f7f0; color: #167456; font-weight: 700; }.answer-option.wrong { background: #fff0f1; color: #b44352; font-weight: 700; }.answer-option small { margin-left: 8px; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.explanation { margin: 13px 0 0 35px; padding-top: 12px; border-top: 1px solid #edf2f5; color: #718b9d; font-size: 11px; line-height: 1.5; }.explanation strong { color: #496a7d; }
.flash { position: fixed; z-index: 20; top: 18px; right: 18px; max-width: 360px; padding: 12px 15px; border-radius: 11px; background: #e8f7f0; color: #167456; box-shadow: 0 10px 26px rgba(24,63,89,.12); font-size: 12px; font-weight: 800; }.flash.error { background: #fff0f1; color: #b44352; }

.public-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); }.public-brand { color: var(--ink); }.public-brand .brand-mark { width: 35px; height: 35px; font-size: 25px; }.public-page { max-width: 1180px; margin: 0 auto; padding: 58px 24px 60px; }.public-hero { position: relative; overflow: hidden; padding: 67px clamp(28px, 7vw, 90px); border-radius: 27px; background: var(--navy); color: #fff; box-shadow: 0 20px 50px rgba(18,52,79,.14); }.public-hero:after { position: absolute; right: -100px; bottom: -130px; width: 380px; height: 380px; border: 55px solid rgba(73,214,198,.09); border-radius: 50%; content: ""; }.hero-kicker { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: #9dc9d0; font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(73,214,198,.12); }.public-hero h1 { position: relative; z-index: 1; max-width: 650px; margin: 17px 0 0; font-size: clamp(32px, 5vw, 58px); letter-spacing: -.065em; line-height: .99; }.public-hero p { position: relative; z-index: 1; max-width: 510px; margin: 21px 0 0; color: #bad0d9; font-size: 15px; line-height: 1.6; }.hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }.public-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }.public-card { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }.public-icon { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 11px; font-weight: 900; }.public-icon.teal { background: #e8f8f6; color: var(--teal); }.public-icon.blue { background: #edf3ff; color: #2d6cdf; }.public-icon.violet { background: #f1edff; color: #7a5af8; }.public-card strong, .public-card small { display: block; }.public-card strong { margin-top: 16px; color: var(--ink); font-size: 14px; }.public-card small { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-page, .student-page { min-height: calc(100vh - 76px); display: flex; align-items: center; justify-content: center; padding: 38px 20px 55px; }.auth-card { width: min(100%, 420px); padding: 35px; border: 1px solid var(--line); border-radius: 23px; background: #fff; box-shadow: var(--shadow); }.auth-mark, .student-symbol { display: inline-flex; align-items: center; justify-content: center; width: 47px; height: 47px; border-radius: 15px; background: var(--mint); color: var(--navy); font-size: 29px; font-weight: 900; }.auth-card h1, .student-form h2 { margin: 13px 0 0; color: var(--ink); font-size: 25px; letter-spacing: -.05em; }.auth-card > p, .student-form > p { margin: 8px 0 25px; color: var(--muted); font-size: 13px; line-height: 1.5; }.back-link { display: inline-flex; margin-top: 19px; color: var(--teal); font-size: 12px; font-weight: 850; }.back-link:hover { color: var(--navy); }.student-page { align-items: flex-start; }.student-card { display: grid; width: min(100%, 930px); grid-template-columns: .9fr 1.1fr; overflow: hidden; border: 1px solid #dcecf0; border-radius: 25px; background: #fff; box-shadow: 0 18px 44px rgba(24,63,89,.07); }.student-intro { position: relative; overflow: hidden; padding: 44px; background: #123d58; color: #fff; }.student-intro:after { position: absolute; right: -90px; bottom: -95px; width: 270px; height: 270px; border: 38px solid rgba(73,214,198,.1); border-radius: 50%; content: ""; }.student-intro > * { position: relative; z-index: 1; }.student-intro h1 { max-width: 330px; margin: 20px 0 0; font-size: 34px; letter-spacing: -.06em; line-height: 1.04; }.student-intro p { max-width: 340px; margin: 17px 0 0; color: #bad0d9; font-size: 13px; line-height: 1.55; }.student-note { margin-top: 34px; color: #9dc9d0; font-size: 11px; font-weight: 800; }.student-form { padding: 44px; }.student-form h2 { font-size: 21px; }.student-form > p { margin-bottom: 22px; }.quiz-page { display: block; width: min(100%, 760px); margin: 0 auto; }.quiz-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 20px 0 23px; }.quiz-heading h1 { margin: 8px 0 0; color: var(--ink); font-size: 25px; letter-spacing: -.05em; }.quiz-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }.quiz-code { padding: 8px 10px; border-radius: 8px; background: #edf6f8; color: #177b7c; font-size: 10px; font-weight: 900; letter-spacing: .08em; }.quiz-form { display: grid; gap: 13px; }.question-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }.question-card legend { display: flex; gap: 10px; width: 100%; padding: 0; color: #24465e; font-size: 14px; font-weight: 850; line-height: 1.5; }.question-card legend span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: #e8f8f6; color: var(--teal); font-size: 11px; }.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0 36px; }.option { display: flex; gap: 8px; align-items: flex-start; padding: 11px; border: 1px solid #e5edf2; border-radius: 9px; background: #fbfdfe; color: #688293; font-size: 12px; line-height: 1.45; cursor: pointer; }.option:hover { border-color: #b5d8dc; }.option input { margin-top: 2px; accent-color: var(--teal); }
.result-card { width: min(100%, 650px); overflow: hidden; border: 1px solid #dcecf0; border-radius: 25px; background: #fff; box-shadow: 0 18px 44px rgba(24,63,89,.08); }.result-top { padding: 40px 25px; background: #123d58; color: #fff; text-align: center; }.result-check { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--mint); color: var(--navy); font-size: 30px; font-weight: 900; }.result-top .eyebrow { margin-top: 18px; color: #9dc9d0; }.result-top h1 { margin: 8px 0 0; font-size: 25px; letter-spacing: -.05em; }.result-body { padding: 28px; }.result-score { display: flex; align-items: center; justify-content: space-between; padding: 18px; border-radius: 16px; background: #f1fbfa; }.result-score small, .result-score strong, .result-percent, .result-percent small { display: block; }.result-score small { color: #6b9199; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }.result-score strong { margin-top: 4px; color: #17686a; font-size: 39px; letter-spacing: -.07em; }.result-score strong span { color: #73a4a5; font-size: 19px; }.result-percent { color: #17686a; font-size: 25px; font-weight: 900; text-align: right; }.result-percent small { margin-top: 2px; color: #6b9199; font-size: 10px; font-weight: 700; }.result-caption { margin: 18px 0 21px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.install-body { background: #12344f; }.install-page { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 28px 18px; }.install-card { width: min(100%, 620px); padding: 34px; border-radius: 24px; background: #fff; box-shadow: 0 24px 80px rgba(2, 22, 37, .27); }.install-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 27px; color: var(--ink); font-size: 18px; font-weight: 850; letter-spacing: -.05em; }.install-brand strong { color: var(--teal); }.install-brand .brand-mark { width: 36px; height: 36px; font-size: 25px; }.install-card h1 { margin: 10px 0 0; color: var(--ink); font-size: 27px; letter-spacing: -.05em; }.install-lead { margin: 8px 0 26px; color: var(--muted); font-size: 13px; }.install-section { display: grid; gap: 13px; padding: 18px; border: 1px solid #e7eef2; border-radius: 15px; background: #fbfdfe; }.install-section + .install-section { margin-top: 12px; }.install-section h2 { grid-column: 1 / -1; margin: 0 0 2px; color: #31536a; font-size: 13px; }.install-errors { margin: 15px 0; padding: 12px 14px; border-radius: 10px; background: #fff0f1; color: #b44352; font-size: 12px; line-height: 1.6; }.success-box { display: flex; gap: 13px; align-items: flex-start; margin: 20px 0 25px; padding: 17px; border-radius: 14px; background: #e8f7f0; color: #167456; }.success-box > span { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 9px; background: #bcebd3; font-weight: 900; }.success-box h1 { margin: 0; color: #167456; font-size: 18px; }.success-box p { margin: 4px 0 0; color: #4f8f77; font-size: 12px; line-height: 1.5; }.install-footnote { margin: 17px 0 0; color: #8ba1af; font-size: 11px; line-height: 1.5; text-align: center; }.install-copy { margin: 18px 0 0; color: #9dc9d0; font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 1050px) { .content-wrap { padding-right: 26px; padding-left: 26px; }.topbar { padding: 0 26px; }.dashboard-grid, .two-column { grid-template-columns: 1fr; }.discipline-grid.full-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .sidebar { display: none; }.topbar { min-height: 68px; padding: 0 18px; }.topbar-actions { gap: 10px; }.top-student-link { display: none; }.content-wrap { padding: 27px 18px 44px; }.page-heading { align-items: flex-start; flex-direction: column; }.page-heading h1 { font-size: 27px; }.page-heading .button { align-self: stretch; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.discipline-grid, .discipline-grid.full-grid { grid-template-columns: repeat(2, 1fr); }.class-list { grid-template-columns: 1fr; }.public-page { padding: 25px 18px 40px; }.public-hero { padding: 42px 26px; border-radius: 21px; }.public-hero h1 { font-size: 38px; }.public-cards { grid-template-columns: 1fr; }.student-card { grid-template-columns: 1fr; border-radius: 20px; }.student-intro, .student-form { padding: 30px 25px; }.student-intro h1 { font-size: 29px; }.auth-card { padding: 27px 22px; }.option-grid { grid-template-columns: 1fr; margin-left: 0; }.quiz-heading { align-items: flex-start; flex-direction: column; }.result-body { padding: 22px; } }
@media (max-width: 430px) { .form-row { grid-template-columns: 1fr; }.stats-grid { gap: 9px; }.stat-card { padding: 14px; }.discipline-card { min-height: 125px; padding: 13px; }.discipline-card strong { font-size: 12px; }.install-card { padding: 24px 18px; }.install-section { padding: 14px; }.install-section .form-row { grid-template-columns: 1fr; } }