/* ==========================================================================
   HackWithPro Academy — platform styles
   Reuses the landing page palette (styles.css) so the academy feels native.
   Sections: base -> nav -> buttons -> forms -> catalog -> course detail
             -> auth -> dashboard -> checkout -> player -> footer -> responsive
   ========================================================================== */

:root {
    --bg: #030711;
    --bg-soft: #050913;
    --surface: rgba(255, 255, 255, 0.045);
    --surface-2: rgba(255, 255, 255, 0.07);
    --surface-strong: rgba(255, 255, 255, 0.10);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #f7fbff;
    --text-muted: rgba(226, 236, 255, 0.62);
    --text-dim: rgba(226, 236, 255, 0.42);
    --accent: #58e6ff;
    --accent2: #4f7cff;
    --accent3: #ff8a5b;
    --green: #4ade80;
    --amber: #fbbf24;
    --red: #f87171;
    --gradient: linear-gradient(135deg, #58e6ff 0%, #4f7cff 50%, #ff8a5b 100%);
    --radius: 22px;
    --radius-md: 16px;
    --radius-sm: 11px;
    --shadow: 0 18px 50px rgba(2, 6, 20, 0.55);
    --nav-h: 72px;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', var(--font);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
    background: var(--bg);
    background-image:
        radial-gradient(circle at 50% -10%, rgba(79, 124, 255, 0.20), transparent 42%),
        radial-gradient(circle at 88% 8%, rgba(88, 230, 255, 0.12), transparent 32%),
        radial-gradient(circle at 8% 42%, rgba(255, 138, 91, 0.07), transparent 30%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video, iframe { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* Visible keyboard focus everywhere — required for accessible navigation. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip link for screen-reader / keyboard users */
.skip-link {
    position: absolute; top: -60px; left: 16px; z-index: 200;
    background: var(--accent2); color: #fff;
    padding: 10px 18px; border-radius: 0 0 10px 10px; font-weight: 600;
    transition: top .18s ease;
}
.skip-link:focus { top: 0; }

.text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.shell { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.shell-narrow { max-width: 880px; }

.page { padding: calc(var(--nav-h) + 44px) 0 88px; }
.page-tight { padding: calc(var(--nav-h) + 28px) 0 64px; }

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.small { font-size: 13.5px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.pnav {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    height: var(--nav-h);
    display: flex; align-items: center; gap: 20px;
    padding: 0 24px;
    background: rgba(3, 7, 17, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}

.pnav-logo {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 700; font-size: 18px;
    flex: 0 0 auto;
}
.pnav-logo svg { width: 26px; height: 26px; }
.pnav-logo b { font-weight: 700; }
.pnav-logo .tagline {
    font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent); padding-left: 9px; margin-left: 3px;
    border-left: 1px solid var(--border-strong);
}

.pnav-links { display: flex; align-items: center; gap: 4px; margin-left: 14px; list-style: none; }
.pnav-links a {
    display: block; padding: 9px 14px; border-radius: 10px;
    font-size: 14.5px; font-weight: 500; color: var(--text-muted);
    transition: color .16s ease, background .16s ease;
}
.pnav-links a:hover { color: var(--text); background: var(--surface); }
.pnav-links a.is-active { color: var(--text); background: var(--surface-2); }

.pnav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.pnav-toggle {
    display: none; background: none; border: 0; cursor: pointer;
    width: 40px; height: 40px; border-radius: 10px;
    align-items: center; justify-content: center;
}
.pnav-toggle:hover { background: var(--surface); }
.pnav-toggle span {
    display: block; width: 20px; height: 2px; background: var(--text);
    border-radius: 2px; position: relative;
}
.pnav-toggle span::before, .pnav-toggle span::after {
    content: ''; position: absolute; left: 0; width: 20px; height: 2px;
    background: var(--text); border-radius: 2px;
}
.pnav-toggle span::before { top: -6px; }
.pnav-toggle span::after { top: 6px; }

/* Account dropdown */
.acct { position: relative; }
.acct-btn {
    display: flex; align-items: center; gap: 9px;
    background: var(--surface); border: 1px solid var(--border);
    padding: 6px 12px 6px 6px; border-radius: 999px; cursor: pointer;
    transition: border-color .16s ease;
}
.acct-btn:hover { border-color: var(--border-strong); }
.acct-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--gradient); color: #050913;
    display: grid; place-items: center;
    font-weight: 800; font-size: 13px; flex: 0 0 auto;
}
.acct-name { font-size: 14px; font-weight: 500; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { width: 14px; height: 14px; color: var(--text-dim); }

.acct-menu {
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 232px; padding: 8px;
    background: rgba(8, 13, 28, 0.97);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md); box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.acct.open .acct-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.acct-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.acct-menu-head strong { display: block; font-size: 14px; }
.acct-menu-head span { font-size: 12.5px; color: var(--text-dim); word-break: break-all; }
.acct-menu a, .acct-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border-radius: 10px; border: 0; background: none;
    font-size: 14px; color: var(--text-muted); cursor: pointer; text-align: left;
    transition: background .14s ease, color .14s ease;
}
.acct-menu a:hover, .acct-menu button:hover { background: var(--surface-2); color: var(--text); }
.acct-menu svg { width: 16px; height: 16px; flex: 0 0 auto; }
.acct-menu .danger:hover { color: var(--red); }
.acct-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }

/* Mobile drawer */
.pnav-drawer {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
    background: rgba(4, 9, 20, 0.98); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 18px 24px 26px;
    display: none; flex-direction: column; gap: 4px;
}
.pnav-drawer.open { display: flex; }
.pnav-drawer a {
    padding: 13px 14px; border-radius: 11px; font-weight: 500;
    color: var(--text-muted);
}
.pnav-drawer a:hover { background: var(--surface); color: var(--text); }
.pnav-drawer .btn { margin-top: 10px; justify-content: center; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; border: 1px solid transparent; border-radius: 12px;
    font-family: var(--font); font-size: 15px; font-weight: 600;
    cursor: pointer; white-space: nowrap; text-align: center;
    transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn-primary { background: var(--gradient); color: #050913; font-weight: 700; }
.btn-primary:hover { filter: brightness(1.09); }

.btn-solid { background: var(--accent2); color: #fff; }
.btn-solid:hover { background: #4069e8; }

.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: rgba(255,255,255,.26); }

.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { background: var(--surface); }

.btn-danger { background: rgba(239, 68, 68, 0.13); border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; }
.btn-danger:hover { background: rgba(239, 68, 68, 0.22); }

.btn-sm { padding: 9px 16px; font-size: 13.5px; border-radius: 10px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-full { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* --------------------------------------------------------------------------
   Cards, badges, flashes
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.card-pad-lg { padding: 34px; }

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
}
.badge-accent { background: rgba(88, 230, 255, .13); border-color: rgba(88, 230, 255, .34); color: var(--accent); }
.badge-off    { background: rgba(255, 138, 91, .15); border-color: rgba(255, 138, 91, .38); color: #ffb392; }
.badge-green  { background: rgba(74, 222, 128, .13); border-color: rgba(74, 222, 128, .34); color: var(--green); }
.badge-amber  { background: rgba(251, 191, 36, .13); border-color: rgba(251, 191, 36, .34); color: var(--amber); }
.badge-red    { background: rgba(248, 113, 113, .13); border-color: rgba(248, 113, 113, .34); color: var(--red); }
.badge-free   { background: rgba(74, 222, 128, .16); border-color: rgba(74, 222, 128, .4); color: var(--green); }

.flash {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 18px; border-radius: var(--radius-sm);
    font-size: 14.5px; margin-bottom: 16px; border: 1px solid;
}
.flash-ok    { background: rgba(74, 222, 128, .10); border-color: rgba(74, 222, 128, .32); color: #a7f3c0; }
.flash-error { background: rgba(248, 113, 113, .10); border-color: rgba(248, 113, 113, .32); color: #fca5a5; }
.flash-warn  { background: rgba(251, 191, 36, .10); border-color: rgba(251, 191, 36, .32); color: #fcd34d; }
.flash-info  { background: rgba(88, 230, 255, .10); border-color: rgba(88, 230, 255, .30); color: #a5e9ff; }

.empty {
    text-align: center; padding: 70px 24px;
    border: 1px dashed var(--border-strong); border-radius: var(--radius);
    background: rgba(255, 255, 255, .02);
}
.empty-icon { font-size: 40px; margin-bottom: 14px; opacity: .75; }
.empty h3 { font-size: 19px; margin-bottom: 8px; }
.empty p { color: var(--text-muted); max-width: 420px; margin: 0 auto 22px; font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label, .lbl {
    display: block; font-size: 13px; font-weight: 600;
    margin-bottom: 7px; color: rgba(226, 236, 255, .82);
}
.field .hint { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }
.req { color: var(--accent3); }

.input, .field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=url], .field input[type=date],
.field input[type=tel], .field select, .field textarea {
    width: 100%; padding: 13px 15px;
    background: rgba(4, 8, 20, .62); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); color: var(--text); font-size: 15px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field select { cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e8caa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;
    padding-right: 40px;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: rgba(88, 230, 255, .55);
    box-shadow: 0 0 0 3px rgba(88, 230, 255, .12);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(226, 236, 255, .3); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: rgba(248, 113, 113, .6); }
.field-error { font-size: 12.5px; color: #fca5a5; margin-top: 6px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.check {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 14px; cursor: pointer; margin-bottom: 12px;
}
.check input[type=checkbox], .check input[type=radio] {
    width: 17px; height: 17px; margin-top: 3px; flex: 0 0 auto;
    accent-color: var(--accent2); cursor: pointer;
}
.check span { color: var(--text-muted); }
.check strong { color: var(--text); font-weight: 600; }

.pw-wrap { position: relative; }
.pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; padding: 8px;
    color: var(--text-dim); border-radius: 8px;
}
.pw-toggle:hover { color: var(--text); background: var(--surface); }
.pw-toggle svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Catalog
   -------------------------------------------------------------------------- */
.cat-hero { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--accent); opacity: .6; }
.cat-hero h1 { font-size: clamp(32px, 5vw, 50px); margin-bottom: 16px; }
.cat-hero p { color: var(--text-muted); font-size: 17px; }

.cat-stats {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px;
}
.cat-stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: 8px 18px; font-size: 13.5px; color: var(--text-muted);
}
.cat-stat b { color: var(--text); font-weight: 700; }

/* Filter bar */
.filters {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 16px; margin-bottom: 30px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.filters form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.search-box { position: relative; flex: 1 1 260px; }
.search-box svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--text-dim); pointer-events: none;
}
.search-box input {
    width: 100%; padding: 12px 14px 12px 42px;
    background: rgba(4, 8, 20, .62); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); color: var(--text); font-size: 14.5px;
}
.search-box input:focus { outline: none; border-color: rgba(88, 230, 255, .5); }
.filters select {
    padding: 12px 38px 12px 14px; font-size: 14px; cursor: pointer;
    background: rgba(4, 8, 20, .62); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); color: var(--text); appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e8caa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
.filters select:focus { outline: none; border-color: rgba(88, 230, 255, .5); }

/* Course grid + card */
.course-grid {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.ccard {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    position: relative; height: 100%;
}
.ccard:hover {
    transform: translateY(-5px);
    border-color: rgba(88, 230, 255, .30);
    box-shadow: 0 20px 46px rgba(2, 6, 20, .58);
}

.ccard-thumb {
    position: relative; aspect-ratio: 16 / 9;
    display: grid; place-items: center; overflow: hidden;
}
.ccard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ccard-thumb-glyph { font-size: 46px; opacity: .9; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.ccard-thumb::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(3, 7, 17, .55) 100%);
}
.ccard-badges {
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2;
    display: flex; gap: 7px; flex-wrap: wrap;
}
.ccard-badges .badge { background: rgba(3, 7, 17, .74); backdrop-filter: blur(8px); }
.ccard-badges .badge-off { background: rgba(255, 138, 91, .9); border-color: transparent; color: #2a0f04; }
.ccard-badges .badge-accent { background: rgba(88, 230, 255, .9); border-color: transparent; color: #04212b; }

.ccard-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.ccard-cat {
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 9px;
}
.ccard-title {
    font-size: 17.5px; line-height: 1.34; margin-bottom: 9px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ccard:hover .ccard-title { color: var(--accent); }
.ccard-sub {
    font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 15px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ccard-meta {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    font-size: 12.5px; color: var(--text-dim);
    padding-bottom: 15px; margin-bottom: 15px;
    border-bottom: 1px solid var(--border);
}
.ccard-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ccard-meta svg { width: 14px; height: 14px; opacity: .8; }

.ccard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.price-now { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.price-mrp { font-size: 14px; color: var(--text-dim); text-decoration: line-through; }
.price-free { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--green); }

.rating { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.rating b { color: var(--amber); font-weight: 700; }
.rating svg { width: 14px; height: 14px; color: var(--amber); }
.rating span { color: var(--text-dim); }

.owned-strip {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; background: rgba(74, 222, 128, .09);
    border-top: 1px solid rgba(74, 222, 128, .22);
    font-size: 13px; font-weight: 600; color: var(--green);
}
.owned-strip svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Course detail
   -------------------------------------------------------------------------- */
.cd-hero {
    position: relative; overflow: hidden;
    padding: calc(var(--nav-h) + 48px) 0 52px;
    border-bottom: 1px solid var(--border);
}
.cd-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(circle at 18% 0%, rgba(79, 124, 255, .26), transparent 46%),
        radial-gradient(circle at 82% 12%, rgba(88, 230, 255, .16), transparent 40%);
}
.cd-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; align-items: start;
}

.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); margin-bottom: 18px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--accent); }
.crumbs svg { width: 13px; height: 13px; }

.cd-title { font-size: clamp(28px, 4.2vw, 42px); margin-bottom: 16px; }
.cd-sub { font-size: 17.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 22px; max-width: 660px; }

.cd-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.cd-facts span { display: inline-flex; align-items: center; gap: 7px; }
.cd-facts svg { width: 16px; height: 16px; color: var(--accent); }

.cd-author { display: flex; align-items: center; gap: 12px; }
.cd-author-avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(88, 230, 255, .35);
}
.cd-author-fallback {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--gradient); color: #050913;
    display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.cd-author-name { font-size: 14.5px; font-weight: 600; }
.cd-author-role { font-size: 12.5px; color: var(--text-dim); }

/* Sticky purchase card */
.buy-card {
    position: sticky; top: calc(var(--nav-h) + 24px);
    background: rgba(8, 13, 28, .82); border: 1px solid var(--border-strong);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.buy-preview {
    position: relative; aspect-ratio: 16 / 9;
    display: grid; place-items: center; cursor: default;
}
.buy-preview img { width: 100%; height: 100%; object-fit: cover; }
.buy-preview-glyph { font-size: 46px; }
.buy-preview-play {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(3, 7, 17, .34); border: 0; cursor: pointer; width: 100%;
    color: #fff; transition: background .18s ease;
}
.buy-preview-play:hover { background: rgba(3, 7, 17, .18); }
.buy-preview-play span {
    width: 58px; height: 58px; border-radius: 50%;
    background: rgba(255, 255, 255, .95); color: #050913;
    display: grid; place-items: center;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
}
.buy-preview-play svg { width: 22px; height: 22px; margin-left: 3px; }
.buy-preview-label {
    position: absolute; bottom: 10px; left: 0; right: 0; text-align: center;
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.9);
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

.buy-body { padding: 24px; }
.buy-price { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin-bottom: 6px; }
.buy-price-now { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; }
.buy-price-mrp { font-size: 17px; color: var(--text-dim); text-decoration: line-through; }
.buy-save { font-size: 13.5px; color: var(--green); font-weight: 600; margin-bottom: 20px; }
.buy-urgency {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; color: #ffb392; font-weight: 600; margin-bottom: 18px;
}
.buy-urgency svg { width: 15px; height: 15px; }

.buy-includes { list-style: none; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--border); }
.buy-includes li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: var(--text-muted); padding: 7px 0;
}
.buy-includes svg { width: 16px; height: 16px; color: var(--green); flex: 0 0 auto; margin-top: 3px; }

.buy-note {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-dim); text-align: center; line-height: 1.6;
}

/* Content sections */
.cd-body { padding: 52px 0 84px; }
.cd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; align-items: start; }

.cd-section { margin-bottom: 46px; }
.cd-section > h2 {
    font-size: 25px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cd-section > h2 .count { font-size: 14px; font-weight: 500; color: var(--text-dim); font-family: var(--font); }

/* What you'll learn */
.learn-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 28px;
}
.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 30px; list-style: none; }
.learn-grid li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: rgba(226, 236, 255, .82); line-height: 1.55; }
.learn-grid svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; margin-top: 3px; }

