/* Blue palette aligned with the task4 site. Kept separate so the theme is easy to roll back. */
:root {
    --ink: #172436;
    --muted: #64748b;
    --paper: #f5f7fb;
    --white: #ffffff;
    --green: #4967e8;
    --green2: #eef2ff;
    --lime: #dce5ff;
    --line: #dbe3ee;
    --orange: #f2a35a;
    --shadow: 0 16px 44px rgba(31, 47, 79, .08);
}

body {
    background: radial-gradient(ellipse at 8% 0%, #e9edff 0, transparent 38%), var(--paper);
    color: var(--ink);
    font-family: 'DM Sans', system-ui, sans-serif;
}

h1, h2, h3, .brand {
    font-family: Manrope, 'DM Sans', system-ui, sans-serif;
}

button:hover, .btn:hover { background: #334dcc; }

.topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    width: 100%;
    max-width: none;
    height: 78px;
    padding: 0 max(24px, calc((100vw - 1160px) / 2));
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    border-bottom: 1px solid #e4eaf2;
    box-shadow: 0 5px 24px rgba(31, 47, 79, .06);
    backdrop-filter: blur(14px);
}

.brand { color: #253550; }
.brand-mark { background: #4967e8; color: #fff; box-shadow: 0 7px 16px #4967e83b; }
.navlinks a { color: #536176; }
.navlinks a:hover { color: #334dcc; }
.navlinks a.btn:not(.light) { color: #fff; }
.navlinks a.btn:not(.light):hover { color: #fff; background: #334dcc; }
.navlinks .btn.light { background: #fff; color: #43536b; border-color: var(--line); }

.visual { background: #edf1ff; }
.visual:before { background: #dce5ff; }
.visual:after { background: #cbd6ff; }
.quiz-card { box-shadow: 0 24px 65px rgba(49, 72, 150, .13); }
.mini-question.selected { border-color: #aab9fa; background: #f4f6ff; }
.mini-dot { background: #eef2f7; }

.field input:focus, .field textarea:focus, .field select:focus,
.answer-input:focus, .fillblank-input:focus, .matching-student-row select:focus {
    border-color: #8295f5;
    box-shadow: 0 0 0 3px #4967e81a;
}

.form-section, .stat, .panel, .auth-card, .feature { background: #fff; border-color: var(--line); }
.question-card { background: #f8faff; border-color: #dbe3ee; box-shadow: 0 5px 18px rgba(38, 58, 90, .06); }
.form-footer { background: #eef2ff; border-color: #dbe3ee; }
.surface-icon, .count-pill, .question-number { background: #eef2ff; color: #334dcc; }
.question-index { color: #75849b; }
.question-bottom { border-color: #e2e8f0; }
.answers-label { color: #718097; }

.rich-editor { border-color: #d2dced; }
.rich-editor:focus-within { border-color: #8295f5; box-shadow: 0 0 0 3px #4967e81a; }
.rich-toolbar { background: #eef2ff; border-color: #dbe3ee; }
.rich-toolbar button { color: #3b4f7c; }
.rich-toolbar button:hover, .rich-toolbar button.active { background: #fff; border-color: #d2dced; }
.rich-content { background: #fff; }
.rich-content:empty:before { color: #97a3b6; }
.rich-content pre, .student-rich pre, .student-answer-rich pre,
.code-input, .code-panel, .code-panel textarea {
    background-color: #20283a;
}
.rich-content pre, .student-rich pre, .student-answer-rich pre { border-color: #3a4862; color: #e6edf9; }
.answer-rich .rich-editor { background: #fff; }

.type-option { background: #fff; }
.type-option:hover { background: #f5f7ff; border-color: #b9c5f7; }
.type-option[aria-checked="true"] { background: #eef2ff; border-color: #4967e8; box-shadow: inset 0 0 0 1px #4967e8; }
.type-icon { background: #e9edff; color: #405de0; }
.boolean-options label { background: #fff; }
.boolean-options input, .answer-row input[type="radio"], .answer-row input[type="checkbox"] { accent-color: #4967e8; }
.ordering-item.drag-over { border-top-color: #4967e8; background: #eef2ff; }
.fillblank-input { border-color: #aebcf4; }
.matching-student-row { background: #fff; }
.matching-student-row select { border-color: #dbe3ee; }
.matching-student-arrow { color: #4967e8; }

.result-score { background: #e8edff; }
.result-answer { background: #fff; }
.result-answer .response { background: #f5f7fb; }
.question-map button:focus-visible { outline-color: #8295f5; }
.dashboard-publish-toggle input:focus-visible + .toggle-ui { outline-color: #a4b2fb; }

.code-panel { background: #20283a; }
.code-tabs { background: #182033; }
.code-tabs button.active { background: #334dcc; }
.preview-label { background: #f8faff; }
.invite-box { background: #f0f4ff; }
.invite-box strong, .score, .student-work-score { color: #405de0; }
.class-row:hover, .class-row.selected { background: #eef2ff; color: #405de0; }
.back-link { background: #eef2ff; color: #435ddd; }

@media (max-width: 760px) {
    .topbar { height: 68px; padding: 0 18px; }
}

@media (max-width: 600px) {
    .topbar { padding: 0 16px; }
}

.back-to-top { background: #2445c5; border-color: #1d39a7; color: #fff; }
.back-to-top:hover { background: #1f3cae; }