:root {
    --gold: #d4af37;
    --gold-soft: rgba(212, 175, 55, 0.12);

    --navy: #050a18;
    --navy-light: #0a1324;

    --text: #f4f4f4;
    --text-soft: rgba(244, 244, 244, 0.72);
    --text-dim: rgba(244, 244, 244, 0.48);

    --line: rgba(255, 255, 255, 0.09);
    --glass: rgba(255, 255, 255, 0.035);

    --success: #47c97f;
    --danger: #ff7070;

    --radius: 18px;
    --max: 1180px;
    --article: 780px;
}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212, 175, 55, 0.055),
            transparent 42%
        ),
        var(--navy);

    color: var(--text);

    font-family:
        "Inter",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}

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

a {
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   BACKGROUND
   ============================================================ */

.os-background {
    position: fixed;
    inset: 0;
    z-index: -2;

    background-image:
        url("/images/nyc.avif");

    background-size: cover;
    background-position: center;

    opacity: 0.12;

    filter: blur(5px);
    transform: scale(1.03);

    pointer-events: none;
}

.os-background-mask {
    position: fixed;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 10, 24, 0.65),
            rgba(5, 10, 24, 0.96) 55%,
            #050a18
        );

    pointer-events: none;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.serif {
    font-family:
        "Playfair Display",
        serif;
}

.mono {
    font-family:
        "Fira Code",
        monospace;
}

.gold {
    color: var(--gold);
}

.muted {
    color: var(--text-soft);
}


/* ============================================================
   TOP BAR
   ============================================================ */

.os-topbar {
    position: sticky;
    top: 0;
    z-index: 100;

    backdrop-filter: blur(18px);

    background:
        rgba(5, 10, 24, 0.78);

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

.os-topbar-inner {
    max-width: var(--max);

    margin: 0 auto;
    padding: 15px 22px;

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

    gap: 24px;
}

.os-brand {
    text-decoration: none;

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.4rem;
    font-weight: 900;

    color: var(--gold);
}

.os-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.os-nav a {
    text-decoration: none;

    color: var(--text-soft);

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.76rem;

    transition: 0.2s;
}

.os-nav a:hover {
    color: var(--gold);
}

.os-account {
    border: 1px solid var(--line);

    border-radius: 999px;

    padding: 8px 14px !important;
}


/* ============================================================
   GENERIC LAYOUT
   ============================================================ */

.os-page {
    max-width: var(--max);

    margin: 0 auto;

    padding:
        70px 22px
        120px;
}

.os-label {
    display: block;

    margin-bottom: 14px;

    color: var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.76rem;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.os-title {
    margin: 0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            2.5rem,
            6vw,
            4.8rem
        );

    line-height: 1.05;

    color: #fff;
}

.os-description {
    max-width: 720px;

    margin:
        22px 0 0;

    color: var(--text-soft);

    font-size: 1.12rem;

    line-height: 1.75;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.os-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 46px;

    padding:
        11px 22px;

    border: 1px solid transparent;

    border-radius: 999px;

    text-decoration: none;

    cursor: pointer;

    font-weight: 750;

    transition: 0.2s;
}

.os-btn:hover {
    transform:
        translateY(-2px);
}

.os-btn-primary {
    background: var(--gold);
    color: #050505;
}

.os-btn-secondary {
    background: var(--glass);

    border-color: var(--line);

    color: var(--text);
}

.os-btn-secondary:hover {
    border-color: var(--gold);
}

.os-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}


/* ============================================================
   STATUS
   ============================================================ */

.os-loading,
.os-error,
.os-empty {
    max-width: 720px;

    margin: 80px auto;

    padding: 30px;

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

    border-radius: var(--radius);

    background: var(--glass);

    text-align: center;

    color: var(--text-soft);
}

.os-error {
    border-color:
        rgba(255, 112, 112, 0.35);
}

.os-error strong {
    color: var(--danger);
}


/* ============================================================
   COURSE HERO
   ============================================================ */

.course-hero {
    padding-bottom: 55px;

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

.course-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}


/* ============================================================
   PROGRESS
   ============================================================ */

.course-progress {
    margin-top: 38px;

    max-width: 620px;
}

.progress-meta {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 10px;

    color: var(--text-soft);

    font-size: 0.85rem;
}

.progress-track {
    width: 100%;
    height: 6px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.08);
}

.progress-fill {
    height: 100%;

    width: 0;

    border-radius: inherit;

    background: var(--gold);

    transition:
        width 0.7s ease;
}


/* ============================================================
   COURSE SECTIONS
   ============================================================ */

.course-sections {
    padding-top: 60px;
}

.course-section {
    margin-bottom: 65px;
}

.course-section-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;

    padding-bottom: 14px;

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

.course-section-label {
    color: var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.75rem;

    letter-spacing: 2px;
}

.course-section-title {
    margin:
        6px 0 0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.4rem
        );
}

.course-section-progress {
    color: var(--text-dim);

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.72rem;
}


/* ============================================================
   LESSON LIST
   ============================================================ */

.lesson-list {
    display: grid;
    gap: 10px;
}

.lesson-card {
    display: grid;

    grid-template-columns:
        70px
        1fr
        auto;

    gap: 16px;

    align-items: center;

    min-height: 72px;

    padding:
        14px 18px;

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

    border-radius: 13px;

    background: var(--glass);

    text-decoration: none;

    transition: 0.2s;
}

.lesson-card:hover {
    transform:
        translateX(5px);

    border-color:
        rgba(212, 175, 55, 0.5);

    background:
        rgba(212, 175, 55, 0.06);
}

.lesson-number {
    color: var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.74rem;
}

.lesson-name {
    color: var(--text);

    font-weight: 580;

    line-height: 1.4;
}

.lesson-state {
    min-width: 24px;

    text-align: right;

    font-size: 0.9rem;
}

.lesson-card.completed
.lesson-state {
    color: var(--success);
}

.lesson-card.locked
.lesson-state {
    color: var(--text-dim);
}


/* ============================================================
   ARTICLE
   ============================================================ */

.article-shell {
    max-width: var(--article);

    margin: 0 auto;

    padding:
        55px 22px
        120px;
}

.article-back {
    display: inline-flex;

    margin-bottom: 40px;

    text-decoration: none;

    color: var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.76rem;
}

.article-meta {
    margin-bottom: 12px;

    color: var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.76rem;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.article-title {
    margin:
        0 0 38px;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            2.2rem,
            6vw,
            3.5rem
        );

    line-height: 1.16;
}


/* ============================================================
   WORDPRESS CONTENT
   ============================================================ */

.os-content {
    color:
        rgba(244, 244, 244, 0.84);

    line-height: 1.9;

    font-size: 1.07rem;
}

.os-content p {
    margin:
        0 0 28px;
}

.os-content h2 {
    margin:
        52px 0 22px;

    color: var(--gold);

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.85rem;

    line-height: 1.3;
}

.os-content h3 {
    margin:
        38px 0 16px;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;
}

.os-content strong,
.os-content b {
    color: #fff;
}

.os-content a {
    color: var(--gold);
}

.os-content ul,
.os-content ol {
    margin:
        0 0 30px;

    padding-left: 25px;
}

