* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --main: #2c7da0;
    --main-dark: #1f5e7a;
    --bg: #f4f7f9;
    --card: #ffffff;
    --border: #dee2e6;
    --neutral: #adb5bd;
    --text-primary: #212529;
    --badge-bg: #eef2ff;
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
    --shadow-md: 0 6px 14px rgba(0,0,0,0.08);
    --transition: all 0.25s ease;
    --radius-card: 20px;
    --radius-element: 14px;
    --success-pastel: #6c9e6c;
    --danger-pastel: #d9534f;
    --success-pastel-bg: #e6f5e6;
    --danger-pastel-bg: #ffe6e6;
    --btn-back: #e9ecef;
    --btn-forward: #2c7da0;
    --btn-text: white;
    --btn-hover-bg: #1f5e7a;
    --btn-hover-text: white;
}
body.dark {
    --bg: #121212;
    --card: #1e1e2f;
    --border: #2d2d44;
    --neutral: #6c6c8a;
    --text-primary: #e0e0e0;
    --badge-bg: #2a2a3a;
    --success-pastel: #7eae7e;
    --danger-pastel: #e06c6c;
    --success-pastel-bg: #2a3a2a;
    --danger-pastel-bg: #3d2a2a;
    --btn-back: #2a2a3a;
    --btn-forward: #3a6a8a;
}
body { background: var(--bg); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--text-primary); transition: background 0.2s, color 0.2s; }
.header { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; }
.header-container { width: 1160px; max-width: calc(100% - 32px); height: 64px; background: var(--card); backdrop-filter: blur(4px); border-radius: var(--radius-card); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-shadow: var(--shadow-md); border: 1px solid var(--border); margin: 0 auto; }
.header-title { font-size: 1.35rem; font-weight: 700; background: linear-gradient(135deg, var(--main), var(--main-dark)); background-clip: text; -webkit-background-clip: text; color: transparent; margin-right: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 120px); flex: 1; }
.icon-btn { width: 42px; height: 42px; background: var(--btn-back); border-radius: var(--radius-element); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); color: var(--main); font-size: 1.3rem; border: none; flex-shrink: 0; }
.icon-btn:hover { background: var(--btn-forward); transform: scale(0.96); color: white; }
.wrapper { max-width: 1200px; margin: 0 auto; padding: 100px 24px 100px 24px; display: flex; gap: 28px; align-items: flex-start; }
.content { flex: 1; min-width: 0; }
.question-card { background: var(--card); border-radius: var(--radius-card); padding: 24px 28px; margin-bottom: 24px; font-size: 1.25rem; font-weight: 500; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.question-badge { background: var(--badge-bg); padding: 4px 12px; border-radius: 40px; font-size: 0.8rem; font-weight: 600; color: var(--main); display: inline-block; margin-bottom: 15px; }
.answer { background: var(--card); margin: 12px 0; padding: 16px 20px; border-radius: var(--radius-element); cursor: pointer; border: 1px solid var(--border); transition: var(--transition); font-size: 1rem; display: flex; align-items: center; gap: 12px; }
.answer:before { content: "○"; font-size: 1.3rem; color: var(--neutral); }
.answer:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--main); background: var(--badge-bg); }
.answer.correct { background: var(--success-pastel-bg); border-color: var(--success-pastel); }
.answer.correct:before { content: "✓"; color: var(--success-pastel); font-weight: bold; }
.answer.incorrect { background: var(--danger-pastel-bg); border-color: var(--danger-pastel); }
.answer.incorrect:before { content: "✗"; color: var(--danger-pastel); font-weight: bold; }
.answer.disabled { cursor: default; opacity: 0.7; }

