main { max-width: 760px; margin: 0 auto; padding: 24px 24px 80px 24px; width: 100%; }

.segmented { display: flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; min-width: 0; margin-bottom: 20px; }
.segmented button {
    flex: 1;
    min-width: 0;
    padding: 8px 6px;
    border: none;
    background: var(--surface);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    border-right: 1px solid var(--border-strong);
    color: var(--text);
}
.segmented button:last-child { border-right: none; }
.segmented button.active { background: var(--primary); color: #fff; }
#algo-filter { margin-bottom: 0; }

.algo-badge {
    display: inline-block;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
#problem-text { font-size: 16px; line-height: 1.5; margin: 0; }
#answer-input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 14px; }

#feedback { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); font-size: 13.5px; line-height: 1.5; }
#feedback.correct { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
#feedback.incorrect { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
#feedback .explain { color: var(--text); margin-top: 6px; }

/* Bank cards */
.bank-card { margin-bottom: 18px; }
.bank-card h3 { font-size: 15px; margin: 0 0 12px 0; }
.bank-card-type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }

.code-block {
    background: #10151f;
    color: #d8dee9;
    border-radius: var(--r);
    padding: 14px 16px;
    font-family: ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 1.8;
    overflow-x: auto;
}
.code-block .line-num { color: #667085; margin-right: 12px; user-select: none; }

.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
@media (max-width: 560px) { .quiz-options { grid-template-columns: 1fr; } }
.quiz-option {
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--r);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
}
.quiz-option:hover { border-color: var(--primary); }
.quiz-option.correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.quiz-option.incorrect { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.quiz-option:disabled { cursor: default; }
.quiz-explain { margin-top: 10px; font-size: 13px; color: var(--muted); }

.sr-variants { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .sr-variants { grid-template-columns: 1fr; } }
.sr-variant { border: 1px solid var(--border); border-radius: var(--r); padding: 14px; }
.sr-variant h4 { margin: 0 0 10px 0; font-size: 13px; }
.sr-variant .hint { color: var(--muted); font-size: 12px; margin: 8px 0; }
.sr-variant .answer { margin-top: 10px; padding: 10px; background: var(--surface-2); border-radius: 8px; font-size: 13px; display: none; }

.reveal-btn { margin-top: 12px; }