@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");

:root {
    --bg: #08090d;
    --panel: #11131a;
    --panel2: #171a23;
    --line: #262a36;
    --text: #f6f7fb;
    --muted: #9298a8;
    --accent: #ff3b30;
    --accent2: #ff6b35;
    --green: #39d98a;

    --ease-premium: cubic-bezier(.22, 1, .36, 1);
    --ease-soft: cubic-bezier(.2, .8, .2, 1);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    overflow-x: hidden;

    background:
        radial-gradient(circle at 85% -10%,
            rgba(255, 59, 48, .10),
            transparent 28%),
        radial-gradient(circle at 10% 25%,
            rgba(255, 255, 255, .025),
            transparent 25%),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background:
        linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, .012) 45%,
            transparent 55%);

    animation: ambientShift 12s ease-in-out infinite alternate;
}

@keyframes ambientShift {
    from {
        transform: translateX(-3%)
    }

    to {
        transform: translateX(3%)
    }
}


button,
input {
    font: inherit
}

button {
    cursor: pointer
}

.hidden {
    display: none !important
}

.linklike {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: inline;
    color: #ff756e;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.linklike:hover {
    color: #ff9089;
}


/* KEYBOARD FOCUS

   Only shows a visible ring for keyboard navigation
   (:focus-visible), so mouse/touch clicks stay clean while
   Tab-users always get a clear indicator. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
.watch:focus-visible,
.phase button:focus-visible {
    outline: 2px solid var(--accent2);
    outline-offset: 2px;
    border-radius: 8px;
}


/* NAVBAR */

.nav {
    height: 72px;

    border-bottom: 1px solid var(--line);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 5%;

    position: sticky;
    top: 0;

    background: rgba(8, 9, 13, .82);

    backdrop-filter: blur(18px);

    z-index: 10;

    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.nav:hover {
    border-bottom-color: #343946;

    box-shadow:
        0 8px 35px rgba(0, 0, 0, .14);
}


.logo {
    font-weight: 900;
    letter-spacing: -.8px;
    font-size: 20px;
}

.logo span {
    color: var(--accent)
}


.navlinks {
    display: flex;
    gap: 24px;

    color: #c7cad3;

    font-size: 14px;
}

.navlinks a {
    cursor: pointer;

    position: relative;

    color: inherit;
    text-decoration: none;

    transition:
        color .25s ease;
}

.navlinks a:after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;

    bottom: -8px;

    height: 1px;

    background: var(--accent);

    transition:
        right .35s var(--ease-premium);
}

.navlinks a:hover {
    color: #fff
}

.navlinks a:hover:after {
    right: 0
}

.navlogout {
    display: none;
}


/* HAMBURGER MENU (mobile nav) */

.navtoggle {
    display: none;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;

    width: 40px;
    height: 40px;

    border: 1px solid var(--line);
    border-radius: 10px;
    background: #171922;
}

.navtoggle span {
    display: block;

    width: 18px;
    height: 2px;

    background: var(--text);
    border-radius: 2px;

    transition:
        transform .25s var(--ease-premium),
        opacity .2s ease;
}

.navtoggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navtoggle.open span:nth-child(2) {
    opacity: 0;
}

.navtoggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* BUTTON DISABLED STATE */

.btn:disabled,
.watch:disabled,
#markReadBtn:disabled {
    opacity: .65;
    cursor: default;
    transform: none !important;
    box-shadow: none !important;
}


/* HERO */

.hero {
    padding: 82px 5% 58px;

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 45px;

    align-items: center;

    max-width: 1250px;

    margin: auto;
}

.badge {
    display: inline-flex;

    padding: 7px 12px;

    border: 1px solid #3a2222;

    background: #170e0e;

    border-radius: 999px;

    color: #ff756e;

    font-size: 12px;

    font-weight: 800;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.badge:hover {
    border-color: #69302d;

    box-shadow:
        0 0 24px rgba(255, 59, 48, .08);

    transform: translateY(-1px);
}


h1 {
    font-size: clamp(42px, 6vw, 78px);

    line-height: .95;

    margin: 18px 0;

    letter-spacing: -4px;
}

.hero p {
    font-size: 18px;

    color: var(--muted);

    max-width: 650px;

    line-height: 1.7;
}


.cta {
    display: flex;

    gap: 12px;

    margin-top: 28px;
}


/* BUTTONS */

.btn,
.watch,
.close,
.phase button {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    transition:
        transform .25s var(--ease-premium),
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.btn:before,
.watch:before,
.phase button:before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    left: var(--mx, 50%);
    top: var(--my, 50%);

    transform:
        translate(-50%, -50%) scale(0);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .11);

    transition:
        transform .5s var(--ease-premium);

    pointer-events: none;

    z-index: -1;
}


