:root {
    --ink: #102033;
    --muted: #64748b;
    --deep: #061923;
    --teal: #008f86;
    --cyan: #18b7c8;
    --soft: #eff8f7;
    --line: #d9e6e8;
    --card: #ffffff;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    color: var(--ink);
    background: linear-gradient(135deg, #f6fbfb 0%, #edf4f8 52%, #f8fbf8 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}
a { color: var(--teal); text-decoration: none; }
button, input { font: inherit; }
.auth-page {
    min-height: 100vh;
    background: radial-gradient(circle at 8% 8%, rgba(24,183,200,.18), transparent 28%), linear-gradient(120deg, #05131e 0%, #072632 48%, #074951 100%);
}
.login-stage {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 460px);
    align-items: center;
    gap: clamp(32px, 7vw, 110px);
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 42px 0;
}
.login-stage-with-panels {
    grid-template-columns: minmax(520px, 1fr) minmax(320px, 430px);
    gap: clamp(34px, 5vw, 74px);
}
.compact-auth { grid-template-columns: minmax(260px, .9fr) minmax(320px, 430px); }
.login-copy { color: #fff; text-align: center; }
.login-copy-rich { text-align: left; }
.eyebrow {
    margin: 0 0 10px;
    color: #627386;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}
.login-copy .eyebrow { color: rgba(255,255,255,.72); }
.login-copy h1 {
    margin: 0;
    max-width: 620px;
    font-size: clamp(2.1rem, 4vw, 3.45rem);
    line-height: 1.06;
    color: #fff;
}
.login-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
    max-width: 760px;
}
.login-panel {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 14px;
    min-height: 126px;
    padding: 12px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(0,0,0,.18);
}
.login-panel img {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
}
.login-panel h2 {
    font-size: 1.08rem;
    color: var(--teal);
    margin-bottom: 6px;
}
.login-panel p {
    color: #526173;
    margin: 0;
    line-height: 1.35;
}
.login-card {
    background: var(--card);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 8px;
    padding: clamp(28px, 4vw, 42px);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.login-logo {
    display: block;
    width: min(280px, 78%);
    margin: 0 auto 34px;
}
.login-form { display: grid; gap: 12px; }
.login-form label { font-weight: 700; }
.login-form input, .stack-form input, .stack-form select, .stack-form textarea {
    width: 100%;
    border: 1px solid #bed4d9;
    border-radius: 8px;
    min-height: 54px;
    padding: 0 16px;
    background: #f8fcfc;
}
.stack-form textarea {
    min-height: 96px;
    padding: 12px 16px;
    resize: vertical;
}
.login-form button, .primary-link, .stack-form button, .secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 8px;
    background: var(--teal);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
.secondary-link { background: #e8f5f4; color: var(--teal); border: 1px solid #b9dedd; }
.primary-link.disabled { opacity: .48; cursor: not-allowed; }
.form-error {
    margin: 0 0 6px;
    color: #9f1239;
    font-weight: 700;
}
.login-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    font-size: .94rem;
}
.cookie-open body { overflow: hidden; }
.cookie-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
}
.cookie-overlay[hidden] { display: none; }
.cookie-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 19, 30, .68);
    backdrop-filter: blur(5px);
}
.cookie-dialog {
    position: relative;
    width: min(460px, 100%);
    background: #ffffff;
    color: var(--ink);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 26px 80px rgba(0,0,0,.35);
    padding: 28px;
}
.cookie-dialog h2 {
    font-size: 1.75rem;
    margin-bottom: 12px;
}
.cookie-dialog p:not(.eyebrow) {
    color: #526173;
    line-height: 1.55;
}
.cookie-dialog button {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 8px;
    background: var(--teal);
    color: #fff;
    font-weight: 850;
    margin-top: 14px;
    cursor: pointer;
}
.cookie-overlay.is-leaving {
    opacity: 0;
    transition: opacity .22s ease;
}
.site-header {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px clamp(18px, 5vw, 64px);
    background: rgba(255,255,255,.86);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}
.brand-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.brand img { width: 210px; display: block; }
.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 10px;
}
.menu-toggle span {
    display: block;
    height: 3px;
    margin: 5px 0;
    border-radius: 999px;
    background: var(--teal);
}
.top-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 750;
}
.profile-nav-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: #eef9f8;
    color: var(--teal);
    border: 0;
    cursor: pointer;
    list-style: none;
}
.profile-nav-link::-webkit-details-marker { display: none; }
.profile-nav-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 143, 134, .14);
}
.profile-nav-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--teal), var(--cyan));
    color: #fff;
    font-size: .95rem;
    font-weight: 900;
}
.profile-menu {
    position: relative;
    margin-left: 4px;
}
.profile-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 50;
    width: 220px;
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 22px 55px rgba(16,32,51,.16);
}
.profile-dropdown::before {
    content: "";
    position: absolute;
    right: 18px;
    top: -7px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: #fff;
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
}
.profile-dropdown a,
.profile-dropdown button {
    min-height: 42px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}