/* Стили для выбранного ответа в экзамене */
.answer.selected { background: var(--main); color: white; border-color: var(--main-dark); }
.answer.selected:before { content: "●"; color: white; }
.answer.selected:hover { background: #3a7ca0; border-color: #2c6a8a; }
body.dark .answer.selected:hover { background: #4a7a9a; }

.sidebar { width: 300px; flex-shrink: 0; background: var(--card); border-radius: var(--radius-card); padding: 20px 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-weight: 700; font-size: 1.1rem; color: var(--main-dark); }
.grid {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}
.grid div {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    transition: 0.1s;
}
.grid div:hover { transform: scale(0.96); filter: brightness(0.9); }
.status-neutral { background: var(--neutral); color: white; }
.status-correct { background: var(--success-pastel); color: white; }
.status-incorrect { background: var(--danger-pastel); color: white; }
.status-answered { background: #3a6ea5; color: white; }
@media (min-width: 901px) {
    .sidebar {
        height: auto;
        overflow-y: visible;
    }
    .grid {
        grid-template-columns: repeat(5, 36px);
        justify-content: center;
        padding-top: 8px;
        gap: 12px;
    }
    .grid div {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        font-size: 0.9rem;
    }
    .grid {
        max-height: calc(10 * (36px + 12px));
        overflow-y: auto;
        padding-right: 10px;
        scrollbar-width: thin;
    }
    .grid::-webkit-scrollbar {
        width: 6px;
    }
    .grid::-webkit-scrollbar-track {
        background: var(--border);
        border-radius: 3px;
    }
    .grid::-webkit-scrollbar-thumb {
        background: var(--main);
        border-radius: 3px;
    }
}
@media (max-width: 900px) {
    .wrapper { padding: 90px 18px 100px; gap: 0; }
    .header-container { width: calc(100% - 36px); padding: 0 20px; }
    .header-title {
        margin: 0 20px;
        text-align: center;
        font-size: 1rem;
        max-width: none;
    }
    .sidebar { position: fixed; top: 0; left: -380px; width: 320px; height: 100%; z-index: 110; border-radius: 0 var(--radius-card) var(--radius-card) 0; overflow-y: auto; transition: left 0.3s; padding-top: 24px; box-shadow: 0 0 20px rgba(0,0,0,0.2); }
    .sidebar.open { left: 0; }
    .mobile-theme-toggle { display: flex; justify-content: flex-end; padding-top: 20px; }
    .floating-theme-toggle { display: none; }
    .grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        padding-top: 0;
    }
    .grid div {
        width: auto;
        height: auto;
        aspect-ratio: 1;
        border-radius: 14px;
        font-size: 0.75rem;
    }
    .grid {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}
.footer { position: fixed; bottom: 20px; background: var(--card); backdrop-filter: blur(12px); border-radius: var(--radius-card); display: flex; padding: 10px; gap: 12px; box-shadow: var(--shadow-md); border: 1px solid var(--border); z-index: 95; transition: left 0.1s ease, width 0.1s ease; }
.footer button { flex: 1; padding: 12px 6px; border-radius: var(--radius-element); border: none; font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; transition: var(--transition); }
.footer button:first-child { background: var(--btn-back); color: var(--text-primary); }
.footer button:last-child { background: var(--btn-forward); color: var(--btn-text); }
.footer button:hover { background: var(--btn-hover-bg) !important; color: var(--btn-hover-text) !important; transform: translateY(-2px); }
.modal { position: fixed; top:0;left:0; width:100%;height:100%; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 200; }
.modal-content { background: var(--card); padding: 28px 32px; border-radius: var(--radius-card); text-align: center; max-width: 320px; width: 90%; }
.modal-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.modal-buttons button { padding: 10px; border-radius: var(--radius-element); border: none; font-weight: 600; cursor: pointer; }
.modal-buttons button:first-child { background: var(--danger-pastel); color: white; }
.modal-buttons button:last-child { background: var(--btn-back); color: var(--text-primary); }
.result-overlay { position: fixed; top:0;left:0; width:100%;height:100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.result-card { background: var(--card); border-radius: 32px; padding: 30px; text-align: center; max-width: 400px; width: 90%; }
.result-percent { font-size: 3rem; font-weight: bold; }
.result-percent.green { color: var(--success-pastel); }
.result-percent.yellow { color: #e6a017; }
.result-percent.red { color: var(--danger-pastel); }
.floating-theme-toggle { position: fixed; bottom: 24px; left: 24px; width: 44px; height: 44px; background: var(--card); border-radius: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); border: 1px solid var(--border); color: var(--main); font-size: 1.3rem; z-index: 96; opacity: 0.7; }
.floating-theme-toggle:hover { opacity: 1; transform: scale(1.02); }
@media (min-width: 901px) {
    .mobile-menu-toggle, .close-sidebar-mobile, .mobile-theme-toggle { display: none !important; }
    .sidebar { position: relative; left: 0; width: 300px; }
    .floating-theme-toggle { display: flex; }
}