.btn {
    border: 0;

    border-radius: 12px;

    padding: 13px 18px;

    font-weight: 800;

    background: var(--accent);

    color: white;

    box-shadow:
        0 10px 28px rgba(255, 59, 48, .12);
}


.btn.secondary {
    background: #191c24;

    border: 1px solid var(--line);

    box-shadow: none;
}


.btn:hover,
.watch:hover,
.phase button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .22);
}


.btn:hover:before,
.watch:hover:before,
.phase button:hover:before {
    transform:
        translate(-50%, -50%) scale(2.4);
}


.btn:active,
.watch:active,
.phase button:active {
    transform:
        translateY(0) scale(.98);
}


.btn:not(.secondary):hover {
    box-shadow:
        0 14px 34px rgba(255, 59, 48, .25);
}


.btn.secondary:hover {
    border-color: #484e5d;

    background: #1e222c;
}


/* HERO CARD */

.hero-card {
    background:
        linear-gradient(145deg,
            #171922,
            #0e1016);

    border: 1px solid var(--line);

    border-radius: 24px;

    padding: 25px;

    box-shadow:
        0 25px 80px #0008;

    transition:
        transform .35s var(--ease-premium),
        border-color .3s ease,
        box-shadow .35s ease,
        background .3s ease;
}

.hero-card:hover {
    transform: translateY(-5px);

    border-color: #3c414e;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, .38);
}


.ring {
    height: 210px;
    width: 210px;

    border-radius: 50%;

    margin: 5px auto 20px;

    display: grid;
    place-items: center;

    background:
        conic-gradient(var(--accent) 0 3%,
            #282c37 3% 100%);

    position: relative;
}

.ring:after {
    content: "";

    position: absolute;

    inset: 14px;

    border-radius: 50%;

    background: #11131a;
}

.ring strong {
    position: relative;

    z-index: 1;

    font-size: 40px;
}


.stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}


.stat {
    background: #0c0e13;

    border: 1px solid var(--line);

    padding: 15px;

    border-radius: 14px;

    text-align: center;

    transition:
        transform .35s var(--ease-premium),
        border-color .3s ease,
        box-shadow .35s ease;
}

.stat:hover {
    transform: translateY(-3px);

    border-color: #3b404d;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .18);
}

.stat b {
    display: block;

    font-size: 22px;
}

.stat small {
    color: var(--muted)
}


/* SECTIONS */

.section {
    max-width: 1250px;

    margin: auto;

    padding: 40px 5% 80px;
}

.section h2 {
    font-size: 34px;

    letter-spacing: -1.5px;

    margin-bottom: 8px;
}

.sub {
    color: var(--muted);

    margin-top: 0;
}


/* PHASE GRID */

.phasegrid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;

    margin-top: 25px;
}


.phase {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            #14161e,
            #0e1015);

    border: 1px solid var(--line);

    border-radius: 20px;

    padding: 22px;

    transition:
        transform .35s var(--ease-premium),
        border-color .3s ease,
        box-shadow .35s ease,
        background .3s ease;
}


.phase:after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background:
        linear-gradient(120deg,
            transparent 20%,
            rgba(255, 255, 255, .10),
            transparent 80%);

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: 0;

    transition:
        opacity .4s ease;

    pointer-events: none;
}


.phase:hover {
    transform: translateY(-4px);

    border-color: #3b404d;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .22);
}


.phase:hover:after {
    opacity: 1
}


.phase-top {
    display: flex;

    justify-content: space-between;

    gap: 15px;
}


.phase-no {
    color: var(--accent);

    font-weight: 900;

    font-size: 12px;
}


.phase h3 {
    margin: 6px 0 10px;

    font-size: 21px;
}


.phase p {
    color: var(--muted);

    font-size: 13px;
}


