/* PentaEdu default theme — Visual Contract tokens */
@font-face {
    font-family: Vazirmatn;
    src: url("/fonts/vazirmatn/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Vazirmatn;
    src: url("/fonts/vazirmatn/Vazirmatn-Bold.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --pe-ink: #17213a;
    --pe-muted: #6a7487;
    --pe-navy: #142d57;
    --pe-blue: #2864dc;
    --pe-blue-deep: #1849a9;
    --pe-soft-blue: #eef4ff;
    --pe-surface: #ffffff;
    --pe-soft: #f6f8fc;
    --pe-line: #e5eaf2;
    --pe-green: #087e5b;
    --pe-green-soft: #edf9f4;
    --pe-amber: #a2660b;
    --pe-amber-soft: #fff6e5;
    --pe-subtle: #98a2b3;
    --pe-shadow: 0 24px 65px rgba(28, 53, 94, .12);
    --pe-radius: 16px;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    min-height: 100%;
    background: var(--pe-soft);
    color: var(--pe-ink);
    font-family: Vazirmatn, Tahoma, sans-serif;
    direction: rtl;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; }
/* Icon boxes: keep grid centering even if a broader `span { display:block }` rule exists nearby. */
.pe-logo-mark,
.pe-feature-icon,
.pe-thumb-icon,
.pe-person-mark,
.co-section-icon,
.ws-metric-icon,
.ws-nav-icon,
.ws-brand-mark,
.ws-play {
    display: grid;
    place-items: center;
}
.pe-logo-mark svg,
.pe-feature-icon svg,
.pe-thumb-icon svg,
.pe-person-mark svg,
.co-section-icon svg,
.ws-metric-icon svg,
.ws-nav-icon svg,
.ws-brand-mark svg,
.ws-play svg,
.ws-icon-btn svg,
.ws-avatar svg {
    display: block;
    margin: 0;
}

.pe-wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.pe-nav {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.pe-logo { display: flex; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; }
.pe-logo-mark {
    width: 34px; height: 34px; border-radius: 11px;
    background: linear-gradient(145deg, var(--pe-navy), var(--pe-blue));
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 8px 18px rgba(40, 100, 220, .22);
    font-size: 13px;
}
.pe-logo small { display: block; color: var(--pe-muted); font-size: 10px; font-weight: 400; margin-top: -2px; }
.pe-menu { display: flex; align-items: center; gap: 26px; color: var(--pe-muted); font-size: 14px; }
.pe-menu a.is-active { color: var(--pe-ink); font-weight: 500; }
.pe-memberships-nav,
.pe-packages-nav,
.pe-books-nav { display: none; }
.pe-nav-actions { display: flex; align-items: center; gap: 10px; }
.pe-link { color: var(--pe-navy); font-size: 14px; padding: 10px 12px; }
.pe-action, .pe-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    border: 1px solid var(--pe-line);
    padding: 0 18px;
    background: var(--pe-surface);
    color: var(--pe-ink);
    font-weight: 500;
    cursor: pointer;
}
.pe-action-primary, .pe-btn-primary {
    background: var(--pe-navy);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(20, 45, 87, .18);
}
.pe-btn-ghost { background: transparent; }
.pe-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--pe-blue-deep); background: var(--pe-soft-blue);
    border: 1px solid color-mix(in srgb, var(--pe-blue) 18%, transparent);
    border-radius: 999px; padding: 7px 11px; font-size: 12px; margin-bottom: 18px;
}
.pe-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pe-blue); }
.pe-lead { color: var(--pe-muted); font-size: 16px; line-height: 2; max-width: 560px; margin: 0 0 24px; }
.pe-muted { color: var(--pe-muted); }
.pe-price { color: var(--pe-navy); font-weight: 500; }
.pe-empty { padding: 48px 0; text-align: center; color: var(--pe-muted); }

