/* MTA oʻquv platformasi — umumiy uslub (Bootstrap 5 ustiga) */

:root {
    --mta-anim-bg: #f8f9fa;
    --mta-anim-border: #dee2e6;
}
[data-bs-theme="dark"] {
    --mta-anim-bg: #1a1d21;
    --mta-anim-border: #343a40;
}

/* ---------- Mavzu kartalari ---------- */
.topic-card {
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.topic-card:not(.locked):hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}
.topic-card.locked {
    opacity: .6;
}
.topic-icon {
    font-size: 2rem;
    line-height: 1;
}

/* Progress halqasi (conic-gradient) */
.progress-ring {
    --p: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: conic-gradient(var(--bs-primary) calc(var(--p) * 1%), var(--bs-secondary-bg) 0);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.progress-ring::after {
    content: attr(data-label);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bs-body-bg);
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 600;
}

/* ---------- Dars kontenti ---------- */
.lesson-content {
    font-size: 1.05rem;
    line-height: 1.75;
}
.lesson-content h3 {
    margin-top: 1.75rem;
    font-size: 1.35rem;
}
.lesson-content table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}
.lesson-content table td,
.lesson-content table th {
    border: 1px solid var(--bs-border-color);
    padding: .4rem .75rem;
}
.lesson-content code {
    background: var(--bs-secondary-bg);
    padding: .1rem .35rem;
    border-radius: .25rem;
}

/* Kod bloklari — ikkala rejimda ham qorongʻi (prism-tomorrow) */
pre[class*="language-"] {
    border-radius: .5rem;
    font-size: .9rem;
    max-height: 480px;
}
.lesson-content pre code {
    background: transparent;
    padding: 0;
}

/* ---------- Animatsiya paneli ---------- */
.anim-wrap {
    background: var(--mta-anim-bg);
    border: 1px solid var(--mta-anim-border);
    border-radius: .75rem;
    padding: 1rem;
}
.anim-wrap canvas {
    width: 100%;
    height: auto;
    display: block;
    border-radius: .5rem;
}
.anim-caption {
    min-height: 2.5em;
    font-size: .95rem;
}
.anim-controls .btn {
    min-width: 42px;
}

/* ---------- Test / mashq ---------- */
.quiz-option {
    cursor: pointer;
    user-select: none;
}
.quiz-option.correct {
    border-color: var(--bs-success) !important;
    background: rgba(var(--bs-success-rgb), .1);
}
.quiz-option.wrong {
    border-color: var(--bs-danger) !important;
    background: rgba(var(--bs-danger-rgb), .1);
}
textarea.code-input {
    font-family: Consolas, "Courier New", monospace;
    font-size: .9rem;
    min-height: 260px;
    tab-size: 4;
}

/* Qadam raqami belgilari */
.step-badge {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-weight: 600;
    flex-shrink: 0;
}