/* Feature strip (Apna College style) */
.feat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }
.feat-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 20px 18px; text-align: center;
    transition: border-color .18s ease, transform .18s ease;
}
.feat-item:hover { border-color: rgba(88, 230, 255, .3); transform: translateY(-3px); }
.feat-icon {
    width: 42px; height: 42px; border-radius: 12px; margin: 0 auto 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(88, 230, 255, .18), rgba(79, 124, 255, .18));
    border: 1px solid rgba(88, 230, 255, .24);
}
.feat-icon svg { width: 20px; height: 20px; color: var(--accent); }
.feat-item strong { display: block; font-size: 14.5px; font-weight: 600; }

/* Curriculum accordion */
.curriculum { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cur-section + .cur-section { border-top: 1px solid var(--border); }

.cur-head {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 18px 22px; background: var(--surface); border: 0;
    cursor: pointer; text-align: left; transition: background .16s ease;
}
.cur-head:hover { background: var(--surface-2); }
.cur-chevron {
    width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent);
    transition: transform .22s ease;
}
.cur-section.open .cur-chevron { transform: rotate(180deg); }
.cur-head-text { flex: 1; min-width: 0; }
.cur-head-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.cur-head-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.cur-num {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
    background: var(--surface-2); border: 1px solid var(--border);
    display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--text-muted);
}

.cur-body { display: none; padding: 4px 0 10px; background: rgba(4, 8, 20, .35); }
.cur-section.open .cur-body { display: block; }