.profile-dropdown a:hover,
.profile-dropdown button:hover {
    background: #e8f5f4;
    color: var(--teal);
}
.profile-dropdown form {
    margin: 0;
}
.category-link-card {
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.category-link-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,143,134,.36);
    box-shadow: 0 22px 48px rgba(16,32,51,.12);
}
.category-landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
    gap: 24px;
    align-items: center;
    padding: clamp(24px, 4vw, 38px);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.97), rgba(232,245,244,.96)),
        #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 45px rgba(16,32,51,.08);
}
.category-landing-hero img,
.category-landing-fallback {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 18px 36px rgba(16,32,51,.12);
}
.category-landing-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #083142, #12b4aa);
    color: #fff;
    font-size: 5rem;
    font-weight: 950;
}
.category-landing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.category-landing-meta span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #e8f5f4;
    color: var(--teal);
    font-size: .88rem;
    font-weight: 850;
}
.text-link {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--teal);
    font-weight: 850;
}
.course-card-image {
    width: 100%;
    min-height: 150px;
    max-height: 190px;
    object-fit: cover;
    border-radius: 8px;
}
.category-course-card h3 {
    margin: 0;
    font-size: 1.35rem;
}
.menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(5, 19, 30, .48);
    opacity: 0;
    transition: opacity .18s ease;
}
.side-menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(82vw, 330px);
    z-index: 901;
    transform: translateX(-105%);
    transition: transform .22s ease;
    background: #ffffff;
    border-right: 1px solid var(--line);
    box-shadow: 20px 0 60px rgba(0,0,0,.22);
    padding: 18px 16px;
}
.menu-open body { overflow: hidden; }
.menu-open .menu-scrim { opacity: 1; }
.menu-open .side-menu { transform: translateX(0); }
.side-menu-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.side-menu-head img { width: 154px; display: block; }
.menu-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fcfc;
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1;
}
.side-menu-nav {
    display: grid;
    gap: 10px;
    padding-top: 18px;
}
.side-menu-nav a,
.side-menu-nav button {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fcfc;
    color: var(--ink);
    padding: 0 14px;
    font-weight: 850;
    text-align: left;
}
.side-menu-nav button {
    color: #fff;
    background: var(--teal);
    justify-content: center;
}
.ghost-button {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: 0 14px;
}
.page-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 70px;
}
.hero-grid, .continue-card, .split-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
}
h1, h2, h3 { margin: 0; color: #102033; line-height: 1.08; }
h1 { font-size: clamp(2rem, 4vw, 4rem); max-width: 720px; }
h2 { font-size: clamp(1.45rem, 2vw, 2rem); }
.lead { color: var(--muted); font-size: 1.15rem; max-width: 660px; }
.continue-card, .split-panel > div, .stat-grid article, .category-card, .course-card, .lesson-panel {
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(16,32,51,.08);
}
.continue-card {
    margin-top: 28px;
    padding: 28px;
}
.progress-line {
    height: 10px;
    background: #dceced;
    border-radius: 999px;
    overflow: hidden;
    margin: 20px 0 10px;
}
.progress-line span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--cyan)); }
.split-panel {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    margin: 28px 0;
}
.split-panel > div { padding: 24px; }
.todo-list { display: grid; gap: 12px; margin-top: 18px; }
.todo-list a {
    display: grid;
    gap: 4px;
    padding: 14px;
    background: var(--soft);
    border-radius: 8px;
    border: 1px solid var(--line);
}
.todo-list span, .course-meta, small, .category-card p, .course-card p { color: var(--muted); }
.score-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 18px;
}
.score-strip span {
    display: grid;
    gap: 4px;
    padding: 16px;
    background: #f5fbfb;
    border-radius: 8px;
    text-align: center;
}
.score-strip strong, .stat-grid strong { font-size: 2rem; color: var(--teal); }
.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.search-block {
    margin: 20px 0 8px;
    padding: 14px;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(16,32,51,.07);
}
.search-block label {
    display: block;
    margin-bottom: 8px;
    color: #526173;
    font-size: .82rem;
    font-weight: 850;
    text-transform: uppercase;
}
.search-block div {
    display: flex;
    gap: 10px;
    align-items: center;
}
.search-block input {
    flex: 1 1 260px;
    min-height: 46px;
    border: 1px solid #bed4d9;
    border-radius: 8px;
    padding: 0 14px;
    background: #f8fcfc;
    color: var(--ink);
}
.search-block button {
    min-height: 46px;
    border: 0;
    border-radius: 8px;
    padding: 0 18px;
    background: var(--teal);
    color: #fff;
    font-weight: 850;
    cursor: pointer;
}
.learner-search {
    margin-top: 18px;
}
.category-grid, .course-grid, .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.category-card, .course-card, .stat-grid article { padding: 22px; }
.category-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--cyan));
    font-weight: 900;
    margin-bottom: 18px;
}
.student-category-tile,
.admin-category-card {
    background: rgba(255,255,255,.94);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(16,32,51,.08);
}
.student-category-tile {
    display: grid;
    gap: 10px;
    padding: 12px;
    text-align: center;
}
.student-category-tile img,
.category-image-fallback {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    object-fit: cover;
    background: linear-gradient(135deg, #d8f1ef, #f5efe6);
}
.category-image-fallback {
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--cyan));
    font-size: 3rem;
    font-weight: 900;
}
.student-category-tile h3 {
    margin-top: 4px;
}
.student-category-tile p {
    margin: 0;
    color: var(--muted);
    font-size: .94rem;
    line-height: 1.4;
}
.explore-category-grid {
    margin-bottom: 26px;
}
.category-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}
.admin-category-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
}
.admin-category-card img,
.admin-category-card .category-image-fallback {
    width: 150px;
    aspect-ratio: 4 / 3;
}
.admin-category-card h2 {
    font-size: 1.2rem;
    margin: 8px 0 6px;
}
.admin-category-card p {
    margin: 0 0 8px;
    color: var(--muted);
    line-height: 1.4;
}
.course-card { display: grid; gap: 14px; }
.course-image {
    min-height: 150px;
    border-radius: 8px;
    background: linear-gradient(135deg, #d8f1ef, #f5efe6);
}
.course-meta { display: flex; justify-content: space-between; }
.course-player { max-width: 900px; margin: 0 auto; }
.course-player-with-rail {
    max-width: 1180px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.course-rail {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 16px;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(16,32,51,.08);
}
.course-rail-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
}
.course-rail-head .progress-line {
    margin: 10px 0 0;
}
.course-section-list {
    display: grid;
    gap: 12px;
}
.course-rail-section {
    display: grid;
    gap: 7px;
}
.course-rail-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    margin: 0;
    color: var(--ink);
}
.rail-activity {
    min-height: 42px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fcfc;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 760;
}
.rail-activity.is-current {
    border-color: rgba(0, 143, 134, .42);
    background: #e8f5f4;
    color: var(--teal);
}
.rail-activity.is-complete {
    background: #eef9f2;
    color: #11623b;
}
.rail-activity.is-locked {
    color: #758397;
    background: #f3f6f8;
}
.rail-state {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: .78rem;
}
.course-main {
    min-width: 0;
}
.course-welcome-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: 22px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(0, 143, 134, .95), rgba(7, 26, 35, .96)),
        var(--teal);
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 20px 45px rgba(0, 57, 68, .18);
}
.course-welcome-progress .eyebrow {
    color: rgba(255,255,255,.72);
}
.course-welcome-progress h1 {
    margin: 3px 0 7px;
    color: #fff;
    font-size: clamp(1.45rem, 2.6vw, 2.15rem);
    line-height: 1.08;
}
.course-welcome-progress p {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.86);
    line-height: 1.5;
}
.course-progress-score {
    min-width: 118px;
    display: grid;
    gap: 3px;
    justify-items: end;
}
.course-progress-score strong {
    color: #fff;
    font-size: 2rem;
    line-height: 1;
}
.course-progress-score span {
    color: rgba(255,255,255,.78);
    font-size: .86rem;
    font-weight: 780;
}
.course-progress-bar {
    grid-column: 1 / -1;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}