.bar {
    height: 6px;

    background: #272b35;

    border-radius: 99px;

    overflow: hidden;

    margin: 16px 0;
}


.bar i {
    display: block;

    height: 100%;

    width: 0;

    background:
        linear-gradient(90deg,
            var(--accent),
            var(--accent2));

    transition:
        width .8s var(--ease-premium);

    position: relative;

    overflow: hidden;
}


.bar i:after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent);

    transform: translateX(-100%);

    animation:
        progressShine 2.6s ease-in-out infinite;
}


.phase button {
    width: 100%;

    background: #1b1e27;

    color: #fff;

    border: 1px solid var(--line);

    padding: 11px;

    border-radius: 10px;

    font-weight: 750;
}


/* DASHBOARD */

.dashboard {
    max-width: 1250px;

    margin: auto;

    padding: 35px 5% 90px;
}

.dashhead {
    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 20px;
}


.progressbox {
    margin-top: 22px;

    background: #11131a;

    border: 1px solid var(--line);

    padding: 20px;

    border-radius: 18px;

    transition:
        transform .35s var(--ease-premium),
        border-color .3s ease,
        box-shadow .35s ease;
}

.progressbox:hover {
    border-color: #373c49;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .18);
}


.progressline {
    height: 10px;

    background: #282c36;

    border-radius: 99px;

    overflow: hidden;

    margin-top: 12px;
}


.progressline i {
    display: block;

    height: 100%;

    width: 0;

    background:
        linear-gradient(90deg,
            var(--accent),
            var(--accent2));

    transition:
        width .8s var(--ease-premium);

    position: relative;

    overflow: hidden;
}


.progressline i:after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent);

    transform: translateX(-100%);

    animation:
        progressShine 2.6s ease-in-out infinite;
}


@keyframes progressShine {

    55%,
    100% {
        transform: translateX(100%)
    }
}


/* LESSONS */

.lessonlist {
    margin-top: 25px;

    display: grid;

    gap: 9px;
}


.lesson {
    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    background: #11131a;

    border: 1px solid var(--line);

    padding: 14px;

    border-radius: 13px;

    transition:
        transform .35s var(--ease-premium),
        border-color .3s ease,
        box-shadow .35s ease,
        background .3s ease;
}


.lesson:before {
    content: "";

    position: absolute;

    left: 0;

    top: 10px;

    bottom: 10px;

    width: 2px;

    border-radius: 5px;

    background: var(--accent);

    transform: scaleY(0);

    transform-origin: center;

    transition:
        transform .35s var(--ease-premium);
}


.lesson:hover {
    transform: translateX(4px);

    border-color: #3a3f4c;

    background: #151821;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .16);
}


.lesson:hover:before {
    transform: scaleY(1)
}


.day {
    width: 46px;

    height: 46px;

    display: grid;

    place-items: center;

    background: #1c1f28;

    border-radius: 10px;

    font-weight: 900;

    color: #ff756e;

    transition:
        transform .3s var(--ease-premium),
        background .3s ease,
        box-shadow .3s ease;
}


.lesson:hover .day {
    transform: scale(1.05);

    background: #251719;

    box-shadow:
        0 0 0 5px rgba(255, 59, 48, .055);
}


.lessonmain {
    flex: 1
}


.lessonmain b {
    display: block
}


.lessonmain small {
    color: var(--muted)
}


.watch {
    background: #242832;

    border: 0;

    color: #fff;

    border-radius: 9px;

    padding: 9px 12px;

    font-weight: 750;
}


.done {
    color: var(--green);

    font-size: 12px;

    font-weight: 800;
}


.continue-btn {
    width: 100%;
    margin-top: 16px;
}

.reset-btn {
    margin-left: 10px;

    font-size: 13px;
    padding: 13px 16px;
}

.empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 14px;
}


/* PHASE PAGE */

.phasePage {
    display: none;

    min-height: 100vh;

    background:
        radial-gradient(circle at 75% 0,
            #351010 0,
            transparent 35%),
        var(--bg);

    padding-bottom: 80px;

    animation:
        pageIn .55s var(--ease-premium) both;
}


.phasePage.open {
    display: block
}


.phaseNav {
    height: 72px;

    border-bottom: 1px solid var(--line);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 5%;

    position: sticky;

    top: 0;

    background: rgba(8, 9, 13, .88);

    backdrop-filter: blur(18px);

    z-index: 20;

    transition:
        box-shadow .3s ease,
        border-color .3s ease;
}