.os-content li {
    margin-bottom: 9px;
}

.os-content img {
    display: block;

    margin:
        35px auto;

    border-radius: 14px;
}

.os-content blockquote,
.os-content .article-quote {
    margin:
        42px 0;

    padding-left: 24px;

    border-left:
        3px solid var(--gold);

    color: var(--gold);

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.32rem;

    font-style: italic;

    line-height: 1.55;
}

.os-content .highlight {
    color: var(--gold);

    font-weight: 650;
}


/* ============================================================
   ACCESS NOTICE
   ============================================================ */

.access-box {
    margin:
        38px 0;

    padding:
        26px;

    border:
        1px solid
        rgba(212, 175, 55, 0.35);

    border-radius: var(--radius);

    background:
        rgba(212, 175, 55, 0.07);
}

.access-box h3 {
    margin:
        0 0 9px;

    font-family:
        "Playfair Display",
        serif;

    color: var(--gold);
}

.access-box p {
    margin:
        0 0 18px;

    color: var(--text-soft);

    line-height: 1.65;
}


/* ============================================================
   ARTICLE FOOTER
   ============================================================ */

.article-actions {
    display: flex;
    flex-wrap: wrap;

    justify-content: space-between;

    gap: 14px;

    margin-top: 65px;

    padding-top: 30px;

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

.complete-area {
    margin-top: 35px;

    text-align: center;
}


/* ============================================================
   COURSE SIDEBAR
   ============================================================ */

.article-course-list {
    max-width: var(--article);

    margin:
        0 auto 100px;

    padding:
        0 22px;
}

.article-course-list h3 {
    margin-bottom: 20px;

    color: var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.83rem;

    letter-spacing: 1px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (
    max-width: 760px
) {

    .os-topbar-inner {
        align-items: flex-start;
    }

    .os-nav a:not(
        .os-account
    ) {
        display: none;
    }

    .os-page {
        padding-top: 45px;
    }

    .lesson-card {
        grid-template-columns:
            54px
            1fr
            24px;

        padding:
            13px 14px;
    }

    .course-section-head {
        align-items: flex-start;

        flex-direction: column;
    }

    .article-shell {
        padding-top: 35px;
    }

    .article-actions {
        flex-direction: column;
    }

    .article-actions
    .os-btn {
        width: 100%;
    }
}

/* ============================================================
   COURSE LANDING — MIGRATED WORDPRESS CONTENT
   ============================================================ */

.course-page {
    max-width: 1180px;
}


/* ------------------------------------------------------------
   Landing block
   ------------------------------------------------------------ */

.course-landing {
    margin:
        70px 0;

    padding:
        0 0 70px;

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


.course-landing-after {
    margin-top:
        80px;

    padding-top:
        65px;

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

    border-bottom:
        0;
}


.course-landing-content {
    max-width:
        900px;

    color:
        rgba(244, 244, 244, 0.82);

    font-size:
        1.05rem;

    line-height:
        1.85;
}


/* ------------------------------------------------------------
   Typography
   ------------------------------------------------------------ */

.course-landing-content
.label-os,

.course-landing-content
.hint-text,

.course-landing-content
.subtitle,

.course-landing-content
.eyebrow {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size:
        0.73rem;

    font-weight:
        600;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;
}


.course-landing-content
.course-landing-title,

.course-landing-content
h2 {

    max-width:
        850px;

    margin:
        10px 0 25px;

    color:
        #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            2rem,
            5vw,
            3.35rem
        );

    line-height:
        1.16;
}


.course-landing-content
h3 {

    margin:
        34px 0 15px;

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        1.45rem;

    line-height:
        1.3;
}


.course-landing-content
h4 {

    color:
        #fff;

    font-size:
        1.05rem;
}


.course-landing-content
p {

    max-width:
        820px;

    margin:
        0 0 24px;
}


.course-landing-content
.lead {

    max-width:
        820px;

    color:
        rgba(255,255,255,.88);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            1.22rem,
            2.5vw,
            1.55rem
        );

    line-height:
        1.65;
}


.course-landing-content
strong {

    color:
        #fff;
}


.course-landing-content
a {

    color:
        var(--gold);
}


/* ------------------------------------------------------------
   Lists
   ------------------------------------------------------------ */

.course-landing-content
ul,

.course-landing-content
ol {

    max-width:
        820px;

    padding-left:
        24px;

    margin:
        20px 0 32px;
}


.course-landing-content
li {

    margin-bottom:
        11px;
}


/* ------------------------------------------------------------
   Quote
   ------------------------------------------------------------ */

.course-landing-content
blockquote,

.course-landing-content
.quote-section,

.course-landing-content
.quote-box,

.course-landing-content
.quote-box-author {

    max-width:
        820px;

    margin:
        38px 0;

    padding:
        25px 28px;

    border-left:
        3px solid var(--gold);

    background:
        rgba(212,175,55,.055);

    border-radius:
        0 14px 14px 0;
}


.course-landing-content
.quote-text {

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        1.25rem;

    font-style:
        italic;

    line-height:
        1.6;
}


.course-landing-content
.quote-author {

    display:
        block;

    margin-top:
        12px;

    color:
        var(--text-dim);

    font-family:
        "Fira Code",
        monospace;

    font-size:
        .72rem;
}


/* ============================================================
   PARENTING — OLD / NEW SCHEMA
   ============================================================ */

.course-landing-content
.schema-old,

.course-landing-content
.schema-new {

    max-width:
        820px;

    margin:
        30px 0;

    padding:
        25px;

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

    border-radius:
        16px;

    background:
        rgba(255,255,255,.025);
}


.course-landing-content
.schema-new {

    border-color:
        rgba(212,175,55,.35);

    background:
        rgba(212,175,55,.045);
}


.course-landing-content
.flow {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        9px;

    margin:
        20px 0;
}


.course-landing-content
.node {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        40px;

    padding:
        8px 13px;

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

    border-radius:
        9px;

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

    color:
        #fff;

    font-family:
        "Fira Code",
        monospace;

    font-size:
        .78rem;
}


.course-landing-content
.schema-new
.node {

    border-color:
        rgba(212,175,55,.35);

    color:
        var(--gold);
}


.course-landing-content
.arrow {

    color:
        var(--text-dim);
}


/* ============================================================
   PARENTING — BUILDING MODEL
   ============================================================ */

.course-landing-content
.building-container {

    max-width:
        820px;

    margin:
        40px 0;
}


.course-landing-content
.building-track {

    display:
        grid;

    gap:
        9px;
}


.course-landing-content
.building-level,

.course-landing-content
.floor {

    display:
        grid;

    grid-template-columns:
        minmax(120px, .45fr)
        1fr;

    gap:
        20px;

    align-items:
        center;

    min-height:
        68px;

    padding:
        14px 18px;

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

    border-radius:
        12px;

    background:
        rgba(255,255,255,.025);
}


.course-landing-content
.floor.active,

.course-landing-content
.building-level.active {

    border-color:
        rgba(212,175,55,.55);

    background:
        rgba(212,175,55,.07);
}


.course-landing-content
.floor-label {

    color:
        var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size:
        .78rem;

    font-weight:
        600;

    letter-spacing:
        1px;
}


/* ============================================================
   DOT / ROADMAP ITEMS
   ============================================================ */

.course-landing-content
.roadmap {

    max-width:
        820px;

    margin:
        35px 0;

    display:
        grid;

    gap:
        12px;
}


.course-landing-content
.dot-item {

    position:
        relative;

    padding:
        14px 18px
        14px 42px;

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

    border-radius:
        11px;

    background:
        rgba(255,255,255,.025);
}


.course-landing-content
.dot-item::before {

    content:
        "";

    position:
        absolute;

    left:
        18px;

    top:
        50%;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--text-dim);

    transform:
        translateY(-50%);
}


