@font-face {
    font-family: "Bebas";
    src:
        url("../fonts/bebasneuecyrillic.woff2") format("woff2"),
        url("../fonts/bebasneuecyrillic.woff") format("woff"),
        url("../fonts/bebasneuecyrillic.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/sfprotext/SF Pro Display Regular.otf") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/sfprotext/SF Pro Display Medium.otf") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/sfprotext/SF Pro Display Semibold.otf") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/sfprotext/SF Pro Display Bold.otf") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
}

:root {
    --mira-bg: #070606;
    --mira-bg-soft: #14100f;
    --mira-surface: rgba(72, 74, 78, 0.32);
    --mira-surface-strong: rgba(92, 96, 102, 0.42);
    --mira-surface-dark: rgba(14, 14, 16, 0.54);
    --mira-surface-red: linear-gradient(180deg, rgba(152, 58, 32, 0.94), rgba(120, 41, 21, 0.92));
    --mira-border: rgba(255, 255, 255, 0.18);
    --mira-border-strong: rgba(255, 255, 255, 0.26);
    --mira-highlight: rgba(255, 255, 255, 0.56);
    --mira-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
    --mira-shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.24);
    --mira-outline: rgba(255, 255, 255, 0.18);
    --mira-outline-strong: rgba(255, 255, 255, 0.28);
    --mira-text: rgba(255, 255, 255, 0.94);
    --mira-text-muted: rgba(255, 255, 255, 0.84);
    --mira-text-soft: rgba(255, 255, 255, 0.72);
    --mira-accent: #c86d4b;
    --mira-accent-hover: #da7954;
    --mira-accent-active: #b85d3c;
    --mira-accent-contrast: #fff8f5;
    --mira-button-bg: #ffffff;
    --mira-button-hover-bg: #f8f3ec;
    --mira-button-active-bg: #efe5d9;
    --mira-button-text: #7a4f35;
    --mira-button-border: rgba(122, 79, 53, 0.18);
    --mira-radius-xl: 30px;
    --mira-radius-lg: 24px;
    --mira-radius-md: 18px;
    --mira-radius-sm: 14px;
    --bs-body-bg: transparent;
    --bs-body-color: var(--mira-text);
    --bs-border-color: var(--mira-border);
    --bs-secondary-color: var(--mira-text-muted);
    --bs-secondary-bg: rgba(255, 255, 255, 0.06);
    --bs-tertiary-bg: rgba(255, 255, 255, 0.04);
    --bs-link-color: #f0c4b5;
    --bs-link-hover-color: #ffd7cb;
    --bs-heading-color: var(--mira-text);
    --bs-card-border-color: var(--mira-border);
    --bs-card-bg: transparent;
    --bs-card-cap-bg: transparent;
    --bs-emphasis-color: var(--mira-text);
    --bs-light-rgb: 255, 255, 255;
    --bs-dark-rgb: 12, 12, 14;
    --bs-box-shadow: var(--mira-shadow-soft);
}

