/* AULAVERSE Kinetic — adult / teen hub (Stitch aulaverse_kinetic) */

:root {
    --k-bg: #f3fbf7;
    --k-bg-edge: #ecfaf5;
    --k-indigo: #4248d6;
    --k-teal: #006b58;
    --k-teal-bright: #00d4b1;
    --k-purple: #8433c4;
    --k-ink: #161d1b;
    --k-muted: #3b4a45;
    --k-muted-2: #6b7280;
    --k-card: #ffffff;
    --k-footer: #dce4e0;
    --k-outline: #bacac3;
    --k-radius-card: 24px;
    --k-radius-lg: 32px;
    --k-radius-btn: 12px;
    --k-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
    --k-shadow-search: 0 16px 48px rgba(15, 23, 42, 0.1);
    --k-font-display: "Sora", Inter, system-ui, sans-serif;
    --k-font-body: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}

html,
body.theme-kinetic {
    min-height: 100%;
    background: radial-gradient(1200px 800px at 30% 15%, #e0f7fa 0%, #f3fbf7 42%, #ecfaf5 100%);
    color: var(--k-ink);
    font-family: var(--k-font-body);
}

body.theme-kinetic {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
}

.k-main {
    flex: 1 0 auto;
    width: 100%;
    padding-top: 6.5rem;
    padding-bottom: 0;
}

.k-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 768px) {
    .k-shell {
        padding: 0 40px;
    }
}

.k-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.k-brand img {
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

/* Header */
.k-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 88px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.k-nav .k-shell {
    max-width: 1400px;
}

.k-nav__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem 1.25rem;
}

.k-nav__links {
    display: none;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 1.75rem 2rem;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

@media (min-width: 1024px) {
    .k-nav__links {
        display: flex;
    }
}

@media (max-width: 1023px) {
    .k-nav {
        height: 72px;
    }

    .k-main {
        padding-top: 5.5rem;
    }

    .k-brand img {
        height: 36px;
        max-width: 150px;
    }

    .k-nav .k-shell {
        padding-left: 12px;
        padding-right: 12px;
    }

    .k-nav__inner {
        flex-wrap: nowrap;
        height: 72px;
        padding: 0;
        gap: 0.65rem;
    }
}

.k-nav__links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--k-muted-2);
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

.k-nav__links a.is-active {
    color: var(--k-indigo);
    font-weight: 700;
    border-bottom-color: var(--k-indigo);
}

.k-nav__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-left: auto;
}

.k-btn:focus-visible,
.k-icon-btn:focus-visible,
.k-nav-avatar:focus-visible,
.k-nav__links a:focus-visible,
.k-brand:focus-visible {
    outline: 3px solid var(--k-indigo);
    outline-offset: 3px;
}

.k-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--k-muted);
    background: transparent;
    border: 0;
    text-decoration: none;
    position: relative;
}

.k-icon-btn:hover {
    background: rgba(66, 72, 214, 0.08);
    color: var(--k-indigo);
}

.k-icon-btn .badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--k-teal-bright);
    color: #005646;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-search-mini {
    display: none;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    height: 40px;
    padding: 0 14px 0 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    min-width: 180px;
    max-width: 220px;
}

@media (min-width: 1280px) {
    .k-search-mini {
        display: flex;
    }
}

.k-search-mini input {
    border: 0;
    background: transparent;
    flex: 1;
    font-size: 14px;
    outline: none !important;
    box-shadow: none !important;
    min-height: auto;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

.k-search-mini input:focus,
.k-search-mini input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: var(--k-radius-btn);
    font-family: var(--k-font-display);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.k-btn:hover {
    transform: translateY(-1px);
}

.k-btn:active {
    transform: scale(0.98);
}

.k-btn:disabled {
    opacity: 0.6;
    pointer-events: none;
    transform: none;
}

.k-btn--primary {
    background: var(--k-indigo);
    color: #fff;
    padding: 10px 22px;
}

.k-btn--teal {
    background: var(--k-teal);
    color: #fff;
    padding: 10px 20px;
}

.k-btn--outline {
    background: transparent;
    color: #00b89a;
    border: 2px solid #00d8d6;
    padding: 10px 28px;
    border-radius: 999px;
}

.k-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid #00d8d6;
    display: block;
}

.k-nav-avatar {
    display: inline-flex;
    border-radius: 999px;
    line-height: 0;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
}

.k-nav-avatar:hover .k-avatar,
.k-nav-avatar.is-active .k-avatar,
.k-nav-avatar[aria-expanded="true"] .k-avatar {
    border-color: var(--k-indigo);
}

.k-account {
    position: relative;
}

.k-account__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    min-width: 212px;
    padding: 8px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.k-account__menu.hidden {
    display: none;
}

.k-account__menu a,
.k-account__menu button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--k-ink);
    font-family: var(--k-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.k-account__menu a:hover,
.k-account__menu button:hover {
    background: rgba(66, 72, 214, 0.08);
    color: var(--k-indigo);
}

.k-account__menu .material-symbols-outlined {
    font-size: 20px;
    color: var(--k-muted-2);
}

.k-account__menu a:hover .material-symbols-outlined,
.k-account__menu button:hover .material-symbols-outlined {
    color: var(--k-indigo);
}

/* Footer */
.k-footer {
    background: var(--k-footer);
    padding: 56px 0 40px;
    margin-top: 80px;
}

.k-footer__grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .k-footer__grid {
        grid-template-columns: minmax(16rem, 1.4fr) repeat(auto-fit, minmax(10rem, 1fr));
        gap: 40px;
    }
}

.k-footer h4 {
    font-family: var(--k-font-display);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
}

.k-footer a,
.k-footer p {
    color: #4b5563;
    font-size: 14px;
    text-decoration: none;
    display: block;
    margin: 0 0 8px;
    line-height: 1.5;
}

.k-footer .k-brand {
    margin-bottom: 16px;
}

.k-footer .k-brand img {
    height: 40px;
}

.k-footer__copy {
    font-size: 12px !important;
    color: #9ca3af !important;
    margin-top: 16px !important;
}

.k-footer__contact {
    margin: 16px 0 0;
}

.k-footer__contact a,
.k-footer__contact p {
    margin-bottom: 6px;
}

/* Home */
.k-hero {
    display: grid;
    gap: 56px;
    padding: 40px 0 80px;
    align-items: center;
}

@media (min-width: 960px) {
    .k-hero {
        grid-template-columns: 1fr 1fr;
        padding: 72px 0 96px;
    }
}