.phaseHero {
    max-width: 1050px;

    margin: auto;

    padding: 70px 5% 35px;
}


.phaseHero h1 {
    font-size:
        clamp(38px, 6vw, 68px);

    margin: 14px 0 10px;

    letter-spacing: -3px;

    animation:
        titleReveal .7s var(--ease-premium) both;
}


.phaseHero p {
    color: var(--muted);

    font-size: 17px;

    line-height: 1.7;

    max-width: 760px;
}


.phaseProgressBox {
    max-width: 720px;

    margin-top: 28px;

    background: #11131a;

    border: 1px solid var(--line);

    padding: 18px;

    border-radius: 16px;
}


.phaseProgressBox>div:first-child {
    display: flex;

    justify-content: space-between;
}


.phaseProgressBox span {
    color: #ff756e;

    font-weight: 900;
}


.phaseLessons {
    max-width: 1050px;

    margin: 10px auto 0;

    padding: 0 5%;
}


.phaseDashboardHead {
    max-width: 1050px;

    margin: auto;

    padding: 48px 5% 0;
}


.phaseDashRow {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 12px;
}


.phaseDashRow h2 {
    font-size: 36px;

    margin: 0 0 5px;

    letter-spacing: -1.5px;
}


.phaseDashRow p {
    margin: 0;

    color: var(--muted);
}


.phaseDashboardHead .progressbox {
    margin-top: 25px;
}


/* ANIMATIONS */

@keyframes pageIn {
    from {
        opacity: 0;

        transform: translateY(12px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


@keyframes titleReveal {
    from {
        opacity: 0;

        transform: translateY(15px);
    }

    to {
        opacity: 1;

        transform: none;
    }
}


.phaseLessons .lesson {
    opacity: 0;

    animation:
        lessonReveal .45s var(--ease-premium) forwards;
}


.phaseLessons .lesson:nth-child(1) {
    animation-delay: .03s
}

.phaseLessons .lesson:nth-child(2) {
    animation-delay: .06s
}

.phaseLessons .lesson:nth-child(3) {
    animation-delay: .09s
}

.phaseLessons .lesson:nth-child(4) {
    animation-delay: .12s
}

.phaseLessons .lesson:nth-child(5) {
    animation-delay: .15s
}

.phaseLessons .lesson:nth-child(6) {
    animation-delay: .18s
}

.phaseLessons .lesson:nth-child(7) {
    animation-delay: .21s
}

.phaseLessons .lesson:nth-child(8) {
    animation-delay: .24s
}

.phaseLessons .lesson:nth-child(9) {
    animation-delay: .27s
}

.phaseLessons .lesson:nth-child(10) {
    animation-delay: .30s
}


@keyframes lessonReveal {
    from {
        opacity: 0;

        transform: translateY(10px);
    }

    to {
        opacity: 1;

        transform: none;
    }
}


/* MODAL */

.modal {
    position: fixed;
    inset: 0;
    background: #000b;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 30;
    backdrop-filter: blur(8px);
    animation: modalBg .25s ease both;
}

.modal.open {
    display: flex;
}

.modalbox {
    width: min(900px, 100%);
    background: #11131a;
    border: 1px solid #333744;
    border-radius: 20px;
    overflow: hidden;
    transition:
        transform .35s var(--ease-premium),
        border-color .3s ease,
        box-shadow .35s ease,
        background .3s ease;
}

.modal.open .modalbox {
    animation: modalIn .42s var(--ease-premium) both;
}

@keyframes modalBg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   CLEAN 16:9 VIDEO PLAYER
   YouTube native controls/branding are hidden as much as
   the iframe allows; the bottom strip is covered and our
   custom controls sit above it.
   ========================================================= */

.video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    background: #000;
    overflow: hidden;
    display: block;
}

.video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.custom-player {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

.youtube-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.youtube-frame iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

/* Sits directly over the iframe. Fully transparent — it draws
   nothing and never covers the video. Its only job is to catch
   taps on the video body so they go to OUR togglePlay() instead
   of the iframe itself, since a tap landing on the raw iframe is
   what makes YouTube reveal its own title/channel/Share/Watch
   Later overlay. Inert (pointer-events: none) everywhere except
   mobile fullscreen, so normal-view and desktop are unchanged. */
.video-tap-shield {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: transparent;
    pointer-events: none;
}

.mobile-fullscreen .video-tap-shield {
    pointer-events: auto;
}

/* Covers YouTube's bottom-left link and bottom-right
   "Watch on YouTube" area. */
.youtube-hide-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62px;
    background: #000;
    z-index: 8;
    pointer-events: none;
}

/* Our controls only */
.custom-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    box-sizing: border-box;
    background: #151515;
}

.player-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    background: #15161c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.player-btn:hover {
    transform: translateY(-1px);
    background: #22242c;
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.player-btn:active {
    transform: scale(.96);
}

.player-time {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

.player-progress {
    position: relative;
    flex: 1;
    min-width: 30px;
    height: 5px;
    background: rgba(255, 255, 255, .25);
    border-radius: 999px;
    overflow: visible;
}

.player-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: var(--accent);
    border-radius: 999px;
    pointer-events: none;
}

#seekBar {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 20px;
    margin: 0;
    transform: translateY(-50%);
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.volume-btn {
    flex-shrink: 0;
}

.fullscreen-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: 20px;
}