.course-landing-content
.dot-item.current,

.course-landing-content
.dot-item.active {

    border-color:
        rgba(212,175,55,.45);

    color:
        #fff;
}


.course-landing-content
.dot-item.current::before,

.course-landing-content
.dot-item.active::before {

    background:
        var(--gold);

    box-shadow:
        0 0 14px
        rgba(212,175,55,.6);
}


/* ============================================================
   GENERIC BUSINESS / FRAMEWORK CARDS
   ============================================================ */

.course-landing-content
.layer,

.course-landing-content
.level,

.course-landing-content
.framework-card,

.course-landing-content
.os-card,

.course-landing-content
.business-card,

.course-landing-content
.step-card {

    margin:
        12px 0;

    padding:
        20px 22px;

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

    border-radius:
        14px;

    background:
        rgba(255,255,255,.025);
}


.course-landing-content
.layer:hover,

.course-landing-content
.level:hover,

.course-landing-content
.framework-card:hover,

.course-landing-content
.business-card:hover {

    border-color:
        rgba(212,175,55,.35);
}


/* ------------------------------------------------------------
   Cards / grids from legacy markup
   ------------------------------------------------------------ */

.course-landing-content
.cards,

.course-landing-content
.grid,

.course-landing-content
.layers,

.course-landing-content
.framework-grid {

    display:
        grid;

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

    gap:
        14px;

    max-width:
        900px;

    margin:
        25px 0;
}


/* ============================================================
   CTA
   ============================================================ */

.course-landing-content
.cta-box,

.course-landing-content
.final-cta,

.course-landing-content
.cta-footer-box {

    max-width:
        820px;

    margin:
        45px 0;

    padding:
        30px;

    border:
        1px solid
        rgba(212,175,55,.4);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.08),
            rgba(255,255,255,.02)
        );
}


.course-landing-content
.cta-box a,

.course-landing-content
.final-cta a,

.course-landing-content
.cta-footer-box a {

    display:
        inline-flex;

    margin-top:
        12px;

    padding:
        11px 20px;

    border-radius:
        999px;

    background:
        var(--gold);

    color:
        #050505;

    text-decoration:
        none;

    font-weight:
        750;
}


/* ============================================================
   MEDIA
   ============================================================ */

.course-landing-content
img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

    margin:
        35px 0;

    border-radius:
        15px;
}


.course-landing-content
svg {

    max-width:
        100%;

    height:
        auto;
}


/* ============================================================
   COURSE PROGRESS SECTION
   ============================================================ */

.course-progress-section {

    margin:
        70px 0;

    padding:
        55px 0;

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

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


.course-progress-section
.course-progress {

    margin-top:
        0;
}


/* ============================================================
   CURRICULUM
   ============================================================ */

.course-curriculum {

    padding-top:
        20px;
}


.course-curriculum-header {

    margin-bottom:
        45px;
}


.course-curriculum-title {

    margin:
        0;

    color:
        #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            2rem,
            5vw,
            3rem
        );
}


/* ============================================================
   MOBILE COURSE LANDING
   ============================================================ */

@media (
    max-width: 760px
) {

    .course-landing {

        margin:
            50px 0;

        padding-bottom:
            50px;
    }


    .course-landing-content {

        font-size:
            1rem;
    }


    .course-landing-content
    .building-level,

    .course-landing-content
    .floor {

        grid-template-columns:
            1fr;
    }


    .course-landing-content
    .cards,

    .course-landing-content
    .grid,

    .course-landing-content
    .layers,

    .course-landing-content
    .framework-grid {

        grid-template-columns:
            1fr;
    }


    .course-progress-section {

        margin:
            50px 0;

        padding:
            40px 0;
    }
}

/* ============================================================
   BUSINESS — SPIRAL OPERATING SYSTEM
   ============================================================
 *
 * Legacy markup preserved from:
 *
 * .spiral-wrapper
 * .spiral-header
 * .spiral-header-title
 * .spiral-nodes
 * .spiral-loop-line
 * .spiral-loop-arrow
 * .spiral-loop-badge
 * .spiral-node
 * .highlight-node
 * .node-num
 * .node-text
 * .node-sub
 */


/* ------------------------------------------------------------
   Main frame
   ------------------------------------------------------------ */

.course-landing-content
.spiral-wrapper {

    position:
        relative;

    max-width:
        860px;

    margin:
        55px 0 70px;

    padding:
        38px 30px
        34px 76px;

    overflow:
        visible;

    border:
        1px solid
        rgba(212, 175, 55, .22);

    border-radius:
        20px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(212, 175, 55, .07),
            transparent 36%
        ),
        rgba(7, 13, 28, .78);

    box-shadow:
        inset 0 0 35px
        rgba(0, 0, 0, .35),
        0 20px 60px
        rgba(0, 0, 0, .22);
}


/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.course-landing-content
.spiral-header {

    margin-bottom:
        32px;

    padding-bottom:
        20px;

    text-align:
        center;

    border-bottom:
        1px dashed
        rgba(212, 175, 55, .28);
}


.course-landing-content
.spiral-header-title {

    color:
        var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size:
        .82rem;

    font-weight:
        600;

    line-height:
        1.6;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;
}


/* ------------------------------------------------------------
   Node container
   ------------------------------------------------------------ */

.course-landing-content
.spiral-nodes {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


/* ------------------------------------------------------------
   Loop line: 7 → 1
   ------------------------------------------------------------ */

.course-landing-content
.spiral-loop-line {

    position:
        absolute;

    z-index:
        0;

    left:
        -42px;

    top:
        24px;

    bottom:
        24px;

    width:
        31px;

    border-left:
        2px dashed
        rgba(212, 175, 55, .75);

    border-top:
        2px dashed
        rgba(212, 175, 55, .75);

    border-bottom:
        2px dashed
        rgba(212, 175, 55, .75);

    border-top-left-radius:
        18px;

    border-bottom-left-radius:
        18px;

    pointer-events:
        none;
}


/* ------------------------------------------------------------
   Loop arrow
   ------------------------------------------------------------ */

.course-landing-content
.spiral-loop-arrow {

    position:
        absolute;

    top:
        -8px;

    right:
        -7px;

    width:
        0;

    height:
        0;

    border-left:
        6px solid transparent;

    border-right:
        6px solid transparent;

    border-bottom:
        10px solid
        var(--gold);

    transform:
        rotate(90deg);
}


/* ------------------------------------------------------------
   Loop badge
   ------------------------------------------------------------ */

.course-landing-content
.spiral-loop-badge {

    position:
        absolute;

    left:
        -74px;

    top:
        50%;

    z-index:
        2;

    padding:
        5px 10px;

    white-space:
        nowrap;

    border-radius:
        999px;

    background:
        var(--gold);

    color:
        #080808;

    font-family:
        "Fira Code",
        monospace;

    font-size:
        .61rem;

    font-weight:
        800;

    letter-spacing:
        .8px;

    transform:
        translateY(-50%)
        rotate(-90deg);

    transform-origin:
        center;

    box-shadow:
        0 0 18px
        rgba(212, 175, 55, .26);
}


/* ------------------------------------------------------------
   Each stage
   ------------------------------------------------------------ */

.course-landing-content
.spiral-node {

    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    align-items:
        center;

    min-height:
        62px;

    padding:
        13px 18px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .075);

    border-radius:
        12px;

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

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}


