/* The look of the app: Paylix owner-console palette (blue on grey, Inter), scaled up for elderly users:
   large type, 56 px+ controls, thick focus rings. Linked after MudBlazor.min.css, so equal-specificity
   rules here win on source order. Hex values mirror VtTheme.cs. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(fonts/inter-cyrillic-wght-normal.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(fonts/inter-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --vt-primary: #0054FF;
    --vt-primary-hover: #0042C7;
    --vt-primary-tint: #EBF1FF;
    --vt-heading: #111827;
    --vt-text: #111827;
    --vt-muted: #4B5563;
    --vt-border: #E5E7EB;
    --vt-control-border: #9CA3AF;
    --vt-page: #F9FAFB;
    --vt-surface: #FFFFFF;
    --vt-success-tint: #DCFCE7;
    --vt-success-text: #166534;
    --vt-error-tint: #FEE2E2;
    --vt-error-text: #991B1B;
    --vt-radius-card: 16px;
    --vt-radius-control: 12px;
    --vt-shadow-card: 0 1px 3px rgba(0, 0, 0, .08);
    --vt-control-height: 60px;
    --vt-font: Inter, ui-sans-serif, system-ui, sans-serif;
}

html,
body {
    background-color: var(--vt-page);
}

body {
    margin: 0;
    font-family: var(--vt-font);
    font-size: 20px;
    line-height: 1.5;
    color: var(--vt-text);
}

a {
    color: var(--vt-primary);
}

/* ---- Buttons: 60 px tall, 20 px text, wide tap targets ---- */

.mud-button-root.mud-button {
    min-height: var(--vt-control-height);
    min-width: 64px;
    padding: 0 28px;
    border-radius: var(--vt-radius-control);
    font-family: var(--vt-font);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

.mud-button-root.mud-button.mud-button-size-small {
    min-height: 52px;
    padding: 0 20px;
    font-size: 18px;
}

.mud-button-root.mud-button.mud-button-size-large {
    min-height: 72px;
    padding: 0 40px;
    font-size: 24px;
}

.mud-button-root .mud-button-icon-start,
.mud-button-root .mud-button-icon-end {
    margin-inline: 0 10px;
}

.mud-button-root .mud-button-icon-start .mud-icon-root,
.mud-button-root .mud-button-icon-end .mud-icon-root {
    font-size: 28px;
}

.mud-button-filled.mud-button-filled-primary {
    box-shadow: 0 2px 4px rgba(0, 84, 255, .3);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--vt-primary-hover);
}

.mud-button-outlined {
    border-width: 2px;
}

.mud-button-outlined.mud-button-outlined-default,
.mud-button-filled.mud-button-filled-default {
    background-color: var(--vt-surface);
    color: var(--vt-heading);
    border: 2px solid var(--vt-control-border);
}

.mud-button-text:hover {
    background-color: var(--vt-primary-tint);
}

/* Round mic button: big, easy to hit. */
.mud-icon-button.mud-button-root.mud-icon-button-size-large {
    width: 96px;
    height: 96px;
    padding: 0;
    border-radius: 999px;
}

.mud-icon-button.mud-icon-button-size-large .mud-icon-root {
    font-size: 48px;
}

.mud-icon-button.mud-button-root.mud-icon-button-size-medium {
    width: 60px;
    height: 60px;
    min-width: 60px;
}

/* ---- Focus: thick ring so the focused control is easy to find ---- */

.mud-button-root:focus-visible,
.mud-list-item-clickable:focus-visible,
.profile-pick:focus-visible,
.lesson-row:focus-visible {
    outline: 4px solid rgba(0, 84, 255, .55);
    outline-offset: 2px;
}

/* ---- Inputs ---- */

.mud-input.mud-input-outlined {
    min-height: var(--vt-control-height);
    border-radius: var(--vt-radius-control);
    background: var(--vt-surface);
    font-size: 22px;
}

.mud-input.mud-input-outlined input.mud-input-slot {
    padding: 16px 16px;
    font-size: 22px;
    height: auto;
}

.mud-input-outlined-border {
    border-color: var(--vt-control-border);
    border-width: 2px;
    border-radius: var(--vt-radius-control);
}

.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-width: 3px;
    border-color: var(--vt-primary);
}

.mud-input-label {
    font-size: 20px;
}

/* ---- Cards, chips, alerts, text ---- */

.mud-paper.mud-paper-outlined {
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-card);
    box-shadow: var(--vt-shadow-card);
    background: var(--vt-surface);
}

.mud-chip {
    height: 40px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 600;
    padding: 0 16px;
}

.mud-chip.mud-chip-size-small {
    height: 40px;
    font-size: 18px;
}

.mud-alert {
    border-radius: var(--vt-radius-control);
    font-size: 20px;
    padding: 16px 20px;
}

.mud-alert-text-error { background-color: #FEF2F2; border: 1px solid #FECACA; color: var(--vt-error-text); }

.mud-typography {
    font-family: var(--vt-font);
}

.mud-typography-h5,
.mud-typography-h6,
.mud-typography-subtitle1 {
    color: var(--vt-heading);
}

.mud-typography-caption {
    color: var(--vt-muted);
}

.mud-menu-item,
.mud-list-item {
    font-size: 20px;
    min-height: 56px;
}

.mud-popover.mud-paper {
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-control);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.mud-progress-linear {
    height: 8px;
    border-radius: 4px;
}

/* ---- App chrome ---- */

.vt-header {
    background: var(--vt-surface);
    border-bottom: 1px solid var(--vt-border);
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 1100;
}

.vt-header-inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vt-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vt-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 24px;
    color: var(--vt-heading);
}