.k-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #ede9fe;
    color: #5b4b8a;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
}

.k-hero h1 {
    font-family: var(--k-font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 28px 0 0;
}

.k-hero h1 .grad {
    background: linear-gradient(90deg, #4248d6 0%, #006b58 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.k-hero__lead {
    font-size: 17px;
    color: var(--k-muted-2);
    max-width: 520px;
    margin: 24px 0 0;
    line-height: 1.75;
}

.k-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    height: 60px;
    padding: 8px 8px 8px 20px;
    box-shadow: var(--k-shadow-search);
    margin-top: 32px;
    gap: 8px;
}

.k-search .material-symbols-outlined {
    color: #9ca3af;
}

.k-search:focus,
.k-search:focus-within {
    outline: none;
}

.k-search input {
    flex: 1;
    border: 0;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    font-size: 15px;
    min-height: auto;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

.k-search input::-webkit-search-decoration,
.k-search input::-webkit-search-cancel-button,
.k-search input::-webkit-search-results-button,
.k-search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.k-search input:focus,
.k-search input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.k-search button {
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: var(--k-indigo);
    color: #fff;
    font-family: var(--k-font-display);
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 640px) {
    .k-search {
        height: auto;
        flex-wrap: wrap;
        border-radius: 20px;
        padding: 10px 12px;
    }

    .k-search input {
        min-width: 0;
        flex: 1 1 140px;
    }

    .k-search button {
        width: 100%;
    }
}

.k-hero-media {
    position: relative;
}

.k-hero-frame {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--k-shadow);
    border: 8px solid #fff;
    aspect-ratio: 4 / 3;
}

.k-hero-frame::before {
    content: "";
    position: absolute;
    inset: -12px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 36px;
    transform: rotate(2deg);
    z-index: -1;
}

.k-hero-art {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 70% 20%, rgba(66, 72, 214, 0.18), transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(0, 107, 88, 0.2), transparent 42%),
        linear-gradient(160deg, #d9f6ef 0%, #e4e8ff 100%);
    display: grid;
    place-items: center;
}

.k-hero-art.has-photo {
    background: #e8eaf6;
}

.k-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.k-join {
    margin: -8px 0 16px;
}

.k-join__card {
    display: grid;
    gap: 28px;
    background: #fff;
    border-radius: 28px;
    padding: 32px 28px;
    box-shadow: var(--k-shadow);
    border: 1px solid rgba(186, 202, 195, 0.45);
    position: relative;
    overflow: hidden;
}

@media (min-width: 880px) {
    .k-join__card {
        grid-template-columns: 1.35fr 0.85fr;
        align-items: center;
        padding: 40px 44px;
        gap: 40px;
    }
}

.k-join__card::before {
    content: "";
    position: absolute;
    inset: auto -48px -48px auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66, 72, 214, 0.14), transparent 70%);
    pointer-events: none;
}

.k-join h2 {
    font-family: var(--k-font-display);
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 800;
    margin: 14px 0 0;
    line-height: 1.25;
}

.k-join__lead {
    margin: 14px 0 0;
    color: var(--k-muted-2);
    font-size: 16px;
    line-height: 1.7;
    max-width: 38rem;
}

.k-join__perks {
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.k-join__perk {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--k-muted);
    line-height: 1.5;
}

.k-join__perk .material-symbols-outlined {
    color: var(--k-teal);
    font-size: 20px;
}

.k-join__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.k-join__aside {
    position: relative;
    z-index: 1;
    background:
        radial-gradient(circle at 70% 20%, rgba(66, 72, 214, 0.16), transparent 42%),
        radial-gradient(circle at 20% 80%, rgba(0, 107, 88, 0.16), transparent 46%),
        linear-gradient(160deg, #d9f6ef 0%, #e4e8ff 100%);
    border-radius: 22px;
    padding: 28px 24px;
    min-height: 220px;
    display: grid;
    align-content: center;
    gap: 22px;
}

.k-join__stat {
    font-family: var(--k-font-display);
    font-weight: 800;
    font-size: 1.35rem;
    margin: 0;
    line-height: 1.25;
}

.k-join__stat small {
    display: block;
    font-family: var(--k-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--k-muted);
    margin-top: 6px;
    line-height: 1.5;
}

.k-lost-page {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.k-lost-page .k-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.k-lost-bar {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 0;
}

.k-lost-bar .k-brand img {
    height: 40px;
}

.k-lost {
    width: min(100%, 40rem);
    display: grid;
    justify-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    padding: 32px 0 64px;
}

.k-lost__code {
    font-family: var(--k-font-display);
    font-size: clamp(4.5rem, 14vw, 8rem);
    font-weight: 800;
    line-height: 0.9;
    background: linear-gradient(90deg, #4248d6 0%, #006b58 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 8px;
    text-align: center;
    width: 100%;
}

.k-lost .k-chip,
.k-lost h1,
.k-lost p {
    text-align: center;
}

.k-lost h1 {
    font-family: var(--k-font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 18px 0 0;
    line-height: 1.25;
    width: 100%;
}

.k-lost p {
    color: var(--k-muted-2);
    max-width: 32rem;
    margin: 14px auto 0;
    line-height: 1.7;
    width: 100%;
}

.k-lost__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    width: 100%;
}

.k-lost__search {
    width: min(100%, 560px);
    margin: 28px auto 0;
}

.k-section {
    padding: 48px 0 80px;
}

.k-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.k-section__head h2 {
    font-family: var(--k-font-display);
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.25;
}

.k-section__head p {
    margin: 10px 0 0;
    color: var(--k-muted-2);
    font-size: 15px;
    line-height: 1.6;
}

.k-section__head a {
    color: var(--k-indigo);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.k-cat-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}

@media (min-width: 800px) {
    .k-cat-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

.k-cat {
    --k-cat-accent: #4248d6;
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--k-shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.k-cat:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(0, 107, 88, 0.12);
}

.k-cat::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    top: -40px;
    right: -40px;
    opacity: 0.16;
    background: var(--k-cat-accent);
}

.k-cat__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.k-cat.has-photo {
    min-height: 220px;
    color: #fff;
}

.k-cat.has-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16, 24, 22, 0.18) 0%, rgba(16, 24, 22, 0.72) 100%);
}

.k-cat.has-photo::after {
    display: none;
}

.k-cat.has-photo .k-cat__icon,
.k-cat.has-photo h3,
.k-cat.has-photo p {
    position: relative;
    z-index: 2;
}

.k-cat.has-photo p {
    color: rgba(255, 255, 255, 0.86);
}