/* Connector between stages */

.course-landing-content
.spiral-node:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    left:
        27px;

    bottom:
        -13px;

    z-index:
        5;

    width:
        1px;

    height:
        13px;

    background:
        linear-gradient(
            to bottom,
            rgba(212, 175, 55, .65),
            rgba(212, 175, 55, .12)
        );
}


.course-landing-content
.spiral-node:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(212, 175, 55, .48);

    background:
        rgba(212, 175, 55, .055);
}


/* ------------------------------------------------------------
   Beginning + Learning highlighted
   ------------------------------------------------------------ */

.course-landing-content
.spiral-node.highlight-node {

    border-color:
        rgba(212, 175, 55, .68);

    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, .13),
            rgba(212, 175, 55, .025)
        );

    box-shadow:
        inset 3px 0 0
        rgba(212, 175, 55, .8);
}


/* ------------------------------------------------------------
   Number
   ------------------------------------------------------------ */

.course-landing-content
.node-num {

    display:
        block;

    color:
        var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size:
        .74rem;

    font-weight:
        600;

    letter-spacing:
        .5px;
}


/* ------------------------------------------------------------
   Node title
   ------------------------------------------------------------ */

.course-landing-content
.node-text {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        baseline;

    gap:
        6px 10px;

    color:
        #fff;

    font-family:
        "Fira Code",
        monospace;

    font-size:
        .9rem;

    font-weight:
        600;

    letter-spacing:
        .3px;
}


/* ------------------------------------------------------------
   Node explanation
   ------------------------------------------------------------ */

.course-landing-content
.node-sub {

    color:
        rgba(244, 244, 244, .56);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        .82rem;

    font-weight:
        400;

    letter-spacing:
        0;
}


/* ------------------------------------------------------------
   "Return to Being"
   Original element had inline CSS.
   Importer deliberately removed inline styles.
   It is the final DIV directly under .spiral-wrapper.
   ------------------------------------------------------------ */

.course-landing-content
.spiral-wrapper
> div:last-child:not(.spiral-nodes):not(.spiral-header) {

    margin-top:
        25px;

    text-align:
        center;

    color:
        var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size:
        .74rem;

    line-height:
        1.6;

    letter-spacing:
        .3px;
}


/* ============================================================
   BUSINESS SECTION TITLES
   ============================================================ */

.course-landing-content
h2.section-title {

    position:
        relative;

    margin-top:
        68px;

    margin-bottom:
        22px;

    padding-left:
        18px;

    border-left:
        3px solid
        var(--gold);

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.35rem
        );

    line-height:
        1.25;
}


.course-landing-content
h3.sub-title {

    margin-top:
        40px;

    margin-bottom:
        13px;

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        1.35rem;

    line-height:
        1.35;
}


/* ============================================================
   MOBILE SPIRAL
   ============================================================ */

@media (
    max-width: 760px
) {

    .course-landing-content
    .spiral-wrapper {

        margin:
            38px 0 55px;

        padding:
            28px 14px
            28px 47px;

        border-radius:
            16px;
    }


    .course-landing-content
    .spiral-header {

        margin-bottom:
            24px;
    }


    .course-landing-content
    .spiral-header-title {

        font-size:
            .7rem;

        letter-spacing:
            1.1px;
    }


    .course-landing-content
    .spiral-loop-line {

        left:
            -28px;

        width:
            20px;
    }


    .course-landing-content
    .spiral-loop-badge {

        left:
            -62px;

        font-size:
            .52rem;

        padding:
            4px 8px;
    }


    .course-landing-content
    .spiral-node {

        grid-template-columns:
            42px
            minmax(0, 1fr);

        min-height:
            58px;

        padding:
            11px 12px;
    }


    .course-landing-content
    .spiral-node:not(:last-child)::after {

        left:
            20px;
    }


    .course-landing-content
    .node-num {

        font-size:
            .66rem;
    }


    .course-landing-content
    .node-text {

        display:
            block;

        font-size:
            .78rem;
    }


    .course-landing-content
    .node-sub {

        display:
            block;

        margin-top:
            4px;

        font-size:
            .72rem;

        line-height:
            1.45;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .course-landing-content
    .spiral-node {

        transition:
            none;
    }


    .course-landing-content
    .spiral-node:hover {

        transform:
            none;
    }
}


/* ============================================================
   FINE-TUNE: SPIRAL + 4 FLOORS
   ============================================================ */

/* ------------------------------------------------------------
   1) Spiral: text to hơn, cân giữa hơn
   ------------------------------------------------------------ */

.course-landing-content .spiral-node {
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 88px;
    padding: 18px 22px;
    align-items: center;
}

.course-landing-content .node-num {
    font-size: 0.86rem;
    align-self: center;
}

.course-landing-content .node-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 50px;
    font-size: 1.02rem;
    line-height: 1.45;
}

.course-landing-content .node-sub {
    display: block;
    margin-top: 0;
    font-size: 0.93rem;
    line-height: 1.55;
    color: rgba(244, 244, 244, 0.72);
}

.course-landing-content .spiral-node.highlight-node .node-text {
    font-size: 1.06rem;
}

.course-landing-content .spiral-wrapper > div:last-child:not(.spiral-nodes):not(.spiral-header) {
    margin-top: 28px;
    text-align: center;
    font-size: 0.84rem;
    line-height: 1.7;
}


/* ------------------------------------------------------------
   2) 4 tầng: giãn khoảng cách + thêm mũi tên hướng lên
   ------------------------------------------------------------ */

.course-landing-content .building-container {
    position: relative;
    max-width: 860px;
    margin: 48px 0 56px;
    padding-left: 86px;
}

.course-landing-content .building-track {
    position: absolute;
    left: 34px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: linear-gradient(
        to top,
        rgba(212, 175, 55, 0.14),
        rgba(212, 175, 55, 0.65),
        rgba(212, 175, 55, 0.14)
    );
}

.course-landing-content .building-track::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid var(--gold);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.35));
}

.course-landing-content .building-container .floor,
.course-landing-content .building-container .building-level {
    margin-bottom: 22px;
}

.course-landing-content .building-container .floor:last-child,
.course-landing-content .building-container .building-level:last-child {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   3) Mobile
   ------------------------------------------------------------ */

