/* 
   откл оформление: удалить
   <link rel="stylesheet" href="theme-decor.css">
*/

body {
    background:
        radial-gradient(circle at top left, rgba(0, 119, 182, 0.08), transparent 22%),
        radial-gradient(circle at bottom right, rgba(120, 195, 255, 0.12), transparent 25%),
        #f4f7f9;
}

/* ГЛАВНАЯ СТРАНИЦА    */        


.auth-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 119, 182, 0.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.98) 100%),
        #ffffff;
}



.auth-brand,
.auth-note,
.auth-form {
    position: relative;
    z-index: 1;
}

.auth-brand {
    padding-right: 180px;
}

.auth-brand h1,
.site-title {
    letter-spacing: 0.02em;
}

.auth-note {
    position: relative;
    padding: 18px 18px 18px 20px;
    border-top: none;
    border-radius: 18px;
    background: linear-gradient(180deg, #f9fdff 0%, #f2f9fd 100%);
    border: 1px solid #dcebf4;
}

.site-header {
    position: relative;
    overflow: hidden;
    margin: 18px auto 0;
    max-width: 1240px;
    border-radius: 28px;
    border: 1px solid rgba(0, 119, 182, 0.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(248,252,255,0.97) 100%),
        #ffffff;
    box-shadow: 0 18px 36px rgba(0, 119, 182, 0.06);
}

.site-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 110px;
    background: url("assets/pulse-line.svg") no-repeat center / cover;
    opacity: 0.55;
    pointer-events: none;
}

.site-header::after {
    content: "";
    position: absolute;
    right: 18px;
    top: -26px;
    width: 240px;
    height: 170px;
    background: url("assets/medical-hero.svg") no-repeat center / contain;
    opacity: 0.33;
    pointer-events: none;
}

.header-container,
.top-row,
.search-wrapper,
.mode-switcher {
    position: relative;
    z-index: 1;
}

.site-title {
    font-size: 34px;
    text-shadow: 0 2px 16px rgba(0, 119, 182, 0.08);
}

.site-title span,
.auth-brand span {
    color: #3ca8e2;
}

.user-panel {
    box-shadow: 0 8px 22px rgba(0, 119, 182, 0.08);
}

.mode-switcher {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-btn,
.mode-btn,
.load-more-btn,
.start-course-btn,
.primary-btn {
    box-shadow: 0 8px 20px rgba(0, 119, 182, 0.08);
}

.video-grid {
    margin-top: 8px;
}

.card {
    border: 1px solid rgba(0, 119, 182, 0.06);
    box-shadow: 0 16px 32px rgba(14, 64, 86, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(14, 64, 86, 0.12);
}

.video-box {
    background:
        radial-gradient(circle at center, rgba(0, 119, 182, 0.08), transparent 58%),
        #0f1720;
}

.empty-state {
    border: 1px dashed #c8dfed;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(246,251,255,0.95) 100%),
        #ffffff;
    box-shadow: 0 16px 30px rgba(0, 119, 182, 0.05);
}

.course-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 119, 182, 0.08);
    box-shadow: 0 18px 34px rgba(14, 64, 86, 0.08);
}

.course-card::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -18px;
    width: 180px;
    height: 140px;
    background: url("assets/medical-hero.svg") no-repeat center / contain;
    opacity: 0.18;
    pointer-events: none;
}

.course-info h3 {
    padding-right: 60px;
}


/* АДМИНКА                                             */


.admin-body {
    background:
        radial-gradient(circle at top right, rgba(0, 119, 182, 0.09), transparent 23%),
        radial-gradient(circle at bottom left, rgba(0, 119, 182, 0.07), transparent 26%),
        #f4f7f9;
}

.admin-body .page {
    position: relative;
}

.admin-body .topbar {
    position: relative;
    overflow: hidden;
    padding: 26px 26px 30px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(246,251,255,0.98) 100%),
        #ffffff;
    border: 1px solid rgba(0, 119, 182, 0.08);
    box-shadow: 0 18px 36px rgba(0, 119, 182, 0.08);
}

.admin-body .topbar::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 8px;
    width: 280px;
    height: 160px;
    background: url("assets/admin-tools.svg") no-repeat center / contain;
    opacity: 0.34;
    pointer-events: none;
}

.admin-body .topbar > * {
    position: relative;
    z-index: 1;
}

.admin-body .stat-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,251,255,0.98) 100%),
        #ffffff;
}

.admin-body .panel {
    border: 1px solid rgba(0, 119, 182, 0.06);
}

.admin-body .sticky {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,252,255,0.98) 100%),
        #ffffff;
}

.admin-body .tip-box {
    background:
        linear-gradient(180deg, rgba(245,251,255,0.98) 0%, rgba(235,246,252,0.98) 100%),
        #eff8fd;
}

.admin-body .tag-chip {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.03);
}

.admin-body .video-row:hover {
    background: rgba(0, 119, 182, 0.02);
}

@media (max-width: 900px) {
    .auth-card::after,
    .site-header::after,
    .admin-body .topbar::after,
    .course-card::after {
        opacity: 0.14;
    }

    .auth-brand {
        padding-right: 120px;
    }
}

@media (max-width: 640px) {
    .auth-brand {
        padding-right: 0;
    }

    .auth-card::after,
    .site-header::after,
    .admin-body .topbar::after,
    .course-card::after {
        display: none;
    }

    .site-header {
        margin-top: 0;
        border-radius: 0 0 26px 26px;
    }

    .site-title {
        font-size: 28px;
    }
}

.auth-page {
    position: relative;
}

.auth-page .auth-card,
.auth-page .auth-form,
.auth-page .auth-box,
.auth-page .auth-content {
    position: relative;
    z-index: 10;
}

.auth-page .hero-image,
.auth-page .auth-illustration,
.auth-page .login-illustration,
.auth-page .decor-image,
.auth-page .hero-media,
.auth-page .hero-visual,
.auth-page .auth-visual,
.auth-page .decor {
    position: absolute !important;
    z-index: 1 !important;
    opacity: 0.12;
    pointer-events: none;
}