:root {
    --bg: #eef3f8;
    --surface: #ffffff;
    --surface-strong: #0f2743;
    --line: #dbe5f0;
    --text: #162033;
    --muted: #66758c;
    --primary: #0056b3;
    --success: #2f9e44;
    --warning: #f08c00;
    --review: #1e88e5;
    --answered-review: #7b1fa2;
    --not-visited: #dfe6ee;
    --not-answered: #adb7c5;
    --shadow: 0 20px 50px rgba(15, 39, 67, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(0, 86, 179, 0.18), transparent 28%),
        radial-gradient(circle at top right, rgba(240, 140, 0, 0.12), transparent 20%),
        linear-gradient(180deg, #f8fbff 0%, #eef3f8 100%);
    color: var(--text);
    font-family: "IBM Plex Sans", sans-serif;
}

h1, h2, h3, strong, .eyebrow, .btn, .pill, .timer-panel strong {
    font-family: "Space Grotesk", sans-serif;
}

a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }

.flash-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    display: grid;
    gap: 12px;
}

.flash {
    padding: 14px 18px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    background: var(--surface);
    border: 1px solid var(--line);
}

.flash-error { border-color: rgba(214, 51, 108, 0.25); }

.eyebrow {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}

.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    border: 1px solid transparent;
    padding: 12px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--primary), #2c76d2); color: #fff; box-shadow: 0 16px 32px rgba(0, 86, 179, 0.2); }
.btn-outline { background: rgba(255, 255, 255, 0.7); border-color: var(--line); color: var(--text); }
.btn-muted { background: #edf2f7; color: var(--text); }
.btn-disabled { background: #dbe5f0; color: #7f8ca3; cursor: default; }
.btn-block { width: 100%; }

.login-page, .dashboard-page, .result-page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 48px;
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    align-items: center;
    gap: 28px;
}

.login-hero, .login-card, .panel, .result-card, .question-card, .palette-column, .exam-banner, .student-strip, .stat-card {
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(219, 229, 240, 0.9);
    box-shadow: var(--shadow);
}

.login-hero { padding: 44px; border-radius: 28px; }
.hero-badge, .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 86, 179, 0.09);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.8rem;
}

.login-hero h1 { margin: 16px 0 12px; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.02; }
.hero-points { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-points span { padding: 10px 12px; border-radius: 14px; background: #f3f7fc; color: var(--muted); }
.login-card { border-radius: 28px; padding: 34px; }
.auth-form { display: grid; gap: 18px; }
.auth-form label { display: grid; gap: 8px; color: var(--muted); font-weight: 600; }
.auth-form input { border: 1px solid var(--line); background: #f9fbfd; border-radius: 14px; padding: 14px 16px; font-size: 1rem; }

.dashboard-header, .exam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.student-strip, .result-grid, .exam-grid { display: grid; gap: 16px; }
.student-strip, .result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.exam-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.panel, .result-card { padding: 24px; border-radius: 24px; }
.stat-card { border-radius: 20px; padding: 18px; }
.stat-card span { display: block; margin-bottom: 8px; color: var(--muted); }
.stat-card strong { font-size: 1.15rem; }

.exam-card { border-radius: 22px; background: #fff; border: 1px solid var(--line); padding: 20px; display: grid; gap: 12px; }
.exam-card-top, .exam-meta, .exam-actions, .control-group, .result-score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.exam-meta span { color: var(--muted); background: #f3f7fc; padding: 8px 10px; border-radius: 12px; }

.exam-page { padding: 18px; }
.exam-header-side { display: flex; align-items: center; gap: 14px; }
.timer-panel { min-width: 180px; background: var(--surface-strong); color: white; border-radius: 18px; padding: 14px 18px; }
.timer-panel span { display: block; color: rgba(255, 255, 255, 0.72); margin-bottom: 4px; }
.timer-panel strong { font-size: 1.5rem; }

.exam-banner { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 22px; margin-bottom: 18px; }
.warning-meter { min-width: 130px; border-radius: 18px; background: #fff8e7; padding: 14px 16px; }
.warning-meter span { display: block; color: var(--muted); }
.warning-meter strong { font-size: 1.4rem; color: var(--warning); }

.section-tabs { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.section-tab { padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.8); cursor: pointer; font-weight: 700; }
.section-tab.active { background: var(--primary); color: white; border-color: transparent; }

.exam-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) 360px; gap: 18px; }
.question-column { min-width: 0; }
.question-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.question-nav-inline { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.inline-jump { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.78); border-radius: 12px; padding: 8px 10px; cursor: pointer; min-width: 46px; }
.inline-jump.active { background: #e8f1ff; border-color: rgba(0, 86, 179, 0.35); }

.question-card { border-radius: 28px; padding: 20px; }
.question-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;

    /* 🔥 INCREASE HEIGHT */
    min-height: 250px;
    max-height: 70vh;   /* responsive limit */

    border-radius: 22px;
    background: linear-gradient(180deg, #f9fbfd, #eef3f8);
    border: 1px solid var(--line);

    padding: 10px;
    overflow: hidden;
}

.question-image-wrap img {
    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 65vh;

    object-fit: contain;
}

.question-image-wrap img {
    cursor: zoom-in;
}

.perf-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.perf-table th,
.perf-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
}

.perf-table th {
    background: #f8fafc;
}

.perf-table td.correct {
    color: #16a34a;
    font-weight: 600;
}

.perf-table td.wrong {
    color: #dc2626;
    font-weight: 600;
}
.options-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.option-card {
    position: relative;
    min-height: 75px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 16px;
    cursor: pointer;
    overflow: hidden;
}

.option-card.selected { border-color: rgba(0, 86, 179, 0.4); box-shadow: 0 16px 32px rgba(0, 86, 179, 0.12); }
.option-badge {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eff4f8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.option-card.selected .option-badge { background: var(--primary); color: white; }
.exam-controls { margin-top: 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.palette-column { border-radius: 28px; padding: 20px; position: sticky; top: 18px; align-self: start; }
.palette-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);   /* 🔥 MORE COLUMNS */
    gap: 6px;                                /* 🔥 REDUCE GAP */
    margin: 12px 0;
}
.palette-btn {
    aspect-ratio: 1 / 1;

    border-radius: 8px;      /* 🔥 SMALLER RADIUS */
    border: none;

    font-size: 12px;         /* 🔥 SMALL TEXT */
    font-weight: 600;

    cursor: pointer;
}
.palette-btn.current { outline: 3px solid rgba(0, 86, 179, 0.35); }
.palette-btn.answered { background: var(--success); color: white; }
.palette-btn.review { background: var(--review); color: white; }
.palette-btn.answered-review { background: var(--answered-review); color: white; }
.palette-btn.not-visited { background: var(--not-visited); color: var(--text); }
.palette-btn.not-answered { background: var(--not-answered); color: white; }

.legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; color: var(--muted); }
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }
.answered { background: var(--success); }
.review { background: var(--review); }
.answered-review { background: var(--answered-review); }
.not-visited { background: var(--not-visited); }
.not-answered { background: var(--not-answered); }

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 19, 32, 0.68);
    display: grid;
    place-items: center;
    z-index: 900;
    padding: 24px;
}