.k-cat__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    margin-bottom: 16px;
    background: var(--k-cat-accent);
}

.k-cat h3 {
    font-family: var(--k-font-display);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.k-cat p {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--k-muted-2);
    line-height: 1.65;
}

/* Catalog */
.k-page-hero {
    padding: 40px 0 36px;
}

.k-page-hero h1 {
    font-family: var(--k-font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.25;
}

.k-page-hero p {
    max-width: 640px;
    color: var(--k-muted-2);
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.7;
}

.k-catalog {
    display: grid;
    gap: 32px;
    padding-bottom: 64px;
}

@media (min-width: 960px) {
    .k-catalog {
        grid-template-columns: 268px 1fr;
        align-items: start;
        gap: 40px;
    }
}

.k-filters {
    background: #fff;
    border-radius: 16px;
    padding: 22px 22px 24px;
    box-shadow: var(--k-shadow);
}

.k-filters__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e8eeeb;
}

.k-filters__head h2 {
    font-family: var(--k-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.k-filters__head a {
    color: var(--k-indigo);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

.k-filters__group {
    padding: 18px 0;
    border-bottom: 1px solid #e8eeeb;
}

.k-filters__group:last-of-type {
    border-bottom: 0;
    padding-bottom: 8px;
}

.k-filters__group h3 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    line-height: 1.3;
}

.k-filters__option {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: start;
    column-gap: 10px;
    margin: 0;
    padding: 7px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--k-ink);
    cursor: pointer;
}

.k-filters__option input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--k-indigo);
}

.k-filters__option span {
    min-width: 0;
}

.k-filters__empty {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--k-muted-2);
}

.k-filters__range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.k-filters__range.is-disabled {
    opacity: 0.45;
}

.k-filters__range label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #6b7280;
}

.k-filters__range input {
    width: 100%;
    height: 40px;
    border: 1px solid #e8eeeb;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--k-ink);
    background: #f8faf9;
}

.k-filters__range input:focus,
.k-filters__range input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--k-indigo);
}

.k-filters__apply {
    width: 100%;
    height: 44px;
    margin-top: 8px;
}

.k-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.k-pills a,
.k-pills button {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 13px;
    text-decoration: none;
    color: var(--k-ink);
    display: inline-flex;
    align-items: center;
}

.k-pills a.is-active,
.k-pills button.is-active {
    background: #00d8d6;
    border-color: #00d8d6;
}

.k-course-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 700px) {
    .k-course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .k-course-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.k-course {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--k-shadow);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}

.k-course:hover {
    transform: translateY(-4px);
}

.k-course__media {
    position: relative;
    height: 180px;
    background: linear-gradient(135deg, #dbe4ff, #c8f7ee);
}

.k-course__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.k-course__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
}