.cur-lesson {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 22px 11px 24px; font-size: 14.5px; color: var(--text-muted);
    border-left: 2px solid transparent;
}
.cur-lesson-icon { width: 17px; height: 17px; flex: 0 0 auto; opacity: .75; }
.cur-lesson-icon svg { width: 100%; height: 100%; }
.cur-lesson-title { flex: 1; min-width: 0; }
.cur-lesson-time { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cur-lesson .badge { font-size: 10px; padding: 3px 8px; }
a.cur-lesson:hover { background: var(--surface); color: var(--text); border-left-color: var(--accent); }
.cur-lesson-lock { width: 15px; height: 15px; color: var(--text-dim); flex: 0 0 auto; }

/* Requirements / description prose */
.prose { font-size: 15.5px; line-height: 1.78; color: rgba(226, 236, 255, .78); }
.prose p { margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }

.bullets { list-style: none; }
.bullets li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 15px; color: rgba(226, 236, 255, .78); padding: 8px 0; line-height: 1.6;
}
.bullets li::before {
    content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); margin-top: 10px;
}

/* Instructor */
.tutor { display: flex; gap: 22px; align-items: flex-start; }
.tutor-photo {
    width: 96px; height: 96px; border-radius: 18px; object-fit: cover; flex: 0 0 auto;
    border: 1px solid rgba(88, 230, 255, .28);
}
.tutor-photo-fallback {
    width: 96px; height: 96px; border-radius: 18px; flex: 0 0 auto;
    background: var(--gradient); color: #050913;
    display: grid; place-items: center; font-family: var(--font-display);
    font-size: 30px; font-weight: 800;
}
.tutor h3 { font-size: 19px; margin-bottom: 4px; }
.tutor-role { font-size: 14px; color: var(--accent); margin-bottom: 12px; }
.tutor-bio { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 11px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.faq-q {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 17px 20px; background: none; border: 0; cursor: pointer; text-align: left;
    font-size: 15.5px; font-weight: 600; font-family: var(--font-display);
    transition: color .16s ease;
}
.faq-q:hover { color: var(--accent); }
.faq-q svg { width: 17px; height: 17px; margin-left: auto; flex: 0 0 auto; color: var(--accent); transition: transform .22s ease; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 20px 19px 20px; font-size: 14.5px; color: var(--text-muted); line-height: 1.72; }
.faq-item.open .faq-a { display: block; }

/* Mobile sticky buy bar */
.buy-bar {
    position: fixed; inset: auto 0 0 0; z-index: 90; display: none;
    align-items: center; gap: 14px; padding: 12px 18px;
    background: rgba(4, 9, 20, .96); backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-strong);
}
.buy-bar .price-now { font-size: 20px; }
.buy-bar .btn { margin-left: auto; }

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */
.auth-wrap {
    min-height: 100vh; display: grid; place-items: center;
    padding: calc(var(--nav-h) + 40px) 24px 60px;
}
.auth-card {
    width: 100%; max-width: 452px;
    background: rgba(8, 13, 28, .78); border: 1px solid var(--border-strong);
    border-radius: var(--radius); padding: 38px 34px;
    box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.auth-head { text-align: center; margin-bottom: 28px; }
.auth-head h1 { font-size: 27px; margin-bottom: 9px; }
.auth-head p { font-size: 14.5px; color: var(--text-muted); }
.auth-alt { text-align: center; margin-top: 24px; font-size: 14.5px; color: var(--text-muted); }
.auth-alt a { color: var(--accent); font-weight: 600; }
.auth-alt a:hover { text-decoration: underline; }
.auth-legal { margin-top: 20px; font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.6; }
.auth-legal a { color: var(--text-muted); text-decoration: underline; }
.auth-forgot { font-size: 12.5px; color: var(--accent); float: right; }
.auth-forgot:hover { text-decoration: underline; }

/* Course-context panel shown beside signup when coming from checkout */
.auth-context {
    display: flex; gap: 14px; align-items: center;
    padding: 14px; margin-bottom: 24px;
    background: rgba(88, 230, 255, .06); border: 1px solid rgba(88, 230, 255, .2);
    border-radius: var(--radius-sm);
}
.auth-context-thumb {
    width: 56px; height: 42px; border-radius: 8px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 20px;
}
.auth-context strong { display: block; font-size: 14px; line-height: 1.35; }
.auth-context span { font-size: 12.5px; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */
.dash-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 22px; flex-wrap: wrap; margin-bottom: 34px;
}
.dash-head h1 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 7px; }
.dash-head p { color: var(--text-muted); font-size: 15px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 38px; }
.stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 20px 22px;
}
.stat-label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 8px;
}
.stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; }
.stat-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 30px; overflow-x: auto; }
.tabs a, .tabs button {
    padding: 12px 18px; background: none; border: 0; cursor: pointer;
    font-size: 14.5px; font-weight: 600; color: var(--text-muted);
    border-bottom: 2px solid transparent; white-space: nowrap;
    transition: color .16s ease, border-color .16s ease;
}
.tabs a:hover, .tabs button:hover { color: var(--text); }
.tabs .is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Enrolled course card */
.mycard {
    display: grid; grid-template-columns: 210px minmax(0, 1fr) auto;
    gap: 22px; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
    transition: border-color .18s ease;
}
.mycard:hover { border-color: rgba(88, 230, 255, .28); }
.mycard-thumb {
    aspect-ratio: 16 / 9; border-radius: var(--radius-sm);
    display: grid; place-items: center; font-size: 30px; overflow: hidden;
}
.mycard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mycard h3 { font-size: 17.5px; margin-bottom: 6px; }
.mycard-meta { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.mycard-actions { display: flex; flex-direction: column; gap: 9px; }

.bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--gradient); transition: width .4s ease; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-row .bar { flex: 1; }
.bar-label { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 74px; }

/* Tables (orders, admin) */
.table-wrap {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    overflow-x: auto; background: var(--surface);
}
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
table.tbl th {
    text-align: left; padding: 14px 18px; font-size: 11.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
    background: rgba(4, 8, 20, .5); border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.tbl td { padding: 15px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: rgba(255, 255, 255, .022); }
table.tbl .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--text-muted); }
table.tbl .row-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 34px; align-items: start; }
.co-item { display: flex; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.co-item-thumb {
    width: 116px; aspect-ratio: 16/9; border-radius: var(--radius-sm); flex: 0 0 auto;
    display: grid; place-items: center; font-size: 24px; overflow: hidden;
}
.co-item h3 { font-size: 16.5px; margin-bottom: 5px; line-height: 1.35; }
.co-item p { font-size: 13px; color: var(--text-dim); }

.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14.5px; color: var(--text-muted); }
.sum-row.total {
    border-top: 1px solid var(--border); margin-top: 10px; padding-top: 16px;
    font-size: 18px; font-weight: 700; color: var(--text); font-family: var(--font-display);
}
.sum-row .off { color: var(--green); }

.coupon-row { display: flex; gap: 9px; margin: 6px 0 18px; }
.coupon-row input {
    flex: 1; padding: 12px 14px; text-transform: uppercase;
    background: rgba(4, 8, 20, .62); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); color: var(--text); font-size: 14px; letter-spacing: .05em;
}
.coupon-row input:focus { outline: none; border-color: rgba(88, 230, 255, .5); }
.coupon-applied {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; margin-bottom: 18px;
    background: rgba(74, 222, 128, .09); border: 1px solid rgba(74, 222, 128, .28);
    border-radius: var(--radius-sm); font-size: 13.5px; color: #a7f3c0;
}
.coupon-applied button { background: none; border: 0; color: inherit; cursor: pointer; text-decoration: underline; font-size: 12.5px; }

.trust-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font-size: 12.5px; color: var(--text-dim); }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row svg { width: 14px; height: 14px; color: var(--green); }

/* --------------------------------------------------------------------------
   Learning player
   -------------------------------------------------------------------------- */
body.learn-mode { overflow: hidden; }

.lay {
    display: grid; grid-template-columns: minmax(0, 1fr) 372px;
    height: 100vh; padding-top: var(--nav-h);
}
.lay-main { overflow-y: auto; overflow-x: hidden; }
.lay-side {
    border-left: 1px solid var(--border); background: rgba(4, 8, 20, .58);
    display: flex; flex-direction: column; overflow: hidden;
}

/* Player stage */
.stage {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: #01030a; overflow: hidden;
    /* Kills long-press "save image/video" menus on mobile. */
    -webkit-touch-callout: none;
}
.stage.is-pdf { aspect-ratio: auto; height: calc(100vh - var(--nav-h) - 132px); min-height: 480px; }
.stage iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Masks the Drive "pop out / open in new window" control so learners can't
   jump straight to the Drive UI. Purely cosmetic — real protection is the
   Drive-side download/print/copy setting. */
.stage-mask {
    position: absolute; top: 0; right: 0; width: 74px; height: 54px;
    background: #01030a; z-index: 4; pointer-events: auto;
}
.stage.is-pdf .stage-mask { width: 128px; height: 50px; }

/* Transparent shield: blocks right-click + drag on the embed without
   swallowing playback clicks (JS re-forwards taps to the iframe centre). */
.stage-shield { position: absolute; inset: 0; z-index: 3; background: transparent; }
.stage-shield.pass-through { pointer-events: none; }

/* Per-user watermark — the actual anti-leak measure. Traceable, not preventive. */
.wm {
    position: absolute; z-index: 5; pointer-events: none;
    font-size: 12px; font-weight: 600; letter-spacing: .04em;
    color: rgba(255, 255, 255, .30);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
    white-space: nowrap; user-select: none;
    transition: opacity .8s ease, top 1.4s ease, left 1.4s ease;
    font-variant-numeric: tabular-nums;
}
.wm-corner { bottom: 12px; right: 14px; font-size: 11px; color: rgba(255,255,255,.22); }
.wm-float { top: 40%; left: 30%; }
.wm-big {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 34px; font-weight: 700;
    color: rgba(255, 255, 255, .055); letter-spacing: .1em;
    transform: rotate(-22deg); user-select: none; text-align: center; line-height: 1.6;
}