body.mira-web-platform {
    background:
        radial-gradient(circle at top left, rgba(222, 96, 55, 0.18), transparent 30%),
        radial-gradient(circle at 85% 16%, rgba(255, 255, 255, 0.08), transparent 18%),
        radial-gradient(circle at bottom right, rgba(151, 42, 28, 0.16), transparent 30%),
        linear-gradient(180deg, #171111 0%, #0b0909 42%, #070606 100%);
    color: var(--mira-text);
    font-family: "SF Pro Display", "Segoe UI", sans-serif;
    min-height: 100vh;
}

body.mira-web-platform::before {
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.07), transparent 34%),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 16%),
        radial-gradient(circle at 80% 35%, rgba(200, 109, 75, 0.16), transparent 22%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

.mira-platform-page {
    isolation: isolate;
    position: relative;
    z-index: 1;
}

.mira-web-platform h1,
.mira-web-platform h2,
.mira-web-platform h3,
.mira-web-platform h4,
.mira-web-platform h5,
.mira-web-platform h6,
.mira-web-platform .display-1,
.mira-web-platform .display-2,
.mira-web-platform .display-3,
.mira-web-platform .display-4,
.mira-web-platform .display-5,
.mira-web-platform .display-6 {
    color: var(--mira-text);
}

.mira-web-platform h1,
.mira-web-platform h2,
.mira-web-platform h3,
.mira-web-platform h4,
.mira-web-platform h5,
.mira-web-platform h6,
.mira-web-platform .page-title,
.mira-web-platform .navbar-brand span,
.mira-web-platform .offcanvas-title {
    font-family: "SF Pro Display", "Segoe UI", sans-serif;
    font-weight: 500;
    letter-spacing: 0;
}

.mira-web-platform,
.mira-web-platform :is(p, span, div, a, li, dt, dd, label, small, strong, em, b, i),
.mira-web-platform :is(button, input, select, textarea, option),
.mira-web-platform :is(.btn, .nav-link, .dropdown-item, .form-control, .form-select, .form-check-label, .badge, .alert) {
    font-family: "SF Pro Display", "Segoe UI", sans-serif;
}

.mira-web-platform .text-muted,
.mira-web-platform .text-body-secondary,
.mira-web-platform .text-light-emphasis,
.mira-web-platform .text-secondary,
.mira-web-platform .text-white-50,
.mira-web-platform .form-text,
.mira-web-platform .small.text-muted {
    color: var(--mira-text-muted) !important;
}

.mira-web-platform .text-black-50,
.mira-web-platform .text-body-tertiary,
.mira-web-platform .placeholder,
.mira-web-platform ::placeholder {
    color: var(--mira-text-soft) !important;
}

.mira-web-platform .link-dark,
.mira-web-platform .text-dark,
.mira-web-platform .text-reset {
    color: var(--mira-text) !important;
}

.mira-web-platform .bg-white,
.mira-web-platform .bg-light {
    background: transparent !important;
}

.mira-web-platform .border,
.mira-web-platform .border-top,
.mira-web-platform .border-bottom,
.mira-web-platform .border-start,
.mira-web-platform .border-end {
    border-color: var(--mira-border) !important;
}

.mira-web-platform .card,
.mira-web-platform .offcanvas,
.mira-web-platform .dropdown-menu,
.mira-web-platform .modal-content,
.mira-web-platform .navbar,
.mira-web-platform .sticky-top,
.mira-web-platform .mira-glass-panel {
    background:
        linear-gradient(180deg, rgba(92, 96, 102, 0.34), rgba(46, 48, 52, 0.24))
        padding-box;
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    border: 1px solid var(--mira-border);
    box-shadow:
        var(--mira-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.mira-web-platform .card,
.mira-web-platform .offcanvas,
.mira-web-platform .modal-content,
.mira-web-platform .sticky-top,
.mira-web-platform .mira-glass-panel {
    border-radius: var(--mira-radius-xl);
}

.mira-web-platform .card::before,
.mira-web-platform .offcanvas::before,
.mira-web-platform .modal-content::before,
.mira-web-platform .mira-glass-panel::before {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%);
    border-radius: inherit;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.mira-web-platform .card,
.mira-web-platform .offcanvas,
.mira-web-platform .modal-content,
.mira-web-platform .mira-glass-panel {
    overflow: hidden;
}

.mira-web-platform .card,
.mira-web-platform .modal-content,
.mira-web-platform .mira-glass-panel {
    position: relative;
}

.mira-web-platform .offcanvas {
    position: fixed;
}

.mira-web-platform .card-body,
.mira-web-platform .card-header,
.mira-web-platform .card-footer,
.mira-web-platform .offcanvas-header,
.mira-web-platform .offcanvas-body,
.mira-web-platform .modal-header,
.mira-web-platform .modal-body,
.mira-web-platform .modal-footer {
    position: relative;
    z-index: 1;
}

.mira-web-platform .card-header,
.mira-web-platform .card-footer,
.mira-web-platform .offcanvas-header,
.mira-web-platform .modal-header,
.mira-web-platform .modal-footer {
    border-color: rgba(255, 255, 255, 0.12);
}

.mira-web-platform .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--mira-text);
    --bs-table-border-color: rgba(255, 255, 255, 0.1);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.055);
    margin-bottom: 0;
}

.mira-web-platform .table > :not(caption) > * > * {
    background-color: transparent;
    box-shadow: none;
    padding-bottom: 0.95rem;
    padding-top: 0.95rem;
}

.mira-web-platform .table thead th {
    color: var(--mira-text-soft);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mira-web-platform .alert {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--mira-radius-md);
    box-shadow: var(--mira-shadow-soft);
}

.mira-web-platform .alert-success {
    background: rgba(60, 122, 85, 0.2);
    color: #dcffea;
}

.mira-web-platform .alert-danger {
    background: rgba(144, 42, 42, 0.24);
    color: #ffe5e5;
}

.mira-web-platform .alert-warning {
    background: rgba(145, 93, 21, 0.24);
    color: #fff0d7;
}