.k-course__badge--new { background: #8433c4; }
.k-course__badge--hot { background: #00d8d6; color: #111; }
.k-course__badge--combo { background: #f59e0b; color: #111; }

.k-course__chip {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(17, 17, 17, 0.55);
    color: #fff;
    backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
}

.k-course__body {
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.k-course__body h3 {
    font-family: var(--k-font-display);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

.k-course__body p {
    font-size: 13px;
    color: var(--k-muted-2);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.k-course__meta {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--k-muted-2);
}

.k-level {
    font-weight: 700;
}

.k-level--beginner { color: #059669; }
.k-level--intermediate { color: #4248d6; }
.k-level--advanced { color: #8433c4; }

/* Course product */
.k-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 13px;
    color: var(--k-muted-2);
    padding: 4px 0 18px;
}

.k-crumbs a {
    color: var(--k-teal);
    font-weight: 600;
    text-decoration: none;
}

.k-crumbs a:hover {
    text-decoration: underline;
}

.k-crumbs a:focus-visible,
.k-product__share:focus-visible,
.k-product__included a:focus-visible {
    outline: 3px solid var(--k-indigo);
    outline-offset: 3px;
    border-radius: 8px;
}

.k-crumbs [aria-current="page"] {
    color: var(--k-ink);
    max-width: 36ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-product {
    display: grid;
    gap: 32px;
    padding-bottom: 40px;
}

.k-product__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--k-radius-card);
    aspect-ratio: 16 / 9;
    min-height: 220px;
    background:
        radial-gradient(circle at 28% 30%, rgba(66, 72, 214, 0.28), transparent 42%),
        radial-gradient(circle at 78% 64%, rgba(0, 212, 177, 0.28), transparent 46%),
        linear-gradient(135deg, #dbe4ff, #c8f7ee);
    box-shadow: var(--k-shadow);
}

.k-product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.k-product__media--empty::after {
    content: "";
    position: absolute;
    inset: 22% 18% 28%;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.55), transparent 36%),
        linear-gradient(160deg, rgba(66, 72, 214, 0.18), rgba(0, 107, 88, 0.12));
    pointer-events: none;
}

.k-product__intro {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.k-product__kicker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.k-product__kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-indigo);
}

.k-product__share {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--k-muted);
    font-family: var(--k-font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
}

.k-product__share .material-symbols-outlined {
    font-size: 20px;
}

.k-product__share:hover {
    color: var(--k-indigo);
    background: rgba(66, 72, 214, 0.08);
}

.k-product__title {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.k-product__lead {
    margin: 0;
    max-width: 46rem;
    color: var(--k-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.k-product__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.k-product__facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(186, 202, 195, 0.7);
    color: var(--k-muted);
    font-size: 13px;
    font-weight: 600;
}

.k-product__facts .material-symbols-outlined {
    font-size: 18px;
    color: var(--k-teal);
}

.k-product__buy {
    background: #fff;
    border-radius: var(--k-radius-card);
    padding: 28px;
    box-shadow: var(--k-shadow);
    border: 1px solid rgba(186, 202, 195, 0.45);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.k-product__price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.k-product__price {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--k-indigo);
    letter-spacing: -0.03em;
}

.k-product__price-was {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--k-muted-2);
    text-decoration: line-through;
}

.k-product__save {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #059669;
}

.k-product__cta {
    width: 100%;
    min-height: 48px;
    padding: 14px 22px;
    border-radius: 14px;
    font-size: 15px;
}

.k-product__hint {
    margin: 8px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--k-muted-2);
}

.k-product__includes {
    margin: 4px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(186, 202, 195, 0.55);
    list-style: none;
    display: grid;
    gap: 14px;
}

.k-product__includes li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--k-muted);
    line-height: 1.4;
}

.k-product__includes .material-symbols-outlined {
    font-size: 20px;
    color: var(--k-teal);
}

.k-product__body {
    display: grid;
    gap: 40px;
}

.k-product__section h2 {
    margin: 0 0 18px;
    font-family: var(--k-font-display);
    font-size: 1.35rem;
    font-weight: 800;
}

.k-product__copy {
    color: var(--k-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.k-product__included,
.k-syllabus {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.k-product__included a,
.k-product__included > li > div,
.k-syllabus li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid rgba(186, 202, 195, 0.55);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.k-product__included a:hover,
.k-syllabus li:hover {
    transform: translateY(-1px);
    border-color: rgba(66, 72, 214, 0.35);
    box-shadow: var(--k-shadow);
}

.k-product__included-index,
.k-syllabus__index {
    font-family: var(--k-font-display);
    font-size: 13px;
    font-weight: 800;
    color: var(--k-indigo);
    min-width: 1.6rem;
}

.k-product__included-title,
.k-syllabus__title {
    flex: 1;
    font-weight: 700;
}

.k-product__included-meta,
.k-syllabus__meta {
    color: var(--k-muted-2);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.k-product__included .material-symbols-outlined {
    color: var(--k-muted-2);
}

.k-product__related {
    padding: 28px 0 64px;
}

.k-shell:not([data-cart-page]) .k-crumbs {
    padding-bottom: 24px;
}

.k-shell:not([data-cart-page]) .k-page-hero {
    padding: 28px 0 40px;
}

.k-shell:not([data-cart-page]) .k-page-hero p {
    margin-top: 18px;
}

.k-shell:not([data-cart-page]) .k-product__related {
    padding: 40px 0 72px;
}

.k-shell:not([data-cart-page]) .k-course-grid {
    gap: 28px;
}

.k-shell:not([data-cart-page]) .k-course__body {
    padding: 24px 24px 28px;
    gap: 16px;
}

@media (min-width: 1024px) {
    .k-product {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas:
            "media buy"
            "intro buy"
            "body buy";
        align-items: start;
        column-gap: 40px;
        row-gap: 28px;
    }

    .k-product__media { grid-area: media; }
    .k-product__intro { grid-area: intro; }
    .k-product__buy {
        grid-area: buy;
        position: sticky;
        top: 6.75rem;
    }
    .k-product__body { grid-area: body; }
}

@media (prefers-reduced-motion: reduce) {
    .k-product__included a,
    .k-syllabus li,
    .k-course {
        transition: none;
    }

    .k-product__included a:hover,
    .k-syllabus li:hover {
        transform: none;
    }
}

.k-cart__hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 8px;
}

.k-cart {
    display: grid;
    gap: 24px;
    padding-bottom: 24px;
}

.k-cart__list {
    display: grid;
    gap: 14px;
}

@media (min-width: 1024px) {
    .k-cart {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }
}

.k-cart-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    background: #fff;
    border-radius: 20px;
    padding: 16px;
    box-shadow: var(--k-shadow);
    border: 1px solid rgba(186, 202, 195, 0.45);
}

@media (min-width: 640px) {
    .k-cart-item {
        grid-template-columns: 148px minmax(0, 1fr);
        padding: 18px;
        gap: 20px;
    }
}

.k-cart-item__media {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #dbe4ff, #c8f7ee);
}

.k-cart-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.k-cart-item__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

@media (min-width: 720px) {
    .k-cart-item__body {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.k-cart-item__copy h2 {
    margin: 4px 0 0;
    font-family: var(--k-font-display);
    font-size: 1.15rem;
    font-weight: 800;
}

.k-cart-item__copy h2 a {
    color: inherit;
    text-decoration: none;
}

.k-cart-item__copy h2 a:hover {
    color: var(--k-indigo);
}

.k-cart-item__lead {
    margin: 8px 0 0;
    color: var(--k-muted);
    font-size: 14px;
    line-height: 1.5;
}

.k-cart-item__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

@media (min-width: 720px) {
    .k-cart-item__side {
        align-items: flex-end;
        min-width: 7.5rem;
    }
}

.k-cart-item__price {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--k-indigo);
}

.k-cart-item__remove {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #b42318;
    font-family: var(--k-font-body);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 10px;
}

.k-cart-item__remove:hover,
.k-cart-item__remove:focus-visible {
    background: rgba(180, 35, 24, 0.08);
}

.k-cart-item__remove .material-symbols-outlined {
    font-size: 18px;
}

.k-cart-summary {
    background: #fff;
    border-radius: var(--k-radius-card);
    padding: 22px;
    box-shadow: var(--k-shadow);
    border: 1px solid rgba(186, 202, 195, 0.45);
}

@media (min-width: 1024px) {
    .k-cart-summary {
        position: sticky;
        top: 6.75rem;
    }
}

.k-cart-summary h2 {
    margin: 0 0 16px;
    font-family: var(--k-font-display);
    font-size: 1.2rem;
    font-weight: 800;
}

.k-cart-summary dl {
    margin: 0 0 18px;
    display: grid;
    gap: 10px;
}

.k-cart-summary dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--k-muted);
}

.k-cart-summary__total {
    padding-top: 10px;
    border-top: 1px solid rgba(186, 202, 195, 0.55);
    font-family: var(--k-font-display);
    color: var(--k-ink) !important;
    font-size: 1.05rem !important;
    font-weight: 800;
}

.k-cart-summary__back {
    display: block;
    margin-top: 12px;
    text-align: center;
    color: var(--k-indigo);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.k-empty--hero {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 40px 32px;
    margin-bottom: 24px;
}

.k-empty__icon {
    font-size: 40px;
    color: var(--k-indigo);
}

.k-empty--hero h2 {
    margin: 8px 0 0;
    font-family: var(--k-font-display);
    font-size: 1.5rem;
    color: var(--k-ink);
}

.k-empty--hero p {
    margin: 0;
    max-width: 36rem;
}

.k-empty--hero .k-btn {
    margin-top: 8px;
    width: auto;
}

.k-empty__note {
    font-size: 12px !important;
}

.k-order {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--k-shadow);
    border: 1px solid rgba(186, 202, 195, 0.45);
    margin-bottom: 24px;
}

.k-order__head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.k-order h2 {
    margin: 4px 0 0;
    font-family: var(--k-font-display);
    font-size: 1.2rem;
}

.k-order__date,
.k-order__items {
    color: var(--k-muted);
    font-size: 14px;
}

.k-order__date {
    margin: 10px 0 0;
}

.k-order__aside {
    text-align: right;
}

.k-order__total {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--k-indigo);
}

.k-order__status {
    display: inline-flex;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.k-order__status--paid { background: #d1fae5; color: #047857; }
.k-order__status--pending { background: #e0e7ff; color: #3730a3; }
.k-order__status--failed { background: #fee2e2; color: #b42318; }
.k-order__status--refunded { background: #f3f4f6; color: #4b5563; }

.k-order__items {
    list-style: none;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(186, 202, 195, 0.5);
    display: grid;
    gap: 12px;
}

.k-order__items li,
.k-order-detail ul li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.k-order__open {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 20px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--k-indigo);
    font-family: var(--k-font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.order-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.order-detail-modal.hidden {
    display: none;
}

.order-detail-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(22, 29, 27, 0.55);
}

.order-detail-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 36rem);
    max-height: min(92vh, 720px);
    overflow: auto;
}

.k-modal-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--k-shadow-search);
    padding: 8px 8px 20px;
}

.k-modal-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 8px;
}

.k-modal-card__head h2 {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 1.2rem;
}

.k-modal-card__close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    color: var(--k-muted);
}

.order-detail-modal__body {
    padding: 8px 20px 12px;
}

.k-order-detail dl {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
}

.k-order-detail dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.k-order-detail dt {
    color: var(--k-muted-2);
}

.k-order-detail h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 800;
}