@media (max-width: 760px) {
    .course-landing-content .spiral-node {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 76px;
        padding: 14px 14px;
    }

    .course-landing-content .node-num {
        font-size: 0.74rem;
    }

    .course-landing-content .node-text {
        font-size: 0.88rem;
        line-height: 1.4;
    }

    .course-landing-content .node-sub {
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .course-landing-content .building-container {
        padding-left: 56px;
    }

    .course-landing-content .building-track {
        left: 22px;
    }

    .course-landing-content .building-container .floor,
    .course-landing-content .building-container .building-level {
        margin-bottom: 16px;
    }
}

/* ============================================================
   FINAL TWEAK — PARENTING ROADMAP + BUSINESS SPIRAL
   ============================================================ */


/* ------------------------------------------------------------
   A. PARENTING — bỏ 1 line thừa ở cuối landing trước progress
   Vì hiện tại:
   - .course-landing-before có border-bottom
   - .course-progress-section có border-top
   => thành 2 đường kẻ chồng nhau
   ------------------------------------------------------------ */

.course-page .course-landing-before {
    border-bottom: 0 !important;
    padding-bottom: 26px;
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   B. PARENTING — ROADMAP thành dạng chuỗi nối nhau cân đối
   ------------------------------------------------------------ */

.course-landing-content .roadmap {
    position: relative;
    max-width: 860px;
    margin: 34px 0 26px;
    padding-left: 0;
    display: grid;
    gap: 14px;
}

.course-landing-content .roadmap::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        rgba(212, 175, 55, 0.15),
        rgba(212, 175, 55, 0.75),
        rgba(212, 175, 55, 0.15)
    );
}

.course-landing-content .roadmap .dot-item {
    position: relative;
    margin-left: 0;
    padding: 18px 22px 18px 54px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color .22s ease, transform .22s ease, background .22s ease;
}

.course-landing-content .roadmap .dot-item::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.55);
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.08);
}

.course-landing-content .roadmap .dot-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 22px;
    top: calc(100% - 1px);
    width: 2px;
    height: 15px;
    background: linear-gradient(
        to bottom,
        rgba(212, 175, 55, 0.7),
        rgba(212, 175, 55, 0.15)
    );
}

.course-landing-content .roadmap .dot-item:hover {
    transform: translateX(4px);
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.045);
}

.course-landing-content .roadmap .dot-item.current,
.course-landing-content .roadmap .dot-item.active {
    border-color: rgba(212, 175, 55, 0.72);
    background: linear-gradient(
        90deg,
        rgba(212, 175, 55, 0.11),
        rgba(212, 175, 55, 0.02)
    );
    color: #fff;
}

.course-landing-content .roadmap .dot-item.current::before,
.course-landing-content .roadmap .dot-item.active::before {
    background: var(--gold);
    box-shadow:
        0 0 0 4px rgba(212, 175, 55, 0.12),
        0 0 16px rgba(212, 175, 55, 0.45);
}


/* ------------------------------------------------------------
   C. BUSINESS — SPIRAL: chữ căn giữa + to hơn
   Dùng layout grid 2 cột:
   cột trái = số
   cột phải = title + subtitle
   ------------------------------------------------------------ */

.course-landing-content .spiral-node {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-areas:
        "num text"
        "num sub";
    row-gap: 4px;
    align-items: center;
    min-height: 94px;
    padding: 18px 22px;
}

.course-landing-content .spiral-node .node-num {
    grid-area: num;
    align-self: center;
    justify-self: center;
    font-size: 0.88rem;
}

.course-landing-content .spiral-node .node-text {
    grid-area: text;
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    align-self: end;
    color: #fff;
    font-family: "Fira Code", monospace;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

.course-landing-content .spiral-node .node-sub {
    grid-area: sub;
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    align-self: start;
    color: rgba(244, 244, 244, 0.72);
    font-size: 0.96rem;
    line-height: 1.55;
}

.course-landing-content .spiral-node.highlight-node .node-text {
    font-size: 1.1rem;
}

.course-landing-content .spiral-node.highlight-node .node-sub {
    color: rgba(255, 255, 255, 0.8);
}


/* ------------------------------------------------------------
   D. Mobile
   ------------------------------------------------------------ */

@media (max-width: 760px) {
    .course-page .course-landing-before {
        padding-bottom: 18px;
    }

    .course-landing-content .roadmap {
        gap: 10px;
    }

    .course-landing-content .roadmap::before {
        left: 18px;
    }

    .course-landing-content .roadmap .dot-item {
        padding: 15px 14px 15px 44px;
        border-radius: 12px;
    }

    .course-landing-content .roadmap .dot-item::before {
        left: 15px;
        width: 8px;
        height: 8px;
    }

    .course-landing-content .roadmap .dot-item:not(:last-child)::after {
        left: 18px;
        height: 11px;
    }

    .course-landing-content .spiral-node {
        grid-template-columns: 54px minmax(0, 1fr);
        min-height: 80px;
        padding: 14px 14px;
    }

    .course-landing-content .spiral-node .node-num {
        font-size: 0.76rem;
    }

    .course-landing-content .spiral-node .node-text {
        font-size: 0.92rem;
    }

    .course-landing-content .spiral-node .node-sub {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .course-landing-content .spiral-node.highlight-node .node-text {
        font-size: 0.96rem;
    }
}

/* ============================================================
   PARENTING ROADMAP — REAL MARKUP FIX
   roadmap-nav > dots-row > dot-item
   ============================================================ */


/* Khung roadmap */
.course-landing-content .roadmap-nav {
    max-width: 900px;
    margin: 55px 0 35px;
    padding: 0;
    background: transparent;
    border: 0;
}


/* Label */
.course-landing-content .roadmap-nav > .label-os {
    display: block;
    margin-bottom: 28px;
}


/* ============================================================
   ROAD / TRACK
   ============================================================ */

.course-landing-content .roadmap-nav .dots-row {
    position: relative;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: visible;
}


/* Đường chạy ngang */
.course-landing-content .roadmap-nav .dots-row::before {
    content: "";

    position: absolute;

    left: 7%;
    right: 7%;

    top: 14px;

    height: 2px;

    background:
        linear-gradient(
            to right,
            rgba(212, 175, 55, 0.8),
            rgba(212, 175, 55, 0.28)
        );

    z-index: 0;
}


/* ============================================================
   EACH STEP
   ============================================================ */

.course-landing-content .roadmap-nav .dot-item {
    position: relative;
    z-index: 1;

    flex: 1 1 0 !important;

    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        38px 4px
        0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color:
        rgba(244, 244, 244, 0.52);

    text-align: center;

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.72rem;
    font-weight: 500;

    line-height: 1.35;

    white-space: nowrap;

    box-shadow: none !important;

    transform: none !important;
}


/* ============================================================
   DOT
   ============================================================ */

.course-landing-content .roadmap-nav .dot-item::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 7px;

    width: 13px;
    height: 13px;

    margin: 0;

    border:
        2px solid
        rgba(255, 255, 255, 0.28);

    border-radius: 50%;

    background:
        #050a18;

    transform:
        translateX(-50%);

    box-shadow:
        0 0 0 5px
        #050a18;
}


/* Không dùng connector dọc cũ */
.course-landing-content .roadmap-nav .dot-item::after {
    display: none !important;
}


/* ============================================================
   CURRENT STEP
   ============================================================ */

.course-landing-content .roadmap-nav .dot-item.current {
    color: var(--gold);
    font-weight: 700;
}


.course-landing-content .roadmap-nav .dot-item.current::before {
    width: 17px;
    height: 17px;

    top: 5px;

    border-color:
        var(--gold);

    background:
        var(--gold);

    box-shadow:
        0 0 0 5px #050a18,
        0 0 18px rgba(212, 175, 55, 0.55);
}


/* Đoạn đường đã đi qua */
.course-landing-content .roadmap-nav .dots-row::after {
    content: "";

    position: absolute;

    left: 7%;

    top: 14px;

    width: 0;

    height: 2px;

    background:
        var(--gold);

    z-index: 0;
}


/* ============================================================
   HOVER
   ============================================================ */

.course-landing-content .roadmap-nav .dot-item:hover {
    color:
        rgba(244, 244, 244, 0.92);

    transform:
        none !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .course-landing-content .roadmap-nav .dots-row {
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0;

        padding-bottom: 10px;

        scrollbar-width: none;
    }


    .course-landing-content .roadmap-nav .dots-row::-webkit-scrollbar {
        display: none;
    }


    .course-landing-content .roadmap-nav .dot-item {
        flex:
            0 0 125px !important;
    }


    .course-landing-content .roadmap-nav .dots-row::before {
        left: 62px;
        right: 62px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .course-landing-content .roadmap-nav {
        margin:
            42px 0 25px;
    }


    .course-landing-content .roadmap-nav .dot-item {
        flex:
            0 0 112px !important;

        font-size:
            0.66rem;
    }
}

/* ============================================================
   AUTH — v11.9B
   ============================================================ */

.auth-page {
    min-height: calc(100vh - 70px);

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

    padding: 70px 22px 100px;
}


.auth-shell {
    width: min(100%, 1000px);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 440px);

    gap: 80px;

    align-items: center;
}


.auth-intro {
    max-width: 520px;
}


.auth-title {
    margin: 0;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            3rem,
            7vw,
            5.3rem
        );

    line-height: 0.98;
}