/* Blur curtain used on devtools/blur/print detection */
.guard {
    position: fixed; inset: 0; z-index: 400;
    display: none; place-items: center; text-align: center; padding: 40px;
    background: rgba(3, 7, 17, .97); backdrop-filter: blur(26px);
}
.guard.on { display: grid; }
.guard-inner { max-width: 460px; }
.guard-icon { font-size: 42px; margin-bottom: 18px; }
.guard h2 { font-size: 22px; margin-bottom: 12px; }
.guard p { color: var(--text-muted); font-size: 14.5px; margin-bottom: 22px; line-height: 1.7; }

/* Lesson header + tabs below the player */
.lesson-bar { padding: 22px 30px; border-bottom: 1px solid var(--border); }
.lesson-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.lesson-bar h1 { font-size: 21px; margin-bottom: 12px; }
.lesson-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lesson-nav .spacer { flex: 1; }

.panel { padding: 26px 30px 60px; }
.panel h2 { font-size: 18px; margin-bottom: 12px; }
.res-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.res-list a {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 14.5px;
    transition: border-color .16s ease, background .16s ease;
}
.res-list a:hover { border-color: rgba(88, 230, 255, .3); background: var(--surface-2); }
.res-list svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }

/* Sidebar curriculum */
.side-head { padding: 20px 22px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.side-head h2 { font-size: 15px; margin-bottom: 12px; }
.side-scroll { flex: 1; overflow-y: auto; padding-bottom: 30px; }

.side-sec { border-bottom: 1px solid var(--border); }
.side-sec-head {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 14px 22px; background: none; border: 0; cursor: pointer; text-align: left;
}
.side-sec-head:hover { background: var(--surface); }
.side-sec-head svg { width: 15px; height: 15px; color: var(--text-dim); transition: transform .2s ease; flex: 0 0 auto; }
.side-sec.open .side-sec-head svg { transform: rotate(180deg); }
.side-sec-title { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; }
.side-sec-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; font-weight: 400; }
.side-sec-body { display: none; }
.side-sec.open .side-sec-body { display: block; }

.side-lesson {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 22px 11px 26px; font-size: 13.5px; color: var(--text-muted);
    border-left: 2px solid transparent; line-height: 1.45;
    transition: background .14s ease, color .14s ease;
}
.side-lesson:hover { background: var(--surface); color: var(--text); }
.side-lesson.is-current {
    background: rgba(88, 230, 255, .09); border-left-color: var(--accent); color: var(--text); font-weight: 600;
}
.side-lesson-tick {
    width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto; margin-top: 2px;
    border: 1.5px solid var(--border-strong); display: grid; place-items: center;
}
.side-lesson.is-done .side-lesson-tick { background: rgba(74, 222, 128, .18); border-color: rgba(74, 222, 128, .5); }
.side-lesson.is-done .side-lesson-tick svg { width: 10px; height: 10px; color: var(--green); }
.side-lesson-body { flex: 1; min-width: 0; }
.side-lesson-time { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

/* No-source placeholder */
.stage-blank {
    position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 40px;
    background: linear-gradient(135deg, #0a1226, #050b18);
}
.stage-blank-inner { max-width: 400px; }
.stage-blank .icon { font-size: 40px; margin-bottom: 16px; opacity: .8; }
.stage-blank h3 { font-size: 18px; margin-bottom: 10px; }
.stage-blank p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }

/* Locked lesson */
.stage-locked { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 40px; background: rgba(3,7,17,.94); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.pfoot { border-top: 1px solid var(--border); padding: 46px 0 34px; margin-top: 40px; background: rgba(2, 5, 12, .5); }
.pfoot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 34px; }
.pfoot h4 { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.pfoot ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pfoot ul a { font-size: 14px; color: var(--text-muted); }
.pfoot ul a:hover { color: var(--accent); }
.pfoot-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 12px; }
.pfoot-brand svg { width: 24px; height: 24px; }
.pfoot-about { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; max-width: 300px; }
.pfoot-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-dim);
}
.pfoot-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.pfoot-bottom a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Ask-a-doubt / contact form
   -------------------------------------------------------------------------- */