.k-order-detail ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.k-story {
    display: grid;
    gap: 40px;
    padding: 20px 0 80px;
}

@media (min-width: 960px) {
    .k-story {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: start;
        gap: 56px;
    }
}

.k-story--about > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.k-story--about .k-product__lead,
.k-story--about .k-product__copy {
    max-width: 38rem;
}

.k-story--about .k-story__actions {
    justify-content: center;
}

@media (min-width: 960px) {
    .k-story--about {
        align-items: center;
    }
}

.k-story .k-product__copy {
    margin: 18px 0 0;
}

.k-story__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.k-story--form .k-product__lead {
    margin-top: 12px;
    margin-bottom: 8px;
}

.k-story__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
}

.k-story__facts--stack {
    margin-top: 28px;
}

.k-story__facts li {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--k-shadow);
}

.k-story__facts .material-symbols-outlined {
    color: var(--k-indigo);
    font-size: 28px;
}

.k-story__facts strong {
    display: block;
    margin: 12px 0 8px;
    font-family: var(--k-font-display);
}

.k-story__facts p {
    margin: 0;
    color: var(--k-muted);
    font-size: 14px;
    line-height: 1.55;
}

.k-legal {
    max-width: 760px;
    padding: 28px 0 88px;
}

.k-legal h1 {
    font-family: var(--k-font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 8px 0 0;
}

.k-legal__updated {
    margin: 14px 0 28px;
    color: var(--k-muted-2);
    font-size: 14px;
}

.k-legal h2 {
    font-family: var(--k-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 28px 0 10px;
}

.k-legal p,
.k-legal li {
    color: var(--k-muted);
    font-size: 16px;
    line-height: 1.7;
}

.k-legal p {
    margin: 0 0 14px;
}

.k-legal ul {
    margin: 0 0 16px;
    padding-left: 1.2rem;
}

.k-legal li + li {
    margin-top: 8px;
}

.k-legal a {
    color: var(--k-indigo);
    font-weight: 600;
    text-decoration: none;
}

.k-legal a:hover {
    text-decoration: underline;
}

.k-form-card {
    background: #fff;
    border-radius: var(--k-radius-card);
    padding: 32px;
    box-shadow: var(--k-shadow);
}

.k-form {
    display: grid;
    gap: 20px;
}

@media (min-width: 720px) {
    .k-form {
        grid-template-columns: 1fr 1fr;
    }

    .k-field--full {
        grid-column: 1 / -1;
    }
}

.k-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

.k-field input,
.k-field textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--k-outline);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--k-font-body);
    font-size: 15px;
    background: #fff;
    color: var(--k-ink);
}

.k-field textarea {
    min-height: 132px;
    resize: vertical;
}

.k-field input:focus-visible,
.k-field textarea:focus-visible {
    outline: 3px solid var(--k-indigo);
    outline-offset: 2px;
}

.k-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--k-muted);
    font-weight: 500 !important;
}

.k-check input {
    width: 18px;
    min-height: 18px;
    margin-top: 2px;
    accent-color: var(--k-indigo);
}

.field-error {
    margin: 6px 0 0;
    color: #b42318;
    font-size: 13px;
}

.k-loadmore {
    display: flex;
    justify-content: center;
    margin: 40px 0 16px;
}

.k-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 36px 0 8px;
}

.k-pager.is-hidden,
.k-pager.hidden {
    display: none;
}

.k-pager__info {
    margin: 0;
    font-size: 13px;
    color: var(--k-muted-2);
}

.k-pager__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.k-pager__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.k-pager__btn {
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--k-ink);
    font-family: var(--k-font-display);
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--k-shadow);
    cursor: pointer;
}

.k-pager__btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.k-pager__btn.is-active {
    background: var(--k-indigo);
    color: #fff;
}

.k-pager__btn:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.k-pager__ellipsis {
    color: var(--k-muted-2);
    padding: 0 4px;
    user-select: none;
}

/* Lesson */
.k-lesson {
    display: grid;
    gap: 24px;
    padding: 24px 0 48px;
}

@media (min-width: 1024px) {
    .k-lesson {
        grid-template-columns: 1fr 320px;
        align-items: start;
    }
}

.k-player {
    position: relative;
    background: #1a2330;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    color: #fff;
}

.k-player__top {
    position: absolute;
    inset: 0 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    z-index: 2;
}

.k-player__stage {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(0, 212, 177, 0.25), transparent 42%),
        radial-gradient(circle at 70% 40%, rgba(132, 51, 196, 0.28), transparent 36%),
        #182028;
}

.k-net {
    position: absolute;
    inset: 18% 12% 28%;
}

.k-net span {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #00d4b1;
    box-shadow: 0 0 16px #00d4b1;
}

.k-net span:nth-child(odd) { background: #b57bff; box-shadow: 0 0 16px #b57bff; }

.k-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
}

.k-play button {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    border: 0;
    background: #006b58;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.k-player__caption {
    position: absolute;
    left: 18px;
    bottom: 56px;
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 700;
    z-index: 2;
}

.k-player__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    font-size: 12px;
    z-index: 2;
}

.k-player__bar .scrub {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    overflow: hidden;
}