.course-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffffff, #8df7ef);
    box-shadow: 0 0 22px rgba(141, 247, 239, .55);
}
.course-info-image {
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    border-radius: 8px;
    margin: 20px 0;
}
.course-info-copy {
    margin-top: 22px;
}
.course-info-box {
    margin: 22px 0;
    padding: 18px;
    background: #f8fcfc;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.course-info-box h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.course-info-box ul {
    margin: 0;
    padding-left: 20px;
}
.course-info-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.course-info-meta span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #e8f5f4;
    color: var(--teal);
    font-weight: 850;
    font-size: .88rem;
}
.player-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}
.player-top-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    text-align: right;
}
.admin-edit-shortcut {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 8px;
    background: #083142;
    color: #fff;
    font-size: .85rem;
    font-weight: 850;
    box-shadow: 0 10px 22px rgba(8, 49, 66, .18);
}
.lesson-panel { padding: clamp(22px, 4vw, 42px); }
#video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #071a23;
    border-radius: 8px;
    overflow: hidden;
    margin: 24px 0 14px;
}
#video-player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.video-note { color: var(--muted); }
.activity-image-block {
    margin: 22px 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fcfc;
}
.activity-image-block img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.activity-image-block figcaption {
    margin-top: 10px;
    color: var(--muted);
    font-weight: 750;
    line-height: 1.45;
}
.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4 {
    margin: 1.2em 0 .45em;
    color: #102033;
    line-height: 1.15;
}
.rich-content h2 {
    font-size: 1.55rem;
}
.rich-content h3 {
    font-size: 1.25rem;
}
.rich-content p,
.rich-content li {
    line-height: 1.65;
}
.rich-content ul,
.rich-content ol {
    display: grid;
    gap: 8px;
    padding-left: 24px;
}
.rich-content blockquote {
    margin: 18px 0;
    padding: 14px 16px;
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: #edf8f7;
    color: #213142;
    font-weight: 700;
}
.rich-content mark {
    padding: 0 .18em;
    border-radius: 4px;
    background: #fff0bd;
    color: #102033;
}
.rich-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 18px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.rich-content th,
.rich-content td {
    min-width: 160px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
}
.rich-content th {
    background: #edf8f7;
    color: #083142;
}
.rich-content tr:last-child td {
    border-bottom: 0;
}
.text-small { font-size: .9rem; }
.text-large { font-size: 1.22rem; }
.text-lead {
    display: inline-block;
    font-size: 1.42rem;
    line-height: 1.35;
    font-weight: 850;
}
.text-center {
    display: block;
    text-align: center;
}
.text-right {
    display: block;
    text-align: right;
}
.content-block-panel,
.content-block-frame,
.content-block-key,
.content-block-warning,
.content-block-success {
    margin: 16px 0;
    padding: 16px;
    border-radius: 8px;
}
.content-block-panel {
    background: #f8fcfc;
    border: 1px solid var(--line);
}
.content-block-frame {
    background: #fff;
    border: 2px solid #b9dedd;
}
.content-block-key {
    background: #edf8f7;
    border-left: 5px solid var(--teal);
}
.content-block-warning {
    background: #fff7e7;
    border-left: 5px solid #d99b22;
}
.content-block-success {
    background: #e9f7ef;
    border-left: 5px solid #138a5b;
}
.resource-link-card {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 8px;
    background: #e8f5f4;
    color: var(--teal);
    border: 1px solid #b9dedd;
    font-weight: 850;
}
.stat-grid article { display: grid; gap: 8px; }
.action-panel, .form-panel, .table-panel {
    margin-top: 28px;
    padding: 24px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(16,32,51,.08);
}
.button-row, .admin-grid {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.admin-grid { align-items: flex-start; }
.form-panel { flex: 1 1 320px; margin-top: 0; }
.stack-form { display: grid; gap: 14px; margin-top: 18px; }
.stack-form label { display: grid; gap: 7px; font-weight: 750; }
.inline-form { margin: 0; }
.inline-form button, .reset-form button {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: 0 12px;
    font-weight: 750;
}
.reset-form { display: flex; gap: 8px; align-items: center; margin: 0; min-width: 260px; }
.reset-form input {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 10px;
    min-width: 170px;
}
.filter-form {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}
.filter-form label { display: grid; gap: 6px; font-weight: 750; }
.filter-form input {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
}
.filter-form button {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    padding: 0 18px;
    background: var(--teal);
    color: #fff;
    font-weight: 800;
}
.check-row {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 12px !important;
    padding: 14px;
    background: #f7fbfb;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.check-row input { width: 22px; min-height: 22px; }
.compact-hero {
    padding: 18px 0 6px;
}
.compact-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    margin-bottom: 6px;
}
.compact-hero .lead {
    max-width: 680px;
    font-size: 1rem;
}
.config-panel {
    max-width: 980px;
    padding: 18px;
}
.config-form {
    gap: 10px;
    margin-top: 0;
}
.config-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.config-tabs a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--teal);
    font-size: .88rem;
    font-weight: 850;
    text-decoration: none;
}
.config-section {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: #fbfdfd;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.config-section h2 {
    margin: 0;
    font-size: 1.12rem;
    color: var(--ink);
}
.config-section .eyebrow {
    font-size: .72rem;
}
.config-section label {
    gap: 5px;
    font-size: .92rem;
}
.config-section input,
.config-section select {
    min-height: 42px;
}
.config-number-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
}
.switch-row {
    align-items: flex-start;
    gap: 10px !important;
    padding: 10px 12px;
    background: #fff;
}
.switch-row span {
    display: grid;
    gap: 4px;
}
.switch-row strong {
    color: var(--ink);
    font-size: .94rem;
}
.switch-row small {
    color: var(--muted);
    font-weight: 650;
    line-height: 1.35;
    font-size: .82rem;
}
.config-actions {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    bottom: 12px;
    padding-top: 4px;
}
.config-actions button {
    min-width: 160px;
    box-shadow: 0 14px 28px rgba(0, 126, 125, .18);
}
.hero-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.muted-text {
    color: var(--muted);
    font-weight: 650;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e8f5f4;
    color: var(--teal);
    font-size: .78rem;
    font-weight: 850;
    text-transform: capitalize;
}
.category-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.course-count-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #102033;
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}
.learner-count {
    justify-self: center;
    background: #e8f5f4;
    color: var(--teal);
    border: 1px solid #b9dedd;
}
.compact-link {
    min-height: 38px;
    padding: 0 12px;
}
.table-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
    gap: 18px;
    align-items: start;
    margin-top: 20px;
}
.course-editor-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}
.builder-side {
    display: grid;
    gap: 18px;
}
.course-editor-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.course-editor-grid > .form-panel {
    width: 100%;
}
.course-meta-grid {
    grid-template-columns: minmax(260px, 1.5fr) minmax(180px, .7fr) minmax(180px, .7fr);
}
.section-builder-grid {
    grid-template-columns: minmax(220px, .45fr) minmax(0, 1.55fr);
}
.section-title-panel {
    grid-column: 1 / -1;
}
.assessment-builder-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}
.compact-form {
    gap: 10px;
    margin-top: 0;
}
.compact-form .eyebrow {
    font-size: .72rem;
}
.builder-structure {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}
.section-head,
.builder-section {
    padding: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(16,32,51,.07);
}
.section-head h2,
.builder-section h3 {
    margin: 0;
}
.section-title-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}
.section-title-row > div:first-child {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.section-management-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.compact-button {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: .88rem;
}
.compact-button:disabled {
    cursor: not-allowed;
    opacity: .42;
    box-shadow: none;
}
.danger-button {
    background: #fff4f3;
    color: #9b2118;
    border-color: #f0c4bf;
    box-shadow: none;
}
.danger-button:hover {
    background: #ffe9e6;
}
.activity-list {
    display: grid;
    gap: 8px;
    margin: 14px 0;
}
.activity-row {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: #f8fcfc;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.activity-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.activity-form-grid {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) minmax(140px, .8fr);
    gap: 10px;
}
.builder-preview {
    margin-top: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.course-builder-boxes {
    display: grid;
    gap: 14px;
}
.builder-code-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
}
.builder-code-box > span {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.35;
}
.builder-field-head {
    display: grid;
    gap: 2px;
}
.builder-field-head strong {
    color: var(--ink);
    font-weight: 900;
}
.builder-field-head span {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.35;
}
.builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    background: #edf8f7;
    border: 1px solid #c8e5e3;
}
.builder-toolbar button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(0,137,130,.18);
    border-radius: 8px;
    background: #fff;
    color: #083142;
    font-size: .82rem;
    font-weight: 850;
    box-shadow: none;
}
.builder-toolbar button:hover,
.builder-toolbar button:focus-visible {
    background: var(--teal);
    color: #fff;
}
.text-design-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #dbe8eb;
    box-shadow: 0 10px 24px rgba(16,32,51,.05);
}
.text-design-bar button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #c8e5e3;
    border-radius: 8px;
    background: #f8fcfc;
    color: #083142;
    font-weight: 900;
}
.text-design-bar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
}
.text-design-bar input[type="color"] {
    width: 38px;
    min-height: 34px;
    padding: 3px;
}
.text-design-bar select {
    width: auto;
    min-height: 34px;
    padding: 0 8px;
}
.text-design-bar button:hover,
.text-design-bar button:focus-visible {
    background: var(--teal);
    color: #fff;
}
.builder-code-box textarea {
    font-family: inherit;
    line-height: 1.55;
    background: #fff;
    color: var(--ink);
    border-color: #bed4d9;
    box-shadow: inset 0 0 0 1px rgba(16,32,51,.02);
}
.builder-code-box textarea::placeholder {
    color: #8492a4;
}
.editor-mode-bar {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: #edf8f7;
    border: 1px solid #c8e5e3;
}
.editor-mode-bar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    color: #095b61;
    font-size: .82rem;
    font-weight: 900;
}
.editor-mode-bar button {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-weight: 900;
}
.editor-mode-bar button.is-active {
    background: #fff;
    color: var(--teal);
    box-shadow: 0 6px 14px rgba(16,32,51,.08);
}
.editor-mode-bar select {
    min-height: 30px;
    padding: 0 26px 0 8px;
    border: 1px solid #c8e5e3;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font-size: .86rem;
    font-weight: 800;
}
.visual-content-editor {
    min-height: 360px;
    height: auto;
    overflow: visible;
    padding: 18px;
    border: 1px solid #bed4d9;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(16,32,51,.02);
}
.blank-dashboard-canvas {
    min-height: 520px;
}
.blank-dashboard-canvas:not(:empty) {
    min-height: 0;
}
.lesson-grid-canvas,
.lesson-layout-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.lesson-grid-canvas {
    background-image:
        linear-gradient(to right, rgba(0,137,130,.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16,32,51,.045) 1px, transparent 1px);
    background-size: calc(25% - 0px) 100%, 100% 44px;
}
.lesson-grid-canvas > *,
.lesson-layout-content > * {
    grid-column: 1 / -1;
    min-width: 0;
}
.lesson-grid-canvas > .layout-block,
.lesson-layout-content > .layout-block {
    margin: 0;
}
.lesson-grid-canvas > .span-1,
.lesson-layout-content > .span-1 {
    grid-column: span 1;
}
.lesson-grid-canvas > .span-2,
.lesson-layout-content > .span-2 {
    grid-column: span 2;
}
.lesson-grid-canvas > .span-3,
.lesson-layout-content > .span-3 {
    grid-column: span 3;
}
.lesson-grid-canvas > .span-4,
.lesson-layout-content > .span-4 {
    grid-column: 1 / -1;
}
.layout-block.align-left {
    justify-self: start;
    width: 100%;
}
.layout-block.align-center {
    justify-self: center;
    width: min(100%, 780px);
}
.layout-block.align-right {
    justify-self: end;
    width: 100%;
}
.visual-content-editor:empty::before {
    content: attr(data-placeholder);
    display: grid;
    grid-column: 1 / -1;
    min-height: 460px;
    place-items: center;
    border: 2px dashed #c8e5e3;
    border-radius: 8px;
    color: #73919a;
    font-weight: 850;
    text-align: center;
}
.visual-content-editor:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0,137,130,.12);
}
.visual-content-editor.is-drop-target {
    border-style: dashed;
    border-width: 2px;
    background: #f1fbfb;
}
.visual-content-editor .is-selected-block {
    outline: 3px solid rgba(0,137,130,.28);
    outline-offset: 4px;
}
.builder-block-tools {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
    margin: -6px -6px 10px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(237,248,247,.94);
    border: 1px solid #c8e5e3;
    user-select: none;
}
.builder-block-tools button {
    pointer-events: auto;
    min-height: 24px;
    padding: 0 7px;
    border: 1px solid rgba(0,137,130,.16);
    border-radius: 6px;
    background: #fff;
    color: #095b61;
    font-size: .68rem;
    font-weight: 900;
}
.builder-block-tools button[data-block-delete] {
    margin-left: auto;
    color: #9b2118;
    border-color: #f0c4bf;
    background: #fff7f6;
}
.builder-text-tools {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding-left: 6px;
    border-left: 1px solid #c8e5e3;
}
.builder-text-tools-main {
    width: 100%;
    margin: 8px 0 10px;
    padding: 8px 10px;
    border: 1px solid #c8e5e3;
    border-radius: 8px;
    background: #f8fcfc;
}
.builder-text-tools-main > strong {
    color: #083142;
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.builder-text-tools label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 24px;
    color: #095b61;
    font-size: .68rem;
    font-weight: 900;
}
.builder-text-tools input[type="color"][data-block-text-color] {
    width: 24px;
    height: 22px;
    min-height: 22px !important;
    max-height: 22px;
    padding: 1px;
    border: 1px solid #c8e5e3;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
}
.builder-text-tools input[type="number"] {
    width: 46px;
    min-height: 24px;
    padding: 0 4px;
    border: 1px solid #c8e5e3;
    border-radius: 6px;
    background: #fff;
    color: #102033;
    font-size: .7rem;
    font-weight: 850;
}
.builder-text-tools [data-colour-label] {
    min-width: 42px;
    color: #3b5361;
    font-family: "Consolas", "Courier New", monospace;
    font-size: .66rem;
    font-weight: 800;
}
.builder-text-tools select {
    min-height: 24px;
    max-width: 112px;
    padding: 0 18px 0 5px;
    border: 1px solid #c8e5e3;
    border-radius: 6px;
    background: #fff;
    color: #102033;
    font-size: .68rem;
    font-weight: 850;
}
.lesson-layout-content .builder-block-tools,
.builder-preview .builder-block-tools,
.video-supporting-content .builder-block-tools {
    display: none !important;
}
.visual-content-editor[hidden],
.builder-code-box textarea[hidden] {
    display: none !important;
}
.page-drop-hint {
    padding: 10px 12px;
    border-radius: 8px;
    background: #edf8f7;
    color: #095b61;
    font-size: .9rem;
    font-weight: 850;
    text-align: center;
}
.advanced-builder-tools {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    background: #f8fcfc;
    border: 1px solid var(--line);
}
.advanced-builder-tools[open] {
    display: grid;
}
.advanced-builder-tools summary {
    cursor: pointer;
    color: #083142;
    font-weight: 900;
}
.advanced-builder-tools > * + * {
    margin-top: 10px;
}
.builder-code-box textarea:not([hidden]) {
    font-family: "Consolas", "Courier New", monospace;
    background: #081923;
    color: #ecfeff;
    border-color: #164556;
}
.builder-workbench {
    padding: 0;
    overflow: hidden;
}
.lesson-studio {
    grid-column: 1 / -1;
}
.workbench-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, #f8fcfc, #fff);
}
.workbench-head h2 {
    margin: 0;
}
.save-status {
    display: inline-flex;
    margin-top: 6px;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 800;
}
.studio-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.studio-actions button {
    min-height: 40px;
    padding: 0 12px;
}
.studio-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.studio-tabs button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-weight: 900;
}
.studio-tabs button.is-active,
.studio-tabs button:hover,
.studio-tabs button:focus-visible {
    background: #e8f5f4;
    color: var(--teal);
    border-color: #b9dedd;
}
.workbench-layout {
    display: grid;
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    gap: 0;
}
[data-active-studio-view="preview"] .workbench-layout,
[data-active-studio-view="flow"] .workbench-layout {
    grid-template-columns: 1fr;
}
[data-active-studio-view="preview"] .workbench-side,
[data-active-studio-view="flow"] .workbench-side,
[data-active-studio-view="preview"] .builder-panel:not(.studio-canvas-panel),
[data-active-studio-view="flow"] .builder-panel:not(.studio-flow-panel),
[data-active-studio-view="preview"] .builder-code-box,
[data-active-studio-view="flow"] .builder-code-box,
[data-active-studio-view="preview"] .config-number-grid,
[data-active-studio-view="flow"] .config-number-grid,
[data-active-studio-view="preview"] .switch-row,
[data-active-studio-view="flow"] .switch-row {
    display: none;
}
[data-active-studio-view="preview"] .studio-canvas-panel {
    min-height: 520px;
}
[data-active-studio-view="preview"] .lesson-canvas {
    min-height: 420px;
}
.workbench-side {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
    background: #f5fbfb;
    border-right: 1px solid var(--line);
}
.workbench-main {
    display: grid;
    gap: 14px;
    padding: 18px;
    min-width: 0;
}
.builder-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfd;
}
.builder-tip {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #cde7e5;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.35;
}
.builder-tip strong {
    color: #083142;
}
.block-library {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
}
.block-library strong {
    color: #083142;
}
.block-library button {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #cde7e5;
    border-radius: 8px;
    background: #f8fcfc;
    color: #083142;
    text-align: left;
    font-weight: 850;
}
.block-library button:hover,
.block-library button:focus-visible {
    background: var(--teal);
    color: #fff;
}
.block-library button[draggable="true"] {
    cursor: grab;
}
.block-library button[draggable="true"]:active {
    cursor: grabbing;
}
.studio-canvas-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #edf8f7, #f8fcfc);
    border: 1px solid #cde7e5;
}
.studio-canvas-panel[hidden],
.studio-flow-panel[hidden],
.builder-panel[hidden] {
    display: none !important;
}
.studio-canvas-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.studio-canvas-head h3 {
    margin: 0;
    font-size: 1.3rem;
}
.lesson-canvas {
    min-height: 220px;
    padding: 22px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 45px rgba(16,32,51,.08);
}
.paste-helper {
    min-height: 116px !important;
    background: #f8fcfc !important;
}
.video-preview-box {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #081923;
    box-shadow: 0 16px 36px rgba(16,32,51,.12);
}
.video-preview-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.saved-video-preview {
    margin-top: 12px;
    max-width: 720px;
}
.lesson-canvas-video,
.video-supporting-content {
    margin-bottom: 18px;
}
.video-drop-zone {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 118px;
    padding: 18px;
    border: 2px dashed #91c9c7;
    border-radius: 8px;
    background: #f1fbfb;
    color: #083142;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.video-drop-zone strong {
    font-size: 1.05rem;
}
.video-drop-zone span {
    max-width: 520px;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.4;
}
.video-drop-zone:hover,
.video-drop-zone:focus-visible,
.video-drop-zone.is-dragging {
    border-color: var(--teal);
    background: #e8f5f4;
    outline: none;
}
.video-drop-zone.is-dragging {
    transform: scale(1.01);
}
.video-drop-zone.has-video {
    border-style: solid;
    background: #e9f7ef;
    border-color: #138a5b;
}
.inline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.inline-head h3 {
    margin: 0;
}
.preserved-text {
    white-space: pre-wrap;
    padding: 14px;
    border-radius: 8px;
    background: #f8fcfc;
    border: 1px solid var(--line);
    line-height: 1.6;
}
.learning-steps {
    display: grid;
    gap: 10px;
    padding-left: 26px;
}
.lesson-reading-block,
.lesson-media-reading,
.practical-task-card,
.support-panel,
.scenario-card {
    margin: 16px 0;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
}
.lesson-media-reading {
    background: #f1fbfb;
    border-color: #cde7e5;
}
.practical-task-card {
    background: #fff7e7;
    border-color: #efd18d;
}
.support-panel {
    background: #edf8f7;
    border-color: #b9dedd;
}
.interactive-checklist {
    display: grid;
    gap: 8px;
    padding-left: 24px;
}
.flow-steps {
    display: grid;
    gap: 8px;
}
.flow-steps span {
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    color: #083142;
    font-weight: 800;
}
.inline-knowledge-check {
    display: grid;
    gap: 12px;
    margin: 18px 0;
    padding: 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f1fbfb, #fff);
    border: 1px solid #cde7e5;
}
.inline-knowledge-check h3 {
    margin: 0;
    color: #083142;
}
.knowledge-options {
    display: grid;
    gap: 8px;
}
.knowledge-options button {
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    font-weight: 750;
}
.knowledge-options button:hover,
.knowledge-options button:focus-visible {
    border-color: var(--teal);
}
.knowledge-options button.is-selected {
    outline: 2px solid rgba(0,137,130,.2);
}
.knowledge-options button.is-correct {
    background: #e8f5f4;
    border-color: #8fcac6;
}
.knowledge-response {
    min-height: 24px;
    margin: 0;
    color: #6b4b11;
    font-weight: 750;
}
.knowledge-response.is-correct {
    color: var(--teal);
}
.image-upload-control {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 8px;
    background: #f8fcfc;
    border: 1px solid var(--line);
}
.image-upload-control img {
    width: min(260px, 100%);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}