.askbox {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px;
}
.askbox-title { font-size: 19px; margin-bottom: 8px; }
.askbox-blurb {
    font-size: 14px; color: var(--text-muted); line-height: 1.65;
    margin-bottom: 20px; max-width: 560px;
}
.askform-as {
    font-size: 13.5px; color: var(--text-dim); margin-bottom: 16px;
    padding: 10px 14px; background: rgba(88, 230, 255, .06);
    border: 1px solid rgba(88, 230, 255, .18); border-radius: var(--radius-sm);
}
.askform-as strong { color: var(--text); }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.askform-hp {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

.askform-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.askform-status { font-size: 13.5px; color: var(--text-muted); margin: 0; flex: 1 1 200px; }
.askform-status.is-ok    { color: var(--green); font-weight: 600; }
.askform-status.is-error { color: var(--red); }

/* --------------------------------------------------------------------------
   Content protection: kill selection, drag and print on protected pages
   -------------------------------------------------------------------------- */
.noselect, .noselect * {
    user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
    -webkit-touch-callout: none;
}
.noselect img, .noselect iframe, .noselect video { -webkit-user-drag: none; pointer-events: auto; }

/*
 * Re-enable selection where it is genuinely needed. Without this, the blanket
 * .noselect rule above also blocked typing/selecting inside form fields on the
 * player page, so the doubt form could not be used at all.
 */
.noselect input, .noselect textarea, .noselect select,
.noselect [data-selectable], .noselect [data-selectable] * {
    user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text;
    -webkit-touch-callout: default;
}

/* Print-to-PDF is a screenshot route. Blank the page for print media. */
@media print {
    body.protected * { display: none !important; }
    body.protected::after {
        content: 'Printing is disabled for licensed course content.';
        display: block !important; font-family: sans-serif; font-size: 16px;
        padding: 40px; color: #000;
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
    .cd-hero-grid, .cd-layout { grid-template-columns: 1fr; gap: 32px; }
    .buy-card { position: static; max-width: 460px; }
    .cd-hero .buy-card { display: none; }        /* mobile uses the sticky bar */
    .cd-layout .buy-card { display: block; }
    .lay { grid-template-columns: minmax(0, 1fr) 320px; }
    .co-grid { grid-template-columns: 1fr; }
    .pfoot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 900px) {
    .pnav-links { display: none; }
    .pnav-toggle { display: flex; }
    .pnav-right .btn-ghost { display: none; }
    .learn-grid { grid-template-columns: 1fr; }
    .mycard { grid-template-columns: 160px minmax(0, 1fr); }
    .mycard-actions { grid-column: 1 / -1; flex-direction: row; }
    .buy-bar { display: flex; }
    .cd-body { padding-bottom: 110px; }

    /* Player: stack the curriculum under the video */
    body.learn-mode { overflow: auto; }
    .lay { grid-template-columns: 1fr; height: auto; }
    .lay-side { border-left: 0; border-top: 1px solid var(--border); max-height: none; }
    .lay-main { overflow: visible; }
    .stage.is-pdf { height: 72vh; min-height: 380px; }
    .wm-big { font-size: 22px; }
}

@media (max-width: 640px) {
    .shell { padding: 0 18px; }
    .page { padding-top: calc(var(--nav-h) + 30px); }
    .card, .card-pad-lg, .learn-box { padding: 20px; }
    .auth-card { padding: 28px 22px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .mycard { grid-template-columns: 1fr; }
    .pnav-logo .tagline { display: none; }
    .acct-name { display: none; }
    .cur-head { padding: 15px 16px; }
    .cur-lesson { padding-left: 16px; padding-right: 16px; }
    .lesson-bar, .panel { padding-left: 18px; padding-right: 18px; }
    .side-sec-head, .side-lesson { padding-left: 18px; padding-right: 18px; }
    .pfoot-grid { grid-template-columns: 1fr; }
    .tutor { flex-direction: column; gap: 16px; }
    .stat-value { font-size: 24px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ========================================================================== 
   HACKWITHPRO AURORA 2.0 — Academy premium visual redesign
   Preserves all existing PHP and JavaScript state selectors.
   ========================================================================== */
:root {
    --bg: #02030a;
    --bg-soft: #070a18;
    --surface: rgba(12, 18, 42, 0.66);
    --surface-2: rgba(24, 33, 72, 0.72);
    --surface-strong: rgba(30, 41, 86, 0.82);
    --border: rgba(163, 187, 255, 0.14);
    --border-strong: rgba(170, 196, 255, 0.24);
    --text: #f8faff;
    --text-muted: rgba(222, 230, 255, 0.68);
    --text-dim: rgba(209, 220, 255, 0.46);
    --accent: #73e7ff;
    --accent2: #7467ff;
    --accent3: #ff8b72;
    --green: #55e69b;
    --amber: #ffd166;
    --red: #ff7d91;
    --gradient: linear-gradient(125deg, #73e7ff 0%, #7467ff 48%, #ff8b72 100%);
    --gradient-cool: linear-gradient(135deg, #73e7ff, #7087ff 52%, #c084fc);
    --radius: 26px;
    --radius-md: 18px;
    --radius-sm: 13px;
    --shadow: 0 28px 80px rgba(0, 0, 0, .43), 0 8px 28px rgba(40, 47, 120, .16);
    --shadow-hover: 0 34px 90px rgba(0, 0, 0, .5), 0 0 52px rgba(91, 72, 255, .13);
    --nav-h: 82px;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
}

body {
    background-color: var(--bg);
    background-image:
        linear-gradient(rgba(147,169,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(147,169,255,.028) 1px, transparent 1px),
        radial-gradient(ellipse 80% 56% at 72% -12%, rgba(102,81,255,.25), transparent 66%),
        radial-gradient(ellipse 54% 45% at -8% 36%, rgba(35,205,255,.13), transparent 70%),
        radial-gradient(ellipse 54% 42% at 98% 82%, rgba(255,113,105,.09), transparent 70%);
    background-size: 72px 72px, 72px 72px, auto, auto, auto;
    background-attachment: fixed;
}
body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background: radial-gradient(circle at 50% 15%, transparent 0, rgba(2,3,10,.28) 75%);
}
::selection { background: rgba(115,231,255,.24); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #03040d; }
::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #73e7ff, #7467ff); border: 3px solid #03040d; border-radius: 999px; }

.shell { max-width: 1280px; padding-inline: 28px; }
.page { padding-top: calc(var(--nav-h) + 58px); }
.page-tight { padding-top: calc(var(--nav-h) + 40px); }
h1, h2, h3, h4, h5 { letter-spacing: -.035em; text-wrap: balance; }
.text-gradient { background-size: 180% auto; animation: platformGradient 8s ease-in-out infinite; filter: drop-shadow(0 8px 30px rgba(116,103,255,.14)); }
@keyframes platformGradient { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }

/* Floating, luminous Academy navigation */
.pnav {
    inset: 12px 50% auto auto;
    transform: translateX(50%);
    width: min(1240px, calc(100% - 28px));
    height: 68px;
    padding: 0 12px 0 18px;
    border: 1px solid rgba(170,194,255,.17);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(10,15,34,.9), rgba(6,9,23,.77));
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 18px 55px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.08);
}
.pnav-logo { min-height: 44px; letter-spacing: -.035em; }
.pnav-logo svg { filter: drop-shadow(0 0 12px rgba(115,231,255,.3)); }
.pnav-logo .tagline { color: var(--accent); background: rgba(115,231,255,.065); border: 1px solid rgba(115,231,255,.13); border-radius: 7px; padding: 3px 7px; margin-left: 2px; }
.pnav-links { gap: 3px; }
.pnav-links a { padding: 10px 13px; border-radius: 11px; }
.pnav-links a:hover, .pnav-links a.is-active { background: linear-gradient(135deg, rgba(115,231,255,.075), rgba(116,103,255,.09)); }
.pnav-links a.is-active { box-shadow: inset 0 0 0 1px rgba(115,231,255,.12); }
.pnav-toggle { width: 46px; height: 46px; border: 1px solid transparent; }
.pnav-toggle:hover { border-color: var(--border); }
.pnav-toggle[aria-expanded=true] span { background: transparent; }
.pnav-toggle[aria-expanded=true] span::before { top: 0; transform: rotate(45deg); }
.pnav-toggle[aria-expanded=true] span::after { top: 0; transform: rotate(-45deg); }
.pnav-toggle span, .pnav-toggle span::before, .pnav-toggle span::after { transition: transform .25s var(--ease-out), top .25s, background .2s; }
.acct-btn { min-height: 44px; background: linear-gradient(135deg, rgba(115,231,255,.06), rgba(116,103,255,.07)); box-shadow: inset 0 1px rgba(255,255,255,.08); }
.acct-avatar { color: #fff; box-shadow: 0 7px 20px rgba(102,83,255,.28); }
.acct-menu { background: rgba(7,11,27,.94); border-color: var(--border-strong); box-shadow: var(--shadow); }

.pnav-drawer {
    inset: 92px 14px auto;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0, rgba(116,103,255,.2), transparent 40%),
        rgba(5,8,21,.96);
    box-shadow: var(--shadow);
    transform-origin: top;
    animation: drawerIn .3s var(--ease-out);
}
@keyframes drawerIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.pnav-drawer a { min-height: 48px; display: flex; align-items: center; }
body.drawer-open { overflow: hidden; }

/* Shared dimensional surfaces */
.card, .filters, .ccard, .buy-card, .learn-box, .feat-item, .curriculum,
.faq-item, .auth-card, .auth-context, .stat, .mycard, .table-wrap, .askbox {
    background: linear-gradient(145deg, rgba(18,25,54,.74), rgba(7,10,25,.67));
    border-color: rgba(160,184,255,.15);
    box-shadow: 0 20px 55px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.07);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.card, .askbox { position: relative; overflow: hidden; }
.card::before, .askbox::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(120deg, rgba(115,231,255,.055), transparent 28%, transparent 72%, rgba(255,139,114,.045));
}
.card > *, .askbox > * { position: relative; z-index: 1; }

/* Physical buttons and controls */
.btn {
    min-height: 48px; padding: 13px 24px; border-radius: 14px;
    transition: transform .28s var(--ease-out), box-shadow .28s, filter .2s, border-color .2s, background .2s;
    touch-action: manipulation;
}
.btn-sm { min-height: 42px; padding: 9px 16px; border-radius: 12px; }
.btn-primary { color: #fff; background: var(--gradient); box-shadow: 0 14px 38px rgba(87,76,255,.32), inset 0 1px rgba(255,255,255,.36); position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 42%; transform: skewX(-24deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transition: left .7s var(--ease-out); }
.btn-primary:hover::after { left: 130%; }
.btn-solid { background: linear-gradient(135deg, #5968ff, #7866ff); box-shadow: 0 12px 30px rgba(88,82,255,.25); }
.btn-ghost, .btn-outline { background: rgba(10,14,34,.58); border-color: var(--border-strong); box-shadow: inset 0 1px rgba(255,255,255,.06); }

.badge { box-shadow: inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(10px); }
.flash { backdrop-filter: blur(12px); box-shadow: 0 14px 36px rgba(0,0,0,.15); }
.empty { background: linear-gradient(145deg, rgba(18,25,54,.48), rgba(7,10,25,.48)); }

/* Forms: cleaner, larger, and mobile zoom-safe */
.input, .field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=url], .field input[type=date],
.field input[type=tel], .field select, .field textarea,
.search-box input, .filters select, .coupon-row input {
    min-height: 50px;
    background-color: rgba(3,6,18,.68);
    border-color: rgba(164,187,255,.19);
    box-shadow: inset 0 1px 9px rgba(0,0,0,.2);
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus,
.search-box input:focus, .filters select:focus, .coupon-row input:focus {
    border-color: rgba(115,231,255,.62);
    box-shadow: 0 0 0 4px rgba(115,231,255,.1), 0 14px 34px rgba(0,0,0,.18);
}
.check input[type=checkbox], .check input[type=radio] { width: 19px; height: 19px; }
.pw-toggle { width: 42px; height: 42px; display: grid; place-items: center; }

/* Catalog presentation */
.cat-hero { max-width: 820px; margin-bottom: 52px; }
.eyebrow { padding: 7px 12px; border: 1px solid rgba(115,231,255,.16); border-radius: 999px; background: rgba(115,231,255,.055); }
.cat-hero h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.02; letter-spacing: -.055em; }
.cat-hero p { font-size: clamp(16px, 2vw, 19px); }
.cat-stat { background: rgba(13,19,43,.64); border-color: rgba(164,187,255,.15); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.filters { padding: 18px; border-radius: 20px; }
.course-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 26px; }
.ccard { border-radius: 26px; isolation: isolate; }
.ccard::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(120deg, rgba(115,231,255,.06), transparent 28%, transparent 72%, rgba(255,139,114,.045)); }
.ccard-thumb { aspect-ratio: 16 / 9.2; }
.ccard-thumb::after { background: linear-gradient(180deg, transparent 35%, rgba(2,3,10,.72) 100%); }
.ccard-body, .owned-strip { position: relative; z-index: 3; }
.ccard-body { padding: 23px; }
.ccard-title { font-size: 19px; }
.price-now { font-size: 24px; }

/* Course sales page */
.cd-hero { padding-top: calc(var(--nav-h) + 64px); padding-bottom: 66px; }
.cd-hero::before {
    background:
        linear-gradient(rgba(147,169,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(147,169,255,.03) 1px, transparent 1px),
        radial-gradient(circle at 16% 4%, rgba(116,103,255,.3), transparent 42%),
        radial-gradient(circle at 84% 12%, rgba(115,231,255,.17), transparent 38%);
    background-size: 72px 72px, 72px 72px, auto, auto;
}
.cd-hero-grid, .cd-layout { gap: 52px; }
.cd-title { font-size: clamp(34px, 5vw, 54px); line-height: 1.04; letter-spacing: -.05em; }
.cd-sub { font-size: 18px; }
.cd-facts span { padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.035); }
.cd-author-avatar, .cd-author-fallback { box-shadow: 0 9px 25px rgba(87,76,255,.22); }
.buy-card { border-radius: 28px; box-shadow: var(--shadow); }
.buy-preview::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(2,3,10,.45)); }
.buy-preview-play, .buy-preview-label { z-index: 2; }
.buy-preview-play span:not(.buy-preview-label) { box-shadow: 0 14px 36px rgba(0,0,0,.42), 0 0 0 8px rgba(255,255,255,.1); }
.buy-body { padding: 28px; }
.buy-price-now { font-size: 38px; }
.learn-box { padding: 32px; }
.feat-item { padding: 24px 18px; }
.feat-icon { width: 48px; height: 48px; border-radius: 15px; }
.curriculum { border-radius: 22px; }
.cur-head { background: rgba(14,20,45,.68); min-height: 70px; }
.cur-body { background: rgba(2,5,16,.45); }
.cur-lesson { min-height: 48px; }
.faq-item { border-radius: 17px; }
.faq-q { min-height: 60px; }
.tutor-photo, .tutor-photo-fallback { border-radius: 24px; box-shadow: 0 18px 42px rgba(0,0,0,.26); }
.buy-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: rgba(4,7,19,.92); border-color: var(--border-strong); box-shadow: 0 -15px 45px rgba(0,0,0,.34); }

/* Auth becomes a premium focused portal */
.auth-wrap { min-height: 100svh; padding-top: calc(var(--nav-h) + 48px); position: relative; overflow: hidden; }
.auth-wrap::before, .auth-wrap::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(20px); }
.auth-wrap::before { width: 440px; height: 440px; top: 8%; right: -160px; background: radial-gradient(circle, rgba(116,103,255,.2), transparent 68%); }
.auth-wrap::after { width: 380px; height: 380px; bottom: -150px; left: -120px; background: radial-gradient(circle, rgba(115,231,255,.12), transparent 68%); }
.auth-card { max-width: 470px; padding: 42px 38px; border-radius: 28px; position: relative; z-index: 1; }
.auth-card::before { content: ''; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent); }
.auth-head h1 { font-size: 31px; }
.auth-context { background: linear-gradient(135deg, rgba(115,231,255,.07), rgba(116,103,255,.08)); }

/* Dashboard, account, and checkout */
.dash-head h1 { font-size: clamp(32px, 4vw, 44px); }
.stat-row { gap: 18px; }
.stat { position: relative; overflow: hidden; padding: 24px; }
.stat::after { content: ''; position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -30px; top: -32px; background: radial-gradient(circle, rgba(115,231,255,.13), transparent 70%); }
.stat-value { font-size: 32px; background: var(--gradient-cool); background-clip: text; -webkit-background-clip: text; color: transparent; }
.tabs { gap: 8px; padding: 6px; border: 1px solid var(--border); border-radius: 15px; background: rgba(8,12,29,.46); }
.tabs a, .tabs button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 10px; }
.tabs .is-active { background: linear-gradient(135deg, rgba(115,231,255,.09), rgba(116,103,255,.12)); box-shadow: inset 0 0 0 1px rgba(115,231,255,.14); }
.mycard { padding: 20px; border-radius: 24px; }
.mycard-thumb { border-radius: 16px; box-shadow: 0 14px 34px rgba(0,0,0,.24); }
.bar { height: 8px; background: rgba(255,255,255,.075); }
.bar-fill { box-shadow: 0 0 18px rgba(115,231,255,.32); }
.table-wrap { border-radius: 19px; }
table.tbl th { background: rgba(3,6,18,.62); }
.co-grid { gap: 40px; }
.co-item-thumb { border-radius: 15px; box-shadow: 0 12px 30px rgba(0,0,0,.24); }
.coupon-applied { background: linear-gradient(135deg, rgba(85,230,155,.1), rgba(115,231,255,.06)); }