.k-player__bar .scrub i {
    display: block;
    width: 45%;
    height: 100%;
    background: #fff;
}

.k-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--k-shadow);
    margin-top: 16px;
}

.k-card h1,
.k-card h2 {
    font-family: var(--k-font-display);
    margin: 0 0 12px;
    line-height: 1.3;
}

.k-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.k-tag {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}

.k-tag--purple { background: #ede9fe; color: #6d28d9; }
.k-tag--blue { background: #dbeafe; color: #1d4ed8; }

.k-card__title-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.k-card__title-row h1 {
    font-size: 28px;
    font-weight: 800;
}

.k-save {
    border: 1px solid var(--k-indigo);
    color: var(--k-indigo);
    background: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.k-instructor {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #f3f4f6;
    margin-top: 16px;
    padding-top: 16px;
}

.k-instructor img,
.k-instructor .ph {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #dbeafe;
}

.k-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}

.k-tabs button {
    background: none;
    border: 0;
    padding: 0 0 10px;
    font-weight: 600;
    color: var(--k-muted-2);
    cursor: pointer;
}

.k-tabs button.is-active {
    color: var(--k-teal);
    border-bottom: 2px solid var(--k-teal);
}

.k-notes-composer {
    position: relative;
}

.k-notes-composer textarea {
    width: 100%;
    min-height: 88px;
    border-radius: 12px;
    border: 1px solid var(--k-outline);
    padding: 12px 52px 12px 14px;
}

.k-notes-composer button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--k-teal);
    color: #fff;
}

.k-note {
    display: flex;
    gap: 12px;
    background: #e6f4f1;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 8px;
    font-size: 14px;
}

.k-note time {
    background: var(--k-indigo);
    color: #fff;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    height: fit-content;
}

.k-progress {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--k-shadow);
    position: sticky;
    top: 88px;
}

.k-progress h2 {
    font-family: var(--k-font-display);
    font-size: 18px;
    margin: 0 0 12px;
}

.k-bar {
    height: 10px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.k-bar > i {
    display: block;
    height: 100%;
    width: var(--k-progress, 0%);
    background: var(--k-teal);
    transform-origin: left center;
    animation: kBarFill 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.k-acc {
    margin-top: 12px;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 12px;
}

.k-acc summary {
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.k-acc li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-top: 10px;
    color: var(--k-muted-2);
}

.k-acc li.is-active {
    background: #d1fae5;
    color: var(--k-teal);
    border-radius: 10px;
    padding: 8px;
    margin-left: -8px;
    margin-right: -8px;
}

.k-acc .done {
    text-decoration: line-through;
}

/* Profile */
.k-welcome {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    padding: 40px 0 24px;
    flex-wrap: wrap;
}

.k-welcome h1 {
    font-family: var(--k-font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.25;
}

.k-welcome p {
    color: var(--k-muted-2);
    margin: 12px 0 0;
    line-height: 1.65;
    max-width: 36rem;
}

.k-user {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--k-shadow);
}

.k-user__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid #e8eeeb;
}

.k-user__head img {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid #00d8d6;
    flex-shrink: 0;
}

.k-user__head h2 {
    font-family: var(--k-font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.k-user__head p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--k-muted-2);
    line-height: 1.4;
}

.k-user__facts {
    margin: 0;
}

.k-user__facts > div {
    display: grid;
    gap: 2px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f4;
}

.k-user__facts > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.k-user__facts dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.k-user__facts dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--k-ink);
    word-break: break-word;
}

.k-dash {
    display: grid;
    gap: 24px;
    padding-bottom: 64px;
}

@media (min-width: 960px) {
    .k-dash {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
        align-items: start;
    }
}

.k-dash__aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.k-moodle {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--k-shadow);
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(66, 72, 214, 0.12);
}

.k-moodle.is-linked {
    border-color: rgba(0, 107, 88, 0.28);
    background: linear-gradient(180deg, #f3fbf7 0%, #fff 48%);
}

.k-moodle__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(66, 72, 214, 0.1);
    color: var(--k-indigo);
}

.k-moodle.is-linked .k-moodle__icon {
    background: rgba(0, 107, 88, 0.12);
    color: var(--k-teal);
}

.k-moodle__copy h2 {
    font-family: var(--k-font-display);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.35;
}

.k-moodle__copy p,
.k-moodle__hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--k-muted-2);
}

.k-moodle__btn {
    width: 100%;
    min-height: 44px;
}

.k-moodle form {
    margin: 0;
}

.k-progress-grid {
    display: grid;
    gap: 20px;
}

@media (min-width: 700px) {
    .k-progress-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.k-learn {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--k-shadow);
    animation: kLearnIn 0.55s ease both;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}

.k-progress-grid .k-learn:nth-child(1) { animation-delay: 0.04s; }
.k-progress-grid .k-learn:nth-child(2) { animation-delay: 0.12s; }
.k-progress-grid .k-learn:nth-child(3) { animation-delay: 0.2s; }
.k-progress-grid .k-learn:nth-child(4) { animation-delay: 0.28s; }
.k-progress-grid .k-learn:nth-child(5) { animation-delay: 0.36s; }
.k-progress-grid .k-learn:nth-child(6) { animation-delay: 0.44s; }

.k-learn:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 24px 48px rgba(66, 72, 214, 0.18);
}

.k-learn__media {
    height: 140px;
    background: linear-gradient(135deg, #4248d6, #00d4b1);
    position: relative;
    overflow: hidden;
}

.k-learn__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: kLearnShine 2.4s ease-in-out 0.4s infinite;
    pointer-events: none;
}

.k-learn__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.k-learn:hover .k-learn__media img {
    transform: scale(1.08);
}

.k-learn__body {
    padding: 16px 18px 18px;
}

.k-learn__body h3 {
    font-family: var(--k-font-display);
    font-size: 16px;
    margin: 8px 0 4px;
}

.k-learn__body .sub {
    font-size: 13px;
    color: var(--k-muted-2);
}

.k-learn__meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin: 12px 0 6px;
    color: var(--k-muted-2);
}

.k-learn .k-btn {
    width: 100%;
    margin-top: 12px;
    height: 44px;
}