.image-upload-preview {
    box-shadow: 0 12px 28px rgba(16,32,51,.1);
}
.quiz-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}
.quiz-tool-card,
.quiz-planner-card {
    position: relative;
    overflow: hidden;
}
.quiz-tool-card {
    display: grid;
    gap: 8px;
    min-height: 126px;
    padding: 18px;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 18px 45px rgba(16,32,51,.11);
}
.quiz-tool-card strong {
    font-size: 1.05rem;
}
.quiz-tool-card span {
    color: rgba(255,255,255,.88);
    line-height: 1.45;
}
.quiz-tool-card.teal { background: linear-gradient(135deg, #007c78, #0ea5a4); }
.quiz-tool-card.blue { background: linear-gradient(135deg, #102033, #285a70); }
.quiz-tool-card.gold { background: linear-gradient(135deg, #b7791f, #e0a83d); }
.quiz-list-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}
.quiz-planner-card h2 {
    margin-top: 0;
}
.quiz-tool-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.quiz-tool-list span {
    padding: 8px 10px;
    border-radius: 999px;
    background: #f1fbfb;
    color: #095b61;
    border: 1px solid #cde7e5;
    font-size: .82rem;
    font-weight: 850;
}
.answer-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.answer-option-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfd;
}
.mini-check {
    min-height: 32px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #edf8f7;
}
.question-preview-card {
    display: grid;
    gap: 12px;
}
.question-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.answer-preview-list {
    display: grid;
    gap: 8px;
}
.answer-preview-list > div {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fcfc;
    border: 1px solid var(--line);
}
.answer-preview-list .is-correct {
    background: #e8f5f4;
    border-color: #8fcac6;
}
.answer-preview-list strong {
    color: var(--teal);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.answer-preview-list small {
    color: var(--muted);
    line-height: 1.35;
}
.quiz-explanation {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: #fff7e7;
    border: 1px solid #efd18d;
    color: #233142;
}
.quiz-explanation strong {
    color: #8a5a10;
}
.content-image {
    margin: 14px 0;
}
.content-image img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 8px;
}
.content-image figcaption,
.video-note {
    color: var(--muted);
    font-size: .9rem;
}
.learning-callout {
    margin: 14px 0;
    padding: 14px;
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: #edf8f7;
}
.learning-callout strong {
    color: #083142;
}
.image-upload-preview.is-empty {
    display: none;
}
.image-upload-control small {
    color: var(--muted);
    line-height: 1.4;
}
.image-upload-filename {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8f5f4;
    color: var(--teal) !important;
    font-weight: 850;
}
.image-upload-control input[type="file"] {
    min-height: auto;
    padding: 11px;
    background: #fff;
}
.course-image-uploader {
    background:
        linear-gradient(135deg, rgba(232,245,244,.95), rgba(245,239,230,.9));
}
.course-image-uploader h2 {
    margin: 0;
    font-size: 1.18rem;
}
.compact-actions {
    gap: 8px;
}
.empty-builder {
    text-align: center;
}
.notice {
    padding: 14px 16px;
    border-radius: 8px;
    font-weight: 750;
}
.notice.success { background: #e8f7ef; color: #11623b; border: 1px solid #bde8cf; }
.notice.error { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.profile-hero {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: center;
    padding: clamp(22px, 4vw, 34px);
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 15%, rgba(124, 229, 219, .28), transparent 30%),
        linear-gradient(135deg, #082232, #008f86 58%, #16a8c7);
    color: #fff;
    box-shadow: 0 24px 60px rgba(6, 43, 58, .18);
}
.profile-hero h1,
.profile-hero p,
.profile-hero .eyebrow {
    color: #fff;
}
.profile-hero p:not(.eyebrow) {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.84);
}
.profile-hero .primary-link {
    background: #fff;
    color: var(--teal);
    flex: 0 0 auto;
}
.profile-identity {
    display: flex;
    gap: 18px;
    align-items: center;
}
.profile-avatar-xl {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.34);
    color: #fff;
    font-size: 3rem;
    font-weight: 950;
    box-shadow: inset 0 0 0 8px rgba(255,255,255,.08);
}
.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0;
}
.profile-stat-card {
    min-height: 170px;
    display: grid;
    align-content: space-between;
    gap: 10px;
    padding: 20px;
    border-radius: 8px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(16,32,51,.1);
}
.profile-stat-card span {
    font-weight: 850;
}
.profile-stat-card strong {
    color: #fff;
    font-size: 2.55rem;
    line-height: 1;
}
.profile-stat-card small {
    color: rgba(255,255,255,.82);
    line-height: 1.35;
}
.profile-stat-card .progress-line {
    background: rgba(255,255,255,.24);
}
.profile-stat-card .progress-line span {
    background: #fff;
}
.profile-stat-card.teal { background: linear-gradient(135deg, #008f86, #12b4aa); }
.profile-stat-card.coral { background: linear-gradient(135deg, #b8505c, #e07a6f); }
.profile-stat-card.blue { background: linear-gradient(135deg, #083142, #2a76a0); }
.profile-stat-card.gold { background: linear-gradient(135deg, #9c6a20, #d69a33); }
.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: 18px;
    align-items: start;
}
.profile-panel,
.certificate-showcase {
    padding: clamp(20px, 3vw, 28px);
    background: rgba(255,255,255,.94);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(16,32,51,.08);
}
.compact-heading {
    margin-bottom: 8px;
}
.account-lock-panel {
    background:
        linear-gradient(180deg, #ffffff, #f3fbfb);
}
.locked-row {
    display: grid;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.locked-row span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 850;
    text-transform: uppercase;
}
.locked-row strong {
    color: var(--ink);
    word-break: break-word;
}
.locked-row small {
    color: var(--muted);
}
.certificate-showcase {
    margin-top: 20px;
}
.certificate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.certificate-card {
    min-height: 210px;
    display: grid;
    gap: 8px;
    padding: 20px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(232,245,244,.95)),
        #fff;
    border: 1px solid #b9dedd;
}
.certificate-card h3 {
    margin: 0;
    color: var(--ink);
}
.certificate-card strong {
    align-self: end;
    color: var(--teal);
    word-break: break-word;
}
.certificate-card span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8f7ef;
    color: #11623b;
    font-size: .82rem;
    font-weight: 850;
}
.certificate-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 34px;
    text-align: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fcfc, #f5efe6);
    border: 1px dashed #b9dedd;
}
.certificate-empty p {
    max-width: 560px;
    margin: 0;
    color: var(--muted);
}
.certificate-medal {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #083142, #12b4aa);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 950;
    box-shadow: 0 18px 38px rgba(8,49,66,.2);
}
.certificate-page-shell {
    display: grid;
    gap: 18px;
}
.certificate-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.certificate-name-form {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(16,32,51,.07);
}
.certificate-name-form label {
    color: var(--ink);
    font-weight: 850;
}
.certificate-name-form div {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.certificate-name-form input {
    min-height: 46px;
    flex: 1 1 260px;
    padding: 0 14px;
    border: 1px solid #c9dbe2;
    border-radius: 8px;
    background: #f8fcfc;
}
.resilearn-certificate {
    padding: clamp(14px, 3vw, 28px);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #082232, #008f86 62%, #16a8c7),
        var(--teal);
    box-shadow: 0 28px 70px rgba(6,43,58,.2);
}
.certificate-border {
    min-height: 680px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 28px;
    padding: clamp(28px, 5vw, 58px);
    border: 2px solid rgba(0, 143, 134, .22);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(0,143,134,.08), transparent 18%, transparent 82%, rgba(22,168,199,.1)),
        #fff;
}
.certificate-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.certificate-header img {
    width: min(240px, 55vw);
}
.certificate-header span {
    color: var(--teal);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.certificate-body {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    text-align: center;
}
.certificate-body h1 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.6rem, 7vw, 5.7rem);
    line-height: 1;
}
.certificate-body h2 {
    max-width: 780px;
    margin: 0;
    color: var(--teal);
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    line-height: 1.05;
}
.certificate-copy {
    margin: 0;
    color: var(--muted);
    font-size: 1.15rem;
    font-weight: 780;
}
.certificate-support-copy {
    max-width: 620px;
    margin: 8px 0 0;
    color: #526173;
    line-height: 1.55;
}
.certificate-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 18px;
    align-items: end;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.certificate-footer div:not(.certificate-qr-placeholder) {
    display: grid;
    gap: 5px;
}
.certificate-footer span {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 850;
    text-transform: uppercase;
}
.certificate-footer strong {
    color: var(--ink);
    word-break: break-word;
}
.certificate-signature {
    padding-top: 12px;
    border-top: 2px solid var(--teal);
}
.certificate-signature strong {
    font-size: 1.12rem;
}
.fake-signature {
    display: block;
    color: #083142;
    font-family: "Segoe Script", "Lucida Handwriting", "Brush Script MT", cursive;
    font-size: 1.75rem !important;
    font-weight: 500 !important;
    line-height: 1;
    transform: rotate(-2deg);
}
.certificate-qr-placeholder {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #082232, #008f86);
    color: #fff;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(8,49,66,.18);
}
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--line); }
th { color: #526173; font-size: .85rem; text-transform: uppercase; }
.avatar-block {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--teal);
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
}
.secret-key {
    display: inline-block;
    padding: 12px 14px;
    background: #f4fbfb;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-weight: 850;
    letter-spacing: 2px;
    word-break: break-all;
}
.qr-panel {
    width: min(280px, 100%);
    padding: 14px;
    margin: 20px auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 35px rgba(16,32,51,.08);
}
.qr-panel img {
    width: 100%;
    display: block;
}
.help-text {
    color: var(--muted);
    font-size: .85rem;
    word-break: break-all;
}
@media (max-width: 760px) {
    .login-stage {
        grid-template-columns: 1fr;
        align-content: start;
        padding-top: 24px;
        gap: 22px;
    }
    .login-stage-with-panels { width: min(100% - 28px, 430px); }
    .login-card { order: 1; width: min(100%, 430px); margin: 0 auto; }
    .login-copy { order: 2; }
    .login-copy-rich { text-align: center; }
    .login-copy h1 { font-size: 1.65rem; margin: 0 auto; }
    .login-panel-grid { grid-template-columns: 1fr; margin-top: 22px; }
    .login-panel { grid-template-columns: 82px 1fr; text-align: left; }
    .login-panel img { width: 82px; height: 82px; }
    .config-number-grid { grid-template-columns: 1fr 1fr; }
    .site-header {
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        min-height: 0;
        padding: 14px;
        gap: 12px;
    }
    .brand-row { width: 100%; }
    .menu-toggle { display: block; flex: 0 0 auto; }
    .brand img { width: 176px; }
    .top-nav {
        display: none;
    }
    .page-shell {
        width: min(100% - 28px, 430px);
        padding: 24px 0 54px;
    }
    h1 { font-size: 2rem; }
    .lead { font-size: 1rem; }
    .profile-hero {
        display: grid;
        padding: 20px;
    }
    .profile-identity {
        align-items: flex-start;
        gap: 14px;
    }
    .profile-avatar-xl {
        width: 72px;
        height: 72px;
        font-size: 2.2rem;
    }
    .profile-hero .primary-link {
        width: 100%;
    }
    .profile-stat-grid,
    .profile-layout,
    .certificate-grid {
        grid-template-columns: 1fr;
    }
    .category-landing-hero {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .category-landing-hero img,
    .category-landing-fallback {
        order: -1;
    }
    .certificate-toolbar,
    .certificate-header,
    .certificate-footer {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .certificate-border {
        min-height: 0;
        padding: 22px;
    }
    .certificate-body h1 {
        font-size: 2.4rem;
    }
    .profile-stat-card {
        min-height: 142px;
    }
    .stat-grid article,
    .category-card,
    .course-card,
    .action-panel,
    .form-panel,
    .table-panel {
        padding: 18px;
    }
    .hero-grid, .continue-card, .split-panel { grid-template-columns: 1fr; }
    .category-grid, .course-grid, .stat-grid { grid-template-columns: 1fr; }
    .score-strip { grid-template-columns: 1fr; }
    .hero-actions { justify-content: flex-start; }
    .builder-grid { grid-template-columns: 1fr; }
    .course-editor-side,
    .course-meta-grid {
        grid-template-columns: 1fr;
    }
    .quiz-tool-grid,
    .answer-option-grid,
    .assessment-builder-grid {
        grid-template-columns: 1fr;
    }
    .workbench-layout {
        grid-template-columns: 1fr;
    }
    .workbench-side {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .workbench-head,
    .inline-head {
        align-items: stretch;
        flex-direction: column;
    }
    .workbench-head button,
    .inline-head button {
        width: 100%;
    }
    .lesson-grid-canvas,
    .lesson-layout-content {
        grid-template-columns: 1fr;
    }
    .lesson-grid-canvas > .span-1,
    .lesson-grid-canvas > .span-2,
    .lesson-grid-canvas > .span-3,
    .lesson-grid-canvas > .span-4,
    .lesson-layout-content > .span-1,
    .lesson-layout-content > .span-2,
    .lesson-layout-content > .span-3,
    .lesson-layout-content > .span-4 {
        grid-column: 1 / -1;
    }
    .section-title-row {
        display: grid;
    }
    .section-management-actions {
        justify-content: flex-start;
    }
    .quiz-list-card {
        grid-template-columns: 1fr;
    }
    .quiz-list-card .primary-link {
        width: 100%;
    }
    .course-player-with-rail { grid-template-columns: 1fr; }
    .course-rail { position: static; max-height: none; }
    .course-welcome-progress {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .course-progress-score {
        justify-items: start;
        min-width: 0;
    }
    .activity-form-grid { grid-template-columns: 1fr; }
    .activity-row { grid-template-columns: 1fr; }
    .table-actions { min-width: 220px; }
    .search-block div { flex-wrap: wrap; }
    .search-block input { flex-basis: 100%; }
    .category-admin-grid { grid-template-columns: 1fr; }
    .admin-category-card { grid-template-columns: 110px minmax(0, 1fr); }
    .admin-category-card .compact-link { grid-column: 1 / -1; }
    .admin-category-card img,
    .admin-category-card .category-image-fallback { width: 110px; }
}
@media (max-width: 520px) {
    .config-number-grid { grid-template-columns: 1fr; }
    .config-tabs a { flex: 1 1 calc(50% - 8px); justify-content: center; }
    .config-actions { position: static; }
    .admin-category-card { grid-template-columns: 1fr; }
    .admin-category-card img,
    .admin-category-card .category-image-fallback { width: 100%; }
    .workbench-head,
    .workbench-main,
    .workbench-side {
        padding: 12px;
    }
    .studio-tabs {
        gap: 4px;
        padding: 8px 12px;
        overflow-x: auto;
    }
    .studio-tabs button {
        min-height: 32px;
        padding: 0 10px;
        white-space: nowrap;
    }
    .editor-mode-bar {
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        padding: 4px;
        scroll-snap-type: x proximity;
    }
    .editor-mode-bar > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .editor-mode-bar label {
        min-height: 30px;
        padding: 0 6px;
        font-size: .72rem;
        white-space: nowrap;
    }
    .editor-mode-bar button {
        min-height: 30px;
        padding: 0 9px;
        font-size: .72rem;
        white-space: nowrap;
    }
    .editor-mode-bar select {
        min-height: 28px;
        max-width: 96px;
        font-size: .72rem;
    }
    .visual-content-editor {
        padding: 12px;
        min-height: 280px;
    }
    .blank-dashboard-canvas {
        min-height: 360px;
    }
    .visual-content-editor:empty::before {
        min-height: 300px;
        padding: 14px;
    }
    .builder-block-tools {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        margin: -4px -4px 8px;
        padding: 5px;
    }
    .builder-block-tools button {
        min-height: 24px;
        padding: 0 4px;
        font-size: .62rem;
    }
    .builder-text-tools {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 5px 0 0;
        border-left: 0;
        border-top: 1px solid #c8e5e3;
    }
    .builder-text-tools button,
    .builder-text-tools label {
        width: 100%;
        min-height: 24px;
        justify-content: center;
        font-size: .62rem;
    }
    .builder-text-tools label {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 3px;
        align-items: center;
    }
    .builder-text-tools label:has(input[type="color"]) {
        grid-template-columns: auto 24px;
    }
    .builder-text-tools label:has(input[type="color"]) [data-colour-label] {
        display: none;
    }
    .builder-text-tools select {
        max-width: none;
        width: 100%;
        min-width: 0;
        font-size: .62rem;
    }
    .builder-text-tools input[type="number"] {
        width: 100%;
        min-width: 0;
    }
    .builder-text-tools button[data-apply-text-style] {
        grid-column: span 2;
    }
    .builder-block-tools button[data-block-delete] {
        grid-column: 5;
        margin-left: 0;
    }
}

@media print {
    .site-header,
    .side-menu,
    .menu-scrim,
    .certificate-toolbar {
        display: none !important;
    }
    body {
        background: #fff;
    }
    .page-shell {
        width: 100%;
        max-width: none;
        padding: 0;
    }
    .resilearn-certificate {
        padding: 0;
        box-shadow: none;
        background: #fff;
    }
    .certificate-border {
        min-height: 95vh;
        box-shadow: none;
    }
}