.vt-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--vt-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.vt-level-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Lesson list rows. */
.lesson-row {
    padding: 20px 24px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}

.lesson-row:hover {
    border-color: var(--vt-primary);
    box-shadow: 0 2px 8px rgba(0, 84, 255, .15);
}

.lesson-title-sl {
    font-size: 24px;
    font-weight: 600;
    color: var(--vt-heading);
}

.lesson-title-ru {
    font-size: 18px;
    color: var(--vt-muted);
}

/* Profile rows. */
.profile-row {
    padding: 20px 24px;
    margin-bottom: 16px;
}

.profile-row.profile-current {
    border: 2px solid var(--vt-primary);
    background: var(--vt-primary-tint);
}

.profile-pick {
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    cursor: pointer;
}

.profile-name {
    font-size: 26px;
    font-weight: 700;
    color: var(--vt-heading);
}

/* Level picker: wide, evenly spaced buttons. */
.level-picker {
    gap: 8px !important;
}

.level-picker .level-btn.mud-button-root.mud-button {
    min-width: 64px;
    padding: 0 12px;
}

/* Stats. */
.stats-tile {
    padding: 20px;
    height: 100%;
}

.stats-value {
    font-size: 28px;
    font-weight: 700;
}

.stats-footer {
    font-size: 20px;
    color: var(--vt-muted);
}

/* Lesson. */
.lesson-heading {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}

.lesson-header-text {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.lesson-profile {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--vt-primary);
    overflow-wrap: anywhere;
}

.lesson-counters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    font-size: 22px;
    color: var(--vt-muted);
}

.lesson-counters b {
    color: var(--vt-heading);
    font-variant-numeric: tabular-nums;
}

/* The mic is the one big control: 150 px round, alone in its row. */
.lesson-mic-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.lesson-mic.mud-icon-button.mud-button-root.mud-icon-button-size-large {
    width: 150px;
    height: 150px;
}

.lesson-mic.mud-icon-button.mud-icon-button-size-large .mud-icon-root {
    font-size: 80px;
}

.lesson-mic-recording {
    animation: vt-mic-pulse 1.2s ease-out infinite;
}

@keyframes vt-mic-pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
    70% { box-shadow: 0 0 0 28px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.lesson-recording {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    color: var(--vt-error-text);
}

.lesson-recording-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #DC2626;
    animation: vt-blink 1s steps(2, start) infinite;
}

.lesson-recording-text {
    animation: vt-fade 1.2s ease-in-out infinite;
}

@keyframes vt-blink {
    to { visibility: hidden; }
}

@keyframes vt-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .lesson-mic-recording,
    .lesson-recording-dot,
    .lesson-recording-text {
        animation: none;
    }
}

/* Replay and Cancel: well away from the mic, at the two edges. */
.lesson-secondary {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--vt-border);
}

/* Lesson list tally. */
.lesson-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 6px;
    font-size: 18px;
    color: var(--vt-muted);
}

.lesson-tally b {
    color: var(--vt-heading);
}

.lesson-tally .tally-passed b {
    color: var(--vt-success-text);
}

.lesson-tally .tally-failed b {
    color: var(--vt-error-text);
}

.lesson-timer {
    font-size: 24px;
    font-variant-numeric: tabular-nums;
}

.lesson-summary-line {
    font-size: 22px;
}

@media (max-width: 599.98px) {
    .vt-header {
        padding: 10px 12px;
    }

    .mud-button-root.mud-button {
        padding: 0 20px;
    }
}

/* Lesson total, header right: visually apart from the per-answer stars. */
.lesson-total {
    flex: none;
    text-align: center;
    padding: 6px 12px;
    border: 2px solid var(--vt-border);
    border-radius: 12px;
    background: var(--vt-primary-tint);
}

.lesson-total-label {
    font-size: 14px;
    color: var(--vt-muted);
}

.lesson-total-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--vt-heading);
    font-variant-numeric: tabular-nums;
}

/* Admin: regular text size (students keep the large one). */
.admin-page,
.admin-page .mud-typography-body1,
.admin-page .mud-typography-body2,
.admin-page .mud-table-cell,
.admin-page .mud-button-root,
.admin-page .mud-input,
.admin-page .mud-select {
    font-size: 14px;
    line-height: 1.5;
}

.admin-page .mud-typography-h4 { font-size: 22px; line-height: 1.3; }
.admin-page .mud-typography-h5 { font-size: 20px; line-height: 1.3; }
.admin-page .mud-typography-h6 { font-size: 16px; line-height: 1.3; }
.admin-page .mud-typography-subtitle1,
.admin-page .mud-typography-subtitle2 { font-size: 14px; }
.admin-page .mud-typography-caption { font-size: 12px; }

.admin-page .turn-stars { color: #D97706; letter-spacing: 1px; }

.admin-turn-failed > .mud-paper {
    border-left: 4px solid #DC2626;
    background: #FEF2F2;
}

.admin-turn-failed .turn-stars,
.admin-turn-failed .turn-passed { color: #B91C1C; font-weight: 600; }

.admin-turn-question > .mud-paper {
    border-left: 4px solid var(--vt-primary);
}

.admin-turn-hint > .mud-paper {
    border-left: 4px dashed #D97706;
    background: #FFFBEB;
    font-style: italic;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin-top: 8px;
    font-size: 18px;
    color: var(--vt-muted);
}

.profile-stats b { color: var(--vt-heading); }
.profile-stats .stat-good b { color: var(--vt-success-text); }
.profile-stats .stat-bad b { color: var(--vt-error-text); }

.lesson-debug-heard {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.3;
    color: var(--vt-muted);
    font-family: monospace;
    overflow-wrap: anywhere;
    text-align: center;
}