.auth-description {
    max-width: 480px;

    margin: 28px 0 0;

    color: var(--text-soft);

    font-size: 1.08rem;

    line-height: 1.75;
}


/* ============================================================
   CARD
   ============================================================ */

.auth-card {
    padding: 34px;

    border:
        1px solid
        rgba(212, 175, 55, 0.24);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

    backdrop-filter: blur(20px);

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.30);
}


.auth-card-head {
    margin-bottom: 30px;
}


.auth-card-head .mono {
    font-size: 0.68rem;
    letter-spacing: 2px;
}


.auth-card-head h2 {
    margin: 9px 0 0;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size: 2rem;
}


/* ============================================================
   FIELDS
   ============================================================ */

.auth-field {
    display: block;

    margin-bottom: 22px;
}


.auth-field > span {
    display: block;

    margin-bottom: 9px;

    color: var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.68rem;

    letter-spacing: 1.1px;
}


.auth-field input {
    width: 100%;

    min-height: 50px;

    padding: 12px 14px;

    outline: 0;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 11px;

    background:
        rgba(0,0,0,.18);

    color: #fff;

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


.auth-field input:focus {
    border-color:
        rgba(212,175,55,.70);

    box-shadow:
        0 0 0 3px
        rgba(212,175,55,.08);
}


.auth-field input:disabled {
    opacity: 0.55;
}


/* ============================================================
   PASSWORD
   ============================================================ */

.auth-password-wrap {
    position: relative;
}


.auth-password-wrap input {
    padding-right: 70px;
}


.auth-password-toggle {
    position: absolute;

    top: 50%;
    right: 10px;

    transform:
        translateY(-50%);

    padding: 7px 9px;

    border: 0;

    background: transparent;

    color: var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: 0.65rem;

    cursor: pointer;
}


/* ============================================================
   REMEMBER
   ============================================================ */

.auth-remember {
    display: flex;

    align-items: center;

    gap: 9px;

    margin: 5px 0 22px;

    color: var(--text-soft);

    font-size: 0.85rem;

    cursor: pointer;
}


.auth-remember input {
    accent-color: var(--gold);
}


/* ============================================================
   MESSAGE
   ============================================================ */

.auth-message {
    min-height: 24px;

    margin-bottom: 14px;

    font-size: 0.84rem;

    line-height: 1.5;
}


.auth-message-error {
    color: var(--danger);
}


.auth-message-success {
    color: var(--success);
}


/* ============================================================
   BUTTON
   ============================================================ */

.auth-submit {
    width: 100%;

    min-height: 52px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.auth-footer {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin-top: 24px;

    padding-top: 22px;

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

    color: var(--text-dim);

    font-size: 0.82rem;
}


.auth-footer a {
    color: var(--text-soft);

    text-decoration: none;
}


.auth-footer a:hover {
    color: var(--gold);
}


/* ============================================================
   MOBILE AUTH
   ============================================================ */

@media (max-width: 800px) {

    .auth-page {
        align-items: flex-start;

        padding-top: 45px;
    }


    .auth-shell {
        grid-template-columns: 1fr;

        gap: 45px;

        max-width: 520px;
    }


    .auth-title {
        font-size:
            clamp(
                2.8rem,
                14vw,
                4.3rem
            );
    }


    .auth-card {
        padding: 25px 20px;
    }
}

/* ============================================================
   COURSE MAP FAB — v11.9B
   ============================================================ */

.course-fab-system {
    position: fixed;

    inset: 0;

    z-index: 500;

    pointer-events: none;
}


/* ============================================================
   BACKDROP
   ============================================================ */

.course-fab-backdrop {
    position: absolute;

    inset: 0;

    z-index: 1;

    margin: 0;
    padding: 0;

    border: 0;

    background:
        rgba(2, 6, 16, 0.28);

    backdrop-filter:
        blur(2px);

    opacity: 0;

    visibility: hidden;

    cursor: default;

    pointer-events: none;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}


.course-fab-system.open
.course-fab-backdrop {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* ============================================================
   FAB BUTTON
   ============================================================ */

.course-fab-button {
    position: absolute;

    right: 28px;
    bottom: 28px;

    z-index: 3;

    width: 62px;
    height: 62px;

    display: grid;

    place-items: center;

    margin: 0;
    padding: 0;

    border:
        1px solid
        rgba(212, 175, 55, .72);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(212,175,55,.20),
            rgba(8,14,29,.97) 58%
        );

    color: var(--gold);

    cursor: pointer;

    pointer-events: auto;

    box-shadow:
        0 12px 38px
        rgba(0,0,0,.42),
        inset 0 0 18px
        rgba(212,175,55,.05);

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}


.course-fab-button:hover {
    transform:
        translateY(-4px)
        scale(1.035);

    border-color:
        var(--gold);
}


.course-fab-system.open
.course-fab-button {
    transform:
        rotate(90deg);

    background:
        var(--gold);

    color:
        #050a18;
}


/* ============================================================
   ANIMATED GLOW
   ============================================================ */

.course-fab-glow {
    position: absolute;

    inset: -7px;

    border:
        1px solid
        rgba(212,175,55,.46);

    border-radius: 50%;

    opacity: .62;

    animation:
        courseFabPulse
        2.2s ease-out
        infinite;

    pointer-events: none;
}


.course-fab-glow::after {
    content: "";

    position: absolute;

    inset: -8px;

    border:
        1px solid
        rgba(212,175,55,.18);

    border-radius: inherit;

    animation:
        courseFabPulse
        2.2s ease-out
        .7s infinite;
}


@keyframes courseFabPulse {

    0% {
        transform: scale(.88);
        opacity: .65;
    }

    65% {
        transform: scale(1.18);
        opacity: .10;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}


/* ============================================================
   MENU ICON
   ============================================================ */

.course-fab-icon {
    position: relative;

    z-index: 2;

    width: 23px;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.course-fab-icon > span {
    display: block;

    width: 100%;
    height: 2px;

    border-radius: 999px;

    background: currentColor;

    transition:
        transform .22s ease,
        opacity .22s ease;
}


/* hamburger → X */
.course-fab-system.open
.course-fab-icon > span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.course-fab-system.open
.course-fab-icon > span:nth-child(2) {
    opacity: 0;
}


.course-fab-system.open
.course-fab-icon > span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* ============================================================
   PANEL
   ============================================================ */

.course-fab-panel {
    position: absolute;

    right: 27px;
    bottom: 102px;

    z-index: 2;

    width:
        min(
            430px,
            calc(100vw - 48px)
        );

    max-height:
        min(
            720px,
            calc(100vh - 145px)
        );

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(212,175,55,.30);

    border-radius: 20px;

    background:
        linear-gradient(
            150deg,
            rgba(11,18,36,.985),
            rgba(5,10,24,.985)
        );

    backdrop-filter:
        blur(22px);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.52);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(34px)
        translateY(12px)
        scale(.97);

    transform-origin:
        bottom right;

    transition:
        opacity .23s ease,
        transform .28s cubic-bezier(.2,.8,.2,1),
        visibility .23s ease;
}


.course-fab-system.open
.course-fab-panel {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(0)
        translateY(0)
        scale(1);
}


/* ============================================================
   PANEL HEAD
   ============================================================ */

.course-fab-head {
    flex: 0 0 auto;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 22px;

    padding:
        22px 22px
        18px;

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


.course-fab-eyebrow {
    display: block;

    margin-bottom: 6px;

    color: var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: .66rem;

    font-weight: 600;

    letter-spacing: 1.5px;
}


.course-fab-head h3 {
    margin: 0;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.3rem;

    line-height: 1.3;
}


.course-fab-close {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

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

    color:
        var(--text-soft);

    font-size: 1.45rem;

    line-height: 1;

    cursor: pointer;
}


.course-fab-close:hover {
    color: var(--gold);

    border-color:
        rgba(212,175,55,.5);
}


/* ============================================================
   LIST
   ============================================================ */

.course-fab-list {
    flex: 1 1 auto;

    overflow-y: auto;

    padding: 12px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(212,175,55,.35)
        transparent;
}


.course-fab-list::-webkit-scrollbar {
    width: 5px;
}


.course-fab-list::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(212,175,55,.35);
}


/* ============================================================
   ITEM
   ============================================================ */

.course-fab-item {
    display: grid;

    grid-template-columns:
        40px
        minmax(0,1fr)
        24px;

    gap: 10px;

    align-items: center;

    min-height: 58px;

    padding:
        10px 11px;

    margin-bottom: 5px;

    border:
        1px solid transparent;

    border-radius: 11px;

    background:
        transparent;

    color:
        var(--text-soft);

    text-decoration: none;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.course-fab-item:hover {
    transform:
        translateX(-3px);

    border-color:
        rgba(212,175,55,.22);

    background:
        rgba(212,175,55,.045);

    color: #fff;
}


.course-fab-item.current {
    border-color:
        rgba(212,175,55,.62);

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.11),
            rgba(212,175,55,.025)
        );

    color: #fff;
}


.course-fab-item.completed {
    color:
        rgba(244,244,244,.82);
}


.course-fab-item.locked {
    opacity: .62;
}


/* ============================================================
   ITEM CONTENT
   ============================================================ */

.course-fab-number {
    color: var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: .67rem;
}


.course-fab-title {
    overflow: hidden;

    text-overflow: ellipsis;

    color: inherit;

    font-size: .88rem;

    font-weight: 600;

    line-height: 1.4;
}


.course-fab-state {
    text-align: center;

    color: var(--gold);

    font-size: .72rem;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .course-fab-button {
        right: 18px;
        bottom: 18px;

        width: 58px;
        height: 58px;
    }


    .course-fab-panel {
        right: 14px;
        bottom: 88px;

        width:
            calc(100vw - 28px);

        max-height:
            calc(100vh - 120px);

        border-radius: 17px;
    }


    .course-fab-head {
        padding:
            18px 17px
            15px;
    }


    .course-fab-item {
        grid-template-columns:
            34px
            minmax(0,1fr)
            22px;

        min-height: 54px;
    }


    .course-fab-title {
        font-size: .82rem;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .course-fab-glow,
    .course-fab-glow::after {
        animation: none;
    }


    .course-fab-panel,
    .course-fab-button,
    .course-fab-icon > span {
        transition: none;
    }
}

/* ============================================================
   KIÊN OS LIBRARY — v11.9B
   ============================================================ */

.library-page {
    max-width: var(--max);

    margin: 0 auto;

    padding:
        65px 22px
        130px;
}


/* ============================================================
   HERO
   ============================================================ */

.library-hero {
    max-width: 900px;

    padding-bottom: 50px;
}


.library-title {
    margin: 0;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            3rem,
            7vw,
            5.2rem
        );

    line-height: 1.02;
}


.library-description {
    max-width: 720px;

    margin:
        24px 0 0;

    color:
        var(--text-soft);

    font-size: 1.08rem;

    line-height: 1.75;
}


.library-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}


/* ============================================================
   AREA SWITCHER
   ============================================================ */

.library-area-switcher {
    display: inline-flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-bottom: 55px;

    padding: 5px;

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

    border-radius: 999px;

    background:
        rgba(255,255,255,.02);
}


.library-area-switcher a {
    padding:
        9px 17px;

    border-radius: 999px;

    color:
        var(--text-dim);

    font-family:
        "Fira Code",
        monospace;

    font-size: .68rem;

    letter-spacing: .7px;

    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease;
}


.library-area-switcher a:hover {
    color: #fff;
}


.library-area-switcher a.active {
    background:
        var(--gold);

    color:
        #050a18;

    font-weight: 700;
}


/* ============================================================
   CONTROLS
   ============================================================ */

.library-controls {
    padding:
        34px 0;

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

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


.library-toolbar {
    display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        auto;

    gap: 28px;

    align-items: center;
}


/* ============================================================
   SEARCH
   ============================================================ */

.library-search {
    position: relative;

    max-width: 620px;
}


.library-search-icon {
    position: absolute;

    left: 16px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: 1.3rem;

    pointer-events: none;
}


.library-search input {
    width: 100%;

    min-height: 52px;

    padding:
        12px 18px
        12px 48px;

    outline: 0;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 13px;

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

    color: #fff;

    font-size: .96rem;

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


.library-search input::placeholder {
    color:
        var(--text-dim);
}


.library-search input:focus {
    border-color:
        rgba(212,175,55,.62);

    box-shadow:
        0 0 0 3px
        rgba(212,175,55,.06);
}


/* ============================================================
   STATS
   ============================================================ */

.library-stats {
    display: flex;

    gap: 26px;
}


.library-stat {
    display: flex;

    flex-direction: column;

    min-width: 88px;
}


.library-stat strong {
    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.7rem;
}


.library-stat span {
    margin-top: 3px;

    color:
        var(--text-dim);

    font-family:
        "Fira Code",
        monospace;

    font-size: .57rem;

    letter-spacing: .8px;
}


/* ============================================================
   FILTERS
   ============================================================ */

.library-filter-section {
    margin-top: 28px;
}


.library-filter-title {
    margin-bottom: 11px;

    color:
        var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: .62rem;

    font-weight: 600;

    letter-spacing: 1.4px;
}


.library-filter-title-dynamic {
    margin-top: 22px;
}


.library-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.library-tag {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 12px;

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

    border-radius: 999px;

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

    color:
        var(--text-soft);

    cursor: pointer;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}


.library-tag span {
    font-size: .77rem;
}


.library-tag small {
    min-width: 20px;

    padding:
        2px 5px;

    border-radius: 999px;

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

    color:
        var(--text-dim);

    font-family:
        "Fira Code",
        monospace;

    font-size: .57rem;
}


.library-tag:hover {
    color: #fff;

    border-color:
        rgba(212,175,55,.34);
}


.library-tag.active {
    border-color:
        rgba(212,175,55,.70);

    background:
        rgba(212,175,55,.09);

    color:
        var(--gold);
}


.library-tag.active small {
    background:
        rgba(212,175,55,.18);

    color:
        var(--gold);
}


.library-clear-filter {
    margin-top: 18px;

    padding: 0;

    border: 0;

    background: none;

    color:
        var(--text-dim);

    font-family:
        "Fira Code",
        monospace;

    font-size: .62rem;

    cursor: pointer;
}


.library-clear-filter:hover {
    color:
        var(--gold);
}


/* ============================================================
   RESULTS
   ============================================================ */

.library-results {
    padding-top: 48px;

    scroll-margin-top: 100px;
}


.library-results-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

    padding-bottom: 13px;

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

    color:
        var(--text-dim);

    font-family:
        "Fira Code",
        monospace;

    font-size: .67rem;

    letter-spacing: .7px;
}


.library-results-head span:last-child {
    color:
        var(--gold);
}


/* ============================================================
   GRID
   ============================================================ */

.library-grid {
    display: grid;

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

    gap: 14px;
}


/* ============================================================
   CARD
   ============================================================ */

.library-card {
    min-width: 0;
}


.library-card-link {
    min-height: 285px;

    height: 100%;

    display: flex;

    flex-direction: column;

    padding: 22px;

    overflow: hidden;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.028),
            rgba(255,255,255,.012)
        );

    color: inherit;

    text-decoration: none;

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


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

    border-color:
        rgba(212,175,55,.38);

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.055),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 22px 50px
        rgba(0,0,0,.20);
}