.mira-web-platform .alert-info {
    background: rgba(50, 92, 135, 0.22);
    color: #e4f1ff;
}

.mira-web-platform .btn {
    --bs-btn-border-radius: 999px;
    --bs-btn-font-weight: 600;
    align-items: center;
    border-width: 1px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    display: inline-flex;
    justify-content: center;
    letter-spacing: 0.02em;
    line-height: 1.2;
    min-height: 46px;
    padding-inline: 1.1rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.mira-web-platform .btn-sm {
    min-height: 40px;
}

.mira-web-platform .btn-primary,
.mira-web-platform .btn-danger,
.mira-web-platform .btn-dark,
.mira-web-platform .mira-accent-button {
    --bs-btn-color: var(--mira-button-text);
    --bs-btn-bg: var(--mira-button-bg);
    --bs-btn-border-color: var(--mira-button-border);
    --bs-btn-hover-color: var(--mira-button-text);
    --bs-btn-hover-bg: var(--mira-button-hover-bg);
    --bs-btn-hover-border-color: rgba(122, 79, 53, 0.28);
    --bs-btn-active-color: var(--mira-button-text);
    --bs-btn-active-bg: var(--mira-button-active-bg);
    --bs-btn-active-border-color: rgba(122, 79, 53, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 236, 0.96));
    border-color: var(--mira-button-border);
    color: var(--mira-button-text);
}

.mira-web-platform .btn-outline-secondary,
.mira-web-platform .btn-outline-danger {
    --bs-btn-color: var(--mira-text);
    --bs-btn-border-color: rgba(255, 255, 255, 0.18);
    --bs-btn-hover-color: var(--mira-text);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.28);
    --bs-btn-active-color: var(--mira-text);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mira-web-platform .card,
.mira-web-platform .modal-content,
.mira-web-platform .offcanvas,
.mira-web-platform .navbar,
.mira-web-platform .mira-glass-panel,
.mira-web-platform .btn:not(.btn-link),
.mira-web-platform .badge,
.mira-web-platform .pagination .page-link,
.mira-web-platform .list-group-item,
.mira-web-platform .table-responsive,
.mira-web-platform .web-lesson-content,
.mira-web-platform .homework-card,
.mira-web-platform .web-edu-card,
.mira-web-platform .web-edu-card-badge,
.mira-web-platform .web-user-chat-card,
.mira-web-platform .web-user-chat-link,
.mira-web-platform .web-lesson-file,
.mira-web-platform .lesson-star-btn,
.mira-web-platform .web-user-current-level {
    border-color: var(--mira-outline) !important;
    box-shadow:
        var(--mira-shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.mira-web-platform .card:hover,
.mira-web-platform .btn:not(.btn-link):hover,
.mira-web-platform .pagination .page-link:hover,
.mira-web-platform .web-edu-card:hover,
.mira-web-platform .web-user-chat-link:hover,
.mira-web-platform .web-lesson-file:hover,
.mira-web-platform .lesson-star-btn:hover {
    border-color: var(--mira-outline-strong) !important;
}

.mira-web-platform .btn-link {
    --bs-btn-color: var(--mira-text-muted);
    --bs-btn-hover-color: var(--mira-text);
    display: inline-block;
    box-shadow: none;
    line-height: inherit;
    min-height: auto;
    padding-inline: 0;
    white-space: normal;
}

.mira-web-platform .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.85;
}

.mira-web-platform .form-control,
.mira-web-platform .form-select,
.mira-web-platform textarea,
.mira-web-platform input[type="text"],
.mira-web-platform input[type="email"],
.mira-web-platform input[type="password"],
.mira-web-platform input[type="tel"],
.mira-web-platform input[type="number"],
.mira-web-platform input[type="datetime-local"],
.mira-web-platform input[type="date"],
.mira-web-platform select {
    background:
        linear-gradient(180deg, rgba(122, 125, 132, 0.18), rgba(41, 43, 47, 0.14));
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--mira-radius-sm);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 22px rgba(0, 0, 0, 0.12);
    color: var(--mira-text);
    min-height: 50px;
}

.mira-web-platform textarea.form-control,
.mira-web-platform textarea {
    min-height: 140px;
}