@keyframes kLearnIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes kLearnShine {
    0% { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
}

@keyframes kBarFill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.k-reco {
    background: linear-gradient(135deg, rgba(66, 72, 214, 0.08), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(66, 72, 214, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-top: 0;
}

.k-reco span {
    color: var(--k-indigo);
    font-size: 13px;
    font-weight: 700;
}

.k-reco h3 {
    font-family: var(--k-font-display);
    font-size: 18px;
    font-weight: 800;
    margin: 8px 0 12px;
}

.k-empty {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--k-shadow);
    color: var(--k-muted-2);
}

.sys-toast-stack {
    position: fixed;
    left: 50%;
    right: auto;
    top: 5.75rem;
    bottom: auto;
    z-index: 10040;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(24rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    pointer-events: none;
}

.sys-toast {
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 16px;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
    border: 2px solid #14b8a6;
    animation: sys-toast-in 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    isolation: isolate;
    font-family: var(--k-font-body);
}

.sys-toast.is-leaving {
    animation: sys-toast-out 0.25s ease forwards;
    pointer-events: none;
}

.sys-toast__icon {
    display: none;
}

.sys-toast--success {
    background: #fff;
    border-color: #14b8a6;
}

.sys-toast--error {
    background: #fff;
    border-color: #e11d48;
}

.sys-toast--warning {
    background: #fff;
    border-color: #d97706;
}

.sys-toast--info {
    background: #fff;
    border-color: #7c3aed;
}

.sys-toast__text {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--k-ink);
    white-space: pre-line;
}

.sys-toast__close {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    pointer-events: auto;
    transform: none !important;
}

.sys-toast__close:hover {
    background: #fff;
    color: var(--k-ink);
}

.sys-toast__close .material-symbols-outlined {
    font-size: 18px;
    pointer-events: none;
}

@keyframes sys-toast-in {
    from { opacity: 0; transform: translateY(-16px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sys-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

.swal2-popup.swal2-toast,
.swal2-popup.swal2-toast .swal2-close {
    pointer-events: auto !important;
}

.swal2-popup.swal2-toast .swal2-close {
    width: 2rem;
    height: 2rem;
    font-size: 1.6rem;
    cursor: pointer;
}

.p-swal-container {
    z-index: 10050;
}

.p-swal-toast,
.swal2-popup.swal2-toast {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    position: relative !important;
    width: auto !important;
    max-width: min(24rem, calc(100vw - 2rem)) !important;
    margin: 0 auto !important;
    padding: 12px 48px 12px 16px !important;
    border-radius: 28px !important;
    background: #fff !important;
    border: 2px solid #14b8a6 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
    font-family: var(--k-font-body) !important;
    overflow: hidden;
}

.p-swal-toast.swal2-icon-error {
    background: #fff !important;
    border-color: #e11d48 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
}

.p-swal-toast.swal2-icon-warning {
    background: #fff !important;
    border-color: #d97706 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
}

.p-swal-toast.swal2-icon-info {
    background: #fff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
}

.p-swal-toast::after,
.swal2-popup.swal2-toast::after {
    display: none;
}

.p-swal-toast__icon,
.p-swal-toast .swal2-icon,
.swal2-popup.swal2-toast .swal2-icon {
    display: none !important;
}

.p-swal-toast__title,
.p-swal-toast .swal2-title,
.swal2-popup.swal2-toast .swal2-title {
    font-family: var(--k-font-display) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--k-ink) !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

.p-swal-toast__text,
.p-swal-toast .swal2-html-container,
.swal2-popup.swal2-toast .swal2-html-container {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

.p-swal-toast__close,
.p-swal-toast .swal2-close,
.swal2-popup.swal2-toast .swal2-close {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 1.5rem !important;
}

.p-swal-toast__bar,
.p-swal-toast .swal2-timer-progress-bar,
.swal2-popup.swal2-toast .swal2-timer-progress-bar {
    background: #00e5c2 !important;
}

.moodle-oauth-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.moodle-oauth-modal.is-open {
    display: flex;
}

.moodle-oauth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(22, 29, 27, 0.55);
}

.moodle-oauth-modal__panel {
    position: relative;
    z-index: 1;
    width: min(26rem, 100%);
    background: #fff;
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
    text-align: center;
}

.moodle-oauth-modal__panel h2 {
    font-family: var(--k-font-display);
    font-size: 1.15rem;
    margin: 16px 0 8px;
}

.moodle-oauth-modal__panel p {
    margin: 0;
    color: var(--k-muted-2);
    line-height: 1.55;
}

.moodle-oauth-modal__spinner {
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 999px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--k-indigo);
    animation: moodleOAuthSpin 0.75s linear infinite;
}

@keyframes moodleOAuthSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .sys-toast-stack {
        top: auto;
        bottom: 1.25rem;
        width: calc(100vw - 1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .k-btn,
    .sys-toast,
    .moodle-oauth-modal__spinner,
    .k-learn,
    .k-learn__media::after,
    .k-bar > i {
        transition: none;
        animation: none;
    }

    .k-btn:hover,
    .k-learn:hover,
    .k-learn:hover .k-learn__media img {
        transform: none;
    }
}

.k-field select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--k-outline);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--k-font-body);
    font-size: 15px;
    background: #fff;
    color: var(--k-ink);
}

.k-field select:focus-visible {
    outline: 3px solid var(--k-indigo);
    outline-offset: 2px;
}

.k-checkout {
    display: grid;
    gap: 24px;
    padding-bottom: 48px;
}

@media (min-width: 900px) {
    .k-checkout {
        grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.7fr);
        align-items: start;
    }
}

.k-checkout__items {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.k-checkout__items li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--k-outline);
    font-size: 14px;
}

.k-checkout__pay,
.k-checkout__result {
    max-width: 640px;
}

.k-pay-notice {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(66, 72, 214, 0.12);
    background:
        radial-gradient(420px 180px at 100% 0%, rgba(0, 212, 177, 0.14), transparent 60%),
        radial-gradient(360px 160px at 0% 100%, rgba(66, 72, 214, 0.1), transparent 58%),
        #fff;
}

.k-pay-notice__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.k-pay-notice__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4248d6, #00b89a);
    color: #fff;
    box-shadow: 0 10px 24px rgba(66, 72, 214, 0.22);
    flex-shrink: 0;
}

.k-pay-notice__icon--warn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 10px 24px rgba(217, 119, 6, 0.2);
}

.k-pay-notice__icon .material-symbols-outlined {
    font-size: 28px;
}