/* ============================================================
   CARD HEADER
   ============================================================ */

.library-card-header {
    min-height: 28px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;
}


.library-card-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;
}


.library-card-tag {
    padding:
        4px 7px;

    border:
        1px solid
        rgba(212,175,55,.20);

    border-radius: 999px;

    color:
        var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: .55rem;

    line-height: 1.2;
}


.library-card-status {
    flex: 0 0 auto;

    color:
        var(--text-dim);

    font-family:
        "Fira Code",
        monospace;

    font-size: .56rem;

    letter-spacing: .7px;
}


/* ============================================================
   CARD TEXT
   ============================================================ */

.library-card h2 {
    margin:
        28px 0 14px;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.45rem;

    line-height: 1.3;
}


.library-card p {
    margin:
        0 0 24px;

    color:
        var(--text-soft);

    font-size: .9rem;

    line-height: 1.7;
}


/* ============================================================
   CARD FOOTER
   ============================================================ */

.library-card-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: auto;

    padding-top: 15px;

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

    color:
        var(--gold);

    font-family:
        "Fira Code",
        monospace;

    font-size: .61rem;

    letter-spacing: .7px;
}


.library-card-arrow {
    font-size: 1rem;

    transition:
        transform .2s ease;
}


.library-card-link:hover
.library-card-arrow {
    transform:
        translateX(4px);
}


