:root {
    --ink: #172033;
    --muted: #667085;
    --line: #e4e7ec;
    --brand: #3657d5;
    --brand-dark: #2746bd;
    --canvas: #f5f7fb;
}

* { box-sizing: border-box; }

body {
    min-width: 320px;
    color: var(--ink);
    background: var(--canvas);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

a { text-decoration: none; }

.site-shell { max-width: 1180px; }

.site-header {
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.brand { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand small { color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .03em; }

.hero {
    background: linear-gradient(130deg, #243b91 0%, #3657d5 55%, #5a75ea 100%);
    border-radius: 20px;
    color: #fff;
    box-shadow: 0 18px 44px rgba(54, 87, 213, .2);
}

.hero h1 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; margin-bottom:.3rem !important; }
.hero p { color: rgba(255,255,255,.82); max-width: 640px; font-size:.9rem; line-height:1.35; }
.hero p.text-uppercase { font-size:.68rem; margin-bottom:.3rem !important; }
.hero-count { border-left: 1px solid rgba(255,255,255,.25); min-width: 96px; }
.hero-count strong { display:block; font-size: 1.65rem; line-height:1; }
.hero-count span { font-size:.78rem; }

.semester-browser { background:#fff; border:1px solid var(--line); border-radius:20px; padding:16px; box-shadow:0 5px 18px rgba(16,24,40,.045); }
.semester-tabs { display:grid; grid-template-columns:repeat(6, minmax(112px, 1fr)); gap:8px; overflow-x:auto; padding-bottom:13px; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.semester-tab { min-width:112px; border:1px solid var(--line); border-radius:12px; background:#f8f9fc; color:var(--muted); font-size:.88rem; font-weight:750; padding:.72rem .65rem; transition:.16s ease; white-space:nowrap; }
.semester-tab:hover { color:var(--brand); border-color:#b8c4f2; background:#f3f5ff; }
.semester-tab.active { color:#fff; border-color:var(--brand); background:var(--brand); box-shadow:0 6px 14px rgba(54,87,213,.2); }
.semester-tab:focus-visible { outline:3px solid rgba(54,87,213,.22); outline-offset:2px; }
.semester-subject-panel { padding-top:14px; }
.semester-subject-panel[hidden] { display:none; }
.semester-empty { color:var(--muted); margin:0; padding:14px 4px 5px; text-align:center; }
.subject-grid { display:flex; flex-wrap:nowrap; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; }
.subject-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--ink);
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 62px;
    padding: 10px 12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    flex:1 0 175px;
}
.subject-card:hover, .subject-card:focus-visible { color: var(--ink); border-color: #b6c3f2; box-shadow: 0 10px 25px rgba(25, 44, 98, .10); transform: translateY(-2px); }
.subject-card.active { border: 2px solid var(--brand); background: #f8f9ff; }
.subject-icon { width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:10px; font-weight:800; font-size:1rem; }
.tone-blue .subject-icon { background:#e8edff; color:#3657d5; }.tone-indigo .subject-icon { background:#eeeaff; color:#6657d6; }.tone-teal .subject-icon { background:#e2f8f4; color:#147d72; }.tone-orange .subject-icon { background:#fff0e3; color:#c86410; }.tone-rose .subject-icon { background:#ffe9ee; color:#c83858; }.tone-green .subject-icon { background:#e6f7ed; color:#218c50; }
.tone-cyan .subject-icon { background:#e3f8fc; color:#087f96; }.tone-lime .subject-icon { background:#eff8df; color:#5d7d18; }.tone-purple .subject-icon { background:#f3e9ff; color:#7a42b6; }
.tone-red .subject-icon { background:#ffebeb; color:#c32f3f; }
.subject-card strong { font-size:.92rem; line-height:1.25; }

.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn { border-radius: 10px; font-weight: 650; padding: .58rem .9rem; }
.btn-primary { background: var(--brand); border-color: var(--brand); }.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-light { border: 1px solid var(--line); }

.question-card, .result-card, .all-question-card { border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 3px 12px rgba(16,24,40,.035); }
.question-card .card-body, .result-card .card-body, .all-question-card .card-body { padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.question-number { color: var(--brand); font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.question-text { font-size: 1.05rem; font-weight: 650; line-height: 1.55; margin: .35rem 0 1rem; }
.question-text sub, .answer-row sub, .answer-option sub { font-size:.72em; vertical-align:-.25em; }
.question-text sup, .answer-row sup, .answer-option sup { font-size:.72em; }
.math-expression { display:inline-flex; align-items:center; gap:.18em; font-family:"Cambria Math","Times New Roman",serif; font-weight:500; white-space:nowrap; }
.math-fraction { display:inline-grid; grid-template-rows:auto auto; line-height:1; text-align:center; vertical-align:middle; }
.math-fraction > span:first-child { border-bottom:1px solid currentColor; padding:0 .18em .08em; }
.math-fraction > span:last-child { padding-top:.08em; }
.question-figure { display:block; max-width:min(100%, 420px); height:auto; margin:.4rem 0 1rem; }
.random-quiz-open { overflow:hidden; }
.random-quiz-modal[hidden] { display:none; }
.random-quiz-modal { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:20px; }
.random-quiz-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.64); backdrop-filter:blur(5px); }
.random-quiz-dialog { position:relative; width:min(720px, 100%); max-height:min(88vh, 820px); overflow:auto; background:#fff; border:1px solid rgba(255,255,255,.6); border-radius:22px; box-shadow:0 30px 90px rgba(15,23,42,.32); }
.random-quiz-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px 22px 15px; border-bottom:1px solid var(--line); }
.random-quiz-kicker { color:var(--brand); font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.random-quiz-header h2 { font-size:1.25rem; font-weight:800; margin:.15rem 0 0; }
.random-quiz-close { width:36px; height:36px; flex:none; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--muted); font-size:1.5rem; line-height:1; }
.random-quiz-close:hover { background:#f4f6fb; color:var(--ink); }
.random-quiz-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 22px; background:#f8f9fc; color:var(--muted); font-size:.82rem; font-weight:650; }
.random-quiz-countdown { color:var(--brand); text-align:right; }
.random-quiz-body { padding:22px; }
.random-quiz-question { font-size:1.08rem; font-weight:700; line-height:1.55; margin-bottom:14px; }
.random-quiz-image { margin:-4px 0 16px; }
.random-quiz-answers { display:grid; gap:9px; }
.random-answer { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:11px 13px; cursor:pointer; transition:.15s ease; }
.random-answer:hover { background:#f8f9ff; border-color:#b8c4f2; }
.random-answer:has(input:checked) { background:#edf1ff; border-color:var(--brand); }
.random-answer input { margin-top:.3rem; flex:none; }
.random-answer.is-correct { background:#e9f8ef !important; border-color:#77c995 !important; color:#126938; font-weight:700; }
.random-answer.is-wrong { background:#fff0f1 !important; border-color:#efa0ab !important; color:#b4233d; }
.random-quiz-result { min-height:28px; margin-top:14px; border-radius:10px; font-weight:750; padding:0; }
.random-quiz-result.is-correct, .random-quiz-result.is-wrong { padding:10px 12px; }
.random-quiz-result.is-correct { background:#e9f8ef; color:#126938; }
.random-quiz-result.is-wrong { background:#fff0f1; color:#b4233d; }
.random-quiz-footer { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; background:rgba(255,255,255,.96); border-top:1px solid var(--line); }
.study-group-modal[hidden] { display:none; }
.study-group-modal { position:fixed; inset:0; z-index:2100; display:grid; place-items:center; padding:20px; }
.study-group-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.68); backdrop-filter:blur(5px); }
.study-group-dialog { position:relative; width:min(760px, 100%); max-height:min(92vh, 880px); overflow:auto; background:#fff; border-radius:22px; box-shadow:0 30px 90px rgba(15,23,42,.35); }
.study-group-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px 22px 15px; border-bottom:1px solid var(--line); }
.study-group-header h2 { font-size:1.25rem; font-weight:800; margin:.15rem 0 0; }
.study-group-entry { padding:22px; }
.study-group-form { display:grid; gap:15px; max-width:520px; margin:auto; }
.study-group-form[hidden] { display:none; }
.study-group-form h3 { font-size:1.15rem; font-weight:800; margin:0; }
.study-group-form label { display:grid; gap:6px; color:var(--ink); font-size:.88rem; font-weight:700; }
.study-group-hint { color:var(--muted); font-size:.83rem; margin:0; }
.study-group-form-actions { display:flex; justify-content:flex-end; gap:9px; }
.saved-study-groups { border-top:1px solid var(--line); padding-top:13px; }
.saved-study-groups-title { color:var(--muted); font-size:.78rem; font-weight:800; margin-bottom:7px; text-transform:uppercase; }
.saved-study-groups-list { display:grid; gap:7px; max-height:210px; overflow:auto; }
.saved-study-group-row { display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:11px; background:#f9fafc; }
.saved-study-group-row > div { min-width:0; display:grid; margin-right:auto; }
.saved-study-group-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; }
.saved-study-group-row span { color:var(--muted); font-size:.72rem; }
.saved-study-group-actions { display:flex; gap:5px; }
.study-group-error { margin:16px auto 0; max-width:520px; padding:10px 12px; border-radius:10px; color:#b4233d; background:#fff0f1; border:1px solid #efa0ab; font-weight:650; }
.study-group-code-input { font-size:1.25rem; font-weight:800; letter-spacing:.28em; }
.study-group-room-bar { display:flex; align-items:center; gap:12px; padding:12px 22px; background:#eef2ff; border-bottom:1px solid #d8def8; }
.study-group-room-bar > div:first-child { display:flex; align-items:baseline; gap:9px; }
.study-group-room-bar span { color:var(--muted); font-size:.75rem; font-weight:700; }
.study-group-room-bar strong { color:var(--brand); font-size:1.35rem; letter-spacing:.16em; }
.study-group-member-count { margin-left:auto; color:var(--muted); font-size:.82rem; font-weight:700; }
.study-group-member-count span { color:var(--ink); font-size:.95rem; }
.study-group-members { display:flex; gap:6px; overflow-x:auto; padding:8px 22px; border-bottom:1px solid var(--line); }
.study-group-members span { flex:none; padding:4px 8px; border-radius:999px; background:#f1f3f8; color:#475467; font-size:.72rem; font-weight:700; }
.study-group-members span.has-mic { background:#e7f8ed; color:#13703a; }
.study-group-answer-members { display:flex; flex:1 0 100%; flex-wrap:wrap; gap:5px; padding-left:27px; }
.study-group-room .random-answer { flex-wrap:wrap; }
.study-group-room .random-answer > span:nth-child(2) { flex:1; min-width:0; }
.study-group-answer-members:empty { display:none; }
.study-group-answer-members em { padding:3px 7px; border-radius:999px; background:#e7ebf5; color:#344054; font-size:.68rem; font-style:normal; font-weight:750; }
.study-group-question-history { padding:18px 22px 22px; }
.study-group-history-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.study-group-history-heading span { color:var(--brand); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.study-group-history-heading h3 { font-size:1.08rem; font-weight:800; margin:2px 0 0; }
.study-group-history-list { display:grid; gap:12px; }
.study-group-history-card { padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.study-group-history-question { margin:4px 0 9px; font-weight:700; line-height:1.45; }
.study-group-history-answer { display:grid; gap:5px; padding:7px 9px; border-radius:9px; font-size:.86rem; }
.study-group-history-answer.is-correct { background:#e9f8ef; color:#126938; }
.study-group-history-answer b { display:inline-block; margin-left:7px; padding:2px 6px; border-radius:999px; background:#ccefd9; font-size:.65rem; }
.study-group-history-answer .study-group-answer-members { padding-left:22px; }
.study-group-history-empty { color:var(--muted); text-align:center; padding:30px 10px; }
.study-group-waiting { padding:18px 10px; text-align:center; }
.study-group-waiting-icon { font-size:2.5rem; margin-bottom:8px; }
.study-group-waiting h3 { font-size:1.2rem; font-weight:800; }
.study-group-waiting p { color:var(--muted); max-width:500px; margin:0 auto; }
.study-group-footer { align-items:center; }
.study-group-identity { margin-right:auto; color:var(--muted); font-size:.78rem; font-weight:700; }
.study-group-voice-status { color:var(--muted); font-size:.72rem; font-weight:700; }
.study-group-voice-status.is-error { color:#b4233d; }
.study-group-mic.is-on { color:#fff; border-color:#168548; background:#168548; }
.study-group-auto.is-on { color:#fff; border-color:#c36a08; background:#d9790c; }
.study-group-audio { position:fixed; width:1px; height:1px; overflow:hidden; opacity:.01; pointer-events:none; }
.answer-option { border: 1px solid var(--line); border-radius: 11px; cursor: pointer; display:flex; gap: .7rem; margin-top: .65rem; padding: .75rem .85rem; transition: background .15s ease, border-color .15s ease; }
.answer-option:hover { background: #f8f9ff; border-color: #bdc8f7; }
.answer-option:has(input:checked) { background:#edf1ff; border-color:var(--brand); }
.answer-option input { flex:none; margin-top:.28rem; }.answer-option strong { color:var(--brand); }
.quiz-footer { background: rgba(245,247,251,.92); border-top: 1px solid var(--line); margin-top: 1.5rem; padding: 15px 0; }

.notice { background:#fff7dc; border:1px solid #f1d98a; border-radius:14px; color:#725312; }
.score-panel { background: linear-gradient(130deg, #eef2ff, #fff); border:1px solid #cbd5ff; border-radius:18px; }.score-panel strong { font-size:2.2rem; color:var(--brand); }
.answer-row { border-radius:10px; margin-top:.5rem; padding:.7rem .8rem; }.answer-row.is-correct { background:#e9f8ef; color:#126938; }.answer-row.is-wrong { background:#fff0f1; color:#b4233d; }

.answer-key { display:none; }.show-answers .answer-key { display:inline-flex; }.show-answers .answer-row.correct-answer { background:#e9f8ef; color:#126938; font-weight:700; }
.toolbar { background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; position:sticky; top:12px; z-index:10; box-shadow:0 5px 16px rgba(16,24,40,.06); }

@media (max-width: 575.98px) {
    .site-header .container { padding-top:.55rem!important; padding-bottom:.55rem!important; flex-wrap:wrap; gap:6px; }
    .brand img { width:38px; height:38px; }.brand small { display:none; }
    .hero { border-radius:16px; }.hero-count { border-left:0; border-top:1px solid rgba(255,255,255,.25); padding-top:.65rem; margin-top:.5rem; }
    .semester-browser { border-radius:16px; padding:12px; }
    .semester-tabs { gap:6px; padding-bottom:11px; }
    .semester-tab { min-width:102px; font-size:.78rem; padding:.62rem .5rem; }
    .semester-tab.active,
    .semester-tab.active:hover,
    .semester-tab.active:focus,
    .semester-tab[aria-selected="true"] {
        color:#fff !important;
        border-color:#2746bd !important;
        background:#3657d5 !important;
        box-shadow:0 5px 13px rgba(54,87,213,.3), inset 0 0 0 1px rgba(255,255,255,.18) !important;
    }
    .subject-card { flex-basis:165px; }
    .header-actions { width:100%; display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:5px !important; overflow:visible; padding-bottom:2px; }
    .header-actions .btn { width:100%; min-width:0; font-size:.7rem; padding:.46rem .35rem; white-space:nowrap; touch-action:manipulation; }
    .random-quiz-modal { padding:8px; align-items:end; }
    .random-quiz-dialog { max-height:94vh; border-radius:18px 18px 10px 10px; }
    .random-quiz-header, .random-quiz-body { padding:16px; }
    .random-quiz-meta { padding:9px 16px; align-items:flex-start; }
    .random-quiz-footer { padding:12px 16px; }.random-quiz-footer .btn { flex:1; }
    .study-group-modal { padding:8px; align-items:end; }
    .study-group-dialog { max-height:95vh; border-radius:18px 18px 10px 10px; }
    .study-group-header, .study-group-entry { padding:16px; }
    .study-group-room-bar { padding:10px 16px; flex-wrap:wrap; gap:8px; }
    .study-group-room-bar strong { font-size:1.15rem; }
    .study-group-member-count { margin-left:0; }
    .study-group-members { padding:7px 16px; }
    .study-group-footer { flex-wrap:wrap; }
    .study-group-identity { flex-basis:100%; }
    .study-group-voice-status { flex:1; }
    .study-group-question-history { padding:14px 16px 18px; }
    .study-group-history-heading { align-items:flex-start; flex-direction:column; }
    .study-group-history-heading .btn { width:100%; }
    .toolbar { position:static; }.action-bar .btn { flex:1 1 auto; }
    .quiz-footer .btn { width:100%; }
}

@media print {
    @page { size:A4 portrait; margin:8mm; }
    .site-header, .semester-browser, .toolbar, .quiz-footer, .no-print { display:none !important; }
    html, body { background:#fff; font-size:10pt; }
    .site-shell { max-width:none; padding:0 !important; }
    main > .d-flex { margin-bottom:4mm !important; }
    main h1 { font-size:16pt !important; margin:0 !important; }
    main h1 + p { font-size:9pt; margin:0 !important; }
    main > .d-flex p.text-uppercase { display:none; }
    .all-question-card { box-shadow:none; break-inside:avoid; page-break-inside:avoid; margin-bottom:3mm !important; }
    .all-question-card .card-body { padding:3mm; }
    .all-question-card .question-number { font-size:8pt; }
    .all-question-card .question-text { font-size:10pt; line-height:1.3; margin:1mm 0 1.5mm; }
    .all-question-card .answer-row { font-size:9pt; line-height:1.25; margin-top:.6mm; padding:1mm 1.5mm; }
    .answer-key { display:inline-flex; }.answer-row.correct-answer { background:#e9f8ef !important; color:#126938 !important; font-weight:700; }

    .print-compact main > .d-flex { margin-bottom:2mm !important; }
    .print-compact main h1 { font-size:12pt !important; }
    .print-compact main h1 + p { font-size:7.5pt; }
    .print-compact #question-list { column-count:2; column-gap:5mm; }
    .print-compact .all-question-card { display:inline-block; width:100%; border-radius:2mm; margin:0 0 2mm !important; }
    .print-compact .all-question-card .card-body { padding:1.7mm 2mm; }
    .print-compact .all-question-card .question-number { display:inline; font-size:6.8pt; margin-right:1mm; }
    .print-compact .all-question-card .question-text { display:inline; font-size:7.6pt; line-height:1.18; margin:0; }
    .print-compact .all-question-card .answer-row { display:inline; background:transparent !important; font-size:7pt; line-height:1.18; margin:0; padding:0; }
    .print-compact .all-question-card .answer-row::before { content:"  "; }
    .print-compact .all-question-card .answer-row.correct-answer { color:#126938 !important; text-decoration:underline; text-decoration-thickness:.5pt; }
    .print-compact .answer-key { display:none; }
}