.k-pay-notice h2 {
    margin: 4px 0 0;
    font-family: var(--k-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
}

.k-pay-notice__lead {
    margin: 0 0 20px;
    color: var(--k-muted);
    font-size: 15px;
    line-height: 1.65;
}

.k-pay-notice__steps {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.k-pay-notice__steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(186, 202, 195, 0.55);
    font-size: 13px;
    font-weight: 600;
    color: var(--k-ink);
}

.k-pay-notice__steps .material-symbols-outlined {
    color: var(--k-indigo);
    font-size: 20px;
}

.k-pay-notice__status {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    background: #eef2ff;
    color: #3730a3;
}

.k-pay-notice__status[data-state="ready"] {
    background: #edf9f1;
    color: #006b58;
}

.k-pay-notice__status[data-state="processing"] {
    background: #eef2ff;
    color: #3730a3;
}

.k-pay-notice__status[data-state="error"] {
    background: #fef3f2;
    color: #b42318;
}

.k-pay-notice__status[data-state="closed"] {
    background: #fffbeb;
    color: #92400e;
}

.k-pay-notice .k-product__cta {
    width: 100%;
}

.k-checkout__result h1 {
    margin: 8px 0 12px;
}

.k-checkout__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.k-checkout__campus {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #dbe4e0;
    background: #f8faf9;
}

.k-checkout__campus p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.k-checkout__campus.is-ready {
    border-color: #b7e4c7;
    background: #edf9f1;
}

.k-checkout__campus.is-pending {
    border-color: #fde68a;
    background: #fffbeb;
}

.k-checkout__campus-error {
    margin-top: 8px !important;
    color: #92400e;
}

[data-product-actions] .k-product__cta + .k-product__cta,
[data-product-actions] form + .k-product__cta {
    margin-top: 10px;
}

/* Mi aprendizaje dashboard */
.k-learn-dash {
    padding-top: 8px;
    padding-bottom: 72px;
}

.k-learn-dash__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.k-learn-dash__notice {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 14px;
}

.k-learn-dash__metrics {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

@media (min-width: 640px) {
    .k-learn-dash__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .k-learn-dash__metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.k-learn-stat {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--k-shadow);
}

.k-learn-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(66, 72, 214, 0.1);
    color: var(--k-indigo);
    margin-bottom: 14px;
}

.k-learn-stat p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k-muted-2);
}

.k-learn-stat strong {
    display: block;
    font-family: var(--k-font-display);
    font-size: 1.7rem;
    margin: 6px 0 12px;
}

.k-learn-stat em {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--k-muted-2);
    margin-top: 8px;
}

.k-learn-panel {
    background: #fff;
    border-radius: 24px;
    padding: 22px;
    box-shadow: var(--k-shadow);
    margin-bottom: 24px;
    min-width: 0;
}

.k-learn-panel__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.k-learn-panel__head h2 {
    font-family: var(--k-font-display);
    font-size: 1.15rem;
    margin: 0;
}

.k-learn-panel__head p,
.k-learn-panel__empty {
    margin: 6px 0 0;
    color: var(--k-muted-2);
    font-size: 14px;
}

.k-learn-panel__head a {
    color: var(--k-teal);
    font-size: 13px;
    font-weight: 700;
}

.k-learn-panel__empty {
    padding: 28px 8px;
    text-align: center;
}

.k-learn-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: var(--k-teal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.k-learn-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    min-height: 220px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.k-learn-bars__col {
    flex: 1 0 4.5rem;
    min-width: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 220px;
    text-decoration: none;
    color: inherit;
}

.k-learn-bars__value {
    font-size: 11px;
    font-weight: 700;
    color: var(--k-teal);
    margin-bottom: 6px;
}

.k-learn-bars__fill {
    width: 100%;
    border-radius: 12px 12px 6px 6px;
    background: linear-gradient(180deg, #00d4b1 0%, var(--k-indigo) 100%);
}

.k-learn-bars__label {
    margin-top: 10px;
    font-size: 11px;
    color: var(--k-muted-2);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.k-learn-split {
    display: grid;
    gap: 20px;
}

@media (min-width: 980px) {
    .k-learn-split {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.k-learn-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.k-learn-list li + li,
.k-learn-list--grades li + li {
    border-top: 1px solid #eef2f0;
}

.k-learn-list a,
.k-learn-list--grades li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    text-decoration: none;
    color: inherit;
}

.k-learn-list img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 12px;
    background: #eef4f1;
    flex-shrink: 0;
}

.k-learn-list span,
.k-learn-list--grades li span:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.k-learn-list strong,
.k-learn-acts strong {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}

.k-learn-list em,
.k-learn-acts em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--k-muted-2);
    margin-top: 2px;
}

.k-learn-list--grades b,
.k-learn-acts b {
    font-size: 13px;
    color: var(--k-teal);
    flex-shrink: 0;
}

.k-learn-list .material-symbols-outlined,
.k-learn-list--grades .material-symbols-outlined {
    color: var(--k-teal);
}

.k-learn-courses {
    margin-top: 12px;
}

.k-learn--link {
    color: inherit;
    text-decoration: none;
}

.k-learn__cta {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--k-indigo);
}

.k-learn-back {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--k-teal);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.k-learn-course__hero {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
}

@media (min-width: 980px) {
    .k-learn-course__hero {
        grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.7fr);
        align-items: start;
    }
}

.k-learn-cover {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--k-shadow);
}

.k-learn-cover__media {
    position: relative;
    aspect-ratio: 21 / 9;
    background: #e8f3ef;
}

.k-learn-cover__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.k-learn-cover p {
    margin: 0;
    padding: 18px 20px;
    color: var(--k-muted);
    line-height: 1.6;
}

.k-learn-course__side {
    display: grid;
    gap: 16px;
}

.k-learn-status--done { color: var(--k-teal); }
.k-learn-status--now { color: var(--k-indigo); }
.k-learn-status--idle { color: var(--k-muted-2); }

.k-learn-table-wrap {
    overflow-x: auto;
}

.k-learn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.k-learn-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k-muted-2);
    padding: 10px 8px;
    border-bottom: 1px solid #eef2f0;
}

.k-learn-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #f3f6f4;
}

.k-learn-acts {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow: auto;
}

.k-learn-acts li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f6f4;
}

.k-learn-acts .material-symbols-outlined {
    color: var(--k-muted-2);
}

.k-learn-acts li.is-done .material-symbols-outlined,
.k-learn-acts li.is-done b {
    color: var(--k-teal);
}

.k-learn-acts b {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k-muted-2);
}

.k-combo-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.k-combo-warn .material-symbols-outlined {
    font-size: 22px;
    color: #c2410c;
}

.k-combo-warn p {
    margin: 0;
}

.k-combo-warn--inline {
    display: block;
    margin: 8px 0 0;
    font-size: 13px;
}

.k-product__included-owned {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}