/* =============================================================
   RusLearn – Custom Theme Extensions (v3.0)
   Supplements redesign.css with legacy utilities
   and component-specific styles.
   ============================================================= */

/* ---------- 1. LEGACY UTILITIES ---------- */
html, body { height: 100%; margin: 0; }
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-wrapper, main { flex: 1; display: flex; flex-direction: column; }

/* ---------- 2. LEVEL GRADIENT BACKGROUNDS (light mode only) ---------- */
html:not(.dark-mode) body.level-a1 {
    background: linear-gradient(180deg, #eef3ff, var(--app-bg));
}
html:not(.dark-mode) body.level-a2 {
    background: linear-gradient(180deg, #ecfaf0, var(--app-bg));
}
html:not(.dark-mode) body.level-b1 {
    background: linear-gradient(180deg, #fff0f2, var(--app-bg));
}
html:not(.dark-mode) body.level-b2 {
    background: linear-gradient(180deg, #f5efff, var(--app-bg));
}

/* ---------- 3. AUDIO PROGRESS ANIMATION ---------- */
#audio-progress.gradient-animated {
    background: linear-gradient(270deg, var(--app-accent), var(--app-secondary), var(--app-primary), var(--app-accent)) !important;
    background-size: 800% 800% !important;
    animation: gradientFlow 4s ease infinite !important;
    transition: width 0.4s ease !important;
    border-radius: 0.375rem;
}
@keyframes gradientFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- 4. FOOTER (legacy) ---------- */
.main-footer {
    background: var(--app-footer-bg);
    border-top: 1px solid var(--app-footer-border);
    font-size: 0.875rem;
}