.mira-web-platform .form-control::placeholder,
.mira-web-platform textarea::placeholder,
.mira-web-platform input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.mira-web-platform .form-control:focus,
.mira-web-platform .form-select:focus,
.mira-web-platform textarea:focus,
.mira-web-platform input:focus,
.mira-web-platform select:focus {
    background:
        linear-gradient(180deg, rgba(122, 125, 132, 0.22), rgba(48, 50, 55, 0.18));
    border-color: rgba(240, 196, 181, 0.48);
    box-shadow:
        0 0 0 0.24rem rgba(200, 109, 75, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: var(--mira-text);
}

.mira-web-platform .form-label,
.mira-web-platform label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mira-web-platform .form-check-input {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.mira-web-platform .form-check-input:checked {
    background-color: var(--mira-accent);
    border-color: var(--mira-accent);
}

.mira-web-platform .nav-link,
.mira-web-platform .dropdown-item {
    color: var(--mira-text-muted);
}

.mira-web-platform .nav-link:hover,
.mira-web-platform .nav-link:focus,
.mira-web-platform .dropdown-item:hover,
.mira-web-platform .dropdown-item:focus {
    color: var(--mira-text);
}

.mira-web-platform .nav-pills .nav-link.active,
.mira-web-platform .nav-pills .show > .nav-link {
    background: var(--mira-button-bg);
    color: var(--mira-button-text);
}

.mira-web-platform .navbar {
    background:
        linear-gradient(180deg, rgba(87, 91, 97, 0.32), rgba(41, 43, 46, 0.24))
        padding-box !important;
}

.mira-web-platform .navbar-brand,
.mira-web-platform .navbar-toggler,
.mira-web-platform .navbar .nav-link {
    color: var(--mira-text);
}

.mira-web-platform .navbar-toggler {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: none;
}

.mira-web-platform .navbar-toggler-icon {
    filter: invert(1);
}

.mira-web-platform .pagination {
    --bs-pagination-bg: rgba(255, 255, 255, 0.04);
    --bs-pagination-border-color: rgba(255, 255, 255, 0.1);
    --bs-pagination-color: var(--mira-text);
    --bs-pagination-hover-color: var(--mira-text);
    --bs-pagination-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-pagination-hover-border-color: rgba(255, 255, 255, 0.18);
    --bs-pagination-focus-color: var(--mira-text);
    --bs-pagination-focus-bg: rgba(255, 255, 255, 0.1);
    --bs-pagination-focus-box-shadow: 0 0 0 0.24rem rgba(200, 109, 75, 0.18);
    --bs-pagination-active-bg: var(--mira-accent);
    --bs-pagination-active-border-color: rgba(255, 255, 255, 0.14);
    --bs-pagination-disabled-bg: rgba(255, 255, 255, 0.04);
    --bs-pagination-disabled-color: rgba(255, 255, 255, 0.34);
}

.mira-web-platform .badge {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.5em 0.8em;
}

.mira-web-platform .badge.bg-secondary,
.mira-web-platform .badge.text-bg-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--mira-text) !important;
}

.mira-web-platform .badge.bg-dark,
.mira-web-platform .badge.text-bg-dark,
.mira-web-platform .badge.bg-primary,
.mira-web-platform .badge.text-bg-primary {
    background: var(--mira-surface-red) !important;
    color: var(--mira-accent-contrast) !important;
}

.mira-web-platform .tooltip {
    --bs-tooltip-bg: rgba(20, 20, 22, 0.94);
    --bs-tooltip-color: #fff;
}

.mira-web-platform .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: rgba(255, 255, 255, 0.1);
    --bs-list-group-color: var(--mira-text);
}

.mira-web-platform .list-group-item {
    background: transparent;
    color: inherit;
}

.mira-web-platform .hr,
.mira-web-platform hr {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.mira-web-platform .shadow-sm,
.mira-web-platform .shadow {
    box-shadow: var(--mira-shadow-soft) !important;
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .mira-web-platform .card,
    .mira-web-platform .offcanvas,
    .mira-web-platform .dropdown-menu,
    .mira-web-platform .modal-content,
    .mira-web-platform .navbar,
    .mira-web-platform .sticky-top,
    .mira-web-platform .mira-glass-panel,
    .mira-web-platform .form-control,
    .mira-web-platform .form-select,
    .mira-web-platform textarea,
    .mira-web-platform input,
    .mira-web-platform select {
        background: rgba(24, 24, 26, 0.92);
    }
}

@media (max-width: 767.98px) {
    body.mira-web-platform {
        background:
            radial-gradient(circle at top, rgba(222, 96, 55, 0.16), transparent 34%),
            linear-gradient(180deg, #161111 0%, #080707 100%);
    }

    .mira-web-platform .card,
    .mira-web-platform .offcanvas,
    .mira-web-platform .modal-content {
        border-radius: 24px;
    }
}