/* REVIEW COLORS */

/* RESET */
.option-card {
    border: 2px solid transparent;
    background: transparent;
    transition: all 0.2s ease;
}

/* CORRECT = GREEN BORDER */
.option-card.correct {
    border: 3px solid #22c55e;
}

/* WRONG = RED BORDER */
.option-card.wrong {
    border: 3px solid #ef4444;
}

/* OPTIONAL: slight glow (premium feel) */
.option-card.correct {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.option-card.wrong {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.palette-btn.correct {
    background: #16a34a;
    color: #fff;
}

.palette-btn.wrong {
    background: #dc2626;
    color: #fff;
}

.palette-btn.skipped {
    background: #9ca3af;
    color: #fff;
}

.solution-box {
    margin-top: 20px;
    padding: 10px;
    border-top: 2px dashed #ccc;
}

.overlay.hidden { display: none; }
.zoom-shell, .dialog-card { background: white; border-radius: 24px; padding: 18px; width: min(1100px, 100%); max-height: 90vh; }
.zoom-shell { display: grid; gap: 12px; }
.zoom-close { justify-self: end; border: none; background: #edf2f7; border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.dialog-card { width: min(520px, 100%); }
.empty-state, .lock-message { border-radius: 18px; background: #f6f9fc; padding: 18px; }
.result-card { width: min(760px, 100%); margin: 32px auto; }
.result-score { margin: 20px 0; }
.result-score > div { flex: 1; min-width: 180px; padding: 18px; border-radius: 20px; background: #f3f7fc; }
.result-score span { display: block; color: var(--muted); }
.result-score strong { font-size: 2rem; }

@media (max-width: 1024px) {
    .login-page, .exam-layout { grid-template-columns: 1fr; }
    .palette-column { position: static; }
    .student-strip, .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .dashboard-page, .result-page, .exam-page { width: calc(100% - 20px); padding-left: 0; padding-right: 0; }
    .login-page { width: calc(100% - 20px); padding: 18px 0 28px; }
    .login-hero, .login-card, .panel, .question-card, .palette-column, .result-card, .exam-banner { padding: 18px; border-radius: 20px; }
    .options-grid, .student-strip, .result-grid, .legend-grid { grid-template-columns: 1fr; }
    .dashboard-header, .exam-header, .exam-banner, .question-topbar, .exam-controls { flex-direction: column; align-items: stretch; }
    .palette-grid { grid-template-columns: repeat(4, 1fr); }
}


.ad-banner {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.ad-img {
    width: 100%;
    max-width: 900px;   /* 🔥 control size */
    height: auto;

    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}