/* ============================================================
   COMPLETED
   ============================================================ */

.library-card.completed
.library-card-link {
    border-color:
        rgba(71,201,127,.22);
}


.library-card.completed
.library-card-status {
    color:
        var(--success);
}


.library-card.completed
.library-card-footer {
    color:
        var(--success);
}


/* ============================================================
   LOCKED
   ============================================================ */

.library-card.locked
.library-card-link {
    background:
        rgba(255,255,255,.012);
}


.library-card.locked
.library-card-status {
    color:
        rgba(244,244,244,.38);
}


.library-card.locked
.library-card-footer {
    color:
        rgba(212,175,55,.72);
}


/* ============================================================
   EMPTY
   ============================================================ */

.library-empty {
    padding:
        65px 30px;

    border:
        1px dashed
        rgba(212,175,55,.22);

    border-radius: 16px;

    text-align: center;
}


.library-empty h3 {
    margin: 0;

    color: #fff;

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.5rem;
}


.library-empty p {
    margin:
        10px 0 0;

    color:
        var(--text-dim);
}


/* ============================================================
   PAGINATION
   ============================================================ */

.library-pagination {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 45px;
}


.library-pagination button {
    min-width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    padding: 0 10px;

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

    border-radius: 9px;

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

    color:
        var(--text-soft);

    font-family:
        "Fira Code",
        monospace;

    cursor: pointer;
}


.library-pagination button:hover:not(:disabled) {
    border-color:
        rgba(212,175,55,.45);

    color:
        var(--gold);
}


.library-pagination button.active {
    border-color:
        var(--gold);

    background:
        var(--gold);

    color:
        #050a18;

    font-weight: 700;
}


.library-pagination button:disabled {
    opacity: .25;

    cursor: default;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 960px) {

    .library-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .library-toolbar {
        grid-template-columns:
            1fr;
    }


    .library-stats {
        justify-content:
            flex-start;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

    .library-page {
        padding-top: 42px;
    }


    .library-title {
        font-size:
            clamp(
                2.7rem,
                14vw,
                4rem
            );
    }


    .library-area-switcher {
        width: 100%;

        display: grid;

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


    .library-area-switcher a {
        padding:
            9px 5px;

        text-align: center;

        font-size: .59rem;
    }


    .library-stats {
        width: 100%;

        display: grid;

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

        gap: 10px;
    }


    .library-stat {
        min-width: 0;
    }


    .library-stat strong {
        font-size: 1.45rem;
    }


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


    .library-card-link {
        min-height: 250px;
    }
}

/* ============================================================
   AUTH RECOVERY
   ============================================================ */

.auth-password-note {
    margin:
        -8px 0
        20px;

    color:
        var(--text-dim);

    font-family:
        "Fira Code",
        monospace;

    font-size:
        .67rem;
}