:root {
    --ink: #172033;
    --muted: #667085;
    --line: #e6e9f0;
    --surface: #ffffff;
    --soft: #f6f7fb;
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --primary-soft: #eef2ff;
    --teal: #0f766e;
    --amber: #b45309;
    --rose: #be123c;
    --success: #15803d;
    --danger: #b42318;
    --sidebar: #161b2e;
    --radius: 18px;
    --shadow: 0 18px 50px rgba(23, 32, 51, .08);
    --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--surface);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; color: white; background: var(--ink); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.brand { display: inline-flex; align-items: center; gap: 11px; line-height: 1.05; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: white; background: var(--primary); font-size: 19px; font-weight: 850; box-shadow: 0 8px 20px rgba(79,70,229,.2); }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: -.02em; font-size: 17px; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.brand-light { color: white; }
.brand-light small { color: #aab2ce; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid var(--primary);
    border-radius: 11px;
    color: white;
    background: var(--primary);
    font-weight: 750;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.button:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 9px 22px rgba(79,70,229,.18); transform: translateY(-1px); }
.button:focus-visible, input:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(79, 70, 229, .25); outline-offset: 2px; }
.button-small { min-height: 38px; padding: 0 17px; font-size: 14px; }
.button-large { min-height: 54px; padding-inline: 25px; }
.button-full { width: 100%; }
.button-secondary { color: var(--ink); background: white; border-color: #d7dbe5; }
.button-secondary:hover { color: var(--primary); background: var(--primary-soft); border-color: #c7d2fe; }
.button-light { color: var(--primary-dark); background: white; border-color: white; }
.button-light:hover { color: var(--primary-dark); background: #f5f7ff; border-color: #f5f7ff; }
.button-quiet { color: #475467; background: white; border-color: #d9dde7; }
.button-danger { color: var(--danger); background: #fff; border-color: #f5c1bc; }
.button-danger:hover { color: white; background: var(--danger); border-color: var(--danger); }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.navbar { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav-links { display: flex; align-items: center; gap: 29px; color: #475467; font-size: 14px; font-weight: 650; }
.nav-links a:not(.button):hover { color: var(--primary); }
.nav-toggle { display: none; width: 42px; height: 42px; padding: 10px; background: transparent; border: 0; }
.nav-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--ink); }
.hero { position: relative; overflow: hidden; padding: 86px 0 78px; background: #fbfbfe; border-bottom: 1px solid var(--line); }
.hero::before, .hero::after { content: ""; position: absolute; z-index: 0; border-radius: 999px; pointer-events: none; }
.hero::before { width: 440px; height: 440px; top: -280px; left: -160px; border: 70px solid #eeefff; }
.hero::after { width: 250px; height: 250px; right: -140px; bottom: -120px; border: 45px solid #f0edff; }
.programming-progress-svg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .53; pointer-events: none; }
.programming-code-card { opacity: .56; }
.programming-code-card-one { translate: 0 0; animation: programming-card-float 8s ease-in-out infinite; }
.programming-code-card-two { translate: 0 0; animation: programming-card-float 9.5s -3s ease-in-out infinite; }
.programming-code-line, .programming-terminal-progress { transform-box: fill-box; transform-origin: left center; animation: programming-line-type 5.5s ease-in-out infinite; }
.programming-code-line.line-b { animation-delay: -.7s; }
.programming-code-line.line-c { animation-delay: -1.4s; }
.programming-code-line.line-d { animation-delay: -2.1s; }
.programming-code-line.line-e { animation-delay: -2.8s; }
.programming-terminal-progress { animation-name: programming-progress-build; animation-duration: 6s; }
.programming-terminal-path { stroke-dasharray: 44 13; animation: programming-terminal-flow 5s linear infinite; }
.programming-terminal-dot { animation: programming-bg-status 2s ease-out infinite; }
.programming-symbol { fill: #6366f1; opacity: .19; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 31px; font-weight: 850; }
.programming-symbol.symbol-one { animation: programming-symbol-float 7s ease-in-out infinite; }
.programming-symbol.symbol-two { animation: programming-symbol-float 8.2s -2s ease-in-out infinite; }
.programming-symbol.symbol-three { animation: programming-symbol-float 6.8s -4s ease-in-out infinite; }
.programming-symbol.symbol-four { animation: programming-symbol-float 9s -1s ease-in-out infinite; }
.programming-progress-shadow, .programming-progress-track, .programming-progress-signal { fill: none; stroke-linecap: round; }
.programming-progress-shadow { stroke: rgba(255,255,255,.88); stroke-width: 19; }
.programming-progress-track { stroke: url(#programming-progress-gradient); stroke-width: 5; opacity: .37; }
.programming-progress-signal { stroke: url(#programming-progress-gradient); stroke-width: 3; stroke-dasharray: 3 34; filter: url(#programming-progress-glow); animation: programming-route-flow 2.8s linear infinite; }
.programming-progress-node > circle:not(.progress-node-pulse) { fill: #6366f1; stroke: #fff; stroke-width: 5; filter: drop-shadow(0 5px 10px rgba(79,70,229,.25)); }
.programming-progress-node .launch-node { fill: #059669 !important; }
.programming-progress-node text { fill: #667085; font-size: 9px; font-weight: 850; letter-spacing: .11em; text-anchor: middle; }
.progress-node-pulse { fill: none; stroke: #818cf8; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: programming-node-pulse 3.4s ease-out infinite; }
.progress-node-two .progress-node-pulse { animation-delay: .65s; }
.progress-node-three .progress-node-pulse { animation-delay: 1.3s; }
.progress-node-four .progress-node-pulse { animation-delay: 1.95s; }
.progress-node-five .progress-node-pulse { animation-delay: 2.6s; }
.progress-node-pulse.launch-pulse { stroke: #10b981; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 76px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
.eyebrow-light { color: #c7d2fe; }
.hero h1 { max-width: 720px; margin: 22px 0 23px; font-size: clamp(48px, 5.2vw, 75px); line-height: 1.02; letter-spacing: -.055em; }
.hero h1 span { color: var(--primary); }
.hero-copy > p { max-width: 640px; margin: 0; color: #586174; font-size: 18px; line-height: 1.7; }
.venture-line { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #667085; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.venture-line span { display: grid; place-items: center; width: 35px; height: 22px; color: white; background: var(--ink); border-radius: 6px; letter-spacing: .03em; }
.venture-line.light { color: #aeb7d4; }
.venture-line.light span { background: var(--primary); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; }
.hero-trust { display: flex; gap: 0; margin-top: 42px; }
.hero-trust > span { min-width: 150px; padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--line); }
.hero-trust > span:last-child { border: 0; }
.hero-trust strong, .hero-trust small { display: block; }
.hero-trust strong { font-size: 14px; }
.hero-trust small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.hero-panel { position: relative; padding: 28px; color: white; background: #202743; border: 1px solid #313958; border-radius: 25px; box-shadow: 0 28px 60px rgba(24,30,55,.2); }
.hero-panel::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border: 1px solid #dfe2ef; border-radius: 25px; background: #f2f3f9; }
.panel-top { display: flex; justify-content: space-between; color: #aeb7d4; font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.live-dot { display: flex; align-items: center; gap: 7px; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.hero-panel-title { display: flex; align-items: center; gap: 16px; padding: 27px 0; border-bottom: 1px solid #39405d; }
.hero-monogram { display: grid; place-items: center; flex: 0 0 53px; height: 53px; color: white; background: var(--primary); border-radius: 15px; font-size: 24px; font-weight: 850; }
.hero-panel-title strong, .hero-panel-title small { display: block; }
.hero-panel-title strong { font-size: 20px; letter-spacing: -.02em; }
.hero-panel-title small { color: #aeb7d4; }
.path-list > div { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 19px 0; border-bottom: 1px solid #39405d; }
.path-list > div > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #c7d2fe; background: #343b59; font-size: 11px; font-weight: 800; }
.path-list p, .path-list strong, .path-list small { margin: 0; display: block; }
.path-list strong { font-size: 14px; }
.path-list small { color: #aeb7d4; font-size: 11px; }
.path-list b { color: #8993b3; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.panel-outcome { margin-top: 22px; padding: 17px; border-radius: 13px; background: #2c3453; }
.panel-outcome span, .panel-outcome strong { display: block; }
.panel-outcome span { color: #aeb7d4; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.panel-outcome strong { margin-top: 4px; font-size: 14px; }
.proof-strip { border-bottom: 1px solid var(--line); }
.proof-grid { display: grid; grid-template-columns: repeat(5, 1fr); padding: 28px 0; }
.proof-grid > span { text-align: center; border-right: 1px solid var(--line); }
.proof-grid > span:last-child { border: 0; }
.proof-grid strong, .proof-grid small { display: block; }
.proof-grid strong { font-size: 26px; letter-spacing: -.03em; }
.proof-grid small { color: var(--muted); font-size: 12px; }
.section { padding: 100px 0; scroll-margin-top: 70px; }
.section-muted { background: var(--soft); }
.section-heading { max-width: 690px; margin-bottom: 47px; }
.section-heading h2, .fee-section h2, .final-cta h2 { margin: 15px 0 14px; font-size: clamp(34px, 4vw, 52px); line-height: 1.12; letter-spacing: -.04em; }
.section-heading p, .fee-section p, .final-cta p { margin: 0; color: var(--muted); font-size: 17px; }
.split-heading { max-width: none; display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; }
.learning-cycle { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.learning-cycle article { min-height: 245px; padding: 29px 24px; border-right: 1px solid var(--line); }
.learning-cycle article:last-child { border: 0; }
.learning-cycle article > span { display: grid; place-items: center; width: 38px; height: 38px; color: var(--primary); background: var(--primary-soft); border-radius: 11px; font-size: 12px; font-weight: 850; }
.learning-cycle h3 { margin: 38px 0 8px; font-size: 20px; }
.learning-cycle p { margin: 0; color: var(--muted); font-size: 13px; }
.curriculum-intro { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 75px; align-items: end; margin-bottom: 45px; }
.curriculum-intro .section-heading { margin: 0; }
.beginner-welcome { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: center; padding: 19px 21px; color: #273044; background: rgba(255,255,255,.82); border: 1px solid #dfe3ed; border-radius: 20px; box-shadow: 0 16px 45px rgba(38,50,88,.06); backdrop-filter: blur(10px); }
.beginner-welcome svg { width: 88px; height: 88px; }
.welcome-screen { fill: #eef2ff; stroke: #818cf8; stroke-width: 2; }
.welcome-code { fill: none; stroke: #4f46e5; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: welcome-code-draw 4s ease-in-out infinite; }
.welcome-base { fill: none; stroke: #a5b4fc; stroke-width: 3; stroke-linecap: round; }
.welcome-spark { fill: #4f46e5; transform-box: fill-box; transform-origin: center; animation: welcome-spark 2.4s ease-in-out infinite; }
.welcome-spark.spark-b { animation-delay: -1.2s; }
.beginner-welcome span, .beginner-welcome strong { display: block; }
.beginner-welcome span { color: var(--primary); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.beginner-welcome strong { margin-top: 3px; font-size: 16px; letter-spacing: -.015em; }
.beginner-welcome p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.curriculum-map { position: relative; overflow: hidden; padding: 30px 30px 24px; color: white; background: radial-gradient(circle at 72% 5%, #343e72 0, #202743 38%, #151a30 100%); border: 1px solid #323c65; border-radius: 28px; box-shadow: 0 30px 80px rgba(28,35,64,.18); }
.curriculum-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(129,140,248,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,.06) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, #000, transparent 82%); pointer-events: none; }
.curriculum-map-copy { position: relative; z-index: 2; display: grid; grid-template-columns: 190px minmax(260px, 1fr) minmax(250px, 390px); gap: 24px; align-items: center; }
.curriculum-map-copy span { color: #a5b4fc; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.curriculum-map-copy strong { font-size: 23px; letter-spacing: -.025em; }
.curriculum-map-copy small { color: #aeb7d4; font-size: 11px; line-height: 1.6; }
.curriculum-journey-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; margin-top: -4px; overflow: visible; }
.journey-shadow-line, .journey-route, .journey-route-signal { fill: none; stroke-linecap: round; }
.journey-shadow-line { stroke: rgba(0,0,0,.35); stroke-width: 16; }
.journey-route { stroke: url(#journey-line-gradient); stroke-width: 5; opacity: .82; }
.journey-route-signal { stroke: #fff; stroke-width: 2.5; stroke-dasharray: 2 32; filter: url(#journey-glow); animation: curriculum-signal 2.4s linear infinite; }
.journey-node { transform-box: fill-box; transform-origin: center; }
.journey-node-halo { fill: rgba(129,140,248,.12); stroke: rgba(165,180,252,.16); stroke-width: 1; }
.journey-node-core { fill: url(#journey-node-gradient); stroke: #929cf8; stroke-width: 2; filter: drop-shadow(0 8px 14px rgba(13,17,38,.36)); }
.journey-node-core.launch-core { fill: #047857; stroke: #6ee7b7; }
.journey-pulse-ring { fill: none; stroke: #818cf8; stroke-width: 2; opacity: 0; animation: curriculum-node-pulse 3s ease-out infinite; }
.journey-node-two .journey-pulse-ring { animation-delay: .7s; }
.journey-node-three .journey-pulse-ring { animation-delay: 1.4s; }
.journey-node-four .journey-pulse-ring { animation-delay: 2.1s; }
.journey-pulse-ring.launch-ring { stroke: #34d399; }
.journey-node-one { animation: curriculum-node-float 5.2s ease-in-out infinite; }
.journey-node-two { animation: curriculum-node-float 5.8s -.8s ease-in-out infinite; }
.journey-node-three { animation: curriculum-node-float 5.5s -1.5s ease-in-out infinite; }
.journey-node-four { animation: curriculum-node-float 6s -2.2s ease-in-out infinite; }
.journey-mini-code { animation: curriculum-code-float 5s ease-in-out infinite; }
.journey-mini-code.code-float-two { animation-delay: -1.7s; }
.journey-mini-code.code-float-three { animation-delay: -3.3s; }
.journey-mini-code rect { fill: #273052; stroke: #5d6999; }
.journey-mini-code circle { fill: #818cf8; }
.journey-mini-code path { fill: none; stroke: #9ca7d0; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 50; animation: curriculum-code-type 3.8s ease-in-out infinite; }
.curriculum-map-labels { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: -31px; }
.curriculum-map-labels span { text-align: center; }
.curriculum-map-labels i, .curriculum-map-labels strong, .curriculum-map-labels small { display: block; font-style: normal; }
.curriculum-map-labels i { color: #818cf8; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.curriculum-map-labels strong { margin-top: 3px; font-size: 13px; }
.curriculum-map-labels small { color: #8f9abb; font-size: 9px; }
.course-stages { display: grid; gap: 46px; margin-top: 62px; }
.course-stage { --stage-color: #4f46e5; --stage-soft: #eef2ff; }
.course-stage-blue { --stage-color: #2563eb; --stage-soft: #eff6ff; }
.course-stage-indigo { --stage-color: #4f46e5; --stage-soft: #eef2ff; }
.course-stage-violet { --stage-color: #7c3aed; --stage-soft: #f5f3ff; }
.course-stage-green { --stage-color: #047857; --stage-soft: #ecfdf5; }
.course-stage-heading { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 20px; padding: 0 5px; }
.stage-number { display: grid; place-items: center; width: 54px; height: 54px; color: white; background: var(--stage-color); border-radius: 18px; box-shadow: 0 12px 25px color-mix(in srgb, var(--stage-color) 24%, transparent); font-size: 14px; font-weight: 850; }
.course-stage-heading div > span { color: var(--stage-color); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.course-stage-heading h3 { margin: 2px 0 1px; font-size: 23px; letter-spacing: -.025em; }
.course-stage-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.course-stage-heading > small { padding: 6px 10px; color: var(--stage-color); background: var(--stage-soft); border-radius: 999px; font-size: 9px; font-weight: 850; white-space: nowrap; }
.course-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.course-card { position: relative; display: flex; flex-direction: column; min-height: 390px; padding: 22px; overflow: hidden; background: rgba(255,255,255,.93); border: 1px solid #e0e4ed; border-radius: 20px; box-shadow: 0 8px 26px rgba(28,39,76,.035); transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s, box-shadow .28s; }
.course-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--stage-color), color-mix(in srgb, var(--stage-color) 35%, white)); transform: scaleX(.22); transform-origin: left; transition: transform .35s ease; }
.course-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -90px; top: -90px; border-radius: 50%; background: var(--stage-soft); opacity: 0; transition: opacity .3s, transform .4s; }
.course-card:hover, .course-card:focus-visible { transform: translateY(-7px); border-color: color-mix(in srgb, var(--stage-color) 30%, #dfe3ed); box-shadow: 0 22px 55px rgba(28,39,76,.11); }
.course-card:hover::before, .course-card:focus-visible::before { transform: scaleX(1); }
.course-card:hover::after, .course-card:focus-visible::after { opacity: .8; transform: scale(1.15); }
.course-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.course-card-icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; color: var(--stage-color); background: var(--stage-soft); border-radius: 16px; }
.course-card-icon::after { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--stage-color) 22%, transparent); border-radius: 12px; opacity: 0; transform: scale(.75); transition: opacity .25s, transform .35s; }
.course-card-icon svg { position: relative; z-index: 2; width: 25px; height: 25px; }
.course-card-icon i { position: absolute; width: 7px; height: 7px; right: 1px; top: 1px; background: var(--stage-color); border: 2px solid white; border-radius: 50%; opacity: .7; }
.course-card:hover .course-card-icon::after { opacity: 1; transform: scale(1); }
.course-card:hover .course-card-icon svg { animation: course-icon-play .65s cubic-bezier(.2,.8,.2,1); }
.course-order { color: #d8ddea; font-size: 32px; font-weight: 850; letter-spacing: -.06em; }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; color: #475467; background: #f2f4f7; border: 1px solid #e4e7ec; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.badge-success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.course-card-labels { display: flex; align-items: center; gap: 9px; margin-top: 20px; }
.course-code { color: var(--stage-color); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.course-level { padding-left: 9px; color: #7b8497; border-left: 1px solid #dfe3ed; font-size: 9px; font-weight: 750; }
.course-card h4 { margin: 8px 0 9px; font-size: 18px; line-height: 1.33; letter-spacing: -.025em; }
.course-card > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.course-build { margin-top: auto; padding: 12px 13px; background: var(--stage-soft); border-radius: 12px; }
.course-build span, .course-build strong { display: block; }
.course-build span { color: var(--stage-color); font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.course-build strong { margin-top: 2px; color: #30384a; font-size: 10px; line-height: 1.45; }
.course-meta { display: flex; gap: 13px; padding-top: 16px; color: #70798b; font-size: 8.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.course-meta span:last-child { margin-left: auto; color: var(--stage-color); }
.course-meta b { display: inline-block; transition: transform .2s; }
.course-card:hover .course-meta b { transform: translateX(4px); }

@keyframes welcome-code-draw {
    0%, 12% { stroke-dasharray: 0 100; opacity: .25; }
    42%, 82% { stroke-dasharray: 100 0; opacity: 1; }
    100% { stroke-dasharray: 0 100; opacity: .25; }
}
@keyframes welcome-spark {
    0%, 100% { transform: scale(.7); opacity: .35; }
    50% { transform: scale(1.35); opacity: 1; }
}
@keyframes curriculum-signal {
    to { stroke-dashoffset: -68; }
}
@keyframes curriculum-node-pulse {
    0% { opacity: .7; transform: scale(.8); }
    70%, 100% { opacity: 0; transform: scale(1.65); }
}
@keyframes curriculum-node-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}
@keyframes curriculum-code-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -9px; }
}
@keyframes curriculum-code-type {
    0%, 15% { stroke-dashoffset: 50; opacity: .35; }
    50%, 85% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -50; opacity: .35; }
}
@keyframes course-icon-play {
    0% { transform: scale(1) rotate(0); }
    35% { transform: scale(1.16) rotate(-7deg); }
    70% { transform: scale(.96) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}
.roadmap-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; align-items: start; }
.sticky-heading { position: sticky; top: 120px; }
.text-link { color: var(--primary); font-weight: 750; }
.section-heading .text-link { display: inline-block; margin-top: 24px; }
.roadmap-list { border-top: 1px solid var(--line); }
.roadmap-list article { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 33px 0; border-bottom: 1px solid var(--line); }
.roadmap-list article > span { color: var(--primary); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.roadmap-list h3 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.roadmap-list p { margin: 8px 0; color: var(--muted); }
.roadmap-list small { color: #344054; font-weight: 700; }
.fee-section { color: white; background: #1c2340; }
.fee-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: center; }
.fee-section p { color: #b7bfd9; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 24px; padding: 0; margin: 30px 0 0; list-style: none; }
.check-list li { position: relative; padding-left: 28px; color: #e6e9f5; font-size: 14px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: #86efac; font-weight: 850; }
.price-card { padding: 37px; color: var(--ink); background: white; border-radius: 22px; box-shadow: 0 22px 50px rgba(0,0,0,.16); }
.price-card > span { color: var(--primary); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.old-price { margin-top: 26px; color: var(--muted); font-size: 14px; }
.price-card > strong { display: block; margin: 4px 0 0; font-size: 53px; letter-spacing: -.055em; }
.price-card > small { display: block; margin: 0 0 23px; color: var(--success); font-weight: 700; }
.price-card .button { width: 100%; color: white; background: var(--primary); border-color: var(--primary); }
.price-card p { margin-top: 15px; color: var(--muted); font-size: 11px; text-align: center; }
.contact-section { position: relative; overflow: hidden; background: #f7f8ff; }
.contact-section::before { content: ""; position: absolute; width: 420px; height: 420px; left: -210px; bottom: -250px; background: radial-gradient(circle, rgba(79,70,229,.12), transparent 68%); pointer-events: none; }
.contact-grid { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
.contact-copy h2 { margin: 13px 0 16px; font-size: clamp(35px, 4vw, 53px); line-height: 1.06; letter-spacing: -.045em; }
.contact-copy > p { max-width: 560px; margin: 0 0 28px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.contact-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; margin-top: 12px; padding: 15px 17px; color: var(--ink); background: white; border: 1px solid #e3e6f2; border-radius: 15px; box-shadow: 0 8px 24px rgba(36,42,74,.05); transition: border-color .22s, box-shadow .22s, transform .22s; }
.contact-card:hover { color: var(--ink); border-color: #c8ccff; box-shadow: 0 14px 34px rgba(49,46,129,.11); transform: translateY(-3px); }
.contact-card-icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; color: white; background: #22a85a; border-radius: 50%; font-size: 11px; font-weight: 900; letter-spacing: -.04em; }
.contact-card-icon::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; background: inherit; clip-path: polygon(0 0, 100% 100%, 0 100%); transform: rotate(12deg); }
.contact-card-pin { color: var(--primary); background: var(--primary-soft); font-size: 17px; }
.contact-card-pin::after { display: none; }
.contact-card small, .contact-card strong, .contact-card em { display: block; }
.contact-card small { color: var(--primary); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.contact-card strong { margin-top: 3px; font-size: 13px; line-height: 1.45; }
.contact-card em { margin-top: 3px; color: var(--muted); font-size: 9px; font-style: normal; }
.contact-card > b { color: var(--primary); font-size: 18px; transition: transform .22s; }
.contact-card:hover > b { transform: translateX(4px); }
.contact-card-whatsapp small, .contact-card-whatsapp > b { color: #198a49; }
.contact-map { overflow: hidden; min-width: 0; background: #111629; border: 8px solid white; border-radius: 24px; box-shadow: 0 24px 60px rgba(27,34,64,.18); }
.contact-map-canvas { position: relative; height: 440px; overflow: hidden; background: #dbe5d7; isolation: isolate; }
.contact-map-tiles { position: absolute; left: calc(50% - 468.874px); top: calc(50% - 281.994px); display: grid; grid-template-columns: repeat(3, 256px); width: 768px; height: 768px; filter: saturate(.78) contrast(.96) brightness(1.04); }
.contact-map-tiles::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(49,46,129,.08)); pointer-events: none; }
.contact-map-tiles img { display: block; width: 256px; height: 256px; }
.contact-map-link { position: absolute; z-index: 2; inset: 0; }
.contact-map-pin { position: absolute; z-index: 4; left: 50%; top: 50%; width: 36px; height: 36px; background: var(--primary); border: 5px solid white; border-radius: 50% 50% 50% 8px; box-shadow: 0 7px 20px rgba(49,46,129,.35); transform: translate(-50%, -100%) rotate(-45deg); pointer-events: none; }
.contact-map-pin i { position: absolute; inset: 8px; background: white; border-radius: 50%; }
.contact-map-label { position: absolute; z-index: 4; left: calc(50% + 25px); top: calc(50% - 68px); display: block; min-width: 135px; padding: 9px 11px; color: var(--ink); background: rgba(255,255,255,.95); border: 1px solid rgba(79,70,229,.18); border-radius: 10px; box-shadow: 0 8px 22px rgba(27,34,64,.17); pointer-events: none; }
.contact-map-label strong, .contact-map-label small { display: block; }
.contact-map-label strong { font-size: 10px; }
.contact-map-label small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.contact-map-attribution { position: absolute; z-index: 5; right: 8px; bottom: 7px; padding: 4px 6px; color: #344054; background: rgba(255,255,255,.9); border-radius: 4px; font-size: 7px; }
.contact-map-attribution:hover { color: var(--primary); }
.contact-map-caption { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 15px 18px; color: #cdd3e8; font-size: 10px; }
.contact-map-caption span { display: flex; gap: 8px; align-items: center; }
.contact-map-caption i { width: 7px; height: 7px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 0 5px rgba(74,222,128,.12); }
.contact-map-caption a { color: white; font-weight: 800; }
.final-cta { text-align: center; }
.final-cta .container { max-width: 820px; }
.centered { justify-content: center; }
.site-footer { padding: 67px 0 28px; color: #dfe3f1; background: #111629; }
.footer-grid { display: grid; grid-template-columns: 1.55fr .8fr .9fr 1.25fr; gap: clamp(28px, 4vw, 58px); }
.footer-grid p { max-width: 360px; color: #8e98b8; font-size: 13px; }
.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; gap: 9px; }
.footer-grid > div:not(:first-child) strong { margin-bottom: 5px; color: white; }
.footer-grid a:not(.brand) { color: #9da6c2; font-size: 13px; }
.footer-grid a:hover { color: white; }
.footer-contact > a:last-child { line-height: 1.65; }
.footer-whatsapp { display: flex; gap: 8px; align-items: center; }
.footer-whatsapp span { display: grid; place-items: center; width: 24px; height: 24px; color: white; background: #22a85a; border-radius: 50%; font-size: 7px; font-weight: 900; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 22px; color: #747f9f; border-top: 1px solid #293049; font-size: 11px; }
.whatsapp-fab { position: fixed; z-index: 70; right: 22px; bottom: 22px; display: flex; gap: 9px; align-items: center; padding: 8px 14px 8px 8px; color: white; background: #1f9d55; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; box-shadow: 0 12px 30px rgba(19,114,59,.32); transition: background .2s, box-shadow .2s, transform .2s; }
.whatsapp-fab:hover { color: white; background: #168447; box-shadow: 0 16px 36px rgba(19,114,59,.4); transform: translateY(-3px); }
.whatsapp-fab span { display: grid; place-items: center; width: 36px; height: 36px; background: rgba(255,255,255,.16); border-radius: 50%; font-size: 9px; font-weight: 900; }
.whatsapp-fab strong { font-size: 11px; letter-spacing: .01em; }
.flash-wrap { margin-top: 18px; }
.alert { padding: 13px 16px; border: 1px solid; border-radius: 10px; font-size: 13px; font-weight: 650; }
.alert + .alert { margin-top: 8px; }
.alert-success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.alert-error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.alert-info { color: #3730a3; background: #eef2ff; border-color: #c7d2fe; }

/* Authentication */
.auth-body { min-height: 100vh; background: #f7f8fc; }
.auth-shell { display: grid; grid-template-columns: minmax(390px, .83fr) 1.17fr; min-height: 100vh; }
.auth-story { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 44px clamp(35px, 5vw, 75px); color: white; background: #1b2240; }
.auth-story-content { max-width: 570px; }
.auth-story-content h1 { margin: 20px 0; font-size: clamp(42px, 4.2vw, 64px); line-height: 1.08; letter-spacing: -.05em; }
.auth-story-content > p { color: #b7bfd9; font-size: 17px; }
.auth-proof { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 38px; padding-top: 28px; border-top: 1px solid #343c5b; }
.auth-proof strong, .auth-proof small { display: block; }
.auth-proof strong { font-size: 29px; }
.auth-proof small { color: #9aa4c2; font-size: 11px; }
.auth-quote { color: #8f99ba; font-size: 12px; }
.auth-main { display: grid; place-items: center; padding: 50px 24px; }
.auth-card { width: min(100%, 460px); }
.back-link { display: inline-block; margin-bottom: 38px; color: var(--muted); font-size: 13px; font-weight: 650; }
.auth-card > .alert { margin-bottom: 18px; }
.auth-heading { margin-bottom: 29px; }
.auth-heading h1 { margin: 10px 0 7px; font-size: 37px; line-height: 1.15; letter-spacing: -.04em; }
.auth-heading p { margin: 0; color: var(--muted); }
.form-stack { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label, .label-row { color: #344054; font-size: 13px; font-weight: 750; }
.label-row { display: flex; justify-content: space-between; }
.label-row a { color: var(--primary); font-size: 12px; }
.field input, .search-box input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    color: var(--ink);
    background: white;
    border: 1px solid #d8dce6;
    border-radius: 10px;
    outline: none;
    transition: border .2s, box-shadow .2s;
}
.field input:focus, .search-box input:focus { border-color: #8b87ed; box-shadow: 0 0 0 4px rgba(79,70,229,.09); }
.field small { color: var(--muted); font-size: 11px; }
.field-error { color: var(--danger) !important; font-weight: 650; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 60px; }
.password-wrap button { position: absolute; right: 7px; top: 7px; height: 34px; padding: 0 8px; color: var(--primary); background: transparent; border: 0; font-size: 11px; font-weight: 750; cursor: pointer; }
.check-control { display: flex; align-items: center; gap: 9px; color: #475467; font-size: 13px; cursor: pointer; }
.check-control input { width: 17px; height: 17px; accent-color: var(--primary); }
.auth-switch { margin: 23px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.auth-switch a { color: var(--primary); font-weight: 750; }
.form-terms { margin: 17px 0 0; color: #98a2b3; font-size: 10px; text-align: center; }
.secure-note { display: flex; gap: 11px; margin-top: 28px; padding: 15px; background: #f3f5fa; border-radius: 10px; }
.secure-note > span { color: var(--primary); }
.secure-note p, .secure-note strong, .secure-note small { display: block; margin: 0; }
.secure-note strong { font-size: 12px; }
.secure-note small { color: var(--muted); font-size: 10px; }
.otp-input { height: 62px !important; font-size: 25px !important; font-weight: 800; letter-spacing: .4em; text-align: center; }

/* Dashboard */
.dashboard-body { min-height: 100vh; background: #f6f7fb; }
.dashboard-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 100; display: flex; flex-direction: column; width: 260px; padding: 27px 18px 18px; color: #d8dcef; background: var(--sidebar); }
.sidebar-brand { padding-inline: 9px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.sidebar-nav a { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 0 12px; color: #aeb6d0; border-radius: 9px; font-size: 13px; font-weight: 650; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: white; background: #2a3150; }
.sidebar-nav a[aria-disabled="true"] { opacity: .58; cursor: default; }
.nav-icon { display: grid; place-items: center; width: 22px; color: #8f9abc; font-size: 16px; }
.sidebar-label { margin: 22px 12px 7px; color: #6f7998; font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-label:first-child { margin-top: 0; }
.soon { margin-left: auto; color: #858ead; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.sidebar-user { display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 14px 10px 2px; border-top: 1px solid #2b324c; }
.avatar { display: grid; place-items: center; flex: 0 0 36px; height: 36px; color: white; background: var(--primary); border-radius: 10px; font-weight: 800; }
.sidebar-user strong, .sidebar-user small { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { color: white; font-size: 12px; }
.sidebar-user small { color: #8993b1; font-size: 10px; }
.dashboard-main { grid-column: 2; min-width: 0; }
.dashboard-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 35px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.dashboard-header > div { display: flex; align-items: center; gap: 14px; }
.dashboard-kicker { color: #475467; font-size: 13px; font-weight: 750; }
.sidebar-toggle { display: none; width: 38px; height: 38px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.header-actions { display: flex; align-items: center; gap: 13px; }
.status-pill { display: flex; align-items: center; gap: 7px; color: #475467; font-size: 11px; font-weight: 700; }
.status-pill i { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; }
.dashboard-content { max-width: 1500px; margin: 0 auto; padding: 34px; }
.dashboard-content > .alert { margin-bottom: 18px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 26px; }
.page-heading h1 { margin: 6px 0 3px; font-size: 31px; line-height: 1.2; letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.stat-card { display: flex; align-items: center; gap: 15px; padding: 20px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.stat-icon { display: grid; place-items: center; flex: 0 0 43px; height: 43px; border-radius: 11px; font-weight: 850; }
.stat-icon.indigo { color: var(--primary); background: #eef2ff; }
.stat-icon.teal { color: var(--teal); background: #ecfdf5; }
.stat-icon.amber { color: var(--amber); background: #fffbeb; }
.stat-icon.rose { color: var(--rose); background: #fff1f2; }
.stat-card p, .stat-card small, .stat-card strong, .stat-card p > span { display: block; margin: 0; }
.stat-card small { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.stat-card strong { margin: 1px 0; font-size: 22px; line-height: 1.3; letter-spacing: -.03em; }
.stat-card p > span { color: #98a2b3; font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; margin-top: 16px; }
.panel { padding: 24px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.panel-heading h2, .panel h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.progress-list { display: grid; gap: 20px; }
.progress-list > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 15px; }
.progress-list p, .progress-list strong, .progress-list small { display: block; margin: 0; }
.progress-list strong { font-size: 12px; }
.progress-list small { color: var(--muted); font-size: 10px; }
.progress-list > div > span { color: var(--primary); font-size: 11px; font-weight: 800; }
.progress-list i { grid-column: 1 / -1; height: 5px; overflow: hidden; background: #edf0f5; border-radius: 999px; }
.progress-list b { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.activity-list { display: grid; gap: 8px; }
.activity-item { display: flex; gap: 11px; align-items: center; padding: 10px; border-radius: 9px; background: #f8f9fb; }
.activity-item > span { display: grid; place-items: center; width: 33px; height: 33px; color: var(--primary); background: var(--primary-soft); border-radius: 9px; font-size: 11px; font-weight: 800; }
.activity-item p, .activity-item strong, .activity-item small { display: block; margin: 0; }
.activity-item strong { text-transform: capitalize; font-size: 11px; }
.activity-item small { color: var(--muted); font-size: 9px; }
.empty-state { padding: 30px 10px; color: var(--muted); text-align: center; }
.empty-state > span { font-size: 29px; color: var(--primary); }
.empty-state strong, .empty-state p { display: block; margin: 2px; }
.empty-state strong { color: var(--ink); font-size: 13px; }
.empty-state p { font-size: 11px; }
.phase-banner { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 16px; }
.phase-banner h2 { margin: 5px 0; }
.phase-banner p { margin: 0; color: var(--muted); font-size: 12px; }
.phase-steps { display: flex; align-items: center; min-width: 270px; }
.phase-steps span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; color: #98a2b3; border: 1px solid #d0d5dd; border-radius: 50%; font-size: 11px; font-weight: 800; }
.phase-steps span.done { color: white; background: var(--primary); border-color: var(--primary); }
.phase-steps i { flex: 1; height: 1px; background: #d0d5dd; }
.table-panel { padding: 0; overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.search-box { position: relative; width: 290px; }
.search-box span { position: absolute; left: 12px; top: 9px; color: var(--muted); }
.search-box input { height: 38px; padding-left: 35px; font-size: 12px; }
.toolbar-note { color: var(--muted); font-size: 10px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 20px; border-bottom: 1px solid #edf0f4; text-align: left; white-space: nowrap; }
th { color: #667085; background: #fafbfc; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
td { color: #475467; font-size: 12px; }
tbody tr:last-child td { border: 0; }
tbody tr:hover { background: #fafbff; }
.table-title { display: flex; align-items: center; gap: 12px; min-width: 380px; }
.table-title > span { display: grid; place-items: center; width: 36px; height: 36px; color: var(--primary); background: var(--primary-soft); border-radius: 9px; font-size: 10px; font-weight: 850; }
.table-title p, .table-title strong, .table-title small { display: block; margin: 0; }
.table-title strong { color: var(--ink); font-size: 12px; }
.table-title small { color: var(--muted); font-size: 9px; }
.status-text { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 750; }
.status-text i { width: 6px; height: 6px; border-radius: 50%; }
.status-text.published { color: var(--success); }
.status-text.published i { background: #22c55e; }
.status-text.draft { color: var(--amber); }
.status-text.draft i { background: #f59e0b; }
.welcome-panel { position: relative; overflow: hidden; background: #fafaff; border-color: #dfe2ff; }
.welcome-panel h2 { margin: 8px 0; font-size: 23px; }
.welcome-panel > p { color: var(--muted); font-size: 13px; }
.placeholder-steps { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 28px; }
.placeholder-steps span { display: grid; gap: 7px; place-items: center; position: relative; flex: 1; color: #98a2b3; font-size: 9px; text-align: center; }
.placeholder-steps span:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 65%; width: 70%; height: 1px; background: #d9dce6; }
.placeholder-steps i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #d0d5dd; border-radius: 50%; font-style: normal; }
.placeholder-steps .complete { color: var(--primary); }
.placeholder-steps .complete i { color: white; background: var(--primary); border-color: var(--primary); }
.security-callout { display: flex; gap: 14px; padding: 18px; background: #f7f8fc; border-radius: 11px; }
.security-callout > span { color: var(--primary); font-size: 24px; }
.security-callout strong { font-size: 13px; }
.security-callout p { margin: 3px 0 9px; color: var(--muted); font-size: 11px; }
.security-callout .text-link { font-size: 11px; }
.security-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.security-state { display: flex; gap: 13px; align-items: center; margin-bottom: 20px; padding: 17px; background: #f7f8fb; border-radius: 10px; }
.security-state > span { display: grid; place-items: center; width: 36px; height: 36px; color: var(--primary); background: white; border-radius: 10px; }
.security-state strong, .security-state p { display: block; margin: 0; }
.security-state strong { font-size: 12px; }
.security-state p { color: var(--muted); font-size: 10px; }
.security-state.enabled { background: #f0fdf4; }
.security-state.enabled > span { color: var(--success); }
.inline-security-form { display: flex; align-items: end; gap: 10px; margin-top: 16px; }
.inline-security-form .field { flex: 1; }
.inline-security-form .field input { height: 42px; }
.inline-security-form .button { min-height: 42px; white-space: nowrap; }
.setup-box { display: flex; gap: 13px; margin-bottom: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.step-number { display: grid; place-items: center; flex: 0 0 29px; height: 29px; color: white; background: var(--primary); border-radius: 50%; font-size: 11px; font-weight: 800; }
.setup-box strong, .setup-box p { display: block; margin: 0; }
.setup-box strong { font-size: 12px; }
.setup-box p { color: var(--muted); font-size: 10px; }
.setup-box code { display: inline-block; margin-top: 9px; padding: 7px 9px; background: #f2f4f7; border-radius: 6px; font-size: 11px; word-break: break-all; }
.setup-box details { color: var(--muted); font-size: 10px; }
.setup-box summary { margin-top: 8px; cursor: pointer; }
.setup-box .uri-code { display: block; font-size: 9px; }
.grow { flex: 1; }
.session-list > div { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.session-list > div:last-child { border: 0; }
.device-icon { display: grid; place-items: center; width: 36px; height: 36px; color: var(--primary); background: var(--primary-soft); border-radius: 9px; }
.session-list p { flex: 1; margin: 0; }
.session-list strong, .session-list small { display: block; }
.session-list strong { font-size: 11px; }
.session-list small { color: var(--muted); font-size: 9px; }
.security-notes { margin-top: 16px; }
.security-notes > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.security-notes > div span { padding: 7px 11px; color: #475467; background: #f4f5f8; border-radius: 999px; font-size: 10px; font-weight: 700; }
.error-page { display: grid; place-items: center; min-height: 70vh; padding: 100px 0; text-align: center; }
.error-page .container { max-width: 700px; }
.error-code { display: block; color: #e0e3eb; font-size: 100px; font-weight: 900; line-height: 1; letter-spacing: -.08em; }
.error-page h1 { margin: 12px 0; font-size: 42px; letter-spacing: -.04em; }
.error-page p { color: var(--muted); }

/* Public course detail */
.course-hero { position: relative; overflow: hidden; padding: 30px 0 72px; color: white; background: #171d35; }
.course-hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -230px; top: -250px; border: 80px solid rgba(99,102,241,.1); border-radius: 50%; }
.breadcrumbs { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; margin-bottom: 46px; color: #929cba; font-size: 11px; }
.breadcrumbs a:hover { color: white; }
.breadcrumbs span:last-child { color: #c7d2fe; font-weight: 750; }
.course-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.06fr .94fr; gap: 65px; align-items: center; }
.course-code-line { display: flex; align-items: center; gap: 13px; margin: 24px 0 19px; }
.course-icon-large { display: grid; place-items: center; width: 51px; height: 51px; color: #c7d2fe; background: #2d3558; border: 1px solid #424c75; border-radius: 14px; }
.course-icon-large svg { width: 27px; height: 27px; }
.course-code-line strong, .course-code-line small { display: block; }
.course-code-line strong { color: #a5b4fc; font-size: 12px; letter-spacing: .12em; }
.course-code-line small { margin-top: 3px; color: #929cba; font-size: 10px; }
.course-hero h1 { max-width: 710px; margin: 0; font-size: clamp(45px, 5.2vw, 70px); line-height: 1.04; letter-spacing: -.055em; }
.course-hero-copy > p { max-width: 690px; margin: 24px 0 0; color: #b3bbd2; font-size: 17px; line-height: 1.7; }
.course-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 29px; }
.button-dark-outline { color: white; background: transparent; border-color: #4b557a; }
.button-dark-outline:hover { color: white; background: #2a3252; border-color: #67719b; }
.course-quick-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 42px; padding-top: 24px; border-top: 1px solid #333c60; }
.course-quick-stats > span { padding-right: 18px; margin-right: 18px; border-right: 1px solid #333c60; }
.course-quick-stats > span:last-child { border: 0; }
.course-quick-stats strong, .course-quick-stats small { display: block; }
.course-quick-stats strong { font-size: 25px; line-height: 1.2; }
.course-quick-stats small { color: #8f99b7; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.course-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.course-visual img { width: 115%; max-width: 680px; filter: drop-shadow(0 25px 40px rgba(0,0,0,.2)); }
.visual-label { position: absolute; min-width: 145px; padding: 12px 14px; background: rgba(34,42,72,.92); border: 1px solid #4d587f; border-radius: 11px; box-shadow: 0 14px 30px rgba(0,0,0,.18); backdrop-filter: blur(10px); }
.visual-label.top { top: 74px; right: 0; }
.visual-label.bottom { left: 15px; bottom: 55px; }
.visual-label span, .visual-label strong { display: block; }
.visual-label span { color: #919bbb; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.visual-label strong { margin-top: 2px; font-size: 11px; }
.course-anchor-nav { position: sticky; top: 76px; z-index: 35; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.course-anchor-nav .container { display: flex; gap: 34px; align-items: center; height: 58px; overflow-x: auto; }
.course-anchor-nav a { color: #667085; font-size: 11px; font-weight: 750; white-space: nowrap; }
.course-anchor-nav a:hover { color: var(--primary); }
.course-overview, .curriculum-section, .project-section, #schedule, #outcomes { scroll-margin-top: 125px; }
.course-content-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 85px; align-items: start; }
.course-content-grid h2 { margin: 13px 0 18px; font-size: clamp(35px, 4vw, 50px); line-height: 1.12; letter-spacing: -.045em; }
.course-content-grid > div > p { color: var(--muted); font-size: 16px; }
.course-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 33px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 13px; }
.course-facts > div { padding: 20px; background: white; }
.course-facts span, .course-facts strong { display: block; }
.course-facts span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.course-facts strong { margin-top: 3px; font-size: 15px; }
.course-side-card { padding: 28px; background: #f7f8fc; border: 1px solid var(--line); border-radius: 17px; }
.course-side-card h3 { margin: 9px 0 7px; font-size: 21px; line-height: 1.3; letter-spacing: -.02em; }
.course-side-card p { margin: 0; color: var(--muted); font-size: 12px; }
.course-side-card .text-link { display: inline-block; margin-top: 12px; font-size: 11px; }
.course-side-card hr { height: 1px; margin: 25px 0; background: var(--line); border: 0; }
.course-side-card ul { display: grid; gap: 10px; padding: 0; margin: 15px 0 0; list-style: none; }
.course-side-card li { position: relative; padding-left: 22px; color: #475467; font-size: 11px; }
.course-side-card li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 850; }
.outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.outcome-grid article { display: flex; align-items: flex-start; gap: 18px; min-height: 125px; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.outcome-grid article > span { color: var(--primary); font-size: 24px; font-weight: 850; letter-spacing: -.05em; }
.outcome-grid article p { margin: 2px 0 0; color: #344054; font-size: 14px; }
.curriculum-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.curriculum-heading h2 { margin: 10px 0 7px; font-size: clamp(34px, 4vw, 48px); letter-spacing: -.04em; }
.curriculum-heading p { margin: 0; color: var(--muted); }
.curriculum-key { display: flex; flex-wrap: wrap; gap: 13px; padding-bottom: 8px; }
.curriculum-key span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.curriculum-key i { width: 8px; height: 8px; border-radius: 50%; }
.key-theory { background: var(--primary); }
.key-lab { background: var(--teal); }
.key-workshop { background: var(--amber); }
.module-list { display: grid; gap: 11px; }
.module-card { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.module-card[open] { border-color: #c7d2fe; box-shadow: 0 15px 40px rgba(23,32,51,.07); }
.module-card summary { display: grid; grid-template-columns: 53px 1fr 34px; gap: 17px; align-items: center; min-height: 86px; padding: 16px 21px; cursor: pointer; list-style: none; }
.module-card summary::-webkit-details-marker { display: none; }
.module-number { display: grid; place-items: center; width: 45px; height: 45px; color: var(--primary); background: var(--primary-soft); border-radius: 12px; font-size: 13px; font-weight: 850; }
.module-title strong, .module-title small { display: block; }
.module-title strong { font-size: 16px; letter-spacing: -.015em; }
.module-title small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.module-toggle { display: grid; place-items: center; width: 31px; height: 31px; color: var(--primary); background: var(--primary-soft); border-radius: 50%; font-size: 20px; transition: transform .2s; }
.module-card[open] .module-toggle { transform: rotate(45deg); }
.module-body { padding: 0 21px 21px 91px; border-top: 1px solid #eef0f4; }
.module-description { margin: 17px 0; color: var(--muted); font-size: 11px; }
.class-list { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.class-row { display: grid; grid-template-columns: 85px 1fr 60px; gap: 16px; align-items: start; padding: 16px; border-bottom: 1px solid var(--line); }
.class-row:last-child { border: 0; }
.class-type { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; padding: 3px 7px; border-radius: 999px; font-size: 8px; font-weight: 850; text-transform: uppercase; white-space: nowrap; }
.class-type.theory { color: var(--primary); background: var(--primary-soft); }
.class-type.guided-lab { color: var(--teal); background: #ecfdf5; }
.class-type.workshop { color: var(--amber); background: #fffbeb; }
.class-main h3 { margin: 0 0 8px; font-size: 12px; }
.topic-list { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-list span { padding: 4px 8px; color: #5a6476; background: #f5f6f8; border-radius: 6px; font-size: 9px; }
.class-duration { color: var(--muted); font-size: 9px; font-weight: 700; text-align: right; }
.project-section { color: white; background: #1a213c; }
.project-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 85px; align-items: center; }
.project-copy h2 { margin: 12px 0; font-size: clamp(38px, 4vw, 54px); line-height: 1.1; letter-spacing: -.045em; }
.project-copy > p { max-width: 700px; color: #b6bed7; font-size: 17px; }
.project-milestones { display: flex; align-items: center; margin-top: 32px; }
.project-milestones span { display: grid; gap: 6px; place-items: center; color: #b5bdd6; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.project-milestones i { display: grid; place-items: center; width: 34px; height: 34px; color: white; background: var(--primary); border-radius: 50%; font-style: normal; }
.project-milestones b { flex: 1; height: 1px; margin: 0 7px 20px; background: #424c6f; }
.project-deliverables { padding: 29px; background: #242c4b; border: 1px solid #3e486c; border-radius: 17px; }
.project-deliverables > span { color: #a5b4fc; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.project-deliverables ul { display: grid; gap: 13px; padding: 0; margin: 20px 0 0; list-style: none; }
.project-deliverables li { position: relative; padding-left: 25px; color: #dce1ef; font-size: 12px; }
.project-deliverables li::before { content: "✓"; position: absolute; left: 0; color: #86efac; font-weight: 850; }
.delivery-cycle { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 15px; }
.delivery-cycle article { min-height: 210px; padding: 23px; border-right: 1px solid var(--line); }
.delivery-cycle article:last-child { border: 0; }
.delivery-cycle article > span { display: grid; place-items: center; width: 34px; height: 34px; color: var(--primary); background: var(--primary-soft); border-radius: 10px; font-size: 11px; font-weight: 850; }
.delivery-cycle h3 { margin: 27px 0 7px; font-size: 17px; }
.delivery-cycle p { margin: 0; color: var(--muted); font-size: 11px; }
.weekly-board { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; margin-top: 22px; padding: 30px; background: #f7f8fc; border: 1px solid var(--line); border-radius: 15px; }
.weekly-board h3 { margin: 9px 0 0; font-size: 22px; line-height: 1.3; }
.weekly-board ol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 25px; margin: 0; padding-left: 22px; }
.weekly-board li { color: #475467; font-size: 11px; }
.related-section { background: var(--soft); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.related-card { display: flex; flex-direction: column; min-height: 245px; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 14px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.related-card:hover { transform: translateY(-3px); border-color: #c7d2fe; box-shadow: var(--shadow); }
.related-card > span { color: var(--primary); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.related-card h3 { margin: 13px 0 8px; font-size: 19px; line-height: 1.35; }
.related-card p { margin: 0; color: var(--muted); font-size: 11px; }
.related-card small { display: flex; justify-content: space-between; margin-top: auto; padding-top: 17px; color: #667085; font-weight: 700; }
.related-card small b { color: var(--primary); font-size: 15px; }
.course-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 34px; padding-top: 25px; border-top: 1px solid #dfe2e8; }
.course-pagination a { display: block; }
.course-pagination a.next { text-align: right; }
.course-pagination span, .course-pagination strong { display: block; }
.course-pagination span { color: var(--primary); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.course-pagination strong { margin-top: 3px; font-size: 12px; }
.course-final-cta { padding: 50px 0; color: white; background: var(--primary); }
.course-final-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.course-final-cta span { color: #c7d2fe; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.course-final-cta h2 { margin: 5px 0 2px; font-size: 30px; letter-spacing: -.035em; }
.course-final-cta p { margin: 0; color: #e0e7ff; font-size: 12px; }

/* Phase 3 learning and academic operations */
.field select, .field textarea {
    width: 100%;
    padding: 0 14px;
    color: var(--ink);
    background: white;
    border: 1px solid #d8dce6;
    border-radius: 10px;
    outline: none;
    transition: border .2s, box-shadow .2s;
}
.field select { height: 48px; }
.field textarea { min-height: 92px; padding-block: 12px; resize: vertical; }
.field select:focus, .field textarea:focus { border-color: #8b87ed; box-shadow: 0 0 0 4px rgba(79,70,229,.09); }
.back-link.compact { margin-bottom: 11px; }
.dashboard-section { margin-top: 16px; }
.section-row-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.section-row-heading h2 { margin: 5px 0 0; font-size: 23px; letter-spacing: -.025em; }
.block-note { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 500; }
.progress-track { height: 7px; overflow: hidden; background: #eceff5; border-radius: 999px; }
.progress-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #818cf8); border-radius: inherit; }
.learning-dashboard-grid { grid-template-columns: 1.15fr .85fr; }
.continue-panel { position: relative; overflow: hidden; min-height: 245px; color: white; background: linear-gradient(135deg, #202849, #313b68); border-color: #394473; }
.continue-panel::after { content: ""; position: absolute; right: -80px; bottom: -125px; width: 260px; height: 260px; border: 48px solid rgba(129,140,248,.13); border-radius: 50%; }
.continue-panel h2 { position: relative; z-index: 1; max-width: 580px; margin-top: 35px; font-size: 25px; }
.continue-panel > p { position: relative; z-index: 1; margin: 7px 0 30px; color: #bfc7e2; font-size: 12px; }
.continue-panel .progress-track { position: relative; z-index: 1; background: #434d75; }
.continue-top, .continue-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.continue-top .eyebrow { color: #a5b4fc; }
.continue-top .badge { color: #e0e7ff; background: #343e67; border-color: #535f8d; }
.continue-actions { margin-top: 13px; }
.continue-actions > span { color: #aeb8d7; font-size: 10px; font-weight: 700; }
.mini-schedule { display: grid; gap: 8px; }
.mini-schedule article { display: grid; grid-template-columns: 44px 1fr auto; gap: 11px; align-items: center; padding: 11px; background: #f8f9fc; border-radius: 10px; }
.mini-schedule time { display: grid; place-items: center; width: 42px; height: 45px; color: var(--primary); background: white; border: 1px solid #e6e8ef; border-radius: 9px; }
.mini-schedule time strong, .mini-schedule time small { display: block; line-height: 1; }
.mini-schedule time strong { font-size: 15px; }
.mini-schedule time small { margin-top: 3px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.mini-schedule p, .mini-schedule strong, .mini-schedule small { display: block; min-width: 0; margin: 0; }
.mini-schedule p strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mini-schedule p small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.student-course-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.student-course-mini { display: flex; flex-direction: column; min-height: 170px; padding: 18px; background: #fafbff; border: 1px solid #e4e7f1; border-radius: 12px; }
.student-course-mini:hover:not(.locked) { border-color: #b9c0ff; box-shadow: 0 12px 28px rgba(41,49,83,.08); }
.student-course-mini.locked { opacity: .62; cursor: default; }
.student-course-mini > span { color: var(--primary); font-size: 9px; font-weight: 850; letter-spacing: .09em; }
.student-course-mini h3 { margin: 9px 0 auto; font-size: 15px; line-height: 1.35; }
.student-course-mini .progress-track { margin-top: 18px; }
.student-course-mini small { margin-top: 7px; color: var(--muted); font-size: 9px; }
.bookmark-list { display: grid; gap: 8px; }
.bookmark-list a { display: grid; grid-template-columns: 32px 1fr auto; gap: 11px; align-items: center; padding: 11px; background: #f8f9fc; border-radius: 9px; }
.bookmark-list a > span { display: grid; place-items: center; width: 31px; height: 31px; color: var(--primary); background: var(--primary-soft); border-radius: 8px; }
.bookmark-list p, .bookmark-list strong, .bookmark-list small { display: block; min-width: 0; margin: 0; }
.bookmark-list strong { font-size: 11px; }
.bookmark-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.bookmark-list b { color: var(--primary); }
.cohort-card { color: white; background: #202849; border-color: #333d67; }
.cohort-card .eyebrow { color: #a5b4fc; }
.cohort-card h2 { margin: 22px 0 4px; font-size: 27px; }
.cohort-card > p { margin: 0; color: #aeb8d7; font-size: 12px; }
.cohort-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 35px 0 0; }
.cohort-card dl div { padding-top: 12px; border-top: 1px solid #3b466f; }
.cohort-card dt, .cohort-card dd { margin: 0; }
.cohort-card dt { color: #8995bb; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.cohort-card dd { margin-top: 4px; color: #e5e7f0; font-size: 11px; }
.enrolled-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.enrolled-course-card { display: flex; flex-direction: column; min-height: 330px; padding: 22px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.enrolled-course-card.locked { background: #f8f9fb; opacity: .7; }
.enrolled-course-top { display: flex; align-items: center; justify-content: space-between; }
.enrolled-course-top > span:first-child { color: #c4c9d5; font-size: 24px; font-weight: 850; letter-spacing: -.04em; }
.enrolled-course-card > small { margin-top: 25px; color: var(--primary); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.enrolled-course-card h2 { margin: 8px 0; font-size: 20px; line-height: 1.3; }
.enrolled-course-card > p { margin: 0 0 24px; color: var(--muted); font-size: 11px; }
.course-progress-label { display: flex; justify-content: space-between; margin-top: auto; color: #667085; font-size: 10px; }
.course-progress-label strong { color: var(--primary); }
.enrolled-course-card .progress-track { margin: 7px 0 17px; }
.locked-message { display: flex; align-items: center; gap: 8px; min-height: 42px; color: #7d8595; font-size: 10px; font-weight: 700; }
.learning-course-header { display: grid; grid-template-columns: 1fr 135px; gap: 40px; align-items: center; margin-bottom: 22px; padding: 28px 31px; color: white; background: linear-gradient(135deg, #1d2543, #303a67); border-radius: 16px; }
.learning-course-header .back-link { color: #b7c0dd; }
.learning-course-header .eyebrow { display: block; color: #a5b4fc; }
.learning-course-header h1 { max-width: 800px; margin: 9px 0; font-size: 34px; line-height: 1.16; letter-spacing: -.035em; }
.learning-course-header p { max-width: 760px; margin: 0; color: #b6bfd9; font-size: 12px; }
.course-progress-ring { display: grid; place-items: center; width: 124px; height: 124px; background: conic-gradient(#818cf8 calc(var(--progress) * 1%), #424d75 0); border-radius: 50%; }
.course-progress-ring > div { display: grid; place-items: center; width: 94px; height: 94px; background: #242d50; border-radius: 50%; }
.course-progress-ring strong, .course-progress-ring small { display: block; }
.course-progress-ring strong { font-size: 25px; }
.course-progress-ring small { color: #9da8c8; font-size: 9px; text-transform: uppercase; }
.learning-summary-bar { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 1px; align-items: stretch; overflow: hidden; margin-bottom: 15px; background: var(--line); border: 1px solid var(--line); border-radius: 13px; }
.learning-summary-bar > span { padding: 18px 20px; background: white; }
.learning-summary-bar strong, .learning-summary-bar small { display: block; }
.learning-summary-bar strong { font-size: 18px; }
.learning-summary-bar small { color: var(--muted); font-size: 9px; }
.learning-summary-bar .button { align-self: center; margin: 0 16px; }
.student-module-list { display: grid; gap: 11px; }
.student-module { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 14px; }
.student-module[open] { border-color: #c7d2fe; box-shadow: 0 13px 30px rgba(30,41,70,.06); }
.student-module summary { display: grid; grid-template-columns: 46px 1fr 32px; gap: 14px; align-items: center; min-height: 76px; padding: 14px 18px; cursor: pointer; list-style: none; }
.student-module summary::-webkit-details-marker { display: none; }
.module-status-icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--primary); background: var(--primary-soft); border-radius: 50%; font-weight: 800; }
.student-lesson-list { border-top: 1px solid var(--line); }
.student-lesson { display: grid; grid-template-columns: 35px 1fr auto; gap: 15px; align-items: center; padding: 17px 20px; border-bottom: 1px solid #edf0f4; }
.student-lesson:last-child { border-bottom: 0; }
.student-lesson.locked { background: #fafafa; opacity: .65; }
.student-lesson.complete { background: #fbfefc; }
.lesson-state { display: grid; place-items: center; width: 34px; height: 34px; color: var(--primary); background: var(--primary-soft); border-radius: 50%; font-size: 11px; font-weight: 850; }
.student-lesson.complete .lesson-state { color: var(--success); background: #ecfdf3; }
.student-lesson h3 { margin: 7px 0 3px; font-size: 13px; }
.student-lesson p { max-width: 750px; margin: 0; color: var(--muted); font-size: 10px; }
.student-lesson div > small { color: #98a2b3; font-size: 9px; }
.lesson-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; color: #667085; background: white; border: 1px solid #d8dce6; border-radius: 9px; cursor: pointer; }
.icon-button.active { color: var(--primary); background: var(--primary-soft); border-color: #c7d2fe; }
.locked-course-panel { padding: 65px; text-align: center; }
.locked-course-panel > span { display: block; color: var(--primary); font-size: 34px; }
.locked-course-panel h2 { margin-top: 14px; font-size: 25px; }
.locked-course-panel p { color: var(--muted); }
.schedule-list { display: grid; }
.schedule-list article { display: grid; grid-template-columns: 76px 1fr auto; gap: 22px; align-items: center; padding: 21px 4px; border-bottom: 1px solid var(--line); }
.schedule-list article:last-child { border-bottom: 0; }
.schedule-list article.past { opacity: .72; }
.schedule-list time { display: grid; place-items: center; min-height: 70px; background: #f7f8fc; border-radius: 10px; }
.schedule-list time strong, .schedule-list time span, .schedule-list time small { display: block; }
.schedule-list time strong { color: var(--primary); font-size: 22px; }
.schedule-list time span { color: #475467; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.schedule-list time small { color: var(--muted); font-size: 9px; }
.schedule-list h2 { margin: 8px 0 4px; font-size: 15px; }
.schedule-list p { margin: 0; color: var(--muted); font-size: 10px; }
.schedule-action { display: grid; gap: 8px; justify-items: end; }
.table-progress { display: grid; grid-template-columns: 42px 90px; gap: 8px; align-items: center; }
.table-progress span { color: var(--primary); font-size: 10px; font-weight: 800; }
.table-progress i { height: 5px; overflow: hidden; background: #eceff4; border-radius: 999px; }
.table-progress b { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.record-grid { grid-template-columns: .8fr 1.2fr; }
.detail-list { display: grid; margin: 0; }
.detail-list > div { display: flex; justify-content: space-between; gap: 25px; padding: 11px 0; border-bottom: 1px solid #edf0f4; }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt, .detail-list dd { margin: 0; font-size: 11px; }
.detail-list dt { color: var(--muted); }
.detail-list dd { font-weight: 700; text-align: right; }
.compact-schedule { display: grid; gap: 7px; max-height: 390px; overflow-y: auto; }
.compact-schedule article { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 11px; background: #f8f9fb; border-radius: 9px; }
.compact-schedule time { color: var(--primary); font-size: 10px; font-weight: 850; }
.compact-schedule p, .compact-schedule strong, .compact-schedule small { display: block; min-width: 0; margin: 0; }
.compact-schedule strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.compact-schedule small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.batch-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.batch-card { display: flex; flex-direction: column; min-height: 275px; padding: 22px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 14px; transition: transform .2s, border-color .2s, box-shadow .2s; }
a.batch-card:hover { transform: translateY(-3px); border-color: #c7d2fe; box-shadow: var(--shadow); }
.batch-card-top { display: flex; align-items: center; justify-content: space-between; }
.batch-card-top > strong { color: var(--primary); font-size: 10px; letter-spacing: .08em; }
.batch-card h2 { margin: 22px 0 5px; font-size: 19px; line-height: 1.35; }
.batch-card > p { margin: 0; color: var(--muted); font-size: 10px; }
.batch-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 25px 0; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 9px; }
.batch-card dl div { padding: 11px; background: #fafbfc; }
.batch-card dt, .batch-card dd { margin: 0; }
.batch-card dt { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.batch-card dd { margin-top: 3px; font-size: 14px; font-weight: 800; }
.batch-card footer { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; color: #667085; font-size: 9px; }
.form-panel { max-width: 1050px; }
.form-alert { margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .field-wide { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 5px; }
.operations-grid { grid-template-columns: 1.2fr .8fr; }
.inline-operation-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.stat-name { overflow: hidden; max-width: 170px; font-size: 16px !important; text-overflow: ellipsis; white-space: nowrap; }
.batch-detail-grid { grid-template-columns: 1.15fr .85fr; }
.roster-title { min-width: 280px; }
.attendance-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; margin-bottom: 22px; }
.attendance-toolbar h2 { margin: 0; }
.attendance-toolbar p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.attendance-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.attendance-legend span { display: flex; align-items: center; gap: 5px; color: #667085; font-size: 9px; font-weight: 700; }
.attendance-legend i { width: 7px; height: 7px; background: #98a2b3; border-radius: 50%; }
.attendance-legend .present i { background: #22c55e; }
.attendance-legend .absent i { background: #ef4444; }
.attendance-legend .late i { background: #f59e0b; }
.attendance-legend .excused i { background: #6366f1; }
.attendance-list { border: 1px solid var(--line); border-radius: 12px; }
.attendance-list article { display: grid; grid-template-columns: 38px 1fr auto; gap: 13px; align-items: center; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.attendance-list article:last-child { border-bottom: 0; }
.attendance-avatar { width: 38px; height: 38px; font-size: 12px; }
.attendance-list p, .attendance-list strong, .attendance-list small { display: block; min-width: 0; margin: 0; }
.attendance-list strong { font-size: 12px; }
.attendance-list small { color: var(--muted); font-size: 9px; }
.status-options { display: flex; gap: 6px; }
.status-options input { position: absolute; opacity: 0; pointer-events: none; }
.status-options span { display: block; min-width: 70px; padding: 8px 10px; color: #667085; background: white; border: 1px solid #d9dde7; border-radius: 8px; font-size: 9px; font-weight: 750; text-align: center; cursor: pointer; }
.status-options input:focus-visible + span { outline: 3px solid rgba(79,70,229,.18); }
.status-options .present input:checked + span { color: #166534; background: #f0fdf4; border-color: #86efac; }
.status-options .absent input:checked + span { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
.status-options .late input:checked + span { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.status-options .excused input:checked + span { color: #3730a3; background: #eef2ff; border-color: #a5b4fc; }
.attendance-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.attendance-submit p, .attendance-submit strong, .attendance-submit small { display: block; margin: 0; }
.attendance-submit strong { font-size: 12px; }
.attendance-submit small { color: var(--muted); font-size: 9px; }

/* Phase 4 assessments and certificates */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.heading-actions { display: flex; gap: 9px; }
.phase-four-stats a { color: var(--primary); }
.assessment-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.assessment-card { display: flex; flex-direction: column; min-height: 250px; padding: 20px; color: var(--ink); background: #fafbff; border: 1px solid #e3e6ef; border-radius: 13px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.assessment-card:hover { transform: translateY(-2px); border-color: #bfc5ff; box-shadow: 0 14px 30px rgba(34,42,72,.08); }
.assessment-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.assessment-score { color: var(--primary); font-size: 16px; font-weight: 850; }
.assessment-card > small { margin-top: 25px; color: var(--primary); font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.assessment-card h3 { margin: 7px 0; font-size: 18px; line-height: 1.35; }
.assessment-card > p { margin: 0; color: var(--muted); font-size: 10px; }
.assessment-card footer { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; color: #667085; border-top: 1px solid #e8eaf1; font-size: 9px; }
.assessment-card footer b { margin-left: auto; color: var(--primary); }
.assessment-work-grid { grid-template-columns: 1fr 1fr; }
.work-list { display: grid; gap: 8px; }
.work-list a { display: grid; grid-template-columns: 36px 1fr auto; gap: 11px; align-items: center; padding: 12px; color: var(--ink); background: #f8f9fb; border: 1px solid transparent; border-radius: 10px; }
.work-list a:hover { border-color: #d7dbff; }
.work-icon { display: grid; place-items: center; width: 36px; height: 36px; color: var(--primary); background: var(--primary-soft); border-radius: 9px; font-size: 11px; font-weight: 850; }
.work-icon.project { color: #047857; background: #ecfdf5; }
.work-list p, .work-list strong, .work-list small { display: block; min-width: 0; margin: 0; }
.work-list strong { font-size: 11px; }
.work-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.quiz-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
.quiz-instructions ul { display: grid; gap: 11px; padding: 0; margin: 20px 0 28px; list-style: none; }
.quiz-instructions li { position: relative; padding-left: 23px; color: #475467; font-size: 12px; }
.quiz-instructions li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 850; }
.quiz-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px; overflow: hidden; background: var(--line); }
.quiz-metrics > span { display: grid; place-items: center; min-height: 115px; background: white; text-align: center; }
.quiz-metrics small, .quiz-metrics strong { display: block; }
.quiz-metrics small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.quiz-metrics strong { margin-top: 4px; font-size: 22px; }
.quiz-attempt-heading { align-items: center; }
.quiz-timer { min-width: 125px; padding: 14px 18px; color: white; background: #202849; border-radius: 12px; text-align: center; }
.quiz-timer small, .quiz-timer strong { display: block; }
.quiz-timer small { color: #aeb8d7; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.quiz-timer strong { margin-top: 2px; font-size: 25px; letter-spacing: .05em; }
.quiz-timer.urgent { background: #9f1239; }
.result-score { display: grid; place-items: center; min-width: 118px; min-height: 88px; padding: 10px; border-radius: 12px; text-align: center; }
.result-score.pass { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.result-score.review { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.result-score strong, .result-score small { display: block; }
.result-score strong { font-size: 24px; }
.result-score small { font-size: 9px; font-weight: 800; text-transform: uppercase; }
.question-stack { display: grid; gap: 13px; }
.question-card { padding: 24px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.question-card.correct { border-left: 4px solid #22c55e; }
.question-card.incorrect { border-left: 4px solid #ef4444; }
.question-card > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.question-card > header > span { color: var(--primary); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.question-card > header > div { display: flex; align-items: center; gap: 10px; }
.question-card > header strong { color: #667085; font-size: 10px; }
.question-card h2 { margin: 0 0 18px; max-width: 950px; font-size: 17px; line-height: 1.5; }
.question-card > input, .question-card > textarea, .code-answer {
    width: 100%; padding: 12px 14px; color: var(--ink); background: #fbfcfe;
    border: 1px solid #d8dce6; border-radius: 10px; outline: 0;
}
.question-card > input { height: 47px; }
.question-card > textarea { resize: vertical; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.quiz-options label { position: relative; cursor: pointer; }
.quiz-options input { position: absolute; opacity: 0; }
.quiz-options span { display: block; min-height: 48px; padding: 14px 15px; color: #475467; background: #f8f9fb; border: 1px solid #e3e6ec; border-radius: 10px; font-size: 11px; font-weight: 650; }
.quiz-options input:checked + span { color: var(--primary); background: var(--primary-soft); border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(79,70,229,.08); }
.quiz-options input:focus-visible + span { outline: 3px solid rgba(79,70,229,.18); }
.starter-code, .code-answer { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; line-height: 1.6; }
.starter-code { padding: 14px; overflow-x: auto; color: #dbe4ff; background: #1f2745; border-radius: 9px; }
.code-answer { color: #dbe4ff; background: #1b223c; border-color: #343e63; }
.quiz-submit-bar { position: sticky; bottom: 15px; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 15px 18px; background: rgba(255,255,255,.96); border: 1px solid #dfe2e9; border-radius: 12px; box-shadow: 0 14px 35px rgba(31,39,69,.13); backdrop-filter: blur(10px); }
.quiz-submit-bar p, .quiz-submit-bar strong, .quiz-submit-bar small { display: block; margin: 0; }
.quiz-submit-bar strong { font-size: 12px; }
.quiz-submit-bar small { color: var(--muted); font-size: 9px; }
.answer-review { padding: 15px; background: #f8f9fb; border-radius: 10px; }
.answer-review > span { display: block; margin-bottom: 6px; padding: 9px 11px; color: #667085; background: white; border: 1px solid #e4e7ec; border-radius: 8px; font-size: 10px; }
.answer-review > span.selected { color: var(--primary); border-color: #a5b4fc; }
.answer-review > span.correct-option { box-shadow: inset 3px 0 #22c55e; }
.answer-review > p { margin: 0; color: #344054; font-size: 12px; }
.answer-review footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #e4e7ec; color: #667085; font-size: 10px; }
.explanation { margin-top: 12px; padding: 12px; color: #3730a3; background: #eef2ff; border-radius: 8px; }
.explanation b { font-size: 9px; text-transform: uppercase; }
.explanation p { margin: 3px 0 0; font-size: 10px; }
.result-feedback p { margin: 10px 0 0; color: #475467; }
.submission-layout { grid-template-columns: .9fr 1.1fr; }
.brief-copy { color: #475467; font-size: 12px; line-height: 1.8; }
.feedback-callout { position: relative; margin-top: 22px; padding: 16px; color: #344054; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; }
.feedback-callout strong, .feedback-callout span { display: block; }
.feedback-callout strong { font-size: 11px; }
.feedback-callout p { margin: 6px 0; font-size: 11px; }
.feedback-callout span { color: #166534; font-weight: 850; }
.file-field input { height: auto; padding: 10px; }
.graded-state { display: grid; place-items: center; min-height: 260px; text-align: center; }
.graded-state > span { display: grid; place-items: center; width: 52px; height: 52px; color: #166534; background: #dcfce7; border-radius: 50%; font-size: 24px; }
.graded-state strong { margin-top: 12px; font-size: 16px; }
.graded-state p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.project-brief ul, .project-brief ol { display: grid; gap: 8px; padding-left: 20px; color: #475467; font-size: 11px; }
.project-brief h3 { margin-top: 26px; font-size: 14px; }
.certificate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.certificate-card { position: relative; overflow: hidden; min-height: 390px; padding: 27px; color: #202849; background: #fffdfa; border: 1px solid #e7deca; border-radius: 15px; box-shadow: 0 16px 40px rgba(68,55,33,.07); }
.certificate-card::after { content: ""; position: absolute; right: -70px; top: -70px; width: 170px; height: 170px; border: 25px solid rgba(79,70,229,.06); border-radius: 50%; }
.certificate-card.revoked { opacity: .6; }
.certificate-seal { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: var(--primary); border: 5px double #c7d2fe; border-radius: 50%; font-weight: 900; }
.certificate-card .eyebrow { display: block; margin-top: 25px; }
.certificate-card h2 { min-height: 55px; margin: 8px 0; font-size: 20px; line-height: 1.35; }
.certificate-card > p { color: var(--muted); font-size: 10px; }
.certificate-card dl { display: grid; gap: 9px; margin: 25px 0; }
.certificate-card dl div { padding: 10px; background: rgba(255,255,255,.72); border: 1px solid #ede7da; border-radius: 8px; }
.certificate-card dt, .certificate-card dd { margin: 0; }
.certificate-card dt { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.certificate-card dd { margin-top: 3px; font-size: 10px; font-weight: 750; }
.eligibility-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 35px; align-items: center; }
.eligibility-panel h2 { margin: 8px 0; font-size: 24px; }
.eligibility-panel > div > p { margin: 0; color: var(--muted); font-size: 11px; }
.eligibility-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.eligibility-metrics span { padding: 15px; background: #f8f9fc; border-radius: 9px; text-align: center; }
.eligibility-metrics strong, .eligibility-metrics small { display: block; }
.eligibility-metrics strong { color: var(--primary); font-size: 18px; }
.eligibility-metrics small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.eligibility-reasons { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 20px; margin: 0; padding: 18px 18px 18px 36px; color: #475467; background: #fffbeb; border-radius: 9px; font-size: 10px; }
.verification-hero { padding: 72px 0 62px; color: white; background: #1b223e; text-align: center; }
.verification-hero .eyebrow { color: #a5b4fc; }
.verification-hero h1 { margin: 12px 0 8px; font-size: clamp(40px, 6vw, 66px); letter-spacing: -.05em; }
.verification-hero p { margin: 0; color: #b5bed9; }
.verification-search { display: grid; grid-template-columns: 1fr auto; width: min(100%, 680px); margin: 29px auto 0; padding: 7px; background: white; border-radius: 12px; }
.verification-search input { min-width: 0; height: 45px; padding: 0 13px; border: 0; outline: 0; font-size: 13px; }
.verification-result-section { background: #f7f8fb; }
.verification-empty { padding: 65px; text-align: center; }
.verification-empty > span { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto; color: var(--primary); background: var(--primary-soft); border-radius: 50%; font-size: 27px; }
.verification-empty.invalid > span { color: var(--danger); background: #fef2f2; }
.verification-empty h2 { margin: 15px 0 5px; }
.verification-empty p { margin: 0; color: var(--muted); }
.public-certificate { width: min(100%, 980px); margin: 0 auto; overflow: hidden; color: #222a45; background: #fffdfa; border: 1px solid #ded3bd; border-radius: 18px; box-shadow: 0 25px 65px rgba(48,39,25,.1); }
.public-certificate > header { display: flex; align-items: center; gap: 13px; padding: 24px 30px; border-bottom: 1px solid #eae2d3; }
.certificate-seal.large { width: 56px; height: 56px; }
.public-certificate header div strong, .public-certificate header div span, .public-certificate header div small { display: block; }
.public-certificate header div span { font-weight: 850; }
.public-certificate header div small { color: var(--muted); font-size: 9px; }
.verification-status { margin-left: auto; padding: 8px 12px; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.public-certificate.revoked .verification-status { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.certificate-body { padding: 55px 30px; text-align: center; }
.certificate-body > p { margin: 10px 0; color: #667085; font-family: Georgia, serif; font-size: 15px; font-style: italic; }
.certificate-body h2 { margin: 8px 0; font-family: Georgia, serif; font-size: 38px; font-weight: 500; }
.certificate-body h3 { margin: 8px auto 19px; max-width: 760px; font-size: 23px; }
.certificate-body > strong { color: var(--primary); font-size: 12px; }
.public-certificate > footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #e8dfce; border-top: 1px solid #e8dfce; }
.public-certificate > footer span { padding: 18px; background: #fffdfa; text-align: center; }
.public-certificate > footer small, .public-certificate > footer strong { display: block; }
.public-certificate > footer small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.public-certificate > footer strong { margin-top: 4px; font-size: 10px; }
.revocation-notice { padding: 13px; color: #991b1b; background: #fef2f2; text-align: center; font-size: 10px; font-weight: 700; }
.authoring-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.authoring-actions a { display: grid; min-height: 145px; padding: 19px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 12px; }
.authoring-actions a:hover { border-color: #c7d2fe; box-shadow: 0 12px 28px rgba(34,42,72,.07); }
.authoring-actions span { color: #c2c7d4; font-size: 20px; font-weight: 850; }
.authoring-actions strong { align-self: end; font-size: 14px; }
.authoring-actions small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.review-queue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.review-list { display: grid; gap: 7px; }
.review-list a { display: grid; grid-template-columns: 31px 1fr auto; gap: 9px; align-items: center; padding: 10px; color: var(--ink); background: #f8f9fb; border-radius: 8px; }
.review-list a > span { display: grid; place-items: center; width: 31px; height: 31px; color: var(--primary); background: var(--primary-soft); border-radius: 7px; font-size: 10px; font-weight: 850; }
.review-list p, .review-list strong, .review-list small { display: block; min-width: 0; margin: 0; }
.review-list strong { font-size: 10px; }
.review-list small { color: var(--muted); font-size: 8px; }
.review-list b { color: var(--primary); font-size: 9px; }
.question-table-title { min-width: 420px; white-space: normal; }
.question-table-title strong { color: var(--primary); font-size: 9px; }
.question-table-title p { margin: 4px 0; color: var(--ink); font-size: 11px; line-height: 1.5; }
.question-table-title small { color: var(--muted); font-size: 8px; }
.wide-form-panel { max-width: 1150px; }
.check-row { display: flex; flex-wrap: wrap; gap: 25px; }
.authoring-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 15px; align-items: start; }
.question-picker { position: sticky; top: 87px; }
.question-pick-list { display: grid; gap: 7px; max-height: 620px; overflow-y: auto; }
.question-pick-list label { position: relative; cursor: pointer; }
.question-pick-list input { position: absolute; opacity: 0; }
.question-pick-list label > span { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 11px; background: #f8f9fb; border: 1px solid transparent; border-radius: 8px; }
.question-pick-list input:checked + span { background: var(--primary-soft); border-color: #a5b4fc; }
.question-pick-list strong { color: var(--primary); font-size: 8px; }
.question-pick-list small { grid-column: 1 / -1; color: #475467; font-size: 9px; line-height: 1.45; }
.question-pick-list b { color: #667085; font-size: 8px; }
.sticky-form-actions { position: sticky; bottom: 12px; z-index: 20; padding: 12px; background: rgba(246,247,251,.94); border-radius: 10px; backdrop-filter: blur(8px); }
.reviewed-answer { margin-bottom: 15px; padding: 15px; color: #344054; background: #f8f9fb; border-radius: 9px; }
.reviewed-answer > strong { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.reviewed-answer > p { margin: 6px 0 0; font-size: 11px; white-space: pre-wrap; }
.manual-grade-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.review-layout { grid-template-columns: 1.15fr .85fr; }
.submission-content h3 { font-size: 12px; }
.submission-content p { min-height: 100px; padding: 15px; color: #344054; background: #f8f9fb; border-radius: 9px; font-size: 11px; line-height: 1.7; }
.submission-links { display: flex; gap: 8px; margin-top: 14px; }
.private-file-link { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; margin-top: 16px; padding: 12px; background: var(--primary-soft); border-radius: 9px; }
.private-file-link > span { display: grid; place-items: center; width: 34px; height: 34px; color: var(--primary); background: white; border-radius: 8px; }
.private-file-link p, .private-file-link strong, .private-file-link small { display: block; margin: 0; }
.private-file-link strong { font-size: 10px; }
.private-file-link small { color: var(--muted); font-size: 8px; }
.revoke-form { display: flex; gap: 7px; }
.revoke-form input { width: 170px; height: 36px; padding: 0 9px; border: 1px solid #d8dce6; border-radius: 8px; font-size: 9px; }
.button:disabled { opacity: .55; cursor: not-allowed; }

/* Phase 5 public application and operations workspaces */
.hero-visual-panel { overflow: hidden; padding: 22px; background: radial-gradient(circle at 78% 17%, #313c70 0, #202743 35%, #171d35 100%); isolation: isolate; animation: hero-panel-arrive .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-visual-panel::after { content: ""; position: absolute; inset: -45% -35% auto auto; width: 290px; height: 290px; border-radius: 50%; background: rgba(99,102,241,.15); filter: blur(22px); pointer-events: none; }
.hero-svg-wrap { position: relative; margin: 13px -5px 0; }
.learning-system-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-orbit { transform-box: view-box; transform-origin: center; }
.hero-orbit-one { animation: hero-orbit-spin 28s linear infinite; }
.hero-orbit-two { animation: hero-orbit-spin-reverse 34s linear infinite; }
.learning-node { transform-box: fill-box; transform-origin: center; }
.node-foundation { animation: hero-node-float 5s ease-in-out infinite; }
.node-stack { animation: hero-node-float 5.8s .6s ease-in-out infinite; }
.node-ai { animation: hero-node-float 5.4s 1.1s ease-in-out infinite; }
.node-launch { animation: hero-node-float 6.1s 1.7s ease-in-out infinite; }
.signal-lines path { stroke-dasharray: 7 9; animation: hero-signal-flow 2.4s linear infinite; }
.signal-lines path:nth-child(2) { animation-delay: -.6s; }
.signal-lines path:nth-child(3) { animation-delay: -1.2s; }
.signal-lines path:nth-child(4) { animation-delay: -1.8s; }
.ai-spark { transform-box: fill-box; transform-origin: center; animation: hero-spark-pulse 3.2s ease-in-out infinite; }
.code-line { transform-box: fill-box; transform-origin: left center; animation: hero-code-build 3.8s ease-in-out infinite; }
.code-line:nth-of-type(2) { animation-delay: .2s; }
.code-line:nth-of-type(3) { animation-delay: .4s; }
.code-line:nth-of-type(4) { animation-delay: .6s; }
.code-line:nth-of-type(5) { animation-delay: .8s; }
.code-line:nth-of-type(6) { animation-delay: 1s; }
.build-status-dot, .live-dot::before { animation: hero-status-pulse 2s ease-out infinite; }
.hero-visual-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: -3px; padding: 14px 16px; color: #dfe4ff; background: rgba(38,47,82,.82); border: 1px solid rgba(129,140,248,.23); border-radius: 13px; backdrop-filter: blur(9px); }
.hero-visual-footer > span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.hero-visual-footer i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 5px rgba(74,222,128,.1); }
.hero-visual-footer small { color: #aeb7d4; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.hero-visual-footer strong { max-width: 210px; text-align: right; font-size: 11px; line-height: 1.45; }

@keyframes hero-panel-arrive {
    from { opacity: 0; transform: translate3d(28px, 18px, 0) scale(.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes hero-orbit-spin {
    to { transform: rotate(360deg); }
}
@keyframes hero-orbit-spin-reverse {
    to { transform: rotate(-360deg); }
}
@keyframes hero-node-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}
@keyframes hero-signal-flow {
    to { stroke-dashoffset: -32; }
}
@keyframes hero-spark-pulse {
    0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 0 rgba(129,140,248,0)); }
    50% { transform: scale(1.07) rotate(8deg); filter: drop-shadow(0 0 10px rgba(129,140,248,.45)); }
}
@keyframes hero-code-build {
    0%, 12% { transform: scaleX(.18); opacity: .3; }
    35%, 82% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(.18); opacity: .3; }
}
@keyframes hero-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .42; }
}
@keyframes programming-card-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -13px; }
}
@keyframes programming-line-type {
    0%, 14% { transform: scaleX(.18); opacity: .25; }
    38%, 78% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(.18); opacity: .25; }
}
@keyframes programming-progress-build {
    0%, 12% { transform: scaleX(.08); opacity: .45; }
    56%, 82% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(.08); opacity: .45; }
}
@keyframes programming-terminal-flow {
    to { stroke-dashoffset: -114; }
}
@keyframes programming-bg-status {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
@keyframes programming-symbol-float {
    0%, 100% { translate: 0 0; rotate: -3deg; }
    50% { translate: 9px -14px; rotate: 4deg; }
}
@keyframes programming-route-flow {
    to { stroke-dashoffset: -74; }
}
@keyframes programming-node-pulse {
    0% { transform: scale(.55); opacity: .58; }
    72%, 100% { transform: scale(1.55); opacity: 0; }
}

.application-hero { position: relative; overflow: hidden; padding: 85px 0 76px; color: white; background: #171d35; }
.application-hero::before { content: ""; position: absolute; inset: -45% auto auto -10%; width: 520px; height: 520px; border: 90px solid rgba(99,102,241,.15); border-radius: 50%; }
.application-hero::after { content: ""; position: absolute; right: -120px; bottom: -200px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,.17), transparent 68%); }
.application-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; align-items: center; }
.application-hero h1 { max-width: 700px; margin: 17px 0; font-size: clamp(48px, 6vw, 76px); line-height: 1.02; letter-spacing: -.055em; }
.application-hero p { max-width: 660px; margin: 0; color: #b7c0dc; font-size: 18px; }
.application-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 38px; }
.application-promise span { padding: 15px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; }
.application-promise strong, .application-promise small { display: block; }
.application-promise strong { color: #a5b4fc; font-size: 11px; letter-spacing: .1em; }
.application-promise small { margin-top: 6px; color: #d9def0; font-size: 10px; line-height: 1.45; }
.application-summary { padding: 30px; background: linear-gradient(145deg, rgba(75,85,137,.48), rgba(30,37,66,.65)); border: 1px solid rgba(165,180,252,.25); border-radius: 22px; box-shadow: 0 25px 70px rgba(6,9,20,.25); }
.application-summary > span { color: #a5b4fc; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.application-summary > strong { display: block; margin: 9px 0 24px; font-size: 24px; line-height: 1.28; }
.application-summary dl { margin: 0; }
.application-summary dl div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); }
.application-summary dt { color: #aeb7d4; font-size: 11px; }
.application-summary dd { margin: 0; text-align: right; font-size: 11px; font-weight: 750; }
.application-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: start; }
.application-layout > .section-heading { position: sticky; top: 110px; }
.application-form-card { padding: 31px; }
.application-reference { margin-top: 28px; padding: 19px; background: var(--primary-soft); border: 1px solid #c7d2fe; border-radius: 13px; }
.application-reference span, .application-reference strong, .application-reference small { display: block; }
.application-reference span { color: var(--primary); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.application-reference strong { margin: 4px 0; font-size: 21px; }
.application-reference small { color: var(--muted); font-size: 10px; }
.application-actions { align-items: center; justify-content: space-between; }
.application-actions > small { max-width: 300px; color: var(--muted); font-size: 10px; }

.admissions-workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, .65fr); gap: 16px; align-items: start; }
.compact-form-panel { position: sticky; top: 86px; }
.pipeline-filter select { min-width: 150px; height: 36px; padding: 0 10px; background: white; border: 1px solid #d8dce6; border-radius: 8px; color: var(--ink); font-size: 10px; }
.pipeline-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; color: #475467; background: #f8fafc; border: 1px solid #e4e7ec; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.pipeline-status i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.pipeline-status.hot { color: #9f1239; background: #fff1f2; border-color: #fecdd3; }
.pipeline-status.hot i { background: #f43f5e; }
.pipeline-status.warm { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.pipeline-status.warm i { background: #f59e0b; }
.pipeline-status.cold { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.pipeline-status.cold i { background: #22c55e; }
.table-primary { display: block; font-size: 10px; }
.text-danger { color: var(--danger); }
.muted-dash { color: #98a2b3; font-size: 9px; }
.handoff-complete { padding: 18px; text-align: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 13px; }
.handoff-complete > span { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 13px; color: white; background: var(--primary); border-radius: 13px; font-weight: 850; }
.handoff-complete strong { display: block; }
.handoff-complete p { margin: 6px 0 17px; color: var(--muted); font-size: 10px; }
.operations-timeline { display: grid; }
.operations-timeline article { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 0 0 22px; }
.operations-timeline article:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 39px; bottom: 0; width: 1px; background: #d8dce6; }
.operations-timeline article > span { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; color: var(--primary); background: var(--primary-soft); border: 1px solid #c7d2fe; border-radius: 11px; font-size: 11px; font-weight: 850; }
.operations-timeline strong { font-size: 11px; }
.operations-timeline p { margin: 5px 0; color: #475467; font-size: 10px; }
.operations-timeline small { color: var(--muted); font-size: 8px; }
.fee-plan-summary { padding: 19px; color: white; background: #202743; border-radius: 14px; }
.fee-plan-summary > span, .fee-plan-summary > strong { display: block; }
.fee-plan-summary > span { color: #aeb7d4; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fee-plan-summary > strong { margin-top: 5px; font-size: 17px; }
.fee-plan-summary dl { margin: 18px 0; }
.fee-plan-summary dl div { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #39405d; font-size: 10px; }
.fee-plan-summary dd { margin: 0; font-weight: 800; }
.finance-ledgers { align-items: start; margin-top: 16px; }
.payment-receipt { max-width: 820px; margin: 0 auto; background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.payment-receipt > header { display: flex; align-items: center; justify-content: space-between; padding: 26px 30px; border-bottom: 1px solid var(--line); }
.receipt-amount { padding: 45px 30px; text-align: center; color: white; background: #202743; }
.receipt-amount span, .receipt-amount strong, .receipt-amount small { display: block; }
.receipt-amount span { color: #aeb7d4; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.receipt-amount strong { margin: 7px 0; font-size: 48px; letter-spacing: -.04em; }
.receipt-amount small { color: #c6cde3; font-size: 10px; }
.receipt-details { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 12px 30px; }
.receipt-details div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.receipt-details div:nth-child(odd) { padding-right: 25px; border-right: 1px solid var(--line); }
.receipt-details div:nth-child(even) { padding-left: 25px; }
.receipt-details dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.receipt-details dd { margin: 5px 0 0; font-size: 12px; font-weight: 750; }
.receipt-details dd small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 500; }
.payment-receipt > footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 30px; color: #667085; background: #f8fafc; font-size: 9px; }
.payment-receipt > footer p { margin: 0; }

/* Intelligence, analytics and platform operations */
.intelligence-heading { position: relative; overflow: hidden; min-height: 142px; padding: 22px 26px; background: linear-gradient(125deg, #fff 0%, #f7f7ff 58%, #ecfdf5 100%); border: 1px solid var(--line); border-radius: 22px; }
.intelligence-heading > div:first-child { position: relative; z-index: 2; }
.tutor-orbit { width: 220px; margin-left: auto; }
.tutor-orbit svg { display: block; width: 100%; }
.tutor-path { fill: none; stroke: #c7d2fe; stroke-width: 2; stroke-dasharray: 5 8; }
.tutor-pulse { fill: none; stroke: #818cf8; stroke-width: 2; transform-origin: center; animation: tutor-pulse 2.8s ease-out infinite; }
.tutor-dot { fill: #4f46e5; filter: drop-shadow(0 4px 7px rgba(79,70,229,.25)); }
.tutor-dot-one { animation: tutor-dot-hop 3s ease-in-out infinite; }
.tutor-dot-two { fill: #22c55e; animation: tutor-dot-hop 3s -1.5s ease-in-out infinite; }
.tutor-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.tutor-history { padding: 18px; }
.tutor-history .panel-heading { margin-bottom: 14px; }
.tutor-new { display: flex; align-items: center; gap: 10px; padding: 11px; color: var(--primary); background: var(--primary-soft); border: 1px solid #dfe3ff; border-radius: 12px; font-size: 12px; }
.tutor-new span { display: grid; place-items: center; width: 26px; height: 26px; color: white; background: var(--primary); border-radius: 8px; font-size: 17px; }
.tutor-conversation-list { display: grid; gap: 6px; margin-top: 15px; }
.tutor-conversation-list > a { display: grid; gap: 2px; padding: 12px; border: 1px solid transparent; border-radius: 12px; transition: background .2s, border .2s; }
.tutor-conversation-list > a:hover, .tutor-conversation-list > a.active { background: #f8f9fc; border-color: var(--line); }
.tutor-conversation-list span { color: var(--primary); font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.tutor-conversation-list strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tutor-conversation-list small { color: var(--muted); font-size: 9px; }
.compact-empty { padding: 24px 10px; }
.tutor-chat { display: flex; flex-direction: column; min-height: 630px; padding: 0; overflow: hidden; }
.tutor-chat-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.tutor-chat-header span { color: var(--primary); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.tutor-chat-header h2 { margin: 3px 0 0; font-size: 17px; }
.tutor-welcome { display: grid; place-items: center; flex: 1; padding: 55px 30px 30px; text-align: center; background: radial-gradient(circle at 50% 35%, #f2f0ff, transparent 38%); }
.tutor-welcome-icon { display: grid; place-items: center; width: 65px; height: 65px; color: white; background: linear-gradient(135deg, #4f46e5, #8b5cf6); border-radius: 22px; box-shadow: 0 16px 35px rgba(79,70,229,.24); font-size: 27px; animation: tutor-welcome-float 4s ease-in-out infinite; }
.tutor-welcome h2 { margin: 23px 0 7px; font-size: 26px; letter-spacing: -.03em; }
.tutor-welcome p { max-width: 580px; margin: 0; color: var(--muted); font-size: 13px; }
.prompt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.prompt-chips span { padding: 8px 11px; color: #515a6d; background: white; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; }
.tutor-messages { display: grid; gap: 18px; flex: 1; padding: 24px; background: #fbfcfe; }
.tutor-message { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; max-width: 88%; }
.tutor-message.from-student { justify-self: end; grid-template-columns: minmax(0, 1fr) 36px; }
.tutor-message.from-student .tutor-avatar { grid-column: 2; grid-row: 1; color: white; background: #202743; }
.tutor-message.from-student .tutor-bubble { grid-column: 1; grid-row: 1; background: #202743; color: white; border-color: #202743; }
.tutor-avatar { display: grid; place-items: center; width: 36px; height: 36px; color: var(--primary); background: var(--primary-soft); border-radius: 11px; font-size: 9px; font-weight: 850; }
.tutor-bubble { padding: 15px 17px; background: white; border: 1px solid var(--line); border-radius: 4px 17px 17px 17px; box-shadow: 0 8px 25px rgba(23,32,51,.04); }
.from-student .tutor-bubble { border-radius: 17px 4px 17px 17px; }
.tutor-bubble > small { color: #8a94a7; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tutor-bubble > p { margin: 6px 0 0; font-size: 12px; line-height: 1.75; }
.tutor-citations { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.tutor-citations summary { color: var(--primary); cursor: pointer; font-size: 10px; font-weight: 750; }
.tutor-citations div { margin-top: 9px; padding: 10px; background: #f8fafc; border-radius: 9px; }
.tutor-citations strong { font-size: 10px; }
.tutor-citations p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.tutor-feedback { display: flex; align-items: center; gap: 6px; margin-top: 13px; }
.tutor-feedback span { margin-right: 3px; color: var(--muted); font-size: 9px; }
.tutor-feedback button { padding: 4px 8px; color: #596174; background: white; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 9px; }
.tutor-feedback button:hover, .tutor-feedback button.selected { color: var(--primary); border-color: #a5b4fc; background: var(--primary-soft); }
.tutor-composer { padding: 18px 22px 16px; background: white; border-top: 1px solid var(--line); }
.tutor-composer > .field { display: grid; grid-template-columns: 60px 1fr; align-items: center; margin-bottom: 8px; }
.tutor-composer > .field label { margin: 0; }
.tutor-composer select { min-height: 37px; padding: 6px 10px; font-size: 11px; }
.tutor-question-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: stretch; }
.tutor-question-row textarea { resize: none; border: 1px solid #ccd1dc; border-radius: 11px; padding: 12px 14px; font: inherit; font-size: 12px; }
.tutor-composer > small { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; }
.knowledge-grid { grid-template-columns: 1.25fr .75fr; }
.knowledge-coverage { display: grid; gap: 8px; }
.knowledge-coverage article { display: grid; grid-template-columns: 44px 1fr 12px; gap: 11px; align-items: center; padding: 11px; background: #fafbfc; border: 1px solid var(--line); border-radius: 11px; }
.knowledge-coverage article > span { display: grid; place-items: center; width: 44px; height: 38px; color: var(--primary); background: var(--primary-soft); border-radius: 9px; font-size: 9px; font-weight: 850; }
.knowledge-coverage strong, .knowledge-coverage small { display: block; }
.knowledge-coverage strong { font-size: 11px; }
.knowledge-coverage small { color: var(--muted); font-size: 9px; }
.knowledge-coverage i { width: 8px; height: 8px; background: #d0d5dd; border-radius: 50%; }
.knowledge-coverage i.ready { background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
.agent-heading { align-items: center; }
.agent-flow-visual { display: flex; align-items: center; gap: 7px; min-width: 280px; padding: 15px; background: #202743; border-radius: 16px; box-shadow: var(--shadow); }
.agent-flow-visual span { display: grid; place-items: center; min-width: 60px; min-height: 36px; padding: 0 10px; color: #dbe1ff; background: #303957; border: 1px solid #46506f; border-radius: 9px; font-size: 9px; font-weight: 800; }
.agent-flow-visual span:last-child { color: #bbf7d0; border-color: #267451; }
.agent-flow-visual i { flex: 1; height: 2px; background: linear-gradient(90deg, #818cf8, #34d399); position: relative; overflow: hidden; }
.agent-flow-visual i::after { content: ""; position: absolute; width: 10px; height: 2px; background: white; animation: agent-signal 1.7s linear infinite; }
.agent-workflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.agent-workflow-card { display: flex; flex-direction: column; padding: 18px; }
.agent-workflow-card header { display: flex; gap: 10px; align-items: center; }
.agent-workflow-card header > span { display: grid; place-items: center; width: 38px; height: 38px; color: var(--primary); background: var(--primary-soft); border-radius: 11px; font-weight: 850; }
.agent-workflow-card header strong, .agent-workflow-card header small { display: block; }
.agent-workflow-card header strong { font-size: 12px; line-height: 1.3; }
.agent-workflow-card header small { color: var(--muted); font-size: 8px; }
.agent-workflow-card > p { min-height: 58px; margin: 13px 0; color: var(--muted); font-size: 10px; }
.agent-workflow-card form { display: grid; gap: 9px; margin-top: auto; }
.agent-workflow-card .field { margin: 0; }
.agent-workflow-card label { font-size: 9px; }
.agent-workflow-card input, .agent-workflow-card textarea { min-height: 36px; padding: 8px 10px; font-size: 10px; }
.agent-workflow-card .button { min-height: 39px; font-size: 10px; }
.agent-run-grid { grid-template-columns: .85fr 1.15fr; margin-top: 18px; }
.agent-run-list { display: grid; }
.agent-run-list > a { display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.agent-run-list > a:hover, .agent-run-list > a.active { background: #f7f8ff; }
.agent-run-list p, .agent-run-list strong, .agent-run-list small { display: block; margin: 0; }
.agent-run-list strong { font-size: 11px; }
.agent-run-list small { color: var(--muted); font-size: 8px; }
.agent-run-list b { color: #667085; font-size: 8px; }
.run-status { width: 8px; height: 8px; background: #94a3b8; border-radius: 50%; }
.run-status.completed { background: #22c55e; }
.run-status.awaiting-approval { background: #f59e0b; box-shadow: 0 0 0 4px #fef3c7; }
.run-status.failed { background: #ef4444; }
.agent-step-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.agent-step-list li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 11px; align-items: center; padding: 9px 0; }
.agent-step-list li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 39px; bottom: -9px; width: 2px; background: var(--line); }
.agent-step-list li > span { z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; color: #667085; background: white; border: 2px solid var(--line); border-radius: 50%; font-size: 9px; font-weight: 800; }
.agent-step-list li.completed > span { color: white; background: #16a34a; border-color: #16a34a; }
.agent-step-list strong, .agent-step-list small { display: block; }
.agent-step-list strong { font-size: 11px; }
.agent-step-list small { color: var(--muted); font-size: 8px; }
.agent-output { margin-top: 18px; padding: 17px; background: #f7f8ff; border: 1px solid #dfe3ff; border-radius: 13px; }
.agent-output span { color: var(--primary); font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.agent-output p { margin: 7px 0 0; font-size: 11px; line-height: 1.7; }
.approval-callout { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 18px; padding: 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; }
.approval-callout strong { font-size: 11px; }
.approval-callout p { margin: 2px 0 0; color: #876411; font-size: 9px; }
.agent-empty { min-height: 330px; }
.report-tabs { display: flex; gap: 6px; padding: 5px; margin-bottom: 18px; background: #eef0f5; border-radius: 12px; overflow-x: auto; }
.report-tabs a { min-width: max-content; padding: 8px 15px; color: #667085; border-radius: 8px; font-size: 10px; font-weight: 750; }
.report-tabs a.active { color: var(--primary); background: white; box-shadow: 0 3px 12px rgba(23,32,51,.08); }
.report-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.report-metric-grid article { padding: 16px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.report-metric-grid small, .report-metric-grid strong { display: block; }
.report-metric-grid small { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.report-metric-grid strong { margin: 4px 0 12px; font-size: 23px; letter-spacing: -.03em; }
.report-metric-grid article > span { display: block; height: 4px; background: #eef0f5; border-radius: 10px; overflow: hidden; }
.report-metric-grid i { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: inherit; }
.report-workspace { grid-template-columns: 1.25fr .75fr; }
.mini-chart { display: grid; gap: 11px; }
.mini-chart > div:not(.empty-state) { display: grid; grid-template-columns: 90px 1fr 45px; gap: 10px; align-items: center; }
.mini-chart span { overflow: hidden; color: #667085; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mini-chart i { height: 8px; background: #eef0f5; border-radius: 999px; overflow: hidden; }
.mini-chart b { display: block; height: 100%; background: linear-gradient(90deg, #4f46e5, #a78bfa); border-radius: 999px; }
.mini-chart strong { font-size: 9px; text-align: right; }
.report-guidance { position: relative; overflow: hidden; color: white; background: #202743; border-color: #202743; }
.report-guidance::after { content: ""; position: absolute; width: 170px; height: 170px; right: -75px; bottom: -80px; border: 28px solid rgba(129,140,248,.12); border-radius: 50%; }
.report-guidance-icon { display: grid; place-items: center; width: 42px; height: 42px; color: #c7d2fe; background: #343b59; border-radius: 12px; }
.report-guidance h2 { margin: 22px 0 7px; }
.report-guidance p { margin: 0; color: #b8c0d9; font-size: 11px; }
.report-guidance ul { margin: 20px 0 0; padding-left: 17px; color: #d8dded; font-size: 10px; }
.report-history-grid { grid-template-columns: 1fr 1fr; margin-top: 18px; }
.simple-ledger { display: grid; }
.simple-ledger article { display: grid; grid-template-columns: 37px 1fr auto; gap: 10px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); }
.simple-ledger article > span { display: grid; place-items: center; width: 37px; height: 31px; color: var(--primary); background: var(--primary-soft); border-radius: 8px; font-size: 8px; font-weight: 850; }
.simple-ledger p, .simple-ledger strong, .simple-ledger small { display: block; margin: 0; }
.simple-ledger strong { font-size: 10px; }
.simple-ledger small { color: var(--muted); font-size: 8px; }
.notification-inbox { padding: 0; overflow: hidden; }
.notification-inbox .panel-heading { padding: 18px 22px; margin: 0; }
.notification-inbox > article { display: grid; grid-template-columns: 42px 1fr auto; gap: 13px; align-items: start; padding: 18px 22px; border-top: 1px solid var(--line); }
.notification-inbox > article.unread { background: #fafaff; box-shadow: inset 3px 0 var(--primary); }
.notification-type { display: grid; place-items: center; width: 42px; height: 42px; color: var(--primary); background: var(--primary-soft); border-radius: 12px; font-size: 12px; font-weight: 850; }
.notification-inbox article small, .notification-inbox article strong { display: block; }
.notification-inbox article small { color: var(--muted); font-size: 8px; }
.notification-inbox article strong { margin-top: 2px; font-size: 12px; }
.notification-inbox article p { margin: 3px 0; color: #5d6679; font-size: 10px; }
.notification-inbox article form button { padding: 6px 9px; color: #667085; background: white; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 8px; }
.system-health-panel { margin-bottom: 18px; }
.health-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.health-grid article { padding: 14px; background: #fafbfc; border: 1px solid var(--line); border-radius: 12px; }
.health-grid article > span { display: flex; align-items: center; gap: 7px; color: #667085; font-size: 9px; font-weight: 750; }
.health-grid article > span i { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 4px #dcfce7; }
.health-grid article.degraded > span i { background: #f59e0b; box-shadow: 0 0 0 4px #fef3c7; }
.health-grid article.down > span i { background: #ef4444; box-shadow: 0 0 0 4px #fee2e2; }
.health-grid article > strong { display: block; margin-top: 14px; font-size: 17px; }
.health-grid article p { min-height: 34px; margin: 3px 0; color: var(--muted); font-size: 9px; }
.health-grid article small { color: #98a2b3; font-size: 8px; }
.system-grid { grid-template-columns: 1fr 1fr; }
.process-job-form { margin-top: 10px; }
.error-note { color: var(--danger) !important; }
.settings-ledger > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.settings-ledger article { padding: 12px; background: #fafbfc; border: 1px solid var(--line); border-radius: 10px; }
.settings-ledger small, .settings-ledger strong, .settings-ledger span { display: block; }
.settings-ledger small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.settings-ledger strong { margin: 4px 0; font-size: 11px; }
.settings-ledger span { color: var(--primary); font-size: 8px; }
.student-ai-callout { position: relative; display: grid; grid-template-columns: 125px 1fr auto; gap: 24px; align-items: center; overflow: hidden; padding: 22px 26px; color: white; background: radial-gradient(circle at 10% 20%, #414c7e, #202743 48%, #171c33 100%); border-color: #323b60; }
.student-ai-callout::after { content: ""; position: absolute; width: 170px; height: 170px; right: -95px; top: -90px; border: 26px solid rgba(129,140,248,.1); border-radius: 50%; }
.student-ai-visual { position: relative; z-index: 1; }
.student-ai-visual svg { display: block; width: 125px; }
.student-ai-visual rect { fill: #6366f1; filter: drop-shadow(0 10px 14px rgba(0,0,0,.22)); }
.ai-thread { fill: none; stroke: #6673aa; stroke-width: 2; stroke-dasharray: 4 7; }
.ai-orbit-dot { fill: #a5b4fc; animation: tutor-dot-hop 3s ease-in-out infinite; }
.ai-orbit-b { fill: #4ade80; animation-delay: -1.5s; }
.student-ai-callout h2 { margin: 5px 0 3px; font-size: 21px; }
.student-ai-callout p { max-width: 640px; margin: 0; color: #b9c1da; font-size: 11px; }
.student-ai-callout .eyebrow { color: #a5b4fc; }
.student-ai-callout .button { position: relative; z-index: 1; color: #3730a3; background: white; border-color: white; }
.career-hero { position: relative; display: grid; grid-template-columns: 1fr 390px; gap: 45px; align-items: center; overflow: hidden; margin-bottom: 18px; padding: 35px 38px; color: white; background: radial-gradient(circle at 80% 10%, #354274, #202743 44%, #151a30 100%); border: 1px solid #343d64; border-radius: 24px; box-shadow: 0 18px 55px rgba(23,32,51,.14); }
.career-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(129,140,248,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,.05) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(90deg, transparent, #000); }
.career-hero > div { position: relative; z-index: 1; }
.career-hero h1 { max-width: 600px; margin: 12px 0 8px; font-size: 39px; line-height: 1.08; letter-spacing: -.045em; }
.career-hero p { max-width: 600px; margin: 0; color: #b8c0d9; font-size: 13px; }
.career-hero-actions { display: flex; gap: 9px; margin-top: 23px; }
.career-hero .button-quiet { color: white; background: transparent; border-color: #5b668e; }
.career-launch-visual svg { display: block; width: 100%; }
.career-route-shadow { fill: none; stroke: rgba(0,0,0,.32); stroke-width: 13; stroke-linecap: round; }
.career-route-line { fill: none; stroke: #818cf8; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 7 10; animation: career-route-flow 2.8s linear infinite; }
.career-route-node { fill: #202743; stroke: #a5b4fc; stroke-width: 3; animation: career-node-pulse 2.7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.career-route-node.node-two { animation-delay: -.9s; }
.career-route-node.node-three { fill: #059669; stroke: #6ee7b7; animation-delay: -1.8s; }
.career-rocket { animation: career-rocket-float 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.career-code-card { animation: career-code-float 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.career-code-card rect { fill: #2f385d; stroke: #58658f; }
.career-code-card circle { fill: #818cf8; }
.career-launch-visual > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; margin: -5px 20px 0; }
.career-launch-visual span { color: #aab3d0; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.career-launch-visual strong { font-size: 18px; }
.career-launch-visual i { grid-column: 1 / -1; height: 6px; background: #303958; border-radius: 999px; overflow: hidden; }
.career-launch-visual b { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #34d399); border-radius: inherit; }
.career-roadmap { padding-bottom: 18px; }
.career-milestone-track { display: grid; gap: 0; }
.career-milestone-track article { position: relative; display: grid; grid-template-columns: 42px minmax(190px, .75fr) minmax(310px, 1.25fr); gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.career-milestone-track article > span { z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; color: #667085; background: white; border: 2px solid #d8dce7; border-radius: 50%; font-size: 10px; font-weight: 850; }
.career-milestone-track article.completed > span, .career-milestone-track article.verified > span { color: white; background: #16a34a; border-color: #16a34a; }
.career-milestone-track article > div strong { font-size: 11px; }
.career-milestone-track article > div p { margin: 1px 0; color: var(--muted); font-size: 9px; }
.career-milestone-track article > div small { color: var(--primary); font-size: 8px; }
.career-milestone-track form { display: grid; grid-template-columns: 115px 1fr 55px; gap: 6px; }
.career-milestone-track select, .career-milestone-track input, .career-milestone-track button { min-height: 33px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: white; font: inherit; font-size: 8px; }
.career-milestone-track button { color: white; background: var(--primary); border-color: var(--primary); cursor: pointer; font-weight: 800; }
.career-profile-grid { grid-template-columns: 1.1fr .9fr; }
.career-visibility { display: flex; gap: 8px; align-items: center; color: #5d6679; font-size: 10px; }
.career-visibility input { width: auto; min-height: auto; }
.career-evidence-form { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.verified-skill-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }
.verified-skill-list article { display: grid; grid-template-columns: 31px 1fr; gap: 8px; align-items: center; padding: 9px; background: #fafbfc; border: 1px solid var(--line); border-radius: 9px; }
.verified-skill-list article > span { display: grid; place-items: center; width: 31px; height: 31px; color: var(--primary); background: var(--primary-soft); border-radius: 8px; font-size: 10px; font-weight: 850; }
.verified-skill-list p, .verified-skill-list strong, .verified-skill-list small { display: block; margin: 0; }
.verified-skill-list strong { font-size: 9px; }
.verified-skill-list small { color: var(--muted); font-size: 7px; }
.portfolio-workspace { grid-template-columns: .7fr 1.3fr; align-items: start; }
.portfolio-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.portfolio-proof-card { padding: 18px; background: white; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 10px 28px rgba(23,32,51,.04); }
.portfolio-proof-card header { display: flex; justify-content: space-between; gap: 10px; }
.portfolio-proof-card header > span { color: var(--primary); font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.portfolio-proof-card header b { color: #667085; font-size: 7px; text-transform: uppercase; }
.portfolio-proof-card header b.approved { color: #15803d; }
.portfolio-proof-card h3 { margin: 15px 0 6px; font-size: 15px; }
.portfolio-proof-card > p { min-height: 51px; margin: 0; color: var(--muted); font-size: 9px; }
.portfolio-proof-card > small { display: block; margin-top: 12px; color: #4f46e5; font-size: 8px; }
.portfolio-proof-card > div { margin-top: 12px; padding: 10px; background: #f7f8ff; border-radius: 9px; }
.portfolio-proof-card > div strong { font-size: 8px; text-transform: uppercase; }
.portfolio-proof-card > div p { margin: 3px 0 0; font-size: 8px; }
.opportunity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.opportunity-grid > article { display: flex; flex-direction: column; padding: 17px; background: #fafbfc; border: 1px solid var(--line); border-radius: 13px; }
.opportunity-grid header { display: flex; justify-content: space-between; color: var(--primary); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.opportunity-grid header b { color: #047857; }
.opportunity-grid h3 { margin: 16px 0 2px; font-size: 14px; }
.opportunity-grid .opportunity-company { margin: 0; color: var(--primary); font-size: 9px; font-weight: 750; }
.opportunity-grid article > p:not(.opportunity-company) { flex: 1; margin: 10px 0; color: var(--muted); font-size: 9px; }
.opportunity-grid article > small { display: block; padding-top: 10px; border-top: 1px solid var(--line); color: #667085; font-size: 8px; }
.opportunity-grid form { display: grid; gap: 7px; margin-top: 12px; }
.opportunity-grid textarea { resize: vertical; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 9px; }
.application-stage { margin-top: 12px; padding: 9px; color: #5b6477; background: white; border: 1px solid var(--line); border-radius: 8px; font-size: 8px; }
.mentor-session-strip > article { display: grid; grid-template-columns: 44px 1fr auto; gap: 11px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.mentor-session-strip time { display: grid; place-items: center; width: 44px; height: 44px; color: var(--primary); background: var(--primary-soft); border-radius: 10px; }
.mentor-session-strip time strong { line-height: 1; }
.mentor-session-strip time small { font-size: 7px; text-transform: uppercase; }
.mentor-session-strip p, .mentor-session-strip p strong, .mentor-session-strip p small { display: block; margin: 0; }
.mentor-session-strip p strong { font-size: 10px; }
.mentor-session-strip p small { color: var(--muted); font-size: 8px; }
.readiness-cell { display: flex; gap: 8px; align-items: center; min-width: 130px; }
.readiness-cell > span { width: 80px; height: 5px; background: #edf0f5; border-radius: 999px; overflow: hidden; }
.readiness-cell i { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #22c55e); }
.readiness-cell strong { font-size: 9px; }
.success-review-grid { grid-template-columns: 1fr 1fr; }
.success-review-list { display: grid; gap: 9px; }
.success-review-list article { padding: 12px; background: #fafbfc; border: 1px solid var(--line); border-radius: 10px; }
.success-review-list header { display: flex; gap: 8px; align-items: center; }
.success-review-list header span { padding: 4px 6px; color: var(--primary); background: var(--primary-soft); border-radius: 5px; font-size: 7px; font-weight: 800; }
.success-review-list header strong { font-size: 10px; }
.success-review-list article > p { margin: 7px 0; color: var(--muted); font-size: 8px; }
.success-review-list article > small { color: var(--primary); font-size: 7px; text-transform: uppercase; }
.success-review-list form { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 9px; }
.success-review-list input, .success-review-list select, .success-review-list textarea { min-height: 34px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 8px; }
.success-review-list .project-review-form { grid-template-columns: 120px 1fr auto; }
.success-operations-grid { grid-template-columns: 1fr 1fr; margin-top: 18px; }
.inline-check { display: flex !important; gap: 6px; align-items: center; margin-top: 5px !important; }
.inline-check input { width: auto; min-height: auto; }
.pipeline-update { display: grid; grid-template-columns: 90px 150px auto; gap: 5px; }
.pipeline-update select, .pipeline-update input, .pipeline-update button { min-height: 31px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: white; font: inherit; font-size: 8px; }
.pipeline-update button { color: white; background: var(--primary); border-color: var(--primary); cursor: pointer; }
.career-ledgers { grid-template-columns: 1fr 1fr; }

@keyframes career-route-flow { to { stroke-dashoffset: -34; } }
@keyframes career-node-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes career-rocket-float { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(5px, -7px) rotate(2deg); } }
@keyframes career-code-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@keyframes tutor-pulse { 0% { transform: scale(.75); opacity: .8; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes tutor-dot-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tutor-welcome-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes agent-signal { from { transform: translateX(-12px); } to { transform: translateX(65px); } }

/* Gentle home-page storytelling motion */
.js-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .72s ease, transform .72s cubic-bezier(.2,.8,.2,1); }
.js-motion [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.js-motion .course-stage.is-visible .course-card { animation: course-card-reveal .65s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--reveal-order, 0) * 90ms); }
.learning-cycle article { position: relative; overflow: hidden; transition: background .25s, transform .25s; }
.learning-cycle article::after { content: ""; position: absolute; width: 90px; height: 90px; right: -55px; bottom: -55px; border-radius: 50%; background: var(--primary-soft); transition: transform .35s; }
.learning-cycle article:hover { z-index: 1; background: #fbfbff; transform: translateY(-4px); }
.learning-cycle article:hover::after { transform: scale(1.5); }
.learning-cycle article > span { position: relative; z-index: 1; transition: color .25s, background .25s, transform .25s; }
.learning-cycle article:hover > span { color: white; background: var(--primary); transform: rotate(-5deg) scale(1.08); }
.roadmap-list article { position: relative; transition: padding-left .28s, background .28s; }
.roadmap-list article::before { content: ""; position: absolute; left: -14px; top: 30px; width: 4px; height: 0; background: var(--primary); border-radius: 999px; transition: height .3s; }
.roadmap-list article:hover { padding-left: 14px; background: linear-gradient(90deg, var(--primary-soft), transparent 65%); }
.roadmap-list article:hover::before { height: calc(100% - 60px); }
.proof-grid > span { transition: transform .25s; }
.proof-grid > span:hover { transform: translateY(-4px); }
.proof-grid > span:hover strong { color: var(--primary); }

@keyframes course-card-reveal {
    from { opacity: 0; transform: translateY(22px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1100px) {
    .hero-grid { gap: 35px; }
    .admissions-workspace { grid-template-columns: 1fr; }
    .compact-form-panel { position: static; }
    .curriculum-intro { grid-template-columns: minmax(0, 1fr) 365px; gap: 35px; }
    .curriculum-map-copy { grid-template-columns: 150px 1fr 300px; }
    .course-grid { grid-template-columns: repeat(2, 1fr); }
    .learning-cycle { grid-template-columns: repeat(3, 1fr); }
    .learning-cycle article:nth-child(3) { border-right: 0; }
    .learning-cycle article:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
    .auth-shell { grid-template-columns: .75fr 1.25fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .course-hero-grid { gap: 25px; }
    .course-visual { min-height: 430px; }
    .delivery-cycle { grid-template-columns: repeat(3, 1fr); }
    .delivery-cycle article:nth-child(3) { border-right: 0; }
    .delivery-cycle article:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
    .student-course-strip, .enrolled-course-grid, .batch-card-grid { grid-template-columns: repeat(2, 1fr); }
    .assessment-card-grid, .certificate-grid { grid-template-columns: repeat(2, 1fr); }
    .authoring-actions { grid-template-columns: repeat(2, 1fr); }
    .review-queue-grid { grid-template-columns: 1fr 1fr; }
    .agent-workflow-grid { grid-template-columns: repeat(2, 1fr); }
    .health-grid { grid-template-columns: repeat(2, 1fr); }
    .career-hero { grid-template-columns: 1fr 330px; }
    .opportunity-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-contact { grid-column: 1 / -1; max-width: 650px; }
}

@media (max-width: 860px) {
    .nav-toggle { display: block; }
    .nav-links { position: absolute; top: 68px; right: 20px; left: 20px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; background: white; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 11px; }
    .hero-grid, .split-heading, .roadmap-grid, .fee-grid { grid-template-columns: 1fr; }
    .application-hero-grid, .application-layout { grid-template-columns: 1fr; }
    .application-layout > .section-heading { position: static; }
    .application-hero-grid { gap: 45px; }
    .curriculum-intro { grid-template-columns: 1fr; gap: 24px; }
    .beginner-welcome { max-width: 560px; }
    .curriculum-map-copy { grid-template-columns: 1fr; gap: 5px; }
    .curriculum-map-copy strong { font-size: 20px; }
    .curriculum-map-copy small { max-width: 520px; }
    .curriculum-map-labels { grid-template-columns: 1fr 1fr; row-gap: 18px; margin-top: -12px; }
    .course-stage-heading { grid-template-columns: 58px 1fr; }
    .course-stage-heading > small { grid-column: 2; justify-self: start; }
    .hero { padding-top: 60px; }
    .hero-panel { max-width: 600px; }
    .proof-grid { grid-template-columns: repeat(3, 1fr); row-gap: 25px; }
    .proof-grid > span:nth-child(3) { border: 0; }
    .course-grid { grid-template-columns: repeat(2, 1fr); }
    .sticky-heading { position: static; }
    .roadmap-grid, .fee-grid { gap: 45px; }
    .contact-grid { grid-template-columns: 1fr; gap: 42px; }
    .contact-copy { max-width: 650px; }
    .auth-shell { display: block; }
    .auth-story { display: none; }
    .dashboard-shell { display: block; }
    .sidebar { transform: translateX(-102%); transition: transform .22s; box-shadow: 10px 0 30px rgba(0,0,0,.18); }
    .sidebar.open { transform: translateX(0); }
    .dashboard-main { width: 100%; }
    .sidebar-toggle { display: inline-grid; place-items: center; }
    .dashboard-grid, .security-grid { grid-template-columns: 1fr; }
    .phase-banner { align-items: flex-start; flex-direction: column; }
    .course-hero-grid, .course-content-grid, .project-grid { grid-template-columns: 1fr; }
    .course-visual { min-height: 400px; max-width: 650px; }
    .course-visual img { width: 100%; }
    .course-content-grid, .project-grid { gap: 45px; }
    .course-anchor-nav { top: 67px; }
    .curriculum-heading { align-items: flex-start; flex-direction: column; }
    .related-grid { grid-template-columns: 1fr 1fr; }
    .weekly-board { grid-template-columns: 1fr; }
    .learning-dashboard-grid, .record-grid, .operations-grid, .batch-detail-grid { grid-template-columns: 1fr; }
    .learning-summary-bar { grid-template-columns: repeat(3, 1fr); }
    .learning-summary-bar .button { grid-column: 1 / -1; margin: 12px; }
    .attendance-list article { grid-template-columns: 38px 1fr; }
    .status-options { grid-column: 1 / -1; }
    .assessment-work-grid, .quiz-intro-grid, .submission-layout, .authoring-layout, .review-layout { grid-template-columns: 1fr; }
    .question-picker { position: static; }
    .eligibility-panel { grid-template-columns: 1fr; }
    .review-queue-grid { grid-template-columns: 1fr; }
    .tutor-layout, .knowledge-grid, .agent-run-grid, .report-workspace, .system-grid { grid-template-columns: 1fr; }
    .tutor-history { max-height: 320px; overflow: auto; }
    .report-history-grid { grid-template-columns: 1fr; }
    .agent-flow-visual { min-width: 250px; }
    .student-ai-callout { grid-template-columns: 90px 1fr; }
    .student-ai-visual svg { width: 90px; }
    .student-ai-callout .button { grid-column: 2; justify-self: start; }
    .career-hero { grid-template-columns: 1fr; }
    .career-launch-visual { max-width: 450px; }
    .career-profile-grid, .portfolio-workspace, .success-review-grid, .success-operations-grid { grid-template-columns: 1fr; }
    .career-milestone-track article { grid-template-columns: 42px 1fr; }
    .career-milestone-track form { grid-column: 2; }
}

@media (max-width: 600px) {
    .container { width: min(calc(100% - 28px), var(--container)); }
    .navbar { height: 67px; }
    .brand-mark { width: 37px; height: 37px; }
    .hero { padding: 43px 0 55px; }
    .programming-progress-svg { width: auto; min-width: 1050px; left: 50%; opacity: .32; transform: translateX(-50%); }
    .programming-code-card, .programming-symbol { display: none; }
    .hero h1 { font-size: 43px; }
    .hero-copy > p { font-size: 16px; }
    .hero-actions, .hero-actions .button { width: 100%; }
    .hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .hero-trust > span { min-width: 0; margin: 0; padding: 0; border: 0; }
    .hero-panel { padding: 21px; border-radius: 18px; }
    .hero-visual-panel { padding: 16px; }
    .hero-svg-wrap { margin-inline: -12px; }
    .hero-visual-footer { align-items: flex-start; flex-direction: column; }
    .hero-visual-footer strong { max-width: none; text-align: left; }
    .path-list > div { grid-template-columns: 32px 1fr; }
    .path-list b { display: none; }
    .proof-grid { grid-template-columns: 1fr 1fr; }
    .proof-grid > span { border: 0; }
    .section { padding: 70px 0; }
    .section-heading h2, .fee-section h2, .final-cta h2 { font-size: 36px; }
    .course-grid, .learning-cycle { grid-template-columns: 1fr; }
    .learning-cycle article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line) !important; }
    .learning-cycle article:last-child { border-bottom: 0 !important; }
    .learning-cycle h3 { margin-top: 20px; }
    .course-card { min-height: 290px; }
    .beginner-welcome { grid-template-columns: 64px 1fr; padding: 16px; }
    .beginner-welcome svg { width: 64px; height: 64px; }
    .curriculum-map { padding: 24px 20px; border-radius: 22px; }
    .curriculum-journey-svg { display: none; }
    .curriculum-map-labels { position: relative; grid-template-columns: 1fr; gap: 0; margin: 26px 0 0; }
    .curriculum-map-labels::before { content: ""; position: absolute; left: 17px; top: 17px; bottom: 17px; width: 2px; background: linear-gradient(#60a5fa, #818cf8, #c084fc, #34d399); }
    .curriculum-map-labels span { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 0 12px; padding: 10px 0; text-align: left; }
    .curriculum-map-labels i { z-index: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; color: white; background: #343e72; border: 3px solid #202743; border-radius: 50%; }
    .curriculum-map-labels strong, .curriculum-map-labels small { grid-column: 2; }
    .course-stages { gap: 38px; margin-top: 45px; }
    .course-stage-heading { grid-template-columns: 48px 1fr; gap: 13px; }
    .stage-number { width: 46px; height: 46px; border-radius: 14px; }
    .course-stage-heading h3 { font-size: 20px; }
    .course-stage-heading p { margin-top: 5px; }
    .course-card { padding: 20px; }
    .roadmap-list article { grid-template-columns: 1fr; gap: 7px; }
    .check-list { grid-template-columns: 1fr; }
    .price-card { padding: 27px; }
    .price-card > strong { font-size: 45px; }
    .contact-copy h2 { font-size: 36px; }
    .contact-map { border-width: 5px; border-radius: 18px; }
    .contact-map-canvas { height: 360px; }
    .contact-map-caption { align-items: flex-start; flex-direction: column; gap: 7px; }
    .contact-card { grid-template-columns: 44px 1fr auto; padding: 14px; }
    .contact-card-icon { width: 44px; height: 44px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-contact { grid-column: auto; }
    .footer-bottom { flex-direction: column; gap: 5px; }
    .whatsapp-fab { right: 14px; bottom: 14px; width: 54px; height: 54px; padding: 8px; }
    .whatsapp-fab span { width: 36px; height: 36px; }
    .whatsapp-fab strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .auth-main { padding: 30px 18px; }
    .back-link { margin-bottom: 26px; }
    .dashboard-header { padding: 0 16px; }
    .status-pill { display: none; }
    .dashboard-content { padding: 22px 15px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .page-heading h1 { font-size: 27px; }
    .stat-grid { grid-template-columns: 1fr; }
    .phase-steps { min-width: 100%; }
    .table-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
    .search-box { width: 100%; }
    .toolbar-note { display: none; }
    .inline-security-form { align-items: stretch; flex-direction: column; }
    .placeholder-steps span b { display: none; }
    .course-hero { padding: 22px 0 50px; }
    .breadcrumbs { margin-bottom: 32px; }
    .course-hero h1 { font-size: 43px; }
    .course-hero-actions, .course-hero-actions .button { width: 100%; }
    .course-quick-stats { grid-template-columns: 1fr 1fr; gap: 18px 0; }
    .course-quick-stats > span:nth-child(2) { border: 0; }
    .course-visual { min-height: 320px; }
    .visual-label.top { top: 20px; }
    .visual-label.bottom { bottom: 20px; }
    .course-anchor-nav .container { gap: 23px; }
    .course-facts, .outcome-grid, .related-grid { grid-template-columns: 1fr; }
    .module-card summary { grid-template-columns: 43px 1fr 28px; gap: 11px; min-height: 80px; padding: 13px; }
    .module-number { width: 39px; height: 39px; }
    .module-title strong { font-size: 14px; }
    .module-body { padding: 0 13px 13px; }
    .class-row { grid-template-columns: 1fr auto; gap: 8px; }
    .class-type { grid-column: 1; justify-self: start; }
    .class-main { grid-column: 1 / -1; }
    .class-duration { grid-column: 2; grid-row: 1; }
    .delivery-cycle { grid-template-columns: 1fr; }
    .delivery-cycle article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line) !important; }
    .delivery-cycle article:last-child { border-bottom: 0 !important; }
    .weekly-board ol { grid-template-columns: 1fr; }
    .course-final-cta .container { align-items: flex-start; flex-direction: column; }
    .course-final-cta .button { width: 100%; }
    .student-course-strip, .enrolled-course-grid, .batch-card-grid, .form-grid { grid-template-columns: 1fr; }
    .learning-course-header { grid-template-columns: 1fr; }
    .course-progress-ring { width: 105px; height: 105px; }
    .course-progress-ring > div { width: 79px; height: 79px; }
    .learning-summary-bar { grid-template-columns: 1fr; }
    .student-lesson { grid-template-columns: 32px 1fr; padding: 14px; }
    .lesson-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .schedule-list article { grid-template-columns: 62px 1fr; gap: 13px; }
    .schedule-action { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
    .inline-operation-form { grid-template-columns: 1fr; }
    .inline-operation-form .button { width: 100%; }
    .attendance-toolbar { flex-direction: column; }
    .status-options { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .status-options span { min-width: 0; }
    .attendance-submit { align-items: stretch; flex-direction: column; }
    .attendance-submit .button { width: 100%; }
    .batch-card footer { flex-direction: column; gap: 5px; }
    .heading-actions { width: 100%; }
    .heading-actions .button { flex: 1; }
    .assessment-card-grid, .certificate-grid, .authoring-actions { grid-template-columns: 1fr; }
    .work-list a { grid-template-columns: 34px 1fr; }
    .work-list a > .badge { grid-column: 2; justify-self: start; }
    .quiz-options { grid-template-columns: 1fr; }
    .quiz-submit-bar { align-items: stretch; flex-direction: column; }
    .quiz-submit-bar .button { width: 100%; }
    .answer-review footer { flex-direction: column; gap: 5px; }
    .eligibility-metrics, .eligibility-reasons { grid-template-columns: 1fr 1fr; }
    .verification-search { grid-template-columns: 1fr; }
    .verification-search .button { width: 100%; }
    .public-certificate > header { align-items: flex-start; flex-wrap: wrap; padding: 20px; }
    .verification-status { margin-left: 0; }
    .certificate-body { padding: 38px 20px; }
    .certificate-body h2 { font-size: 30px; }
    .public-certificate > footer { grid-template-columns: 1fr; }
    .manual-grade-row { grid-template-columns: 1fr; }
    .question-table-title { min-width: 300px; }
    .revoke-form { align-items: stretch; flex-direction: column; }
    .revoke-form input { width: 100%; }
    .application-hero { padding: 58px 0; }
    .application-hero h1 { font-size: 46px; }
    .application-promise { grid-template-columns: 1fr; }
    .application-summary, .application-form-card { padding: 22px; }
    .application-actions { align-items: stretch; flex-direction: column; }
    .application-actions .button { width: 100%; }
    .receipt-details { grid-template-columns: 1fr; }
    .receipt-details div:nth-child(odd), .receipt-details div:nth-child(even) { padding: 15px 0; border-right: 0; }
    .receipt-amount strong { font-size: 38px; }
    .payment-receipt > header, .payment-receipt > footer { align-items: flex-start; flex-direction: column; }
    .intelligence-heading { align-items: flex-start; }
    .tutor-orbit { width: 170px; margin: -18px 0 -15px auto; }
    .tutor-chat { min-height: 560px; }
    .tutor-message { max-width: 100%; }
    .tutor-question-row { grid-template-columns: 1fr; }
    .tutor-question-row .button { width: 100%; }
    .tutor-composer > .field { grid-template-columns: 1fr; }
    .agent-flow-visual { width: 100%; min-width: 0; }
    .agent-workflow-grid, .health-grid, .settings-ledger > div:last-child { grid-template-columns: 1fr; }
    .approval-callout { align-items: stretch; flex-direction: column; }
    .report-tabs { margin-inline: -2px; }
    .mini-chart > div:not(.empty-state) { grid-template-columns: 70px 1fr 35px; }
    .notification-inbox > article { grid-template-columns: 36px 1fr; }
    .notification-inbox article form { grid-column: 2; }
    .notification-type { width: 36px; height: 36px; }
    .student-ai-callout { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
    .student-ai-visual { display: none; }
    .student-ai-callout .button { grid-column: 1; width: 100%; margin-top: 10px; }
    .career-hero { padding: 25px 22px; }
    .career-hero h1 { font-size: 33px; }
    .career-launch-visual { margin-top: 8px; }
    .career-hero-actions, .career-hero-actions .button { width: 100%; }
    .career-hero-actions { flex-direction: column; }
    .career-milestone-track article { grid-template-columns: 36px 1fr; }
    .career-milestone-track form { grid-column: 1 / -1; grid-template-columns: 1fr; }
    .verified-skill-list, .portfolio-card-grid, .opportunity-grid, .career-ledgers { grid-template-columns: 1fr; }
    .success-review-list .project-review-form { grid-template-columns: 1fr; }
    .pipeline-update { grid-template-columns: 1fr; min-width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    .sidebar, .dashboard-header, .receipt-page-heading, .alert { display: none !important; }
    .dashboard-main { margin: 0; }
    .dashboard-content { padding: 0; }
    .payment-receipt { max-width: none; border: 0; border-radius: 0; box-shadow: none; }
}