/* Non-home pages */
.pe-hero {
    position: relative;
    padding: 56px 0 48px;
    background: linear-gradient(180deg, var(--pe-surface), var(--pe-soft));
}
h1 { font-size: clamp(28px, 4vw, 48px); line-height: 1.35; margin: 0 0 16px; font-weight: 500; }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 12px 0 64px; }
.pe-card {
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(23, 33, 58, .06);
    display: flex; flex-direction: column; gap: 12px; min-height: 180px;
}
.pe-card h2, .pe-card h3 { margin: 0; font-size: 18px; font-weight: 500; }
.pe-card p { margin: 0; color: var(--pe-muted); font-size: 14px; line-height: 1.8; flex: 1; }
.pe-section { padding: 28px 0 64px; }
.pe-course-hero { padding: 36px 0 20px; }
.pe-summary { color: var(--pe-muted); font-size: 16px; line-height: 2; max-width: 720px; }
.pe-enroll {
    margin: 22px 0;
    padding: 18px;
    border-radius: 18px;
    background: var(--pe-soft-blue);
    border: 1px solid color-mix(in srgb, var(--pe-blue) 16%, transparent);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.pe-curriculum h2 { font-size: 20px; }
.pe-curriculum h3 { font-size: 16px; margin: 18px 0 8px; }
.pe-curriculum ul { margin: 0; padding: 0; list-style: none; }
.pe-curriculum li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--pe-line); font-size: 14px;
}
.pe-alert {
    padding: 12px 14px; border-radius: 12px; margin-bottom: 16px;
    background: var(--pe-green-soft); color: var(--pe-green);
}
.pe-alert-error { background: #fff1f0; color: #b42318; }
.pe-form { display: grid; gap: 14px; max-width: 420px; }
.pe-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.pe-form input {
    min-height: 44px; border-radius: 12px; border: 1px solid var(--pe-line);
    padding: 0 12px; background: #fff;
}
.pe-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; }
.pe-table th, .pe-table td { text-align: right; padding: 14px 16px; border-bottom: 1px solid var(--pe-line); font-size: 14px; }
.pe-totals { margin-top: 18px; background: #fff; border: 1px solid var(--pe-line); border-radius: 16px; padding: 16px; max-width: 360px; margin-right: auto; }
.pe-totals div { display: flex; justify-content: space-between; margin-bottom: 8px; }
.pe-wait {
    background: var(--pe-green-soft);
    border: 1px solid color-mix(in srgb, var(--pe-green) 20%, transparent);
    border-radius: 18px; padding: 22px; margin: 24px 0;
}
.pe-auth { max-width: 440px; margin: 48px auto 80px; background: #fff; border: 1px solid var(--pe-line); border-radius: 20px; padding: 28px; box-shadow: var(--pe-shadow); }

/* Footer (shared) */
.pe-footer { background: var(--pe-soft); border-top: 1px solid var(--pe-line); padding: 50px 0 25px; color: var(--pe-muted); }
.pe-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(2, 1fr); gap: 45px; }
.pe-footer-about { color: var(--pe-muted); font-size: 12px; line-height: 2; max-width: 300px; margin-top: 15px; }
.pe-footer h3 { font-size: 13px; font-weight: 500; margin: 0 0 16px; color: var(--pe-ink); }
.pe-footer-links { display: grid; gap: 11px; color: var(--pe-muted); font-size: 11px; }
.pe-footer-bottom { border-top: 1px solid var(--pe-line); margin-top: 38px; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; color: var(--pe-muted); font-size: 10px; }

/* Homepage Visual Contract — scoped */
.pe-home {
    background: var(--pe-surface);
}
.pe-home .pe-hero {
    padding: 66px 0 82px;
    background: linear-gradient(180deg, var(--pe-surface), var(--pe-soft));
}
.pe-home .pe-hero::before {
    content: "";
    position: absolute;
    width: 430px; height: 430px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 134, 241, .14), rgba(76, 134, 241, 0) 68%);
    top: -160px; right: -130px;
    pointer-events: none;
}
.pe-home .pe-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 64px; }
.pe-home .pe-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pe-blue) 13%, transparent); }
.pe-home h1 { font-size: clamp(34px, 4.6vw, 59px); line-height: 1.34; letter-spacing: -.9px; margin: 0 0 19px; }
.pe-home .pe-emphasis { color: var(--pe-blue-deep); position: relative; white-space: nowrap; }
.pe-home .pe-emphasis::after {
    content: "";
    position: absolute;
    right: 3px; left: 3px; bottom: 2px; height: 7px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pe-blue) 16%, transparent);
    z-index: 0;
}
.pe-home .pe-lead { font-size: 17px; max-width: 570px; margin: 0 0 28px; }
.pe-home .pe-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pe-home .pe-hero-actions .pe-action { min-height: 50px; padding-inline: 22px; }
.pe-home .pe-proof { margin-top: 30px; display: flex; align-items: center; gap: 15px; color: var(--pe-muted); font-size: 12px; }
.pe-home .pe-avatars { display: flex; padding-right: 8px; }
.pe-home .pe-avatar {
    width: 31px; height: 31px; border-radius: 50%; margin-right: -8px;
    border: 2px solid var(--pe-surface);
    display: grid; place-items: center; font-size: 10px; color: #fff;
    background: linear-gradient(145deg, #2f6be2, #87a9ea);
}
.pe-home .pe-stars { color: #e6a318; letter-spacing: 1px; }
.pe-home .pe-showcase { position: relative; padding: 22px 14px 22px 30px; }
.pe-home .pe-showcase::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 42% 58% 58% 42% / 48% 45% 55% 52%;
    background: linear-gradient(145deg, color-mix(in srgb, var(--pe-blue) 13%, var(--pe-surface)), color-mix(in srgb, var(--pe-blue) 3%, var(--pe-surface)));
}
.pe-home .pe-course-window {
    position: relative;
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: 23px;
    padding: 15px;
    box-shadow: var(--pe-shadow);
    transform: rotate(-1.2deg);
}
.pe-home .pe-window-top { display: flex; align-items: center; justify-content: space-between; padding: 3px 2px 13px; color: var(--pe-muted); font-size: 11px; }
.pe-home .pe-window-dots { display: flex; gap: 5px; direction: ltr; }
.pe-home .pe-window-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--pe-line); }
.pe-home .pe-video {
    aspect-ratio: 16/9; border-radius: 17px;
    background: linear-gradient(135deg, #173b79, #316fd8 56%, #78a4ef);
    position: relative; overflow: hidden;
    display: grid; place-items: center; color: #fff;
}
.pe-home .pe-video::before {
    content: "";
    position: absolute;
    width: 220px; height: 220px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    left: -45px; top: -95px;
    box-shadow: 0 0 0 45px rgba(255,255,255,.04), 0 0 0 90px rgba(255,255,255,.03);
}
.pe-home .pe-video-copy { position: absolute; right: 22px; bottom: 20px; z-index: 1; }
.pe-home .pe-video-copy small { opacity: .8; }
.pe-home .pe-video-copy strong { display: block; margin-top: 4px; font-size: 17px; font-weight: 500; }
.pe-home .pe-play {
    width: 53px; height: 53px;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 50%;
    background: rgba(255,255,255,.17);
    backdrop-filter: blur(8px);
    display: grid; place-items: center;
    margin-right: 115px;
}
.pe-home .pe-course-meta { padding: 16px 5px 4px; }
.pe-home .pe-course-title { font-weight: 500; margin-bottom: 13px; }
.pe-home .pe-progress-label { display: flex; justify-content: space-between; color: var(--pe-muted); font-size: 11px; margin-bottom: 7px; }
.pe-home .pe-progress-track { height: 7px; background: var(--pe-soft-blue); border-radius: 20px; overflow: hidden; }
.pe-home .pe-progress-value { width: 68%; height: 100%; background: var(--pe-blue); border-radius: inherit; }
.pe-home .pe-float {
    position: absolute;
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    box-shadow: 0 16px 40px rgba(20, 45, 87, .13);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; z-index: 2;
}
.pe-home .pe-float svg { color: var(--pe-blue); flex-shrink: 0; }
.pe-home .pe-float strong { display: block; font-size: 12px; font-weight: 500; }
.pe-home .pe-float span { color: var(--pe-muted); }
.pe-home .pe-float-one { top: 5px; left: -6px; }
.pe-home .pe-float-two { bottom: 2px; right: -16px; }
.pe-home .pe-trust { border-top: 1px solid var(--pe-line); border-bottom: 1px solid var(--pe-line); background: var(--pe-surface); }
.pe-home .pe-trust-grid { min-height: 92px; display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); align-items: center; gap: 22px; }
.pe-home .pe-trust-title { color: var(--pe-muted); font-size: 12px; line-height: 1.8; }
.pe-home .pe-trust-item { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--pe-muted); font-size: 13px; white-space: nowrap; }
.pe-home .pe-trust-item svg { color: var(--pe-navy); flex-shrink: 0; }
.pe-home .pe-section { padding: 92px 0; }
.pe-home .pe-section-soft { background: var(--pe-soft); }
.pe-home .pe-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.pe-home .pe-heading-copy { max-width: 630px; }
.pe-home .pe-kicker { color: var(--pe-blue-deep); font-size: 12px; font-weight: 500; margin-bottom: 9px; }
.pe-home h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.55; margin: 0 0 8px; font-weight: 500; }
.pe-home .pe-heading p { color: var(--pe-muted); margin: 0; line-height: 1.9; font-size: 14px; }
.pe-home .pe-more { color: var(--pe-blue-deep); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.pe-home .pe-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pe-home .pe-course-card {
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    display: block;
}
.pe-home .pe-course-card:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(20, 45, 87, .10); }
.pe-home .pe-thumb { aspect-ratio: 1.62; position: relative; overflow: hidden; padding: 20px; display: flex; align-items: end; color: #fff; }
.pe-home .pe-thumb::before, .pe-home .pe-thumb::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.pe-home .pe-thumb::before { width: 190px; height: 190px; left: -70px; top: -95px; }
.pe-home .pe-thumb::after { width: 110px; height: 110px; left: -28px; top: -52px; }
.pe-home .pe-thumb-one { background: linear-gradient(135deg, #15386f, #2e6bd5); }
.pe-home .pe-thumb-two { background: linear-gradient(135deg, #27534d, #369981); }
.pe-home .pe-thumb-three { background: linear-gradient(135deg, #55356f, #8b58b4); }
.pe-home .pe-thumb-label { position: relative; z-index: 1; font-size: 12px; opacity: .9; }
.pe-home .pe-thumb-icon { position: absolute; left: 22px; bottom: 18px; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); }
.pe-home .pe-card-body { padding: 19px; }
.pe-home .pe-card-tag { color: var(--pe-blue-deep); font-size: 11px; margin-bottom: 9px; }
.pe-home .pe-card-title { font-size: 16px; font-weight: 500; line-height: 1.75; min-height: 56px; margin-bottom: 14px; color: var(--pe-ink); }
.pe-home .pe-card-summary { color: var(--pe-muted); font-size: 12px; line-height: 1.8; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--pe-line); }
.pe-home .pe-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; }
.pe-home .pe-card-meta { color: var(--pe-muted); font-size: 11px; display: flex; gap: 12px; }
.pe-home .pe-card-foot .pe-price { font-size: 13px; font-weight: 500; white-space: nowrap; }
.pe-home .pe-value-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 72px; align-items: center; }
.pe-home .pe-feature-list { margin-top: 28px; display: grid; gap: 13px; }
.pe-home .pe-feature { display: flex; gap: 12px; align-items: flex-start; }
.pe-home .pe-feature-icon { flex: 0 0 auto; width: 35px; height: 35px; border-radius: 11px; background: var(--pe-soft-blue); color: var(--pe-blue-deep); display: grid; place-items: center; }
.pe-home .pe-feature strong { display: block; font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.pe-home .pe-feature span { color: var(--pe-muted); font-size: 12px; line-height: 1.8; }
.pe-home .pe-dashboard-preview {
    background: #f4f7fb;
    border: 1px solid var(--pe-line);
    border-radius: 23px;
    box-shadow: var(--pe-shadow);
    padding: 12px;
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}
.pe-home .pe-ws-mock-side {
    background: linear-gradient(180deg, #102a4c 0%, #173e72 100%);
    border-radius: 16px;
    padding: 14px 10px;
    color: #fff;
}
.pe-home .pe-ws-mock-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 10px;
}
.pe-home .pe-ws-mock-brand strong { font-weight: 700; }
.pe-home .pe-ws-mock-nav-label {
    margin: 10px 0 6px;
    color: rgba(255,255,255,.45);
    font-size: 8px;
    font-weight: 700;
}
.pe-home .pe-ws-mock-nav { display: grid; gap: 4px; }
.pe-home .pe-ws-mock-nav span {
    padding: 6px 7px;
    border-radius: 8px;
    color: rgba(255,255,255,.72);
    font-size: 8px;
    line-height: 1.4;
}
.pe-home .pe-ws-mock-nav span.is-active {
    background: rgba(255,255,255,.14);
    color: #fff;
    font-weight: 700;
}
.pe-home .pe-ws-mock-main {
    min-width: 0;
    padding: 4px 2px 2px;
    display: grid;
    gap: 10px;
}
.pe-home .pe-ws-mock-pagehead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.pe-home .pe-ws-mock-eyebrow {
    color: var(--pe-muted);
    font-size: 8px;
    margin-bottom: 2px;
}
.pe-home .pe-ws-mock-pagehead strong {
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}
.pe-home .pe-ws-mock-date {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--pe-line);
    color: var(--pe-muted);
    font-size: 8px;
    font-weight: 700;
}
.pe-home .pe-ws-mock-continue {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 15%, rgba(80, 134, 238, .33), transparent 34%),
        linear-gradient(125deg, #102a4c 0%, #173e72 58%, #245bbb 100%);
}
.pe-home .pe-ws-mock-kicker {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #bcd1f5;
    font-size: 8px;
    font-weight: 700;
}
.pe-home .pe-ws-mock-kicker i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #72d5b4;
}
.pe-home .pe-ws-mock-continue h3 {
    margin: 6px 0 3px;
    font-size: 13px;
    font-weight: 800;
}
.pe-home .pe-ws-mock-continue p {
    margin: 0;
    color: #c6d8f4;
    font-size: 9px;
}
.pe-home .pe-ws-mock-btn {
    display: inline-flex;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    color: var(--pe-navy);
    font-size: 9px;
    font-weight: 800;
}
.pe-home .pe-ws-mock-art {
    position: relative;
    min-height: 78px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.13);
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
    overflow: hidden;
}
.pe-home .pe-ws-mock-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(16, 42, 76, .55);
    font-size: 7px;
    font-weight: 700;
}
.pe-home .pe-ws-mock-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    opacity: .9;
}
.pe-home .pe-ws-mock-progress {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: #d8e5fa;
    font-size: 7px;
}
.pe-home .pe-ws-mock-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}
.pe-home .pe-ws-mock-metric {
    background: #fff;
    border: 1px solid var(--pe-line);
    border-radius: 11px;
    padding: 8px 9px;
}
.pe-home .pe-ws-mock-metric strong {
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}
.pe-home .pe-ws-mock-metric span {
    display: block;
    margin-top: 2px;
    color: var(--pe-muted);
    font-size: 8px;
}
.pe-home .pe-ws-mock-metric.is-green strong { color: var(--pe-green); }
.pe-home .pe-ws-mock-panel {
    background: #fff;
    border: 1px solid var(--pe-line);
    border-radius: 13px;
    padding: 10px 11px 4px;
}
.pe-home .pe-ws-mock-panel-head {
    margin-bottom: 4px;
}
.pe-home .pe-ws-mock-panel-head strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
}
.pe-home .pe-ws-mock-panel-head span {
    display: block;
    margin-top: 1px;
    color: var(--pe-muted);
    font-size: 8px;
}
.pe-home .pe-ws-mock-course {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid #edf0f5;
}
.pe-home .pe-ws-mock-thumb {
    width: 42px;
    aspect-ratio: 1.2;
    border-radius: 8px;
    background: linear-gradient(145deg, #183d6f, #3472dc);
}
.pe-home .pe-ws-mock-thumb.is-alt {
    background: linear-gradient(145deg, #245c55, #3d9a87);
}
.pe-home .pe-ws-mock-course-info { min-width: 0; }
.pe-home .pe-ws-mock-course-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}
.pe-home .pe-ws-mock-course-title strong {
    font-size: 10px;
    font-weight: 800;
}
.pe-home .pe-ws-mock-course-title em {
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef3fb;
    color: #2f5fad;
    font-size: 7px;
    font-style: normal;
    font-weight: 700;
}
.pe-home .pe-ws-mock-course-info > span {
    display: block;
    margin-top: 2px;
    color: var(--pe-muted);
    font-size: 8px;
}
.pe-home .pe-ws-mock-pct {
    color: var(--pe-muted);
    font-size: 8px;
    font-weight: 700;
    direction: ltr;
}
.pe-home .pe-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pe-home .pe-step { position: relative; padding: 24px 20px; border-top: 2px solid var(--pe-line); }
.pe-home .pe-step::before { content: attr(data-step); display: block; color: var(--pe-blue-deep); font-size: 11px; margin-bottom: 22px; }
.pe-home .pe-step strong { font-size: 14px; font-weight: 500; display: block; margin-bottom: 8px; }
.pe-home .pe-step p { color: var(--pe-muted); font-size: 12px; line-height: 1.9; margin: 0; }
.pe-home .pe-story { background: var(--pe-navy); color: #fff; border-radius: 26px; padding: 45px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; overflow: hidden; position: relative; }
.pe-home .pe-story::after { content: ""; position: absolute; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; left: -105px; top: -150px; box-shadow: 0 0 0 50px rgba(255,255,255,.025); }
.pe-home .pe-quote { font-size: clamp(20px, 2.4vw, 29px); line-height: 1.85; margin: 0 0 24px; font-weight: 400; position: relative; z-index: 1; }
.pe-home .pe-person { display: flex; align-items: center; gap: 10px; font-size: 11px; opacity: .86; position: relative; z-index: 1; }
.pe-home .pe-person-mark { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.13); display: grid; place-items: center; }
.pe-home .pe-story-metric { min-width: 168px; border-right: 1px solid rgba(255,255,255,.15); padding-right: 35px; position: relative; z-index: 1; }
.pe-home .pe-story-metric strong { font-size: 38px; font-weight: 500; display: block; }
.pe-home .pe-story-metric span { font-size: 11px; opacity: .74; line-height: 1.8; }
.pe-home .pe-faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; }
.pe-home .pe-faq-list { border-top: 1px solid var(--pe-line); }
.pe-home details { border-bottom: 1px solid var(--pe-line); padding: 18px 0; }
.pe-home summary { cursor: pointer; font-size: 14px; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.pe-home summary::-webkit-details-marker { display: none; }
.pe-home summary::after { content: "+"; color: var(--pe-blue-deep); font-size: 20px; font-weight: 400; }
.pe-home details[open] summary::after { content: "−"; }
.pe-home details p { color: var(--pe-muted); font-size: 12px; line-height: 2; margin: 12px 0 0; padding-left: 32px; }
.pe-home .pe-cta { padding: 20px 0 92px; }
.pe-home .pe-cta-box { background: linear-gradient(135deg, var(--pe-soft-blue), color-mix(in srgb, var(--pe-blue) 5%, var(--pe-surface))); border: 1px solid color-mix(in srgb, var(--pe-blue) 15%, var(--pe-line)); border-radius: 25px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.pe-home .pe-cta-box h2 { max-width: 620px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .pe-home .pe-course-card { transition: none; }
}

@media (max-width: 900px) {
    .pe-menu { display: none; }
    .pe-memberships-nav,
    .pe-packages-nav,
    .pe-books-nav { display: inline-flex; align-items: center; }
    .pe-home .pe-hero-grid, .pe-home .pe-value-grid { grid-template-columns: 1fr; }
    .pe-home .pe-hero-copy { text-align: center; }
    .pe-home .pe-lead { margin-inline: auto; }
    .pe-home .pe-hero-actions, .pe-home .pe-proof { justify-content: center; }
    .pe-home .pe-showcase { width: min(600px, 100%); margin-inline: auto; }
    .pe-home .pe-trust-grid { grid-template-columns: repeat(2, 1fr); padding: 22px 0; }
    .pe-home .pe-trust-title { grid-column: 1 / -1; text-align: center; }
    .pe-home .pe-course-grid { grid-template-columns: repeat(2, 1fr); }
    .pe-home .pe-course-card:last-child { display: none; }
    .pe-home .pe-faq-grid { grid-template-columns: 1fr; gap: 25px; }
    .pe-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (max-width: 720px) {
    .pe-hero { padding-top: 28px; }
    h1 { font-size: 28px; }
}

@media (max-width: 620px) {
    .pe-wrap { width: min(100% - 28px, 1160px); }
    .pe-nav { height: 66px; }
    .pe-link { display: none; }
    .pe-link.pe-memberships-nav,
    .pe-link.pe-packages-nav,
    .pe-link.pe-books-nav { display: inline-flex; align-items: center; }
    .pe-nav-actions .pe-action { min-height: 40px; padding-inline: 13px; font-size: 12px; }
    .pe-home .pe-hero { padding: 42px 0 58px; }
    .pe-home h1 { font-size: 35px; }
    .pe-home .pe-lead { font-size: 14px; }
    .pe-home .pe-hero-actions { display: grid; }
    .pe-home .pe-hero-actions .pe-action { width: 100%; }
    .pe-home .pe-proof { flex-wrap: wrap; }
    .pe-home .pe-showcase { padding: 18px 4px; }
    .pe-home .pe-float { display: none; }
    .pe-home .pe-play { margin-right: 70px; }
    .pe-home .pe-trust-grid { grid-template-columns: 1fr 1fr; gap: 18px 8px; }
    .pe-home .pe-trust-item { font-size: 11px; }
    .pe-home .pe-section { padding: 64px 0; }
    .pe-home .pe-heading { display: block; }
    .pe-home .pe-more { margin-top: 14px; }
    .pe-home .pe-course-grid { grid-template-columns: 1fr; }
    .pe-home .pe-course-card:last-child { display: block; }
    .pe-home .pe-dashboard-preview { grid-template-columns: 1fr; padding: 10px; }
    .pe-home .pe-ws-mock-side { display: none; }
    .pe-home .pe-ws-mock-continue { grid-template-columns: 1fr; }
    .pe-home .pe-ws-mock-metrics { grid-template-columns: 1fr 1fr; }
    .pe-home .pe-ws-mock-metrics .pe-ws-mock-metric:last-child { grid-column: 1 / -1; }
    .pe-home .pe-stat:last-child { display: none; }
    .pe-home .pe-steps { grid-template-columns: 1fr 1fr; }
    .pe-home .pe-story { padding: 30px 24px; grid-template-columns: 1fr; gap: 25px; }
    .pe-home .pe-story-metric { border-right: 0; border-top: 1px solid rgba(255,255,255,.15); padding: 20px 0 0; }
    .pe-home .pe-cta-box { padding: 32px 23px; display: block; }
    .pe-home .pe-cta-box .pe-action { margin-top: 16px; width: 100%; }
    .pe-footer-grid { grid-template-columns: 1fr 1fr; }
    .pe-footer-grid > div:first-child { grid-column: 1 / -1; }
    .pe-footer-bottom { display: block; line-height: 2; }
}

/* Course Detail Visual Contract — scoped */
.pe-course {
    background: var(--pe-surface);
}
.pe-course .pc-hero {
    background: linear-gradient(180deg, var(--pe-surface), var(--pe-soft));
    border-top: 1px solid var(--pe-line);
    padding: 25px 0 76px;
    position: relative;
    overflow: hidden;
}
.pe-course .pc-hero::after {
    content: "";
    position: absolute;
    width: 440px; height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 115, 223, .11), rgba(59, 115, 223, 0) 70%);
    top: -160px; left: -120px;
    pointer-events: none;
}
.pe-course .pc-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    color: var(--pe-muted); font-size: 11px; margin-bottom: 38px;
}
.pe-course .pc-breadcrumb svg { width: 13px; height: 13px; flex-shrink: 0; }
.pe-course .pc-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 62px; align-items: center; }
.pe-course .pc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 999px; color: var(--pe-blue-deep); background: var(--pe-soft-blue);
    border: 1px solid color-mix(in srgb, var(--pe-blue) 18%, transparent);
    padding: 7px 11px; font-size: 11px; margin-bottom: 18px;
}
.pe-course .pc-eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--pe-blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pe-blue) 13%, transparent);
}
.pe-course h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.48; letter-spacing: -.7px; margin: 0 0 17px; }
.pe-course .pc-lead { color: var(--pe-muted); font-size: 16px; line-height: 2; max-width: 650px; margin: 0 0 25px; }
.pe-course .pc-preview-wrap { position: relative; padding: 14px; text-decoration: none; color: inherit; display: block; }
.pe-course .pc-preview-wrap::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 41% 59% 49% 51% / 54% 45% 55% 46%;
    background: linear-gradient(145deg, color-mix(in srgb, var(--pe-blue) 13%, var(--pe-surface)), color-mix(in srgb, var(--pe-blue) 3%, var(--pe-surface)));
}
.pe-course .pc-preview {
    position: relative; aspect-ratio: 1.43; border-radius: 22px; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #122e5c, #2c68cc 57%, #7ba7ee);
    box-shadow: var(--pe-shadow); display: grid; place-items: center;
}
.pe-course .pc-preview::before {
    content: "";
    position: absolute; width: 360px; height: 360px;
    border: 1px solid rgba(255,255,255,.11); border-radius: 50%;
    left: -160px; top: -210px;
    box-shadow: 0 0 0 65px rgba(255,255,255,.03), 0 0 0 125px rgba(255,255,255,.025);
}
.pe-course .pc-preview-copy { position: absolute; right: 24px; bottom: 22px; z-index: 1; }
.pe-course .pc-preview-copy small { opacity: .75; }
.pe-course .pc-preview-copy strong { display: block; margin-top: 5px; font-size: 17px; font-weight: 500; }
.pe-course .pc-play {
    position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.55);
    display: grid; place-items: center; backdrop-filter: blur(8px);
}
.pe-course .pc-preview-badge {
    position: absolute; top: 7px; left: -2px; z-index: 2;
    background: var(--pe-surface); color: var(--pe-ink);
    border: 1px solid var(--pe-line); border-radius: 14px; padding: 10px 13px;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 14px 34px rgba(20,45,87,.12); font-size: 10px;
}
.pe-course .pc-preview-badge svg { color: var(--pe-blue); flex-shrink: 0; }
.pe-course .pc-anchor-shell { border-bottom: 1px solid var(--pe-line); background: var(--pe-surface); }
.pe-course .pc-anchor {
    min-height: 64px; display: flex; align-items: center; gap: 28px;
    color: var(--pe-muted); font-size: 12px; overflow-x: auto; scrollbar-width: none;
}
.pe-course .pc-anchor::-webkit-scrollbar { display: none; }
.pe-course .pc-anchor a.is-current { color: var(--pe-blue-deep); font-weight: 500; position: relative; }
.pe-course .pc-anchor a.is-current::after {
    content: ""; position: absolute; height: 2px; background: var(--pe-blue);
    right: 0; left: 0; bottom: -23px; border-radius: 2px;
}
.pe-course .pc-content { padding: 65px 0 90px; background: var(--pe-surface); }
.pe-course .pc-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; align-items: start; }
.pe-course .pc-main { min-width: 0; }
.pe-course .pc-section { padding-bottom: 58px; margin-bottom: 58px; border-bottom: 1px solid var(--pe-line); }
.pe-course .pc-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pe-course .pc-kicker { color: var(--pe-blue-deep); font-size: 11px; font-weight: 500; margin-bottom: 7px; }
.pe-course h2 { font-size: clamp(23px, 2.7vw, 32px); line-height: 1.6; font-weight: 500; margin: 0 0 11px; }
.pe-course .pc-section-intro { color: var(--pe-muted); font-size: 13px; line-height: 2; margin: 0 0 23px; max-width: 700px; }
.pe-course .pc-prose { color: var(--pe-muted); font-size: 14px; line-height: 2; margin: 0 0 23px; max-width: 700px; }
.pe-course .pc-prose p { margin: 0 0 12px; }
.pe-course .pc-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border: 1px solid var(--pe-line); border-radius: 15px; overflow: hidden; }
.pe-course .pc-facts.is-two { grid-template-columns: 1fr 1fr; }
.pe-course .pc-fact { padding: 17px 14px; border-left: 1px solid var(--pe-line); }
.pe-course .pc-fact:last-child { border-left: 0; }
.pe-course .pc-fact span { display: block; color: var(--pe-muted); font-size: 9px; margin-bottom: 6px; }
.pe-course .pc-fact strong { font-size: 12px; font-weight: 500; }
.pe-course .pc-curriculum-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.pe-course .pc-curriculum-meta { color: var(--pe-muted); font-size: 11px; white-space: nowrap; }
.pe-course .pc-chapter { border: 1px solid var(--pe-line); border-radius: 15px; margin-bottom: 10px; background: var(--pe-surface); overflow: hidden; }
.pe-course .pc-chapter summary {
    cursor: pointer; list-style: none; display: grid;
    grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; padding: 17px;
}
.pe-course .pc-chapter summary::-webkit-details-marker { display: none; }
.pe-course .pc-chapter-number {
    width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
    background: var(--pe-soft-blue); color: var(--pe-blue-deep); font-size: 10px;
}
.pe-course .pc-chapter-title strong { font-size: 13px; font-weight: 500; display: block; }
.pe-course .pc-chapter-title span { color: var(--pe-muted); font-size: 9px; margin-top: 3px; display: block; }
.pe-course .pc-chevron { color: var(--pe-muted); display: grid; place-items: center; transition: transform .2s ease; }
.pe-course .pc-chapter[open] .pc-chevron { transform: rotate(180deg); }
.pe-course .pc-lessons { border-top: 1px solid var(--pe-line); padding: 6px 16px 10px; }
.pe-course .pc-lesson {
    min-height: 48px; display: grid; grid-template-columns: 24px 1fr auto; gap: 9px;
    align-items: center; border-bottom: 1px solid var(--pe-line); color: var(--pe-muted); font-size: 10px;
}
.pe-course .pc-lesson:last-child { border-bottom: 0; }
.pe-course .pc-lesson svg { color: var(--pe-blue-deep); }
.pe-course .pc-preview-pill { color: var(--pe-blue-deep); background: var(--pe-soft-blue); border-radius: 999px; padding: 5px 8px; font-size: 9px; }
.pe-course .pc-empty { color: var(--pe-muted); font-size: 13px; line-height: 2; }
.pe-course .pc-buy {
    position: sticky; top: 24px; background: var(--pe-surface);
    border: 1px solid var(--pe-line); border-radius: 20px; box-shadow: var(--pe-shadow); padding: 20px;
}
.pe-course .pc-buy-label { color: var(--pe-muted); font-size: 10px; margin-bottom: 8px; }
.pe-course .pc-price { font-size: 22px; font-weight: 500; }
.pe-course .pc-price small { font-size: 10px; font-weight: 400; }
.pe-course .pc-price-block { display: grid; gap: 4px; }
.pe-course .pc-old-price { color: var(--pe-muted); font-size: 13px; text-decoration: line-through; }
.pe-course .pc-off { color: var(--pe-green); font-size: 11px; font-weight: 500; }
.pe-course .pc-coupon-code { color: var(--pe-blue-deep); font-size: 11px; }
.pe-course .pc-buy .pc-action, .pe-course .pc-buy .pe-action {
    width: 100%; min-height: 49px; margin: 18px 0 12px;
}
.pe-course .pc-action {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 13px; border: 1px solid var(--pe-line); padding: 0 18px;
    background: var(--pe-surface); color: var(--pe-ink); font-weight: 500; cursor: pointer;
}
.pe-course .pc-action-primary {
    background: var(--pe-navy); color: #fff; border-color: transparent;
    box-shadow: 0 10px 24px rgba(20, 45, 87, .18);
}
.pe-course .pc-tax-note { color: var(--pe-muted); font-size: 9px; line-height: 1.8; margin: 0 0 8px; }
.pe-course .pc-unavailable { color: var(--pe-muted); font-size: 13px; line-height: 1.9; margin: 12px 0 0; }
.pe-course .pc-includes-title { font-size: 11px; font-weight: 500; margin: 17px 0 11px; padding-top: 17px; border-top: 1px solid var(--pe-line); }
.pe-course .pc-includes { display: grid; gap: 11px; color: var(--pe-muted); font-size: 10px; }
.pe-course .pc-include { display: flex; justify-content: space-between; gap: 10px; }
.pe-course .pc-include span:first-child { display: flex; align-items: center; gap: 7px; }
.pe-course .pc-include svg { color: var(--pe-navy); flex-shrink: 0; }
.pe-course .pc-related { padding: 75px 0; background: var(--pe-soft); }
.pe-course .pc-related-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 25px; }
.pe-course .pc-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.pe-course .pc-related-card { background: var(--pe-surface); border: 1px solid var(--pe-line); border-radius: 16px; overflow: hidden; display: block; }
.pe-course .pc-related-art { aspect-ratio: 1.9; padding: 16px; color: #fff; display: flex; align-items: end; position: relative; overflow: hidden; }
.pe-course .pc-related-art-one { background: linear-gradient(135deg, #27534d, #369981); }
.pe-course .pc-related-art-two { background: linear-gradient(135deg, #55356f, #8b58b4); }
.pe-course .pc-related-art-three { background: linear-gradient(135deg, #73411d, #c77a3c); }
.pe-course .pc-related-art svg { position: absolute; left: 17px; top: 17px; opacity: .8; }
.pe-course .pc-related-art span { font-size: 10px; }
.pe-course .pc-related-body { padding: 15px; }
.pe-course .pc-related-body strong { font-size: 13px; line-height: 1.8; display: block; font-weight: 500; min-height: 47px; color: var(--pe-ink); }
.pe-course .pc-related-foot { display: flex; justify-content: space-between; gap: 10px; color: var(--pe-muted); font-size: 9px; margin-top: 12px; }
.pe-course .pe-alert { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
    .pe-course .pc-chevron { transition: none; }
}

@media (max-width: 920px) {
    .pe-course .pc-hero-grid { grid-template-columns: 1fr; }
    .pe-course .pc-preview-wrap { width: min(620px, 100%); margin-inline: auto; }
    .pe-course .pc-content-grid { grid-template-columns: 1fr; }
    .pe-course .pc-sidebar { grid-row: 1; }
    .pe-course .pc-buy { position: relative; top: auto; }
    .pe-course .pc-related-grid { grid-template-columns: 1fr 1fr; }
    .pe-course .pc-related-card:last-child { display: none; }
}

@media (max-width: 620px) {
    .pe-course .pc-hero { padding-bottom: 48px; }
    .pe-course .pc-breadcrumb { margin-bottom: 25px; white-space: nowrap; overflow: hidden; }
    .pe-course h1 { font-size: 32px; }
    .pe-course .pc-lead { font-size: 14px; }
    .pe-course .pc-preview-wrap { padding: 8px 0; }
    .pe-course .pc-preview-badge { display: none; }
    .pe-course .pc-preview-copy { right: 18px; bottom: 16px; }
    .pe-course .pc-anchor { gap: 20px; }
    .pe-course .pc-content { padding-top: 42px; }
    .pe-course .pc-buy { padding: 18px; }
    .pe-course .pc-buy .pc-action, .pe-course .pc-buy .pe-action { width: 100%; }
    .pe-course .pc-facts, .pe-course .pc-facts.is-two { grid-template-columns: 1fr 1fr; }
    .pe-course .pc-curriculum-head { display: block; }
    .pe-course .pc-curriculum-meta { margin-top: 8px; }
    .pe-course .pc-related-grid { grid-template-columns: 1fr; }
    .pe-course .pc-related-card:last-child { display: block; }
}

/* Checkout Visual Contract — scoped */
.pe-checkout { background: var(--pe-soft); }
.pe-checkout .co-wrap { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.pe-checkout .co-header { background: var(--pe-surface); border-bottom: 1px solid var(--pe-line); }
.pe-checkout .co-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pe-checkout .co-secure { color: var(--pe-muted); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.pe-checkout .co-secure svg { color: var(--pe-green); flex-shrink: 0; }
.pe-checkout .co-progress-shell { background: var(--pe-surface); border-bottom: 1px solid var(--pe-line); }
.pe-checkout .co-progress { min-height: 58px; display: flex; align-items: center; justify-content: center; }
.pe-checkout .co-step { display: flex; align-items: center; gap: 7px; color: var(--pe-muted); font-size: 12px; }
.pe-checkout .co-step:not(:last-child)::after { content: ""; width: 65px; height: 1px; background: var(--pe-line); margin: 0 13px; }
.pe-checkout .co-step-number {
    width: 23px; height: 23px; border-radius: 50%; border: 1px solid var(--pe-line);
    display: grid; place-items: center; font-size: 10px;
}
.pe-checkout .co-step-done { color: var(--pe-green); }
.pe-checkout .co-step-done .co-step-number { background: var(--pe-green-soft); color: var(--pe-green); border-color: transparent; }
.pe-checkout .co-step-active { color: var(--pe-blue-deep); font-weight: 500; }
.pe-checkout .co-step-active .co-step-number { background: var(--pe-blue); color: #fff; border-color: transparent; }
.pe-checkout .co-main { padding: 44px 0 80px; }
.pe-checkout .co-title { margin-bottom: 26px; }
.pe-checkout .co-title h1 { font-size: 25px; line-height: 1.6; font-weight: 500; margin: 0 0 4px; }
.pe-checkout .co-title p { color: var(--pe-muted); font-size: 13px; margin: 0; }
.pe-checkout .co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 30px; align-items: start; }
.pe-checkout .co-stack,
.pe-checkout .co-form { display: grid; gap: 16px; }
.pe-checkout .co-section { background: var(--pe-surface); border: 1px solid var(--pe-line); border-radius: 17px; padding: 20px; }
.pe-checkout .co-section-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; }
.pe-checkout .co-section-icon {
    width: 35px; height: 35px; border-radius: 11px; background: var(--pe-soft-blue); color: var(--pe-blue-deep);
    display: grid; place-items: center; flex: 0 0 auto;
}
.pe-checkout .co-section-head strong { display: block; font-size: 14px; font-weight: 500; margin-top: 1px; }
.pe-checkout .co-section-head > div > span { display: block; color: var(--pe-muted); font-size: 12px; margin-top: 3px; line-height: 1.6; }
.pe-checkout .co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pe-checkout .co-field { display: grid; gap: 6px; }
.pe-checkout .co-field-full { grid-column: 1 / -1; }
.pe-checkout .co-label { font-size: 12px; font-weight: 500; color: var(--pe-muted); }
.pe-checkout .co-value,
.pe-checkout .co-input {
    width: 100%; min-height: 44px; border: 1px solid var(--pe-line); border-radius: 11px; background: var(--pe-soft);
    color: var(--pe-ink); padding: 0 12px; font-size: 13px;
}
.pe-checkout .co-value { display: flex; align-items: center; }
.pe-checkout .co-value[dir="ltr"] { justify-content: flex-start; }
.pe-checkout .co-input { direction: rtl; }
.pe-checkout .co-input[dir="ltr"] { direction: ltr; text-align: left; }
.pe-checkout .co-input[readonly] { cursor: default; }
.pe-checkout .co-field-hint { color: var(--pe-muted); font-size: 12px; line-height: 1.6; }
.pe-checkout .co-buyer-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--pe-soft);
    border: 1px solid var(--pe-line);
}
.pe-checkout .co-buyer-card > div { display: grid; gap: 4px; }
.pe-checkout .co-buyer-card-full { grid-column: 1 / -1; }
.pe-checkout .co-buyer-card strong { font-size: 13px; font-weight: 600; word-break: break-word; }
.pe-checkout .co-signed {
    margin-top: 13px; color: var(--pe-muted); background: var(--pe-soft); border-radius: 10px;
    padding: 10px 12px; font-size: 12px; display: flex; align-items: center; gap: 7px; line-height: 1.7;
}
.pe-checkout .co-signed svg { color: var(--pe-green); flex-shrink: 0; }
.pe-checkout .co-pay-status { color: var(--pe-muted); font-size: 13px; line-height: 1.9; margin: 0; }
.pe-checkout .co-section.is-deferred { opacity: .92; }
.pe-checkout .co-methods { display: grid; gap: 10px; }
.pe-checkout .co-method {
    display: grid; grid-template-columns: 22px 43px 1fr auto; gap: 10px; align-items: center;
    min-height: 64px; border: 1px solid var(--pe-line); border-radius: 13px; background: var(--pe-surface);
    padding: 11px 13px;
}
.pe-checkout .co-method-selected {
    border-color: color-mix(in srgb, var(--pe-blue) 48%, var(--pe-line));
    background: var(--pe-soft-blue);
}
.pe-checkout .co-radio {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--pe-line);
    display: grid; place-items: center;
}
.pe-checkout .co-method-selected .co-radio { border-color: var(--pe-blue); }
.pe-checkout .co-method-selected .co-radio::after {
    content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pe-blue);
}
.pe-checkout .co-method { position: relative; cursor: pointer; }
.pe-checkout .co-method-input {
    position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.pe-checkout .co-method:has(.co-method-input:checked) {
    border-color: color-mix(in srgb, var(--pe-blue) 48%, var(--pe-line));
    background: var(--pe-soft-blue);
}
.pe-checkout .co-method:has(.co-method-input:checked) .co-radio { border-color: var(--pe-blue); }
.pe-checkout .co-method:has(.co-method-input:checked) .co-radio::after {
    content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pe-blue);
}
.pe-checkout .co-manual-warn {
    margin-top: 10px; padding: 11px 13px; border-radius: 12px;
    background: color-mix(in srgb, #c2410c 10%, var(--pe-surface));
    border: 1px solid color-mix(in srgb, #c2410c 28%, var(--pe-line));
    color: #9a3412; font-size: 12px; line-height: 1.7;
}
.pe-checkout .co-bank-logo {
    width: 43px; height: 43px; border-radius: 12px; background: var(--pe-surface);
    border: 1px solid var(--pe-line); display: grid; place-items: center; color: var(--pe-blue-deep);
}
.pe-checkout .co-method-copy strong { display: block; font-size: 13px; font-weight: 500; }
.pe-checkout .co-method-copy span { display: block; color: var(--pe-muted); font-size: 12px; line-height: 1.6; }
.pe-checkout .co-method-badge {
    color: var(--pe-green); background: var(--pe-green-soft); border-radius: 99px;
    padding: 5px 7px; font-size: 11px; white-space: nowrap;
}
.pe-checkout .co-summary {
    position: sticky; top: 20px; background: var(--pe-surface); border: 1px solid var(--pe-line);
    border-radius: 19px; box-shadow: var(--pe-shadow); padding: 19px;
}
.pe-checkout .co-summary h2 { font-size: 15px; font-weight: 500; margin: 0 0 16px; }
.pe-checkout .co-product { display: grid; grid-template-columns: 72px 1fr; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--pe-line); color: inherit; }
.pe-checkout .co-product + .co-product { padding-top: 16px; }
.pe-checkout .co-product-art {
    aspect-ratio: 1.15; border-radius: 12px; background: linear-gradient(135deg, #15386f, #2e6bd5);
    color: #fff; display: grid; place-items: center; position: relative; overflow: hidden;
}
.pe-checkout .co-product-art::before {
    content: ""; position: absolute; width: 80px; height: 80px; border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%; left: -32px; top: -40px;
}
.pe-checkout .co-product-copy strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.75; margin-bottom: 4px; color: var(--pe-ink); }
.pe-checkout .co-product-copy span { display: block; color: var(--pe-muted); font-size: 12px; line-height: 1.7; }
.pe-checkout .co-product-price { margin-top: 6px; color: var(--pe-ink) !important; font-size: 12px !important; }
.pe-checkout .co-coupon {
    padding: 12px 0;
    border-bottom: 1px solid var(--pe-line);
}
.pe-checkout .co-coupon > summary {
    cursor: pointer;
    list-style: none;
    color: var(--pe-blue-deep);
    font-size: 12px;
    font-weight: 600;
}
.pe-checkout .co-coupon > summary::-webkit-details-marker { display: none; }
.pe-checkout .co-coupon-body { margin-top: 10px; }
.pe-checkout .co-coupon-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.pe-checkout .co-coupon-form .co-input { min-height: 40px; }
.pe-checkout .co-coupon-form button,
.pe-checkout .co-coupon-applied button,
.pe-checkout .co-coupon-clear button {
    border: 1px solid var(--pe-line); background: var(--pe-surface); border-radius: 10px;
    padding: 0 12px; min-height: 40px; font-size: 12px; cursor: pointer; color: var(--pe-blue-deep);
}
.pe-checkout .co-coupon-applied { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.pe-checkout .co-coupon-clear { margin-top: 8px; }
.pe-checkout .co-coupon-error { color: #b42318; font-size: 12px; margin: 8px 0 0; }
.pe-checkout .co-totals { padding: 14px 0 4px; display: grid; gap: 10px; }
.pe-checkout .co-total-row { display: flex; justify-content: space-between; gap: 12px; color: var(--pe-muted); font-size: 13px; }
.pe-checkout .co-tax-note { display: flex; align-items: center; gap: 5px; }
.pe-checkout .co-grand-total {
    display: flex; align-items: end; justify-content: space-between; gap: 12px;
    padding: 14px 0 2px; margin-top: 3px; border-top: 1px solid var(--pe-line);
}
.pe-checkout .co-grand-total span { font-size: 12px; font-weight: 500; color: var(--pe-ink); }
.pe-checkout .co-grand-total strong { font-size: 18px; font-weight: 500; }
.pe-checkout .co-terms {
    display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
    color: var(--pe-muted); font-size: 12px; line-height: 1.7;
}
.pe-checkout .co-terms input { margin-top: 3px; flex-shrink: 0; }
.pe-checkout .co-terms a { color: var(--pe-blue-deep); font-weight: 500; }
.pe-checkout .co-pay-action {
    width: 100%; min-height: 49px; margin-top: 16px; border: 0; border-radius: 12px;
    background: var(--pe-navy); color: #fff; display: flex; align-items: center; justify-content: center;
    gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 10px 24px rgba(20,45,87,.16);
    text-decoration: none;
}
.pe-checkout a.co-pay-action { display: inline-flex; }
.pe-checkout .co-pay-action-inline { width: auto; min-width: 200px; margin-inline: auto; }
.pe-checkout .co-pay-sub { text-align: center; color: var(--pe-muted); font-size: 12px; line-height: 1.7; margin-top: 9px; }
.pe-checkout .co-auth-switch { text-align: center; margin: 12px 0 0; font-size: 12px; }
.pe-checkout .co-auth-switch a { color: var(--pe-blue-deep); font-weight: 500; }
.pe-checkout .co-section .co-pay-action { margin-top: 16px; }
.pe-checkout .co-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.pe-checkout .co-trust-item {
    background: var(--pe-soft); border-radius: 10px; padding: 9px; display: flex; align-items: center;
    gap: 7px; color: var(--pe-muted); font-size: 12px; line-height: 1.6;
}
.pe-checkout .co-trust-item svg { color: var(--pe-green); flex-shrink: 0; }
.pe-checkout .co-footer { border-top: 1px solid var(--pe-line); background: var(--pe-surface); }
.pe-checkout .co-footer-inner { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--pe-muted); font-size: 11px; }
.pe-checkout .co-footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.pe-checkout .co-footer-links a { color: var(--pe-blue-deep); }
.pe-checkout .co-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
.pe-checkout .co-cart-list { display: grid; gap: 12px; }
.pe-checkout .co-cart-row {
    background: var(--pe-surface); border: 1px solid var(--pe-line); border-radius: 16px; padding: 16px;
    display: grid; grid-template-columns: 72px 1fr auto auto; gap: 14px; align-items: center;
}
.pe-checkout .co-cart-row.is-blocked {
    border-color: color-mix(in srgb, #b42318 28%, var(--pe-line));
    background: #fff8f7;
}
.pe-checkout .co-cart-blocked {
    color: #b42318 !important;
    font-size: 12px !important;
    margin-top: 4px;
}
.pe-checkout .co-cart-blocked-note {
    margin: 14px 0 0;
    color: #b42318;
    font-size: 12px;
    line-height: 1.7;
}
.pe-checkout .co-cart-actions { display: flex; align-items: center; gap: 12px; }
.pe-checkout .co-remove {
    min-height: 40px; border: 0; background: transparent; color: var(--pe-muted); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
}
.pe-checkout .co-empty { text-align: center; padding: 56px 24px; color: var(--pe-muted); }
.pe-checkout .co-empty .co-pay-action { margin-top: 18px; }
.pe-checkout .co-wait {
    border-radius: 18px; padding: 22px; margin-bottom: 22px;
    border: 1px solid transparent;
}
.pe-checkout .co-wait.is-success {
    background: var(--pe-green-soft);
    border-color: color-mix(in srgb, var(--pe-green) 20%, transparent);
}
.pe-checkout .co-wait.is-pending {
    background: #fffbeb;
    border-color: color-mix(in srgb, #b45309 25%, var(--pe-line));
}
.pe-checkout .co-wait.is-warn {
    background: #fff1f0;
    border-color: color-mix(in srgb, #b42318 22%, var(--pe-line));
}
.pe-checkout .co-wait h1 { margin: 0 0 8px; font-size: 24px; }
.pe-checkout .co-wait p { margin: 0; color: var(--pe-muted); font-size: 14px; line-height: 1.9; }
.pe-checkout .co-wait-actions { margin-top: 16px; }
.pe-checkout .co-wait-actions .co-pay-action { margin-top: 0; width: auto; min-width: 200px; }
.pe-checkout .co-confirm-stack { display: grid; gap: 16px; }
.pe-checkout .co-confirm-pair { display: grid; gap: 16px; }
.pe-checkout .co-confirm-pair.has-manual {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}
.pe-checkout .co-confirm-pair .co-section { margin: 0; height: 100%; }
.pe-checkout .co-order-meta { display: grid; gap: 10px; margin: 0 0 18px; }
.pe-checkout .co-order-meta-tight { margin-top: 14px; margin-bottom: 0; }
.pe-checkout .co-order-meta div { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.pe-checkout .co-order-meta span { color: var(--pe-muted); }
.pe-checkout .co-manual-receipt {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pe-line);
}
.pe-checkout .co-manual-receipt h3 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
}
.pe-checkout .co-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
}
.pe-checkout .co-text-link {
    color: var(--pe-blue-deep);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.pe-checkout .co-text-link:hover { text-decoration: underline; }
.pe-checkout .pe-alert { margin-bottom: 16px; }

@media (max-width: 820px) {
    .pe-checkout .co-grid { display: flex; flex-direction: column; gap: 20px; }
    .pe-checkout .co-summary { position: relative; top: auto; order: 1; }
    .pe-checkout .co-form { order: 2; }
    .pe-checkout .co-summary-content { display: block; }
    .pe-checkout .co-confirm-pair.has-manual { grid-template-columns: 1fr; }
    .pe-checkout .co-cart-layout { grid-template-columns: 1fr; }
    .pe-checkout .co-cart-row { grid-template-columns: 64px 1fr; }
    .pe-checkout .co-cart-actions { grid-column: 1 / -1; justify-content: space-between; }
    .pe-checkout .co-buyer-card { grid-template-columns: 1fr; }
}

@media (max-width: 590px) {
    .pe-checkout .co-wrap { width: min(100% - 26px, 1080px); }
    .pe-checkout .co-nav { min-height: 64px; }
    .pe-checkout .co-secure span { display: none; }
    .pe-checkout .co-progress { justify-content: space-between; }
    .pe-checkout .co-step { font-size: 11px; }
    .pe-checkout .co-step:not(:last-child)::after { width: 18px; margin-inline: 6px; }
    .pe-checkout .co-main { padding-top: 30px; }
    .pe-checkout .co-title h1 { font-size: 22px; }
    .pe-checkout .co-fields { grid-template-columns: 1fr; }
    .pe-checkout .co-field-full { grid-column: auto; }
    .pe-checkout .co-method { grid-template-columns: 20px 39px 1fr; }
    .pe-checkout .co-method-badge { grid-column: 3; justify-self: start; }
    .pe-checkout .co-bank-logo { width: 39px; height: 39px; }
    .pe-checkout .co-trust { grid-template-columns: 1fr; }
    .pe-checkout .co-footer-inner { display: block; padding-block: 16px; line-height: 2; }
    .pe-checkout .co-pay-action { width: 100%; }
    .pe-checkout .co-pay-action-inline { width: 100%; min-width: 0; }
}

.pe-learn .ln-shell { padding: 48px 0 90px; background: var(--pe-surface); }
.pe-learn .ln-wrap { max-width: 760px; }
.pe-learn .ln-kicker { color: var(--pe-blue-deep); font-size: 11px; margin-bottom: 8px; }
.pe-learn h1 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 22px; }
.pe-learn .ln-card {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border: 1px solid var(--pe-line); border-radius: 16px; padding: 18px 20px;
    margin-bottom: 10px; background: var(--pe-surface); box-shadow: var(--pe-shadow);
}
.pe-learn .ln-card strong { font-size: 15px; font-weight: 500; }
.pe-learn .ln-card span { color: var(--pe-blue-deep); font-size: 12px; }
.pe-learn .ln-lead { color: var(--pe-muted); margin: -12px 0 22px; line-height: 1.8; font-size: 14px; }
.pe-learn .ln-order-card {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.pe-learn .ln-order-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pe-learn .ln-order-summary {
    color: var(--pe-navy) !important;
    font-size: 13px !important;
    line-height: 1.6;
}
.pe-learn .ln-order-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.pe-learn .ln-order-ship {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid var(--pe-line);
}
.pe-learn .ln-empty { color: var(--pe-muted); line-height: 2; }
.pe-learn .ln-back { display: inline-block; color: var(--pe-muted); font-size: 12px; margin-bottom: 16px; }
.pe-learn .ln-cta {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border-radius: 12px; background: var(--pe-blue); color: #fff; font-size: 13px;
}
.pe-learn .ln-section { margin-top: 28px; }
.pe-learn .ln-section h2 { font-size: 16px; margin: 0 0 10px; }
.pe-learn .ln-lesson {
    min-height: 48px; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; border: 1px solid var(--pe-line); border-radius: 12px; padding: 10px 14px;
    margin-bottom: 8px; font-size: 13px;
}
.pe-learn .ln-lesson.is-current { border-color: var(--pe-blue); color: var(--pe-blue-deep); }
.pe-learn .ln-lesson.is-locked { color: var(--pe-muted); opacity: .7; }
.pe-learn .ln-pill { color: var(--pe-blue-deep); background: var(--pe-soft-blue); border-radius: 999px; padding: 4px 8px; font-size: 10px; }
.pe-learn .ln-player { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.pe-learn .ln-sidebar { border: 1px solid var(--pe-line); border-radius: 16px; padding: 16px; }
.pe-learn .ln-stage { min-width: 0; }
.pe-learn .ln-video { width: 100%; border-radius: 16px; background: #0b1220; aspect-ratio: 16 / 9; }
.pe-learn .ln-video::-webkit-media-controls-download-button { display: none !important; }
.pe-learn .ln-video::-webkit-media-controls-enclosure { overflow: hidden; }
.pe-learn .ln-prose { color: var(--pe-muted); font-size: 15px; line-height: 2; }
.pe-learn .ln-lesson.is-done { border-color: color-mix(in srgb, var(--pe-green, #087e5b) 45%, var(--pe-line)); }
.pe-learn .ln-complete-bar { margin-top: 28px; display: grid; gap: 10px; justify-items: start; }
.pe-learn .ln-complete-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 0;
    background: var(--pe-blue); color: #fff; font-size: 14px; cursor: pointer; text-decoration: none;
}
.pe-learn .ln-complete-btn:disabled { opacity: .65; cursor: default; background: var(--pe-muted); }
.pe-learn .ln-complete-msg { color: var(--pe-muted); font-size: 13px; margin: 0; }
.pe-learn .ln-quiz-option-img { display: block; max-width: 180px; margin-top: 8px; border-radius: 8px; }
.pe-learn .ln-quiz-review-list { display: grid; gap: 12px; margin: 16px 0; }
.pe-learn .ln-quiz-review-item { border: 1px solid var(--pe-line); border-radius: 12px; padding: 12px 14px; }
.pe-learn .ln-quiz-timer.is-warn { color: #b45309; font-weight: 600; }
.pe-learn .ln-muted { color: var(--pe-muted); font-size: 13px; margin-top: 4px; }
.pe-learn .ln-quiz-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pe-learn .ln-quiz { max-width: 760px; display: grid; gap: 20px; padding: 24px 0 48px; }
.pe-learn .ln-quiz-intro h1,
.pe-learn .ln-quiz-take h1,
.pe-learn .ln-quiz-result h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.35; }
.pe-learn .ln-quiz-desc { color: var(--pe-muted); line-height: 1.9; margin-bottom: 12px; }
.pe-learn .ln-quiz-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pe-learn .ln-quiz-meta li {
    padding: 10px 14px; border: 1px solid var(--pe-line); border-radius: 12px; background: #fff; font-size: 14px;
}
.pe-learn .ln-quiz-meta li.is-required { border-color: color-mix(in srgb, var(--pe-blue) 40%, var(--pe-line)); }
.pe-learn .ln-quiz-meta li.is-warn { border-color: color-mix(in srgb, #b45309 35%, var(--pe-line)); color: #92400e; }
.pe-learn .ln-quiz-history { margin-top: 8px; display: grid; gap: 8px; }
.pe-learn .ln-quiz-history h2 { margin: 0; font-size: 16px; }
.pe-learn .ln-quiz-history ul { margin: 0; padding: 0 18px; color: var(--pe-muted); line-height: 1.8; }
.pe-learn .ln-quiz-actions { display: grid; gap: 10px; justify-items: start; margin-top: 8px; }
.pe-learn .ln-quiz-msg { color: #b91c1c; font-size: 13px; margin: 0; }
.pe-learn .ln-quiz-take-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.pe-learn .ln-quiz-timer { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--pe-blue-deep); }
.pe-learn .ln-quiz-save-status { font-size: 12px; color: var(--pe-muted); }
.pe-learn .ln-quiz-form { display: grid; gap: 18px; }
.pe-learn .ln-quiz-q {
    display: grid; gap: 12px; padding: 18px; border: 1px solid var(--pe-line); border-radius: 16px; background: #fff;
}
.pe-learn .ln-quiz-q h2 { margin: 0; font-size: 15px; }
.pe-learn .ln-quiz-stem { line-height: 1.9; color: var(--pe-ink, #111); }
.pe-learn .ln-quiz-img { max-width: 100%; border-radius: 12px; border: 1px solid var(--pe-line); }
.pe-learn .ln-quiz-answer { display: grid; gap: 8px; }
.pe-learn .ln-quiz-option {
    display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
    border: 1px solid var(--pe-line); border-radius: 12px; cursor: pointer;
}
.pe-learn .ln-quiz-answer textarea {
    width: 100%; min-height: 72px; border: 1px solid var(--pe-line); border-radius: 12px; padding: 10px 12px; font: inherit;
}
.pe-learn .ln-quiz-score { font-size: 18px; }
.pe-learn .ln-quiz-score .is-pass { color: var(--pe-green, #087e5b); }
.pe-learn .ln-quiz-score .is-fail { color: #b91c1c; }
.pe-learn .ln-quiz-pending { color: #92400e; margin: 0; }
.pe-learn .ln-quiz-result-list { display: grid; gap: 14px; }
.pe-learn .ln-quiz-feedback, .pe-learn .ln-quiz-explain { color: var(--pe-muted); font-size: 14px; line-height: 1.8; }
.pe-learn .ln-quiz-q-score { margin: 0; font-size: 13px; color: var(--pe-muted); }
.pe-learn .ln-quiz-your-answer,
.pe-learn .ln-quiz-correct-answer { margin: 0; font-size: 14px; line-height: 1.7; }
.pe-learn .ln-quiz-correct-answer { color: var(--pe-green, #087e5b); }
.pe-learn .ln-quiz-preview-images { display: grid; gap: 10px; margin: 8px 0; }
.pe-learn .ln-quiz-result-options { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.pe-learn .ln-quiz-result-option {
    border: 1px solid var(--pe-line); border-radius: 10px; padding: 8px 12px; font-size: 14px;
}
.pe-learn .ln-quiz-result-option.is-selected { border-color: color-mix(in srgb, var(--pe-blue) 45%, var(--pe-line)); }
.pe-learn .ln-quiz-result-option.is-correct { border-color: color-mix(in srgb, var(--pe-green, #087e5b) 50%, var(--pe-line)); background: color-mix(in srgb, var(--pe-green, #087e5b) 8%, transparent); }
.pe-learn .ln-quiz-result-option.is-wrong { border-color: color-mix(in srgb, #b91c1c 40%, var(--pe-line)); }
.pe-learn .ln-quiz-review-item .is-pass { color: var(--pe-green, #087e5b); }
.pe-learn .ln-quiz-review-item .is-fail { color: #b91c1c; }
.pe-learn .ln-quiz-option:has(:checked) { border-color: color-mix(in srgb, var(--pe-blue) 45%, var(--pe-line)); }
.pe-course .pc-lesson a { color: inherit; text-decoration: none; }
.pe-course a.pc-action { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pe-course .pc-live-list { display: grid; gap: 10px; }
.pe-course .pc-live-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border: 1px solid var(--pe-line); border-radius: 15px; padding: 14px 16px; background: var(--pe-surface);
}
.pe-course .pc-live-meta { color: var(--pe-muted); font-size: 12px; margin-top: 4px; line-height: 1.7; }
.pe-course .pc-live-hint { color: var(--pe-muted); font-size: 12px; }
.pe-course .pc-live-action .pc-action {
    border: 0; cursor: pointer; background: var(--pe-blue-deep); color: #fff;
    border-radius: 999px; padding: 8px 14px; font-size: 12px;
}
.pe-live-buy {
    display: grid; gap: 10px; margin: 18px 0 28px; padding: 16px;
    border: 1px solid var(--pe-line); border-radius: 15px; background: #fff;
}
.pe-live-my { padding: 48px 0 80px; }
.pe-live-my h1 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); font-weight: 500; }
.pe-live-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border: 1px solid var(--pe-line); border-radius: 15px; padding: 14px 16px;
    background: #fff; margin-top: 12px;
}
.pe-live-join select {
    width: 100%; border: 1px solid var(--pe-line); border-radius: 10px; padding: 10px 12px; font: inherit;
}

@media (max-width: 860px) {
    .pe-learn .ln-player { grid-template-columns: 1fr; }
    .pe-course .pc-live-row, .pe-live-row { display: grid; }
}


/* Product reviews (E6) */
.pe-course .pc-rating, .pe-reviews-rating {
    display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--pe-muted); margin-top: 14px;
}
.pe-course .pc-rating-stars, .pe-reviews-rating .pc-rating-stars { color: #e3a118; letter-spacing: .7px; }
.pe-reviews-section { padding: 48px 0 72px; border-top: 1px solid var(--pe-line); background: var(--pe-surface); }
.pe-reviews-inner { max-width: 760px; }
.pe-course .pe-reviews-section .pe-reviews-inner { max-width: none; width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.pe-reviews-kicker { color: var(--pe-blue-deep); font-size: 11px; margin-bottom: 8px; }
.pe-reviews-section h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 22px; font-weight: 500; }
.pe-reviews-flash { color: var(--pe-green, #087e5b); font-size: 13px; margin-bottom: 16px; }
.pe-reviews-head { display: grid; grid-template-columns: 145px 1fr; gap: 28px; margin-bottom: 22px; }
.pe-reviews-score { display: grid; gap: 6px; justify-items: start; }
.pe-reviews-score strong { font-size: 42px; line-height: 1; font-weight: 500; }
.pe-reviews-score span { color: #e3a118; letter-spacing: .7px; }
.pe-reviews-score small { color: var(--pe-muted); font-size: 11px; }
.pe-reviews-summary { display: grid; align-content: center; gap: 9px; }
.pe-reviews-bar { display: grid; grid-template-columns: 55px 1fr 36px; gap: 8px; align-items: center; color: var(--pe-muted); font-size: 10px; }
.pe-reviews-bar-track { height: 6px; border-radius: 999px; background: var(--pe-soft); overflow: hidden; }
.pe-reviews-bar-track span { display: block; height: 100%; background: var(--pe-blue); border-radius: inherit; }
.pe-reviews-item { padding: 19px 0; border-top: 1px solid var(--pe-line); }
.pe-reviews-item-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.pe-reviews-person { display: flex; gap: 9px; align-items: center; }
.pe-reviews-avatar {
    width: 32px; height: 32px; border-radius: 10px; background: var(--pe-soft-blue); color: var(--pe-blue-deep);
    display: grid; place-items: center; font-size: 10px;
}
.pe-reviews-person strong { display: block; font-size: 12px; font-weight: 500; }
.pe-reviews-person span { color: var(--pe-muted); font-size: 10px; }
.pe-reviews-stars { color: #e3a118; font-size: 11px; }
.pe-reviews-item p { color: var(--pe-muted); font-size: 13px; line-height: 2; margin: 0; white-space: pre-wrap; }
.pe-reviews-note { color: var(--pe-muted); font-size: 13px; margin: 16px 0; line-height: 1.8; }
.pe-reviews-form { display: grid; gap: 12px; margin-top: 18px; max-width: 520px; }
.pe-reviews-field { display: grid; gap: 6px; font-size: 12px; }
.pe-reviews-field select, .pe-reviews-field textarea {
    width: 100%; border: 1px solid var(--pe-line); border-radius: 12px; padding: 10px 12px;
    background: var(--pe-surface); color: var(--pe-ink); font: inherit;
}
.pe-reviews-error { color: #b42318; font-size: 12px; margin: 0; }
@media (max-width: 720px) {
    .pe-reviews-head { grid-template-columns: 1fr; }
}

/* —— Workspace shell (student dashboard) —— */
.ws-app {
    --ws-sidebar: 268px;
    --ws-amber: #a2660b;
    --ws-amber-soft: #fff6e5;
    background: var(--pe-soft);
    min-width: 320px;
}
.ws-shell { min-height: 100vh; }
.ws-sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 40;
    width: var(--ws-sidebar);
    padding: 22px 16px 16px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    color: #eaf0fa;
    background:
        radial-gradient(circle at 20% 0%, rgba(69, 126, 225, .24), transparent 34%),
        linear-gradient(180deg, #122f54 0%, #0d2441 100%);
    border-left: 1px solid rgba(255,255,255,.06);
}
.ws-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    color: inherit;
    text-decoration: none;
}
.ws-brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #4b84ec, var(--pe-blue));
}
.ws-brand-copy strong { display: block; font-size: 16px; }
.ws-brand-copy span { display: block; margin-top: -2px; color: #9eb2cc; font-size: 10px; }
.ws-nav-label {
    margin: 22px 11px 8px;
    color: #829bb8;
    font-size: 10px;
    font-weight: 700;
}
.ws-nav { display: grid; gap: 5px; }
.ws-nav-item {
    min-height: 45px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #bbcadc;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: .18s ease;
}
a.ws-nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
a.ws-nav-item:hover .ws-nav-icon { color: #fff; }
.ws-nav-item.is-active {
    color: #fff;
    background: rgba(79, 133, 229, .20);
    border-color: rgba(140, 178, 244, .16);
    box-shadow: inset -3px 0 #6f9cf0;
}
.ws-nav-item.ws-soon {
    opacity: .72;
    cursor: default;
}
.ws-nav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: #89a7c9;
    display: grid;
    place-items: center;
}
.ws-nav-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}
.ws-nav-item.is-active .ws-nav-icon { color: #8eb3ff; }
.ws-nav-item > span:not(.ws-nav-icon) { flex: 1; }
.ws-nav-badge {
    min-width: 24px;
    height: 21px;
    padding-inline: 6px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    color: #cfe0ff;
    background: rgba(93, 146, 238, .18);
    font-size: 10px;
    font-weight: 700;
}
.ws-nav-badge-soon { font-size: 9px; white-space: nowrap; }
.ws-sidebar-bottom { margin-top: auto; padding-top: 22px; }
.ws-help-card {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    background: rgba(255,255,255,.055);
}
.ws-help-card strong { display: block; font-size: 12px; }
.ws-help-card p { margin: 5px 0 12px; color: #9db0c8; font-size: 10px; line-height: 1.8; }
.ws-help-link {
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: rgba(255,255,255,.09);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}
.ws-main { margin-right: var(--ws-sidebar); min-height: 100vh; }
.ws-overlay { display: none; }
.ws-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 70px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(229,234,242,.9);
    backdrop-filter: blur(14px);
}
.ws-icon-btn.ws-mobile-toggle { display: none; }
.ws-search {
    width: min(390px, 38vw);
    height: 42px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #98a2b3;
    background: #f7f9fc;
    border: 1px solid #e9edf4;
    border-radius: 12px;
}
.ws-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--pe-ink);
    background: transparent;
    font: inherit;
    font-size: 12px;
}
.ws-search.ws-soon { opacity: .85; }
.ws-top-spacer { flex: 1; }
.ws-icon-btn {
    width: 41px;
    height: 41px;
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--pe-muted);
    background: #fff;
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    cursor: pointer;
}
.ws-profile { padding-right: 5px; display: flex; align-items: center; gap: 10px; }
.ws-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, var(--pe-navy), var(--pe-blue));
    font-size: 12px;
    font-weight: 800;
}
.ws-profile-copy strong,
.ws-profile-copy span { display: block; }
.ws-profile-copy strong { font-size: 12px; }
.ws-profile-copy span { color: var(--pe-muted); font-size: 9px; }
.ws-logout { margin: 0; }
.ws-content { width: min(1180px, calc(100% - 48px)); margin-inline: auto; padding: 32px 0 52px; }
.ws-content-focus {
    width: min(1280px, calc(100% - 32px));
    padding-top: 18px;
    padding-bottom: 40px;
}
.ws-focus-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pe-ink);
    font-size: 13px;
    font-weight: 700;
}
.ws-topbar-focus .ws-mobile-toggle { display: grid; }
.ws-topbar-focus .ws-search { display: none; }

/* Focus mode: main nav off-canvas on all widths */
.ws-focus .ws-sidebar {
    transform: translateX(105%);
    transition: transform .22s ease;
    box-shadow: -18px 0 50px rgba(5,18,37,.18);
}
.ws-focus.ws-menu-open .ws-sidebar { transform: translateX(0); }
.ws-focus .ws-main { margin-right: 0; }
.ws-focus.ws-menu-open .ws-overlay,
.ws-focus.ws-rail-open .ws-rail-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    background: rgba(8,22,42,.42);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.ws-rail-overlay { display: none; }

/* Lesson player */
.ws-learn-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.ws-focus.ws-rail-collapsed .ws-learn-layout { grid-template-columns: 1fr; }
.ws-focus.ws-rail-collapsed .ws-learn-rail { display: none; }
.ws-learn-rail {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 96px);
    overflow: auto;
    padding: 14px;
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: 16px;
}
.ws-learn-rail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    color: var(--pe-blue);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.ws-learn-rail-back:hover { text-decoration: underline; }
.ws-learn-section + .ws-learn-section { margin-top: 10px; }
.ws-learn-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 4px;
    padding: 7px 10px;
    color: var(--pe-ink);
    background: #f4f7fb;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ws-learn-section-summary::-webkit-details-marker { display: none; }
.ws-learn-section-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-learn-section-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--pe-muted);
    transition: transform .18s ease;
}
.ws-learn-section[open] .ws-learn-section-chevron { transform: rotate(180deg); }
.ws-learn-section[open] .ws-learn-section-summary { margin-bottom: 8px; }
.ws-learn-section-body { display: grid; gap: 2px; }
.ws-learn-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 42px;
    padding: 7px 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}
a.ws-learn-item:hover { background: #f5f8fc; }
.ws-learn-item.is-current {
    background: color-mix(in srgb, var(--pe-soft-blue) 70%, #fff);
    box-shadow: inset -2px 0 var(--pe-blue);
}
.ws-learn-item.is-done .ws-learn-item-icon { color: var(--pe-green); background: var(--pe-green-soft); }
.ws-learn-item.is-locked { opacity: .65; }
.ws-learn-item-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pe-blue);
    background: var(--pe-soft-blue);
    border-radius: 8px;
}
.ws-learn-item-copy { min-width: 0; }
.ws-learn-item-copy strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 700;
}
.ws-learn-item-copy span {
    display: block;
    margin-top: 1px;
    color: var(--pe-muted);
    font-size: 9px;
}
.ws-learn-stage {
    min-width: 0;
    padding: 18px 20px 22px;
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(18, 49, 90, .04);
}
.ws-learn-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8eef6;
}
.ws-learn-head h1 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.45;
}
.ws-learn-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-learn-badge {
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef3fb;
    color: #2f5fad;
    font-size: 10px;
    font-weight: 800;
}
.ws-learn-badge.is-done { background: var(--pe-green-soft); color: var(--pe-green); }
.ws-learn-video {
    display: block;
    width: 100%;
    max-height: min(70vh, 640px);
    background: #0b1c33;
    border-radius: 14px;
}
.ws-learn-prose {
    font-size: 15px;
    line-height: 1.9;
    color: var(--pe-ink);
}
.ws-learn-prose :where(p, ul, ol) { margin: 0 0 1em; }
.ws-learn-empty {
    margin: 0;
    padding: 28px 12px;
    color: var(--pe-muted);
    text-align: center;
    font-size: 13px;
}
.ws-learn-gate {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 18px 0 8px;
}
.ws-learn-gate p { margin: 0; color: var(--pe-muted); font-size: 13px; }
.ws-learn-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e8eef6;
}
.ws-learn-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-inline-start: auto;
}
.ws-learn-nav a,
.ws-learn-complete-btn,
.ws-learn-gate-btn {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.ws-learn-complete-btn,
.ws-learn-gate-btn {
    color: #fff;
    background: var(--pe-blue);
}
.ws-learn-complete-btn:disabled {
    opacity: .72;
    cursor: default;
    background: var(--pe-green);
}
.ws-learn-nav a {
    color: var(--pe-ink);
    background: #f4f7fb;
    border: 1px solid var(--pe-line);
}
.ws-learn-nav a:hover { color: var(--pe-blue); border-color: color-mix(in srgb, var(--pe-blue) 30%, var(--pe-line)); }
.ws-learn-complete-msg {
    width: 100%;
    margin: 0;
    color: var(--pe-muted);
    font-size: 11px;
}
.ws-learn-support {
    margin-top: 14px;
    font-size: 11px;
}
.ws-learn-support a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pe-muted);
    text-decoration: none;
}
.ws-learn-support a:hover { color: var(--pe-blue); }
.ws-learn-support a svg { flex: 0 0 auto; opacity: .85; }

/* Quiz on workspace */
.ws-quiz {
    max-width: 820px;
    margin-inline: auto;
    display: grid;
    gap: 14px;
    padding-bottom: 28px;
}
.ws-quiz-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: var(--pe-blue);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.ws-quiz-back:hover { text-decoration: underline; }
.ws-quiz-panel {
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: 18px;
    padding: 22px 22px 26px;
    display: grid;
    gap: 18px;
}
.ws-quiz-head h1,
.ws-quiz-take-head h1 {
    margin: 4px 0 0;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.4;
}
.ws-quiz-eyebrow {
    color: var(--pe-blue);
    font-size: 11px;
    font-weight: 800;
}
.ws-quiz-desc {
    margin-top: 8px;
    color: var(--pe-muted);
    line-height: 1.9;
    font-size: 13px;
}
.ws-quiz-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.ws-quiz-meta li {
    background: #f5f8fc;
    border: 1px solid #e8eef6;
    border-radius: 14px;
    padding: 12px 14px;
    display: grid;
    gap: 4px;
}
.ws-quiz-meta-label {
    color: var(--pe-muted);
    font-size: 11px;
    font-weight: 600;
}
.ws-quiz-meta strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--pe-ink);
}
.ws-quiz-notes { display: grid; gap: 8px; }
.ws-quiz-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.7;
    border: 1px solid var(--pe-line);
    background: #f8fafc;
}
.ws-quiz-note.is-required {
    border-color: color-mix(in srgb, var(--pe-blue) 40%, var(--pe-line));
    background: color-mix(in srgb, var(--pe-blue) 6%, #fff);
    color: var(--pe-blue-deep, #1e3a5f);
}
.ws-quiz-note.is-warn {
    border-color: color-mix(in srgb, #b45309 35%, var(--pe-line));
    background: #fffbeb;
    color: #92400e;
}
.ws-quiz-banner {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.7;
    border: 1px solid color-mix(in srgb, #b45309 30%, var(--pe-line));
    background: #fffbeb;
    color: #92400e;
}
.ws-quiz-remaining {
    margin: 0;
    font-size: 13px;
    color: var(--pe-muted);
}
.ws-quiz-preview-images {
    display: grid;
    gap: 10px;
}
.ws-quiz-img {
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid var(--pe-line);
}
.ws-quiz-option-img {
    display: block;
    max-width: 180px;
    margin-top: 8px;
}
.ws-quiz-history {
    display: grid;
    gap: 10px;
}
.ws-quiz-history h2 {
    margin: 0;
    font-size: 15px;
}
.ws-quiz-history-list {
    display: grid;
    gap: 8px;
}
.ws-quiz-history-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e8eef6;
    border-radius: 12px;
    background: #fafbfd;
}
.ws-quiz-history-row strong { display: block; font-size: 13px; }
.ws-quiz-history-row span { color: var(--pe-muted); font-size: 12px; }
.ws-quiz-history-row a {
    color: var(--pe-blue);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.ws-quiz-history-row a:hover { text-decoration: underline; }
.ws-quiz-actions {
    display: grid;
    gap: 12px;
    justify-items: start;
}
.ws-quiz-actions.is-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.ws-quiz-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e8eef6;
}
.ws-quiz-panel > .ws-quiz-foot {
    margin-top: 6px;
}
.ws-quiz-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ws-quiz-foot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-inline-start: auto;
}
.ws-quiz-foot > .ws-quiz-support,
.ws-quiz-foot > .ws-quiz-msg {
    width: 100%;
}
.ws-quiz-foot:not(:has(.ws-quiz-nav)) > .ws-quiz-foot-actions {
    margin-inline-start: 0;
}
.ws-quiz-btn {
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    background: var(--pe-blue);
}
.ws-quiz-btn:hover { filter: brightness(1.04); }
.ws-quiz-btn:disabled {
    opacity: .72;
    cursor: default;
}
.ws-quiz-btn.is-ghost {
    color: var(--pe-ink);
    background: #f4f7fb;
    border: 1px solid var(--pe-line);
}
.ws-quiz-btn.is-ghost:hover {
    color: var(--pe-blue);
    border-color: color-mix(in srgb, var(--pe-blue) 30%, var(--pe-line));
}
.ws-quiz-support {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pe-muted);
    font-size: 11px;
    text-decoration: none;
}
.ws-quiz-support:hover { color: var(--pe-blue); }
.ws-quiz-support svg { flex: 0 0 auto; opacity: .85; }
.ws-quiz-msg {
    margin: 0;
    color: #b91c1c;
    font-size: 13px;
}
.ws-quiz-empty {
    margin: 0;
    color: var(--pe-muted);
    font-size: 13px;
}
.ws-quiz-muted { color: var(--pe-muted); font-size: 12px; }

/* Take */
.ws-quiz-take-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: -6px -6px 0;
    padding: 10px 6px 14px;
    background: color-mix(in srgb, var(--pe-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e8eef6;
}
.ws-quiz-take-status {
    display: grid;
    gap: 4px;
    justify-items: end;
    text-align: end;
}
.ws-quiz-timer {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 800;
    color: var(--pe-blue-deep, #1e3a5f);
    padding: 8px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pe-blue) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--pe-blue) 22%, var(--pe-line));
}
.ws-quiz-timer.is-warn {
    color: #b45309;
    background: #fffbeb;
    border-color: color-mix(in srgb, #b45309 35%, var(--pe-line));
}
.ws-quiz-save-status {
    font-size: 11px;
    color: var(--pe-muted);
}
.ws-quiz-answer-phase {
    display: grid;
    gap: 0;
}
.ws-quiz-answer-phase[hidden],
.ws-quiz-review[hidden] {
    display: none !important;
}
.ws-quiz-form { display: grid; gap: 16px; }
.ws-quiz-q {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e8eef6;
    border-radius: 16px;
    background: #fafbfd;
}
.ws-quiz-q h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}
.ws-quiz-stem {
    line-height: 1.9;
    color: var(--pe-ink);
    font-size: 14px;
}
.ws-quiz-answer { display: grid; gap: 8px; }
.ws-quiz-option {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.6;
    transition: border-color .15s ease, background .15s ease;
}
.ws-quiz-option:hover {
    border-color: color-mix(in srgb, var(--pe-blue) 35%, var(--pe-line));
}
.ws-quiz-option.is-checked,
.ws-quiz-option:has(:checked) {
    border-color: color-mix(in srgb, var(--pe-blue) 50%, var(--pe-line));
    background: color-mix(in srgb, var(--pe-blue) 7%, #fff);
}
.ws-quiz-option input { margin-top: 3px; accent-color: var(--pe-blue); }
.ws-quiz-answer textarea {
    width: 100%;
    min-height: 88px;
    padding: 12px 14px;
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    font: inherit;
    line-height: 1.7;
    resize: vertical;
    background: #fff;
}
.ws-quiz-review {
    display: grid;
    gap: 0;
}
.ws-quiz-review-body {
    display: grid;
    gap: 12px;
}
.ws-quiz-review h2 { margin: 0; font-size: 18px; }
.ws-quiz-review-hint {
    margin: 0;
    color: var(--pe-muted);
    font-size: 13px;
}
.ws-quiz-review-list {
    display: grid;
    gap: 10px;
}
.ws-quiz-review-item {
    border: 1px solid #e8eef6;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fafbfd;
    font-size: 13px;
    line-height: 1.7;
}
.ws-quiz-review-item .is-pass { color: var(--pe-green, #087e5b); font-weight: 700; }
.ws-quiz-review-item .is-fail { color: #b91c1c; font-weight: 700; }
.ws-quiz-review .ws-quiz-msg {
    margin-top: 2px;
}

/* Result */
.ws-quiz-score-card {
    padding: 18px 16px;
    border-radius: 16px;
    border: 1px solid #e8eef6;
    background: #f5f8fc;
    display: grid;
    gap: 8px;
}
.ws-quiz-score-card.is-pass {
    border-color: color-mix(in srgb, var(--pe-green, #087e5b) 35%, var(--pe-line));
    background: color-mix(in srgb, var(--pe-green, #087e5b) 8%, #fff);
}
.ws-quiz-score-card.is-fail {
    border-color: color-mix(in srgb, #b91c1c 30%, var(--pe-line));
    background: color-mix(in srgb, #b91c1c 6%, #fff);
}
.ws-quiz-score-card.is-pending {
    border-color: color-mix(in srgb, #b45309 30%, var(--pe-line));
    background: #fffbeb;
}
.ws-quiz-score-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}
.ws-quiz-score-value strong {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    line-height: 1.1;
}
.ws-quiz-score-value .is-pass,
.ws-quiz-score-card .is-pass { color: var(--pe-green, #087e5b); font-weight: 800; }
.ws-quiz-score-value .is-fail,
.ws-quiz-score-card .is-fail { color: #b91c1c; font-weight: 800; }
.ws-quiz-result-list { display: grid; gap: 14px; }
.ws-quiz-result-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.ws-quiz-result-option {
    padding: 10px 12px;
    border: 1px solid var(--pe-line);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    line-height: 1.6;
}
.ws-quiz-result-option.is-selected {
    border-color: color-mix(in srgb, var(--pe-blue) 45%, var(--pe-line));
}
.ws-quiz-result-option.is-correct {
    border-color: color-mix(in srgb, var(--pe-green, #087e5b) 50%, var(--pe-line));
    background: color-mix(in srgb, var(--pe-green, #087e5b) 8%, transparent);
}
.ws-quiz-result-option.is-wrong {
    border-color: color-mix(in srgb, #b91c1c 40%, var(--pe-line));
}
.ws-quiz-your-answer,
.ws-quiz-correct-answer {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
}
.ws-quiz-correct-answer { color: var(--pe-green, #087e5b); }
.ws-quiz-q-score,
.ws-quiz-feedback,
.ws-quiz-explain {
    margin: 0;
    color: var(--pe-muted);
    font-size: 13px;
    line-height: 1.8;
}
.ws-quiz-immersive .ws-focus-title { max-width: 55vw; }
.ws-quiz.is-take .ws-quiz-panel { padding-top: 12px; }

@media (max-width: 720px) {
    .ws-quiz-panel { padding: 16px 14px 20px; }
    .ws-quiz-meta { grid-template-columns: 1fr 1fr; }
    .ws-quiz-take-head { position: static; }
    .ws-quiz-take-status { justify-items: start; text-align: start; width: 100%; }
    .ws-quiz-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 20px;
        padding-top: 16px;
    }
    .ws-quiz-nav { width: 100%; }
    .ws-quiz-nav .ws-quiz-btn { flex: 1; }
    .ws-quiz-foot-actions {
        margin-inline-start: 0;
        width: 100%;
    }
    .ws-quiz-foot-actions .ws-quiz-btn { width: 100%; }
}

.ws-pagehead { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.ws-pagehead-copy { flex: 1; min-width: 0; }
.ws-eyebrow { margin-bottom: 3px; color: var(--pe-blue); font-size: 11px; font-weight: 800; }
.ws-pagehead h1 { margin: 0; font-size: clamp(24px, 2.3vw, 31px); line-height: 1.5; }
.ws-pagehead p { margin: 5px 0 0; color: var(--pe-muted); font-size: 12px; }
.ws-pagehead-course {
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8eef6;
}
.ws-pagehead-course h1 {
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.4;
}
.ws-pagehead-course .ws-pagehead-actions {
    flex-shrink: 0;
}
.ws-back-btn {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pe-ink);
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ws-back-btn:hover {
    color: var(--pe-blue);
    border-color: color-mix(in srgb, var(--pe-blue) 35%, var(--pe-line));
    background: #f7faff;
}
.ws-date-chip {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pe-muted);
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: 11px;
    font-size: 11px;
}
.ws-memberships { display: grid; gap: 10px; margin-bottom: 18px; }
.ws-membership-card {
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: 14px;
}
.ws-membership-card a { margin-right: auto; color: var(--pe-blue); font-size: 12px; font-weight: 700; }
.ws-pill {
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--ws-amber-soft);
    color: var(--ws-amber);
    font-size: 10px;
    font-weight: 800;
}
.ws-continue {
    position: relative;
    min-height: 260px;
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 28px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 15% 15%, rgba(80, 134, 238, .33), transparent 34%),
        linear-gradient(125deg, #102a4c 0%, #173e72 58%, #245bbb 100%);
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(18, 49, 90, .18);
}
.ws-continue-empty { grid-template-columns: 1fr; min-height: 0; }
.ws-course-stack {
    display: grid;
    gap: 20px;
}
.ws-course-stack > .ws-memberships { margin-bottom: 0; }
.ws-continue-compact {
    min-height: 0;
    margin-bottom: 0;
    padding: 16px 18px;
    gap: 14px 20px;
    grid-template-columns: minmax(0, 1.2fr) minmax(200px, .8fr);
    align-items: center;
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(18, 49, 90, .12);
}
.ws-continue-compact h2 {
    margin: 4px 0 2px;
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 700;
    line-height: 1.45;
}
.ws-continue-compact .ws-continue-kicker { font-size: 10px; }
.ws-continue-compact .ws-lesson-name { font-size: 11px; }
.ws-continue-aside {
    display: grid;
    gap: 10px;
    align-content: center;
}
.ws-continue-compact .ws-continue-actions { margin-top: 0; }
.ws-continue-compact .ws-primary-btn {
    min-height: 40px;
    width: 100%;
    padding: 0 14px;
    font-size: 13px;
}
.ws-continue-inline-progress {
    margin-top: 0;
    padding: 9px 11px;
    background: rgba(7, 28, 55, .42);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 11px;
}
.ws-continue-inline-progress .ws-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    color: #d6e3f8;
    font-size: 10px;
}
.ws-continue-inline-progress .ws-progress-meta > span:last-child {
    flex: 0 0 auto;
    white-space: nowrap;
    direction: ltr;
}
.ws-continue-inline-progress .ws-progress-meta > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-continue-inline-progress .ws-progress-track {
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, .14);
    border-radius: 20px;
    direction: ltr;
}
.ws-continue-inline-progress .ws-progress-value {
    height: 100%;
    background: linear-gradient(90deg, #70a0ff, #82d8c0);
    border-radius: inherit;
}
.ws-activity-hint { opacity: .92; }
.ws-course-art-compact {
    position: relative;
    z-index: 2;
    min-height: 0;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    overflow: visible;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
}
.ws-course-art-compact .ws-progress-panel {
    position: static;
    inset: auto;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}
.ws-course-art-compact .ws-progress-meta {
    gap: 10px;
    align-items: baseline;
}
.ws-course-art-compact .ws-progress-meta > span:last-child {
    flex: 0 0 auto;
    white-space: nowrap;
}
.ws-course-art-compact .ws-progress-meta > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-inline-form { display: inline; margin: 0; }
.ws-event-foot button.ws-text-link {
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    color: #fff;
    background: var(--pe-blue);
    border-radius: 9px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}
.ws-panel-primary { box-shadow: 0 10px 28px rgba(18, 49, 90, .05); }
.ws-tablist {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 10px 12px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--pe-line);
    scrollbar-width: none;
}
.ws-tablist::-webkit-scrollbar { display: none; }
.ws-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 10px 10px 0 0;
    background: transparent;
    color: var(--pe-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.ws-tab:hover { color: var(--pe-ink); background: #f5f8fc; }
.ws-tab[aria-selected="true"] {
    color: var(--pe-blue);
    background: color-mix(in srgb, var(--pe-soft-blue) 55%, transparent);
    border-bottom-color: var(--pe-blue);
}
.ws-tab-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e8eef8;
    color: #456189;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}
.ws-tab[aria-selected="true"] .ws-tab-count {
    background: color-mix(in srgb, var(--pe-blue) 14%, #fff);
    color: var(--pe-blue);
}
.ws-tabpanel { min-height: 120px; }
.ws-syllabus { padding: 14px 18px 24px; display: grid; gap: 12px; }
.ws-syllabus-section {
    margin: 0;
    border: 0;
    background: transparent;
}
.ws-syllabus-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 9px 12px;
    color: var(--pe-ink);
    background: #f4f7fb;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.01em;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ws-syllabus-heading::-webkit-details-marker { display: none; }
.ws-syllabus-heading-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-syllabus-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--pe-muted);
    transition: transform .18s ease;
}
.ws-syllabus-section[open] .ws-syllabus-chevron { transform: rotate(180deg); }
.ws-syllabus-section[open] .ws-syllabus-heading { margin-bottom: 10px; }
.ws-lesson-list { display: grid; gap: 4px; }
.ws-lesson-row {
    min-height: 58px;
    padding: 12px 10px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 0;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}
.ws-lesson-row:last-child { border-bottom: 0; }
a.ws-lesson-row:hover { background: #f6f9fd; }
a.ws-lesson-row:hover strong { color: var(--pe-blue); }
.ws-lesson-row.is-done { background: color-mix(in srgb, var(--pe-green-soft) 45%, transparent); }
.ws-lesson-row.is-locked { opacity: .7; }
.ws-lesson-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pe-blue);
    background: var(--pe-soft-blue);
    border-radius: 10px;
}
.ws-lesson-icon.is-done { color: var(--pe-green); background: var(--pe-green-soft); }
.ws-lesson-icon.is-locked { color: var(--pe-muted); background: var(--pe-soft); }
.ws-lesson-copy { min-width: 0; }
.ws-lesson-copy strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 700;
}
.ws-lesson-copy span { display: block; margin-top: 3px; color: var(--pe-muted); font-size: 10px; }
.ws-lesson-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 42%; }
.ws-lesson-pill {
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef3fb;
    color: #2f5fad;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}
.ws-lesson-pill.is-done { background: var(--pe-green-soft); color: var(--pe-green); }
.ws-lesson-pill.is-preview { background: var(--ws-amber-soft, #fff4e5); color: var(--ws-amber, #c47b1a); }
.ws-lesson-pill.is-locked { background: var(--pe-soft); color: var(--pe-muted); }
@media (max-width: 620px) {
    .ws-course-stack { gap: 16px; }
    .ws-continue-compact {
        grid-template-columns: 1fr;
        padding: 12px 14px;
        gap: 10px;
    }
    .ws-continue-aside { gap: 8px; }
    .ws-continue-compact .ws-primary-btn { min-height: 38px; }
    .ws-course-art-compact { min-height: 0; }
    .ws-syllabus { padding: 12px 12px 20px; gap: 24px; }
    .ws-tablist { padding: 8px 8px 0; }
    .ws-tab { padding: 0 10px; font-size: 11px; }
    .ws-lesson-meta { max-width: none; }
    .ws-lesson-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px 12px;
        padding: 12px 8px;
    }
    .ws-lesson-meta {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: 0;
    }
}
.ws-live-list { padding: 6px 12px 14px; display: grid; gap: 8px; }
.ws-live-list .ws-event {
    margin: 0;
    padding: 12px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    border-bottom: 1px solid #e8eef6;
}
.ws-live-list .ws-event:last-child { border-bottom: 0; }
.ws-live-list .ws-event h3 { margin: 10px 0 4px; }
.ws-live-list .ws-event-foot {
    margin-top: 10px;
    padding-top: 10px;
}
.ws-live-my-panel + .ws-panel { margin-top: 18px; }
.ws-live-my-stack {
    display: grid;
    gap: 16px;
}
.ws-live-my-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}
.ws-live-my-stack + .ws-panel { margin-top: 18px; }
.ws-live-class .ws-panel-head {
    border-bottom: 1px solid #e8eef6;
}
.ws-live-class .ws-panel-title strong {
    font-size: 15px;
}
.ws-live-class-section {
    padding-top: 4px;
}
.ws-live-class-section.is-tasks {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #e8eef6;
}
.ws-live-class-label {
    margin: 0;
    padding: 8px 16px 0;
    color: var(--pe-muted);
    font-size: 11px;
    font-weight: 800;
}
.ws-live-my-list {
    padding: 8px 12px 14px;
    display: grid;
    gap: 10px;
}
.ws-live-session {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 14px 12px;
    border: 1px solid #e8eef6;
    border-radius: 12px;
    background: #fafbfd;
}
.ws-live-session:last-child { border-bottom: 1px solid #e8eef6; }
.ws-live-session.is-live {
    margin-inline: 0;
    padding-inline: 12px;
    border-color: color-mix(in srgb, var(--pe-green, #087e5b) 28%, #e8eef6);
    background: color-mix(in srgb, var(--pe-green, #087e5b) 7%, #fff);
}
.ws-live-session-main {
    min-width: 0;
    flex: 1 1 220px;
}
.ws-live-session-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ws-live-session-title h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}
.ws-live-session-meta {
    margin: 4px 0 0;
    color: var(--pe-muted);
    font-size: 11px;
    line-height: 1.6;
}
.ws-live-session-action {
    flex: 0 0 auto;
}
.ws-live-session-action .ws-text-link {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--pe-blue);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

/* Student orders list */
.ws-order-list {
    padding: 8px 12px 14px;
    display: grid;
    gap: 10px;
}
.ws-order {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border: 1px solid #e8eef6;
    border-radius: 12px;
    background: #fafbfd;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background .15s ease;
}
.ws-order:hover {
    border-color: color-mix(in srgb, var(--pe-blue) 30%, #e8eef6);
    background: #fff;
}
.ws-order-main {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}
.ws-order-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ws-order-title strong {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}
.ws-order-badge {
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
}
.ws-order-badge.is-ok {
    color: var(--pe-green, #087e5b);
    background: var(--pe-green-soft, #e8f7f1);
}
.ws-order-badge.is-warn {
    color: #b45309;
    background: #fffbeb;
}
.ws-order-badge.is-muted {
    color: var(--pe-muted);
    background: #f1f4f8;
}
.ws-order-summary {
    margin: 0;
    color: var(--pe-ink);
    font-size: 12px;
    line-height: 1.7;
}
.ws-order-meta,
.ws-order-ship {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--pe-muted);
    font-size: 11px;
    line-height: 1.6;
}
.ws-order-chevron {
    flex: 0 0 auto;
    color: var(--pe-muted);
    opacity: .75;
}
.ws-orders-empty-actions {
    padding: 0 16px 18px;
}

/* Workspace support tickets */
.ws-ticket-new-btn {
    flex: 0 0 auto;
    min-height: 36px !important;
    height: 36px;
    padding: 0 14px !important;
    font-size: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ws-ticket-toolbar {
    display: grid;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #edf0f5;
}
.ws-ticket-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    margin-inline: -2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ws-ticket-filters::-webkit-scrollbar { display: none; }
.ws-ticket-filter {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--pe-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pe-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.ws-ticket-filter.is-active {
    color: #fff;
    background: linear-gradient(145deg, var(--pe-navy), var(--pe-blue));
    border-color: transparent;
}
.ws-ticket-search { margin: 0; }
.ws-ticket-search-box {
    display: flex;
    align-items: stretch;
    min-height: 42px;
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    background: #f7f9fc;
    overflow: hidden;
}
.ws-ticket-search-box:focus-within {
    border-color: color-mix(in srgb, var(--pe-blue) 45%, var(--pe-line));
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pe-blue) 12%, transparent);
}
.ws-ticket-search-box input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.ws-ticket-search-box input[type="search"]:focus {
    outline: 0;
}
.ws-ticket-search-btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-inline-start: 1px solid var(--pe-line);
    background: #e4ecf8;
    color: var(--pe-navy, #122f54);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.ws-ticket-search-btn:hover { background: #d7e3f5; }
.ws-ticket-list {
    padding: 12px 12px 14px;
    display: grid;
    gap: 10px;
}
.ws-ticket {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 12px;
    border: 1px solid #e8eef6;
    border-radius: 12px;
    background: #fafbfd;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background .15s ease;
}
.ws-ticket:hover {
    border-color: color-mix(in srgb, var(--pe-blue) 30%, #e8eef6);
    background: #fff;
}
.ws-ticket.is-unread {
    border-color: color-mix(in srgb, var(--pe-blue) 35%, #e8eef6);
    border-inline-start: 3px solid var(--pe-blue);
}
.ws-ticket-main {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}
.ws-ticket-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ws-ticket-title strong {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}
.ws-ticket-subject {
    margin: 0;
    color: var(--pe-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-ticket-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--pe-muted);
    font-size: 11px;
    line-height: 1.6;
}
.ws-ticket-unread {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--pe-blue);
    background: color-mix(in srgb, var(--pe-soft-blue) 70%, #fff);
    font-size: 10px;
    font-weight: 800;
}
.ws-ticket-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 40px 20px 44px;
    text-align: center;
}
.ws-ticket-empty .ws-empty {
    margin: 0;
    color: var(--pe-ink);
    font-size: 14px;
    font-weight: 700;
}
.ws-ticket-empty-hint {
    margin: 0;
    color: var(--pe-muted);
    font-size: 12px;
    line-height: 1.7;
}
.ws-ticket-pagination {
    padding: 8px 16px 18px;
    border-top: 1px solid #edf0f5;
}
.ws-ticket-pagination nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ws-ticket-form { padding-top: 4px; }
.ws-ticket-context {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--pe-blue) 18%, var(--pe-line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--pe-soft-blue) 55%, #fff);
    color: var(--pe-blue-deep, #1f4b99);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}
.ws-field select {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    background: #f7f9fc;
    color: var(--pe-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
}
.ws-field select:focus {
    outline: 0;
    border-color: color-mix(in srgb, var(--pe-blue) 45%, var(--pe-line));
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pe-blue) 12%, transparent);
}
.ws-ticket-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.ws-ticket-number {
    margin: 6px 0 0;
    color: var(--pe-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}
.ws-ticket-meta-panel { padding-bottom: 4px; }
.ws-ticket-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    padding: 4px 16px 18px;
}
.ws-ticket-meta-grid > div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    background: #f7f9fc;
}
.ws-ticket-meta-grid span {
    color: var(--pe-muted);
    font-size: 11px;
    font-weight: 600;
}
.ws-ticket-meta-grid strong {
    font-size: 13px;
    font-weight: 700;
    word-break: break-word;
}
.ws-ticket-thread {
    display: grid;
    gap: 12px;
    padding: 4px 16px 18px;
}
.ws-ticket-message {
    border: 1px solid var(--pe-line);
    border-radius: 14px;
    padding: 14px 16px;
    background: #fff;
}
.ws-ticket-message.is-student {
    background: #f3f7ff;
    border-color: #c9daf5;
}
.ws-ticket-message.is-staff {
    background: #f4faf6;
    border-color: #c5e0d0;
}
.ws-ticket-message.is-mine.is-student { background: #e8f0ff; }
.ws-ticket-message.is-mine.is-staff { background: #e6f5eb; }
.ws-ticket-message header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--pe-muted);
    font-size: 12px;
}
.ws-ticket-message header strong { color: var(--pe-ink); font-weight: 800; }
.ws-ticket-body {
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 13px;
}
.ws-ticket-attachments {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.ws-ticket-attachment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.ws-ticket-attachment.is-image { align-items: flex-start; }
.ws-ticket-thumb {
    display: block;
    padding: 0;
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    cursor: zoom-in;
}
.ws-ticket-thumb img {
    display: block;
    width: 120px;
    height: 90px;
    object-fit: cover;
}
.ws-ticket-attachment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ws-ticket-attachment-name {
    color: var(--pe-ink);
    font-size: 12px;
    font-weight: 600;
    word-break: break-word;
}
.ws-ticket-download {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--pe-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pe-blue-deep, #1f4b99);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}
.ws-ticket-download:hover { background: #eef4ff; }
.ws-ticket-resolve {
    padding: 0 19px 22px;
}
.ws-ticket-closed {
    padding-bottom: 8px;
}
.ws-ticket-lightbox {
    border: none;
    border-radius: 16px;
    padding: 16px;
    max-width: min(92vw, 960px);
    background: #0f172a;
    color: #fff;
}
.ws-ticket-lightbox::backdrop { background: rgba(15, 23, 42, 0.72); }
.ws-ticket-lightbox-bar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}
.ws-ticket-lightbox-bar .ws-ticket-download { color: var(--pe-blue-deep, #1f4b99); }
.ws-ticket-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    border-radius: 8px;
}
@media (max-width: 620px) {
    .ws-panel-head {
        flex-wrap: wrap;
        gap: 10px;
        padding-block: 12px;
        min-height: 0;
    }
    .ws-panel-head .ws-ticket-new-btn {
        width: 100%;
        height: 40px;
        min-height: 40px !important;
    }
    .ws-ticket-toolbar { padding-inline: 12px; }
    .ws-ticket-list { padding-inline: 10px; }
}
.ws-status-badge.is-live {
    color: var(--pe-green, #087e5b);
    background: var(--pe-green-soft, #e8f7f1);
}
.ws-status-badge.is-ended {
    color: var(--pe-muted);
    background: #f1f4f8;
}
.ws-status-badge.is-upcoming {
    color: var(--pe-blue-deep, #1e3a5f);
    background: var(--pe-soft-blue, #eef4ff);
}
.ws-continue-copy { position: relative; z-index: 2; align-self: center; }
.ws-continue-kicker { display: flex; align-items: center; gap: 7px; color: #bcd1f5; font-size: 11px; font-weight: 700; }
.ws-continue-kicker i {
    width: 7px; height: 7px; border-radius: 50%;
    background: #72d5b4; box-shadow: 0 0 0 5px rgba(114,213,180,.12);
}
.ws-continue h2 { margin: 13px 0 7px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.55; font-weight: 800; }
.ws-lesson-name { color: #c6d8f4; font-size: 12px; }
.ws-continue-actions { margin-top: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-primary-btn, .ws-ghost-btn {
    min-height: 44px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}
.ws-primary-btn { color: var(--pe-navy); background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,.12); }
.ws-ghost-btn { color: #d8e5fa; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.ws-course-art {
    position: relative;
    z-index: 2;
    min-height: 200px;
    align-self: center;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
}
.ws-art-grid {
    position: absolute; inset: 0; opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px);
    background-size: 30px 30px;
}
.ws-art-badge {
    position: absolute; top: 17px; right: 17px;
    padding: 5px 9px;
    color: #dce9ff;
    background: rgba(9,31,60,.36);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 99px;
    font-size: 9px;
}
.ws-play {
    position: absolute; inset: 50% auto auto 50%;
    width: 61px; height: 61px;
    transform: translate(-50%,-50%);
    display: grid; place-items: center;
    color: #fff;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
}
.ws-progress-panel {
    position: absolute; right: 17px; left: 17px; bottom: 16px;
    padding: 12px 13px;
    background: rgba(7,28,55,.50);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
}
.ws-progress-meta { display: flex; justify-content: space-between; color: #d6e3f8; font-size: 9px; }
.ws-progress-track { height: 6px; margin-top: 8px; overflow: hidden; background: rgba(255,255,255,.14); border-radius: 20px; direction: ltr; }
.ws-progress-value { height: 100%; background: linear-gradient(90deg, #70a0ff, #82d8c0); border-radius: inherit; }
.ws-metrics { margin: 18px 0 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.ws-metric {
    min-height: 92px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pe-surface);
    border: 1px solid var(--pe-line);
    border-radius: 15px;
}
.ws-metric-icon {
    width: 42px; height: 42px; flex: 0 0 auto;
    display: grid; place-items: center;
    color: var(--pe-blue); background: var(--pe-soft-blue); border-radius: 12px;
}
.ws-metric.is-green .ws-metric-icon { color: var(--pe-green); background: var(--pe-green-soft); }
.ws-metric.ws-soon { opacity: .9; }
.ws-metric strong,
.ws-metric > div > span { display: block; }
.ws-metric strong { font-size: 18px; line-height: 1.3; direction: ltr; text-align: right; }
.ws-metric > div > span { margin-top: 3px; color: var(--pe-muted); font-size: 10px; }
.ws-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 18px; align-items: start; }
.ws-panel { background: var(--pe-surface); border: 1px solid var(--pe-line); border-radius: 18px; }
.ws-panel-head {
    min-height: 66px;
    padding: 0 19px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--pe-line);
}
.ws-panel-title { flex: 1; }
.ws-panel-title strong { display: block; font-size: 14px; }
.ws-panel-title span { display: block; margin-top: 1px; color: var(--pe-muted); font-size: 9px; }
.ws-text-link { display: inline-flex; align-items: center; gap: 5px; color: var(--pe-blue); font-size: 10px; font-weight: 700; text-decoration: none; }
.ws-course-list { padding: 7px 18px 9px; }
.ws-course-row {
    padding: 13px 0;
    display: grid;
    grid-template-columns: 68px minmax(0,1fr) auto;
    gap: 13px;
    align-items: center;
    border-bottom: 1px solid #edf0f5;
}
.ws-course-row:last-child { border-bottom: 0; }
.ws-thumb {
    position: relative;
    width: 68px;
    aspect-ratio: 1.2;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #183d6f, #3472dc);
    border-radius: 12px;
}
.ws-thumb.is-alt { background: linear-gradient(145deg, #245c55, #3d9a87); }
.ws-course-info { min-width: 0; }
.ws-course-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
}
.ws-course-info strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    min-width: 0;
    flex: 1 1 auto;
}
.ws-course-title-link {
    color: inherit;
    text-decoration: none;
    min-width: 0;
    flex: 1 1 auto;
}
.ws-course-title-link:hover strong {
    color: var(--pe-blue);
}
.ws-course-remain {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef3fb;
    color: #2f5fad;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.ws-course-info > span { display: block; margin-top: 2px; color: var(--pe-muted); font-size: 9px; }
.ws-course-activity { color: var(--pe-ink) !important; font-weight: 600; }
.ws-mini-progress { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
.ws-mini-track { flex: 1; height: 5px; overflow: hidden; background: #edf1f7; border-radius: 10px; direction: ltr; }
.ws-mini-track i { display: block; height: 100%; background: var(--pe-blue); border-radius: inherit; }
.ws-mini-progress em { color: var(--pe-muted); font-size: 8px; font-style: normal; direction: ltr; }
.ws-row-action {
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--pe-blue);
    background: var(--pe-soft-blue);
    border-radius: 10px;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}
.ws-side-stack { display: grid; gap: 18px; }
.ws-event {
    margin: 15px;
    padding: 15px;
    background: linear-gradient(145deg, #f5f8ff, var(--pe-soft-blue));
    border: 1px solid #dde8fa;
    border-radius: 14px;
}
.ws-event-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ws-status-badge {
    padding: 4px 8px;
    color: var(--pe-green);
    background: var(--pe-green-soft);
    border-radius: 99px;
    font-size: 8px;
    font-weight: 800;
}
.ws-event-time { color: var(--pe-blue); font-size: 9px; font-weight: 800; }
.ws-event h3 { margin: 14px 0 4px; font-size: 13px; }
.ws-event p { margin: 0; color: var(--pe-muted); font-size: 9px; }
.ws-event-foot {
    margin-top: 15px;
    padding-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #dce6f6;
}
.ws-event-foot span { flex: 1; color: var(--pe-muted); font-size: 8px; }
.ws-event-foot a {
    min-height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    background: var(--pe-blue);
    border-radius: 9px;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}
.ws-empty { margin: 0; padding: 18px 0; color: var(--pe-muted); font-size: 12px; }
.ws-empty-pad { padding: 18px 19px 22px; }
.ws-empty a { color: var(--pe-blue); font-weight: 700; }

.ws-task-list { padding: 8px 16px 12px; }
a.ws-task {
    min-height: 56px;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    border-bottom: 1px solid #edf0f5;
    color: inherit;
    text-decoration: none;
}
a.ws-task:last-child { border-bottom: 0; }
a.ws-task:hover strong { color: var(--pe-blue); }
.ws-task-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--pe-amber);
    background: var(--pe-amber-soft);
    border-radius: 9px;
}
.ws-task-icon.is-due { color: #b42318; background: #fef3f2; }
.ws-task-icon.is-done { color: var(--pe-green); background: var(--pe-green-soft); }
.ws-task-copy { min-width: 0; }
.ws-task-copy strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
}
.ws-task-copy span {
    display: block;
    margin-top: 2px;
    color: var(--pe-muted);
    font-size: 10px;
}
.ws-task-meta {
    display: grid;
    justify-items: end;
    gap: 4px;
    text-align: left;
}
.ws-task-time {
    color: var(--pe-subtle);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.ws-task-pill {
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 800;
    color: var(--pe-amber);
    background: var(--pe-amber-soft);
}
.ws-task-pill.is-late,
.ws-task-pill.is-needs_resubmit { color: #b42318; background: #fef3f2; }
.ws-task-pill.is-due_soon { color: var(--pe-amber); background: var(--pe-amber-soft); }
.ws-task-pill.is-submitted,
.ws-task-pill.is-reviewed { color: var(--pe-green); background: var(--pe-green-soft); }

.ws-assign-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 18px;
    align-items: start;
}
.ws-assign-stack { display: grid; gap: 18px; }
.ws-assign-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.ws-chip {
    min-height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: var(--pe-soft-blue);
    color: var(--pe-blue-deep);
    font-size: 11px;
    font-weight: 700;
}
.ws-chip.is-warn { background: var(--pe-amber-soft); color: var(--pe-amber); }
.ws-chip.is-danger { background: #fef3f2; color: #b42318; }
.ws-chip.is-ok { background: var(--pe-green-soft); color: var(--pe-green); }
.ws-prose {
    padding: 18px 19px 8px;
    font-size: 14px;
    line-height: 1.85;
    color: var(--pe-ink);
}
.ws-prose p { margin: 0 0 12px; }
.ws-prose p:last-child { margin-bottom: 0; }
.ws-file-list { padding: 4px 19px 16px; display: grid; gap: 8px; }
.ws-file-row {
    min-height: 48px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    background: #f7f9fc;
}
.ws-file-row .ws-task-icon { flex: 0 0 auto; }
.ws-file-row strong {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 700;
}
.ws-feedback-card {
    margin: 15px 19px 18px;
    padding: 15px;
    background: linear-gradient(145deg, #f3fbf7, var(--pe-green-soft));
    border: 1px solid #d7efe5;
    border-radius: 14px;
}
.ws-feedback-card strong { display: block; font-size: 13px; }
.ws-feedback-card p {
    margin: 8px 0 0;
    white-space: pre-wrap;
    color: var(--pe-ink);
    font-size: 13px;
    line-height: 1.75;
}
.ws-field textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px 13px;
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    background: #f7f9fc;
    color: var(--pe-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
    resize: vertical;
}
.ws-field textarea:focus {
    outline: 0;
    border-color: color-mix(in srgb, var(--pe-blue) 45%, var(--pe-line));
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pe-blue) 12%, transparent);
}
.ws-field input[type="file"] {
    min-height: 44px;
    padding: 10px 13px;
    background: #fff;
}
.ws-btn-secondary {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    background: var(--pe-surface);
    color: var(--pe-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.ws-pagehead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.ws-alert-error {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #fecdca;
}

.ws-profile { text-decoration: none; color: inherit; border-radius: 12px; }
.ws-profile:hover .ws-profile-copy strong { color: var(--pe-blue); }

.ws-alert {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}
.ws-alert-ok {
    color: var(--pe-green);
    background: var(--pe-green-soft);
    border: 1px solid color-mix(in srgb, var(--pe-green) 18%, transparent);
}
.ws-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.ws-form {
    display: grid;
    gap: 16px;
    padding: 20px 19px 22px;
}
.ws-field { display: grid; gap: 7px; font-size: 12px; font-weight: 700; color: var(--pe-ink); }
.ws-field small { color: var(--pe-muted); font-weight: 500; }
.ws-field input {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--pe-line);
    border-radius: 12px;
    background: #f7f9fc;
    color: var(--pe-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
}
.ws-field input:focus {
    outline: 0;
    border-color: color-mix(in srgb, var(--pe-blue) 45%, var(--pe-line));
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pe-blue) 12%, transparent);
}
.ws-field-error { color: #b42318; font-size: 11px; font-style: normal; font-weight: 600; }
.ws-form-actions { display: flex; justify-content: flex-start; padding-top: 4px; }
.ws-btn-primary {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, var(--pe-navy), var(--pe-blue));
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.ws-btn-primary:hover { filter: brightness(1.05); }

@media (max-width: 900px) {
    .ws-learn-layout { grid-template-columns: 1fr; }
    .ws-learn-rail {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 38;
        width: min(320px, 88vw);
        max-height: none;
        height: 100%;
        border-radius: 0;
        transform: translateX(105%);
        transition: transform .22s ease;
        box-shadow: -18px 0 50px rgba(5,18,37,.18);
    }
    .ws-rail-open .ws-learn-rail { transform: translateX(0); display: block; }
    .ws-focus.ws-rail-collapsed .ws-learn-rail {
        display: block;
        transform: translateX(105%);
    }
    .ws-rail-open.ws-focus.ws-rail-collapsed .ws-learn-rail { transform: translateX(0); }
}
@media (max-width: 1080px) {
    .ws-continue { grid-template-columns: 1fr 300px; }
    .ws-metrics { grid-template-columns: 1fr 1fr; }
    .ws-dashboard-grid { grid-template-columns: 1fr; }
    .ws-side-stack { grid-template-columns: 1fr 1fr; }
    .ws-account-grid { grid-template-columns: 1fr; }
    .ws-assign-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    :root { --ws-sidebar: 264px; }
    .ws-sidebar {
        transform: translateX(105%);
        transition: transform .22s ease;
        box-shadow: -18px 0 50px rgba(5,18,37,.18);
    }
    .ws-menu-open .ws-sidebar { transform: translateX(0); }
    .ws-main { margin-right: 0; }
    .ws-icon-btn.ws-mobile-toggle { display: grid; }
    .ws-menu-open .ws-overlay {
        position: fixed;
        inset: 0;
        z-index: 35;
        display: block;
        background: rgba(8,22,42,.42);
        border: 0;
        padding: 0;
        cursor: pointer;
    }
    .ws-search { width: min(340px, 50vw); }
    .ws-continue { grid-template-columns: 1fr; }
    .ws-continue-compact { grid-template-columns: 1fr; }
    .ws-course-art { min-height: 180px; }
}
@media (max-width: 620px) {
    .ws-topbar { min-height: 62px; padding-inline: 13px; gap: 9px; }
    .ws-search { display: none; }
    .ws-profile-copy { display: none; }
    .ws-content { width: min(100% - 26px, 1180px); padding-top: 22px; }
    .ws-content-focus { width: min(100% - 20px, 1280px); padding-top: 14px; }
    .ws-learn-stage { padding: 14px; border-radius: 14px; }
    .ws-learn-foot { flex-direction: column; align-items: stretch; }
    .ws-learn-nav { margin-inline-start: 0; display: grid; grid-template-columns: 1fr 1fr; }
    .ws-learn-complete-btn,
    .ws-learn-gate-btn { width: 100%; }
    .ws-quiz { padding: 14px; border-radius: 14px; }
    .ws-pagehead { align-items: flex-start; margin-bottom: 18px; }
    .ws-pagehead-course {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-bottom: 12px;
    }
    .ws-pagehead-course .ws-pagehead-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .ws-date-chip { display: none; }
    .ws-pagehead-course .ws-date-chip { display: inline-flex; }
    .ws-continue { min-height: 0; padding: 21px; gap: 20px; border-radius: 18px; }
    .ws-continue h2 { font-size: 24px; }
    .ws-continue-compact h2 { font-size: 16px; }
    .ws-continue-actions { display: grid; grid-template-columns: 1fr; }
    .ws-primary-btn, .ws-ghost-btn { width: 100%; }
    .ws-metrics { grid-template-columns: 1fr; gap: 9px; }
    .ws-side-stack { grid-template-columns: 1fr; }
    .ws-course-row { grid-template-columns: 58px minmax(0,1fr); gap: 10px; }
    .ws-thumb { width: 58px; }
    .ws-row-action { grid-column: 2; justify-self: start; }
}