.mobile-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    background: #000 !important;
}

/* Keep the controls bar clear of the iPhone home-indicator /
   notch area while in mobile fullscreen. */
.mobile-fullscreen .custom-controls {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
}

/* =========================================================
   MOBILE FULLSCREEN: MODAL / CARD OVERRIDES
   `.modal` (backdrop-filter) and `.modalbox` (transform from
   its open animation) both create a new CSS containing block
   for `position: fixed` descendants. That trapped the fixed
   player inside the card instead of the real viewport. While
   mobile fullscreen is active we strip those properties from
   the ancestors and hide everything except the video, so the
   fixed player is finally positioned against the viewport and
   nothing else is visible.
   ========================================================= */

.modal.mobile-fs-active {
    padding: 0 !important;
    background: #000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.modal.mobile-fs-active .modalbox {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    background: #000 !important;
}

/* Title, day badge, Mark as Read, Close button all live inside
   .modalbody — hiding it satisfies every "hide from fullscreen"
   requirement in one place. */
.modal.mobile-fs-active .modalbody {
    display: none !important;
}

/* Lock the background page so it can't scroll behind the
   fullscreen player on iOS/Android. */
body.fullscreen-open {
    overflow: hidden !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.custom-player:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background: #000 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Keep the video area large in fullscreen */
.custom-player:fullscreen .youtube-frame {
    width: 100% !important;
    height: calc(100vh - 70px) !important;
    flex: 1 !important;
}

/* Keep custom controls visible */
.custom-player:fullscreen .custom-controls {
    width: 100% !important;
    height: 70px !important;
    flex-shrink: 0 !important;
}

.custom-player:fullscreen .youtube-frame,
.custom-player:fullscreen .youtube-frame iframe {
    width: 100% !important;
    height: 100% !important;
}

.videoempty {
    width: 100%;
    height: 100%;
    min-height: 280px;
    background: #050608;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #858b9a;
}


/* =========================================================
   MODAL INFO / CLOSE / MARK AS READ
   ========================================================= */

.modalbody {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.modalbody h2 {
    margin: 8px 0 0;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.15;
}

.close,
#markReadBtn {
    position: relative;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 15px;
    border-radius: 10px;
    color: white;
    background: #222631;
    border: 1px solid #343845;
    font-weight: 750;
    transition:
        transform .2s var(--ease-premium),
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.close:hover,
#markReadBtn:hover {
    transform: translateY(-2px);
    background: #2a2e39;
    border-color: #4a5060;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

#markReadBtn.completed {
    color: var(--green);
    border-color: rgba(57, 217, 138, .25);
    background: rgba(57, 217, 138, .08);
}


/* =========================================================
   MOBILE VIDEO MODAL
   ========================================================= */

@media (max-width: 700px) {

    .modal {
        padding: 10px;
        align-items: center;
    }

    .modalbox {
        width: 100%;
        max-width: 100%;
        border-radius: 15px;
    }

    .video {
        aspect-ratio: 16 / 9;
    }

    .custom-player {
        border-radius: 15px 15px 0 0;
        aspect-ratio: 16 / 9;
    }

    .youtube-hide-bottom {
        height: 48px;
    }

    .custom-controls {
        height: 48px;
        padding: 6px 8px;
        gap: 6px;
    }

    .player-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 12px;
    }

    .fullscreen-btn {
        width: 32px;
        height: 32px;
        font-size: 17px;
    }

    .player-time {
        font-size: 9px;
    }

    .player-progress {
        height: 4px;
    }

    .modalbody {
        padding: 14px;
        gap: 12px;
        align-items: center;
    }

    .modalbody h2 {
        font-size: 20px;
        line-height: 1.18;
    }

    .close,
    #markReadBtn {
        min-height: 42px;
        padding: 9px 12px;
        font-size: 13px;
    }
}