/* Learning environment */
.lay { height: 100dvh; }
.lay-side { background: rgba(4,7,19,.78); backdrop-filter: blur(18px); }
.stage { background: radial-gradient(circle at 50% 50%, #080d22, #010208 72%); }
.lesson-bar { background: linear-gradient(180deg, rgba(10,14,33,.56), rgba(5,8,20,.42)); }
.panel { max-width: 1000px; }
.res-list a { background: linear-gradient(135deg, rgba(18,25,54,.66), rgba(7,10,25,.62)); min-height: 54px; }
.side-head { background: rgba(10,14,32,.72); }
.side-sec-head { min-height: 58px; }
.side-lesson { min-height: 48px; }
.side-lesson.is-current { background: linear-gradient(90deg, rgba(115,231,255,.12), rgba(116,103,255,.055)); }
.side-lesson-tick { background: rgba(3,6,18,.7); }
.guard { background: radial-gradient(circle at 50% 30%, rgba(116,103,255,.18), transparent 40%), rgba(2,3,10,.97); }

/* Footer with a stronger brand finish */
.pfoot { position: relative; overflow: hidden; padding-top: 62px; background: linear-gradient(180deg, rgba(5,8,21,.62), rgba(2,3,10,.9)); }
.pfoot::before { content: ''; position: absolute; width: 520px; height: 300px; left: -140px; top: -160px; background: radial-gradient(circle, rgba(115,231,255,.1), transparent 68%); pointer-events: none; }
.pfoot-brand { font-size: 20px; }
.pfoot-brand svg { filter: drop-shadow(0 0 12px rgba(115,231,255,.28)); }
.pfoot ul a { display: inline-flex; min-height: 30px; align-items: center; transition: color .2s, transform .2s; }
.pfoot ul a:hover { transform: translateX(3px); }

@media (hover: hover) and (pointer: fine) {
    .ccard, .feat-item, .stat, .mycard, .card, .askbox { transition: transform .32s var(--ease-out), border-color .25s, box-shadow .32s; }
    .ccard:hover { transform: translateY(-9px); border-color: rgba(115,231,255,.3); box-shadow: var(--shadow-hover); }
    .feat-item:hover, .stat:hover { transform: translateY(-5px); border-color: rgba(115,231,255,.25); box-shadow: 0 26px 65px rgba(0,0,0,.32); }
    .mycard:hover { transform: translateY(-3px); box-shadow: 0 25px 65px rgba(0,0,0,.3); }
    .btn-primary:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 20px 48px rgba(87,76,255,.42), 0 0 28px rgba(115,231,255,.11); }
    .btn-ghost:hover, .btn-outline:hover { transform: translateY(-2px); border-color: rgba(115,231,255,.3); }
}

/* Tablet and mobile are a first-class layout, not a scaled desktop */
@media (max-width: 1120px) {
    .cd-hero-grid, .cd-layout { gap: 36px; }
    .buy-card { max-width: 540px; }
}

@media (max-width: 900px) {
    :root { --nav-h: 76px; }
    .pnav { top: 8px; width: calc(100% - 16px); height: 62px; border-radius: 18px; }
    .pnav-drawer { top: 78px; left: 8px; right: 8px; }
    .buy-bar { gap: 10px; }
    .lay { padding-top: var(--nav-h); }
    .lay-side { backdrop-filter: none; }
    .stage.is-pdf { height: 72dvh; }
}

@media (max-width: 640px) {
    body { background-attachment: scroll; background-size: 52px 52px, 52px 52px, auto, auto, auto; }
    .shell { padding-inline: 16px; }
    .page { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 68px; }
    .pnav { padding-inline: 10px 8px; gap: 8px; }
    .pnav-logo { gap: 7px; font-size: 16px; }
    .pnav-logo svg { width: 24px; height: 24px; }
    .pnav-right { gap: 6px; }
    .pnav-right > .btn-primary { padding-inline: 14px; font-size: 13px; }
    .acct-btn { padding-right: 6px; }
    .acct-caret { display: none; }
    .card, .card-pad-lg, .learn-box, .askbox { padding: 20px; border-radius: 20px; }
    .auth-card { padding: 30px 20px; border-radius: 22px; }
    .cat-hero { margin-bottom: 34px; }
    .cat-hero h1 { font-size: clamp(34px, 10vw, 46px); }
    .cat-hero p { font-size: 16px; }
    .cat-stats { gap: 8px; }
    .cat-stat { padding: 7px 12px; }
    .filters, .filters form { align-items: stretch; flex-direction: column; }
    .search-box { flex-basis: auto; }
    .filters select, .filters .btn { width: 100%; }
    .course-grid { gap: 18px; }
    .ccard-body { padding: 20px; }
    .cd-hero { padding-top: calc(var(--nav-h) + 34px); padding-bottom: 42px; }
    .cd-title { font-size: clamp(31px, 10vw, 42px); }
    .cd-sub { font-size: 16px; }
    .cd-facts { gap: 7px; }
    .cd-facts span { width: 100%; }
    .cd-body { padding-top: 38px; }
    .cd-section { margin-bottom: 38px; }
    .cd-section > h2 { font-size: 22px; }
    .buy-body { padding: 22px; }
    .buy-price-now { font-size: 32px; }
    .learn-box { padding: 20px; }
    .feat-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
    .feat-item { padding: 18px 12px; }
    .cur-head { min-height: 64px; }
    .cur-num { display: none; }
    .cur-lesson { align-items: flex-start; }
    .cur-lesson-time { margin-left: auto; }
    .tutor-photo, .tutor-photo-fallback { width: 82px; height: 82px; }
    .auth-wrap { align-items: start; padding: calc(var(--nav-h) + 32px) 14px 40px; }
    .auth-head h1 { font-size: 27px; }
    .dash-head { align-items: stretch; }
    .dash-head .btn { width: 100%; }
    .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat { padding: 18px; }
    .stat-value { font-size: 26px; }
    .tabs { margin-inline: -2px; overflow-x: auto; }
    .mycard { padding: 14px; }
    .mycard-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .mycard-actions .btn { width: 100%; }
    .co-item { align-items: flex-start; }
    .co-item-thumb { width: 92px; }
    .coupon-row { flex-direction: column; }
    .coupon-row .btn { width: 100%; }
    .input, .field input[type=text], .field input[type=email], .field input[type=password],
    .field input[type=number], .field input[type=url], .field input[type=date],
    .field input[type=tel], .field select, .field textarea,
    .search-box input, .filters select, .coupon-row input { font-size: 16px; }
    .lesson-bar, .panel { padding-inline: 16px; }
    .lesson-nav { display: grid; grid-template-columns: 1fr 1fr; }
    .lesson-nav .spacer { display: none; }
    .lesson-nav .btn { width: 100%; padding-inline: 12px; }
    .side-sec-head, .side-lesson { padding-inline: 16px; }
    .pfoot { padding-top: 44px; }
    .pfoot-bottom { align-items: flex-start; }
    .pfoot-bottom nav { flex-direction: column; gap: 8px; }
    .card, .filters, .ccard, .buy-card, .learn-box, .feat-item, .curriculum,
    .faq-item, .auth-card, .auth-context, .stat, .mycard, .table-wrap, .askbox { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

@media (max-width: 420px) {
    .pnav-logo b { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pnav-right > .btn-primary { display: none; }
    .feat-strip, .stat-row { grid-template-columns: 1fr; }
    .ccard-foot { align-items: flex-end; }
    .mycard-actions { grid-template-columns: 1fr; }
    .co-item { flex-direction: column; }
    .co-item-thumb { width: 100%; }
    .buy-bar { padding-inline: 10px; }
    .buy-bar .price-now { font-size: 18px; }
    .buy-bar .btn { padding-inline: 14px; font-size: 13px; }
    .lesson-nav { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .text-gradient { animation: none; }
    .btn-primary::after { display: none; }
}

/* ==========================================================================
   ACADEMY: shell trim + mobile hardening
   Matches the landing page: 5% tighter each side on desktop, full-bleed phones.
   ========================================================================== */
.shell { max-width: min(1400px, 84vw); }
.shell-narrow { max-width: min(920px, 84vw); }
.pnav { width: min(1380px, 84vw); }

@media (max-width: 1024px) {
    .shell { max-width: 92vw; }
    .shell-narrow { max-width: 92vw; }
    .pnav { width: min(100%, 94vw); }
}

@media (max-width: 900px) {
    .pnav { width: calc(100% - 16px); }

    /* The drawer can hold many links when signed in — let it scroll. */
    .pnav-drawer {
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 640px) {
    html, body { overflow-x: hidden; max-width: 100%; }
    .shell, .shell-narrow { max-width: 100%; padding-inline: 16px; }

    /* Nothing overflows sideways */
    .course-grid, .stat-row, .feat-strip, .cd-hero-grid, .cd-layout, .co-grid { max-width: 100%; }
    .ccard-title, .cd-title, .cd-sub, .buy-price-now, .prose, .askbox-blurb { overflow-wrap: anywhere; }

    /* Tables stay usable by scrolling inside their own container */
    .table-wrap { -webkit-overflow-scrolling: touch; }

    a, button, .btn { -webkit-tap-highlight-color: rgba(115, 231, 255, .14); }

    /* Respect the home-gesture area */
    .pfoot { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
    .page, .page-tight { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
    .shell, .shell-narrow { padding-inline: 13px; }
}

/* ==========================================================================
   MOBILE NAV TOGGLE — deterministic visibility
   --------------------------------------------------------------------------
   Same inversion applied to the landing page: the drawer button is visible by
   default and hidden only at desktop widths via `min-width`. It was previously
   `display: none` in the base rule (line ~156) and switched on 950 lines later
   inside `@media (max-width: 900px)`, with two unconditional re-declarations
   in between — a fragile arrangement for the one control a phone cannot do
   without.
   ========================================================================== */
.pnav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    -webkit-appearance: none;
    appearance: none;
}

@media (min-width: 901px) {
    .pnav-toggle { display: none; }
}

/* Never let the brand squeeze the toggle out of the capsule. */
@media (max-width: 900px) {
    .pnav { flex-wrap: nowrap; }
    .pnav-logo { min-width: 0; flex: 0 1 auto; overflow: hidden; }
    .pnav-logo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ==========================================================================
   LEGAL CENTRE — legal.php
   Six documents share one template, so the typography lives here instead of
   being repeated as inline styles on every heading.
   ========================================================================== */
.legal-tabs { margin-bottom: 30px; flex-wrap: nowrap; }

.legal-head { margin-bottom: 30px; }
.legal-head h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 10px; }
.legal-meta { font-size: 13.5px; color: var(--text-dim); margin-bottom: 12px; }
.legal-meta span { padding: 0 6px; opacity: .6; }
.legal-lede { font-size: 16px; color: var(--text-muted); max-width: 62ch; line-height: 1.7; }

.legal-doc h2 {
    font-size: 20px;
    margin: 34px 0 12px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    color: var(--text);
}
.legal-doc > h2:first-child,
.legal-doc .legal-note + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-doc h3 { font-size: 16px; margin: 24px 0 8px; color: var(--text); }
.legal-doc .bullets { margin: 4px 0 18px; }
.legal-doc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88em; padding: 2px 6px; border-radius: 6px;
    background: rgba(115, 231, 255, .09); color: var(--accent);
}
.legal-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:hover { text-decoration-thickness: 2px; }

.legal-note { display: block; margin-bottom: 28px; line-height: 1.7; }
.legal-note a { color: inherit; }

/* Comparison tables (licence grid, refund timelines, cookie list) */
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.legal-table th,
.legal-table td {
    padding: 12px 14px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.legal-table thead th {
    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-dim); background: rgba(255, 255, 255, .025);
    border-bottom-color: var(--border-strong);
}
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { color: var(--text); font-weight: 500; }
.legal-doc .table-wrap { margin: 4px 0 20px; overflow-x: auto; border-radius: var(--radius-sm); }

/* "Other documents" cross-links under each page */
.legal-foot { margin-top: 34px; }
.legal-foot > h2 {
    font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 14px;
}
.legal-foot-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.legal-foot-links a {
    display: block; padding: 16px 18px; border-radius: var(--radius-md);
    border: 1px solid var(--border); background: var(--surface);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.legal-foot-links a:hover { border-color: var(--border-strong); background: var(--surface-2); }
.legal-foot-links strong { display: block; font-size: 14.5px; color: var(--text); margin-bottom: 5px; }
.legal-foot-links span { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.legal-foot-contact { margin-top: 24px; }
.legal-foot-contact a { color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
    .legal-foot-links a:hover { transform: translateY(-2px); }
}

@media (max-width: 640px) {
    .legal-doc h2 { font-size: 18.5px; margin-top: 28px; padding-top: 18px; }
    .legal-table { font-size: 13.5px; }
    .legal-table th, .legal-table td { padding: 10px 12px; }
    .legal-foot-links { grid-template-columns: 1fr; }
}

/* Footer gained a dedicated Legal column, so the 4-track grid needs a 5th. */
.pfoot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; }

@media (max-width: 1120px) {
    .pfoot-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 30px 26px; }
}
@media (max-width: 760px) {
    .pfoot-grid { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
}
@media (max-width: 460px) {
    .pfoot-grid { grid-template-columns: 1fr; }
}

/* Six legal links stacked vertically made the footer absurdly tall on phones.
   Wrap them instead. */
@media (max-width: 640px) {
    .pfoot-bottom nav { flex-direction: row; gap: 10px 16px; }
}

/* ==========================================================================
   STORE
   Reuses the course vocabulary (.ccard, .co-grid, .sum-row, .buy-card) and only
   adds what the store genuinely needs: a nav cart, product cards with an action
   footer, cart rows, the library list and the online reader.
   ========================================================================== */

/* --- Nav cart -------------------------------------------------------------- */
.pnav-cart {
    position: relative; flex: 0 0 auto;
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid transparent; color: var(--text-muted);
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.pnav-cart:hover { color: var(--text); background: var(--surface); border-color: var(--border); }
.pnav-cart svg { width: 21px; height: 21px; }
.pnav-cart.has-items { color: var(--accent); }
.pnav-cart-count {
    position: absolute; top: 4px; right: 3px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: 999px; background: var(--gradient); color: #050913;
    font-size: 11px; font-weight: 800; line-height: 1;
    box-shadow: 0 3px 10px rgba(102, 83, 255, .4);
}
.pnav-cart-count[hidden] { display: none; }

/* --- Product cards --------------------------------------------------------- */
/* Covers are portrait, unlike the 16:9 course thumbnails. */
.pcard-thumb { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.pcard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pcard .ccard-body { display: flex; flex-direction: column; }
.pcard-actions { margin-top: auto; padding-top: 16px; }
.pcard-actions form { margin: 0; }

.store-trust { margin-top: 46px; }

/* --- Product detail cover -------------------------------------------------- */
.pd-cover {
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 3; border-radius: var(--radius);
    display: grid; place-items: center;
    border: 1px solid var(--border-strong);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .38);
}
.pd-cover img { width: 100%; height: 100%; object-fit: cover; }
.pd-cover > span { font-size: 72px; opacity: .9; }

.pd-preview {
    position: relative; overflow: hidden;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: #05070f; height: 60vh; min-height: 340px;
}
.pd-preview iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Cart ------------------------------------------------------------------ */
.cart-list { display: flex; flex-direction: column; gap: 14px; }
.cart-row {
    display: grid; grid-template-columns: 104px minmax(0, 1fr) auto;
    gap: 18px; align-items: center;
    padding: 16px; border-radius: var(--radius-md);
    border: 1px solid var(--border); background: var(--surface);
}
.cart-thumb {
    aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
    display: grid; place-items: center; font-size: 30px;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { min-width: 0; }
.cart-info .badge { margin-bottom: 8px; }
.cart-info h2 { font-size: 16.5px; margin-bottom: 5px; overflow-wrap: anywhere; }
.cart-info h2 a:hover { color: var(--accent); }
.cart-info p { margin-bottom: 2px; }
.cart-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-remove {
    background: none; border: 0; cursor: pointer; padding: 4px 0;
    font-size: 13px; color: var(--text-dim); text-decoration: underline;
    text-underline-offset: 3px; transition: color .16s ease;
}
.cart-remove:hover { color: var(--red); }
.cart-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: 20px;
}
.cart-foot form { margin: 0; }

/* --- Library --------------------------------------------------------------- */
.lib-list { display: flex; flex-direction: column; gap: 14px; }
.lib-row {
    display: grid; grid-template-columns: 116px minmax(0, 1fr) auto;
    gap: 18px; align-items: center;
    padding: 16px; border-radius: var(--radius-md);
    border: 1px solid var(--border); background: var(--surface);
}
.lib-thumb {
    aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
    display: grid; place-items: center; font-size: 32px;
}
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lib-info { min-width: 0; }
.lib-info .badge { margin-bottom: 8px; }
.lib-info h2 { font-size: 17px; margin-bottom: 6px; overflow-wrap: anywhere; }
.lib-info p { margin-bottom: 2px; }
.lib-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: right; }
.lib-actions .btn { white-space: nowrap; }

/* --- Online reader --------------------------------------------------------- */
.reader-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.reader-bar h1 { font-size: clamp(20px, 3vw, 26px); margin-bottom: 4px; }
.reader-stage {
    position: relative; overflow: hidden;
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: #05070f; height: 78vh; min-height: 420px;
}
.reader-stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.reader-wm {
    position: absolute; right: 14px; bottom: 14px; pointer-events: none;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(3, 7, 17, .6); color: rgba(226, 236, 255, .5);
    font-size: 11.5px; letter-spacing: .02em;
}

/* --- Add-to-cart toast ----------------------------------------------------- */
.cart-toast {
    position: fixed; z-index: 300;
    left: 50%; bottom: 26px; transform: translate(-50%, 14px);
    max-width: min(420px, calc(100vw - 32px));
    padding: 13px 20px; border-radius: 14px;
    border: 1px solid rgba(74, 222, 128, .34);
    background: rgba(8, 22, 16, .96);
    color: #a7f3c0; font-size: 14px; font-weight: 500;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.cart-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cart-toast.is-error {
    border-color: rgba(248, 113, 113, .36);
    background: rgba(26, 8, 12, .96);
    color: #fca5a5;
}

@media (max-width: 640px) {
    .pnav-cart { width: 40px; height: 40px; }
    .pnav-cart svg { width: 19px; height: 19px; }

    .cart-row, .lib-row { grid-template-columns: 76px minmax(0, 1fr); }
    .cart-side { grid-column: 1 / -1; flex-direction: row; align-items: center;
                 justify-content: space-between; text-align: left; }
    .lib-actions { grid-column: 1 / -1; flex-direction: row; text-align: left; }
    .lib-actions .btn { flex: 1; }

    .pd-preview { height: 52vh; }
    .reader-stage { height: 68vh; min-height: 340px; }
    .reader-bar .btn { width: 100%; }

    .cart-toast { left: 16px; right: 16px; bottom: 16px; transform: translateY(14px); max-width: none; }
    .cart-toast.show { transform: translateY(0); }
}

/* ==========================================================================
   SIMULATED PAYMENT SCREEN — pay.php
   Only rendered while PAYMENT_MODE is 'dummy'. Styled to look deliberately
   like a test harness rather than a real gateway, so nobody mistakes it for
   one in a screenshot.
   ========================================================================== */
.paysim { border-style: dashed; border-color: rgba(251, 191, 36, .34); }
.paysim-head { text-align: center; margin-bottom: 26px; }
.paysim-head .badge { margin-bottom: 14px; }
.paysim-head h1 { font-size: clamp(21px, 3vw, 27px); margin-bottom: 8px; }
.paysim-head code { font-size: .92em; }

.paysim-items {
    padding: 18px 20px; margin-bottom: 20px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: rgba(3, 6, 18, .5);
}
.paysim-items .sum-row:first-child { padding-top: 0; }

.paysim-billed {
    font-size: 13.5px; color: var(--text-muted);
    text-align: center; margin-bottom: 22px;
}

.paysim-actions { display: flex; flex-direction: column; gap: 10px; }
.paysim-actions form { margin: 0; }

/* ==========================================================================
   MOBILE PERFORMANCE
   --------------------------------------------------------------------------
   Why scrolling stuttered on real phones, in rough order of cost:

   1. backdrop-filter on ~14 card classes AND on the FIXED .pnav. A blurred
      backdrop has to be recomputed whenever the pixels behind it move, so a
      fixed blurred nav re-composites on every single scroll frame, and each
      card does the same as it travels. This is the dominant cost and it is
      invisible on a desktop GPU.
   2. background-attachment: fixed on <body> — the background cannot be scrolled
      as a layer, so large areas repaint continuously.
   3. A full-viewport fixed pseudo-element (body::before) plus per-card decorative
      overlay gradients, each an extra layer to blend.
   4. An infinitely animating gradient on .text-gradient, repainting text forever.
   5. Multi-layer shadows (three shadows per card, one of them 55px blur).

   The fix is to stop compositing tricks on small screens rather than to redesign:
   blurs come off and surface opacity goes UP to compensate, so panels still read
   as panels instead of turning washed out. Declared last so it wins the cascade
   over the earlier @media (max-width: 640px) rule that re-applies blur(12px).
   ========================================================================== */
@media (max-width: 900px) {

    /* --- 1. No backdrop blur anywhere ------------------------------------- */
    .pnav, .pnav-drawer, .acct-menu, .badge, .flash, .buy-bar, .lay-side, .guard,
    .card, .filters, .ccard, .buy-card, .learn-box, .feat-item, .curriculum,
    .faq-item, .auth-card, .auth-context, .stat, .mycard, .table-wrap, .askbox,
    .ccard-badges .badge, .legal-foot-links a, .paysim {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Opacity replaces the blur as the thing that separates surface from page. */
    .card, .filters, .ccard, .buy-card, .learn-box, .feat-item, .curriculum,
    .faq-item, .auth-card, .auth-context, .stat, .mycard, .table-wrap, .askbox {
        background: linear-gradient(145deg, rgba(19, 26, 56, .95), rgba(9, 12, 28, .95));
    }
    .pnav        { background: rgba(6, 10, 24, .97); }
    .pnav-drawer { background: rgba(5, 9, 21, .99); }
    .acct-menu   { background: rgba(8, 13, 28, .99); }
    .buy-bar     { background: rgba(4, 9, 20, .99); }
    .lay-side    { background: rgba(4, 7, 19, .97); }
    .ccard-badges .badge { background: rgba(3, 7, 17, .9); }

    /* --- 2. Let the background scroll as a layer -------------------------- */
    body { background-attachment: scroll; }

    /* --- 3. Drop purely decorative extra layers --------------------------- */
    body::before { display: none; }
    .card::before, .askbox::before { display: none; }
    .stat::after { display: none; }
    .pfoot::before { display: none; }

    /* The static aurora stand-in is already a soft gradient; blurring a
       full-screen fixed element on top of that buys nothing and costs a lot. */
    html.no-webgl #canvas-container { filter: none; }

    /* --- 4. Stop perpetual animation -------------------------------------- */
    .text-gradient {
        animation: none;
        background-size: 100% auto;
        filter: none;
    }

    /* --- 5. One cheap shadow instead of three ---------------------------- */
    .card, .filters, .ccard, .buy-card, .learn-box, .feat-item, .curriculum,
    .faq-item, .auth-card, .auth-context, .stat, .mycard, .table-wrap, .askbox {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .05);
    }
    .pnav { box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
    .btn-primary { box-shadow: 0 6px 16px rgba(87, 76, 255, .28); }

    /* Hover lift is pointless on touch and only creates compositing layers. */
    .ccard:hover, .card:hover, .feat-item:hover, .stat:hover,
    .legal-foot-links a:hover { transform: none; }

    /* --- 6. Give the browser scroll hints -------------------------------- */
    /* Long card lists are the main scroll surface; letting the engine skip
       layout and paint for offscreen cards is the single biggest win after the
       blurs. contain-intrinsic-size keeps the scrollbar honest so the page does
       not jump as cards come into view. */
    .ccard {
        content-visibility: auto;
        contain-intrinsic-size: auto 420px;
    }
    .cart-row, .lib-row {
        content-visibility: auto;
        contain-intrinsic-size: auto 132px;
    }
}