@media (max-width: 420px) {

    .modal {
        padding: 7px;
    }

    .modalbox {
        border-radius: 13px;
    }

    .custom-player {
        border-radius: 13px 13px 0 0;
    }

    .custom-controls {
        height: 44px;
        padding: 5px 6px;
        gap: 4px;
    }

    .youtube-hide-bottom {
        height: 44px;
    }

    .player-btn {
        width: 27px;
        height: 27px;
        border-radius: 7px;
    }

    .fullscreen-btn {
        width: 29px;
        height: 29px;
    }

    .player-time {
        font-size: 8px;
    }

    .modalbody {
        padding: 12px;
    }

    .modalbody h2 {
        font-size: 18px;
    }

    .close,
    #markReadBtn {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 12px;
    }
}


/* LOGIN */

.login {
    position: fixed;

    inset: 0;

    background: #07080c;

    z-index: 50;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;
}


.loginbox {
    width: min(430px, 100%);

    background: #11131a;

    border: 1px solid var(--line);

    border-radius: 22px;

    padding: 30px;

    transition:
        transform .35s var(--ease-premium),
        border-color .3s ease,
        box-shadow .35s ease,
        background .3s ease;

    animation:
        loginIn .6s var(--ease-premium) both;
}


@keyframes loginIn {
    from {
        opacity: 0;

        transform:
            translateY(18px) scale(.97);
    }

    to {
        opacity: 1;

        transform: none;
    }
}


.loginbox h2 {
    font-size: 30px;

    margin: 0 0 8px;
}


.loginbox p {
    color: var(--muted)
}


.field {
    margin: 16px 0
}


.field label {
    display: block;

    font-size: 12px;

    color: #aaaebb;

    margin-bottom: 7px;
}


.field input {
    width: 100%;

    background: #0a0c10;

    border: 1px solid #2c303c;

    color: white;

    padding: 13px;

    border-radius: 10px;

    outline: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.field input:focus {
    border-color: #71403d;

    background: #0c0e13;

    box-shadow:
        0 0 0 4px rgba(255, 59, 48, .07);
}


.loginbox .btn {
    width: 100%;

    margin-top: 8px;
}


/* RESPONSIVE */

@media(max-width:850px) {

    .hero {
        grid-template-columns: 1fr;

        padding-top: 55px;
    }

    .phasegrid {
        grid-template-columns: 1fr;
    }

    .navdesktop-logout {
        display: none;
    }

    .navtoggle {
        display: flex;
    }

    .navlinks {
        position: absolute;

        top: 72px;
        left: 0;
        right: 0;

        flex-direction: column;
        align-items: stretch;
        gap: 0;

        background: #0c0e13;
        border-bottom: 1px solid var(--line);

        max-height: 0;
        overflow: hidden;

        transition: max-height .3s var(--ease-soft);

        z-index: 15;
    }

    .navlinks.open {
        max-height: 320px;
    }

    .navlinks a {
        padding: 16px 5%;

        border-bottom: 1px solid var(--line);
    }

    .navlogout {
        display: block;

        margin: 14px 5% 18px;
        width: auto;
    }

    .dashhead {
        align-items: start;

        flex-direction: column;
    }

    .lesson {
        align-items: flex-start;
    }

    .watch {
        margin-left: auto;
    }

    .phaseDashRow {
        flex-direction: column;

        align-items: flex-start;
    }

    .reset-btn {
        margin-left: 0;
        margin-top: 10px;
    }

}


/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {

        animation-duration: .001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .001ms !important;

        scroll-behavior: auto !important;
    }

}