:root {
  --ink: #13213a;
  --muted: #6b7280;
  --canvas: #f5f7fb;
  --line: #dde3ee;
  --accent: #1867db;
  --mint: #20a97b;
}

body { background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-nav { background: rgba(255, 255, 255, .93); border-bottom: 1px solid #e0e6ef; backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 1030; }
.app-nav-inner { align-items: center; display: flex; gap: 1rem; justify-content: space-between; min-height: 3.85rem; }
.app-brand { color: #142a49; font-size: .95rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.app-brand:hover { color: #1867db; }
.app-nav-links { align-items: center; display: flex; gap: .2rem; }
.app-nav-links a { border-radius: .45rem; color: #64748b; font-size: .82rem; font-weight: 750; padding: .45rem .65rem; text-decoration: none; }
.app-nav-links a:hover { background: #eef5ff; color: #1d65c4; }
.app-nav-links a.is-active { background: #e8f2ff; color: #1d65c4; }
.app-page[hidden] { display: none !important; }
.page-heading { margin-bottom: 1.5rem; }
.hero-section { background: radial-gradient(circle at 85% 20%, #2459a6 0, transparent 31%), linear-gradient(125deg, #10213d, #172d53); color: #fff; }
.eyebrow { color: #a9c8ff; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.hero-note { border-left: 1px solid rgba(255,255,255,.28); padding-left: 1.2rem; font-size: 1.04rem; }
.mt-n4 { margin-top: -1.6rem; }
.progress-panel { border-radius: 1.15rem; }
.progress { height: .72rem; background: #e6edf9; }
.progress-bar { background: linear-gradient(90deg, var(--accent), #4d9bf8); transition: width .25s ease; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 1.1rem 1.25rem; height: 100%; }
.stat-card span { color: var(--muted); display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.stat-card strong { font-size: 1rem; }
.study-schedule { background: #fff; border: 1px solid var(--line); border-radius: 1.15rem; padding: 1.5rem; }
.schedule-heading { align-items: end; display: flex; gap: 1rem; justify-content: space-between; }
.schedule-heading > div { max-width: 48rem; }.schedule-heading .text-secondary { font-size: .9rem; line-height: 1.5; }
.schedule-badge { background: #eaf4ff; border-radius: 99rem; color: #2468bd; flex: none; font-size: .7rem; font-weight: 800; padding: .42rem .6rem; text-transform: uppercase; }
.track-summary { align-items: center; background: linear-gradient(120deg, #eef6ff, #f8fbff); border: 1px solid #d4e6fc; border-left: 4px solid #2774d4; border-radius: .75rem; display: grid; gap: 1rem; grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr); padding: .9rem 1rem; }.track-summary span { color: #2868b7; display: block; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.track-summary h3 { color: #1e426e; font-size: 1rem; margin: .18rem 0 0; }.track-summary p { color: #4e6884; font-size: .8rem; line-height: 1.45; margin: 0; }
.schedule-lanes { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.schedule-lane { background: #f8faff; border: 1px solid #dce7f5; border-radius: .75rem; padding: .85rem; }.schedule-lane.is-primary { background: #f1f7ff; border-color: #bad9fc; }.schedule-lane.is-support { background: #f5fbf8; border-color: #c9eadc; }.schedule-lane.is-habit { background: #faf8ff; border-color: #dfd5f6; }.schedule-lane > span { color: #1d68c8; display: block; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.schedule-lane.is-support > span { color: #25805e; }.schedule-lane.is-habit > span { color: #7650ab; }.schedule-lane h3 { color: #294869; font-size: .88rem; margin: .28rem 0; }.schedule-lane p { color: #67778d; font-size: .75rem; line-height: 1.42; margin: 0; }
.schedule-days { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.schedule-day { border: 1px solid #e2e8f0; border-radius: .7rem; padding: .8rem; }.schedule-day > div { align-items: baseline; display: flex; justify-content: space-between; gap: .5rem; }.schedule-day span { color: #2e6097; font-size: .73rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.schedule-day strong { color: #57708e; font-size: .72rem; white-space: nowrap; }.schedule-day ul { color: #596b82; font-size: .74rem; line-height: 1.4; margin: .58rem 0 0; padding-left: 1rem; }.schedule-day li + li { margin-top: .25rem; }
.schedule-note { border-top: 1px solid #e7edf5; color: #64748b; font-size: .78rem; line-height: 1.45; margin-top: 1rem; padding-top: .85rem; }
.module-route { background: #fff; border: 1px solid var(--line); border-radius: 1.15rem; padding: 1.5rem; }.module-route-phases { display: grid; gap: .75rem; }.module-route-phase { border: 1px solid #e0e8f3; border-radius: .75rem; display: grid; gap: .9rem; grid-template-columns: minmax(9rem, .55fr) minmax(14rem, .95fr) minmax(20rem, 1.6fr); padding: .9rem; }.module-route-phase header span { color: #246cc5; font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.module-route-phase h3 { color: #29486a; font-size: .9rem; margin: .25rem 0; }.module-route-phase header small { color: #5b7595; display: block; font-size: .66rem; line-height: 1.35; }.module-route-phase > p { color: #64758c; font-size: .78rem; line-height: 1.42; margin: 0; }.module-route-chips { align-content: flex-start; display: flex; flex-wrap: wrap; gap: .35rem; }.module-route-chips button { background: #f1f7ff; border: 1px solid #d3e5fb; border-radius: .4rem; color: #275788; cursor: pointer; font-size: .71rem; line-height: 1.25; padding: .34rem .45rem; text-align: left; }.module-route-chips button:hover { background: #e4f1ff; border-color: #9ac5f3; }.module-route-chips button span { color: #1d6bc8; font-size: .63rem; font-weight: 800; margin-right: .25rem; }
.skill-map-card { background: #fff; border: 1px solid var(--line); border-radius: 1.15rem; padding: 1.5rem; }
.skill-map-top { align-items: center; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(18rem, .9fr); }
.role-targets { align-content: flex-start; display: flex; flex-wrap: wrap; gap: .45rem; }
.role-target::before { color: #2c78d8; content: "●"; font-size: .55rem; margin-right: .35rem; vertical-align: .1rem; }
.role-target { background: #f6f9fe; border: 1px solid #dce7f7; border-radius: 99rem; color: #3c587a; padding: .38rem .6rem; }
.role-target strong { color: #294b74; font-size: .75rem; }
.role-target span { color: #1f6cc9; font-size: .68rem; font-weight: 800; margin-left: .25rem; }
.role-target small { display: none; }
.learning-loop { align-items: center; border-top: 1px solid #e5ebf4; display: flex; flex-wrap: wrap; gap: .45rem; padding-top: 1rem; }
.learning-step { align-items: baseline; display: flex; gap: .35rem; }
.learning-step:not(:last-child)::after { color: #98a9be; content: "→"; font-size: .9rem; margin-left: .25rem; }
.learning-step .step-number { color: #1d6bda; font-size: .65rem; font-weight: 800; letter-spacing: .06em; }
.learning-step strong { color: #2d405c; font-size: .82rem; }
.learning-step p { color: #718096; font-size: .75rem; margin: 0; }
.skill-tree-disclosure { border-top: 1px solid #e5ebf4; }
.skill-tree-disclosure summary { color: #285f9c; cursor: pointer; font-size: .82rem; font-weight: 750; list-style-position: inside; padding-top: 1rem; }
.tree-branches { display: grid; gap: .8rem; grid-template-columns: repeat(5, minmax(190px, 1fr)); margin-top: 1.3rem; overflow-x: auto; padding-bottom: .35rem; }
.branch-card { border: 1px solid #dce4ef; border-radius: .85rem; min-width: 190px; overflow: hidden; }
.branch-title { color: #fff; font-size: .8rem; font-weight: 800; padding: .65rem .75rem; }
.branch-blue .branch-title { background: #2867bb; }.branch-purple .branch-title { background: #7150ad; }.branch-green .branch-title { background: #268662; }.branch-rose .branch-title { background: #ba5874; }.branch-amber .branch-title { background: #af7418; }
.branch-body { padding: .7rem; }
.stage-node { border-left: 2px solid #d7e1ee; padding: 0 0 .75rem .65rem; position: relative; }
.stage-node:last-child { padding-bottom: 0; }
.stage-node::before { background: #fff; border: 2px solid #8ca6c7; border-radius: 50%; content: ""; height: .48rem; left: -.34rem; position: absolute; top: .1rem; width: .48rem; }
.stage-node.is-core { border-left-color: #59a884; }.stage-node.is-core::before { background: #59a884; border-color: #59a884; }
.stage-label { color: #52647b; display: block; font-size: .66rem; font-weight: 800; letter-spacing: .03em; line-height: 1.3; margin-bottom: .25rem; text-transform: uppercase; }
.stage-node ul { color: #55657b; font-size: .72rem; line-height: 1.35; margin: 0; padding-left: 1rem; }
.stage-node li + li { margin-top: .22rem; }
.module-refs { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .45rem; }
.module-ref { background: #ebf4ff; border: 0; border-radius: .3rem; color: #2564ad; cursor: pointer; font-size: .64rem; font-weight: 700; padding: .18rem .3rem; text-decoration: none; }
.module-ref:hover { background: #d6eaff; color: #164f92; }
.timeline-card { background: #fff; border: 1px solid var(--line); border-radius: 1.15rem; padding: 1.5rem; }
.timeline-legend { align-items: center; color: #617087; display: flex; flex-wrap: wrap; font-size: .73rem; gap: .45rem 1.1rem; }
.timeline-legend span { align-items: center; display: inline-flex; gap: .35rem; }
.legend-swatch { background: #2469c9; border-radius: .2rem; display: inline-block; height: .65rem; width: 1rem; }
.legend-swatch.is-optional { background: #f5f9ff; border: 2px dashed #7558ae; }
.timeline-note { border-top: 1px solid #e8edf4; color: #64748b; font-size: .74rem; line-height: 1.45; margin-top: .8rem; padding-top: .8rem; }
.timeline-chart { overflow-x: auto; padding-bottom: .35rem; }
.timeline-chart svg { display: block; min-width: 840px; }
.timeline-chart .week-label { fill: #728096; font-size: 11px; font-weight: 800; text-anchor: middle; }
.timeline-chart .core-boundary { stroke: #2c76d3; stroke-dasharray: 5 4; stroke-width: 2; }
.timeline-chart .core-boundary-label { fill: #266bc2; font-size: 10px; font-weight: 800; }
.timeline-chart .lane-label { fill: #5a6980; font-size: 11px; font-weight: 800; text-anchor: end; }
.timeline-chart .item-label { fill: #fff; font-size: 11px; font-weight: 750; pointer-events: none; }
.timeline-chart .item-label.is-optional { fill: #315574; }
.timeline-chart .item-range { fill: rgba(255,255,255,.8); font-size: 9px; pointer-events: none; }
.timeline-chart .dependency { fill: none; stroke: #93a4ba; stroke-dasharray: 3 3; stroke-width: 1.4; }
.timeline-chart .dependency-arrow { fill: #93a4ba; }
.specialization-card { background: #fff; border: 1px solid var(--line); border-radius: 1.15rem; padding: 1.5rem; }
.specialization-heading { align-items: end; display: grid; gap: 1.5rem; grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.3fr); }.specialization-heading > p { font-size: .88rem; line-height: 1.5; }
.specialization-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }.specialization-option { border: 1px solid #dfe7f2; border-radius: .9rem; display: flex; flex-direction: column; padding: 1.15rem; }.specialization-option.is-recommended { border-color: #83b6f4; box-shadow: inset 0 0 0 1px #dbeaff; }
.recommended-badge { background: #e7f2ff; border-radius: 99rem; color: #2466ba; font-size: .63rem; font-weight: 800; padding: .25rem .42rem; white-space: nowrap; }
.specialization-skill { border-top: 1px solid #edf1f6; padding: .62rem 0; }.specialization-skill span, .specialization-proof span { color: #66788f; display: block; font-size: .65rem; font-weight: 800; letter-spacing: .07em; margin-bottom: .18rem; text-transform: uppercase; }.specialization-skill strong { color: #2f4f75; font-size: .82rem; line-height: 1.4; }.specialization-skill p { color: #62738a; font-size: .78rem; line-height: 1.4; margin: 0; }
.specialization-why { color: #55657a; font-size: .79rem; line-height: 1.45; margin: .3rem 0 .8rem; }.specialization-proof { background: #f2faf7; border-left: 3px solid #38a47d; border-radius: .35rem; color: #2a5f4d; font-size: .76rem; line-height: 1.4; padding: .55rem .65rem; }.specialization-proof span { color: #2a8063; }.specialization-proof strong { font-weight: 650; }
.specialization-modules { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .8rem; }.specialization-modules button { background: #edf5ff; border: 0; border-radius: .3rem; color: #2564ad; font-size: .66rem; font-weight: 800; padding: .23rem .35rem; }.specialization-modules button:hover { background: #d9eaff; }
.module-workspace { background: #fff; border: 1px solid var(--line); border-radius: 1.1rem; min-height: 34rem; overflow: hidden; }
.module-tabs { background: #f8faff; border-bottom: 1px solid var(--line); display: flex; gap: .35rem; overflow-x: auto; overflow-y: hidden; padding: .6rem; }
.module-tab { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: .5rem; color: #62728a; flex: 0 0 11.5rem; padding: .55rem .7rem; text-align: left; transition: background .16s ease, color .16s ease; }
.module-tab:hover { background: #eef5ff; color: #244f86; }.module-tab.is-active { background: #e9f2ff; border-bottom-color: var(--accent); color: #193f70; }
.module-tab span, .module-tab strong, .module-tab small { display: block; }.module-tab span { color: #3076d5; font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.module-tab strong { font-size: .8rem; line-height: 1.25; margin-top: .1rem; }.module-tab small { display: none; }
.module-panel { background: #fff; display: flex; flex-direction: column; padding: 1.5rem; }.module-panel-header { align-items: flex-start; border-bottom: 1px solid #e8edf4; display: flex; gap: 1rem; justify-content: space-between; padding-bottom: 1rem; }.module-panel-header .text-secondary { font-size: .9rem; line-height: 1.45; }.module-progress { background: #edf5ff; border-radius: 99rem; color: #2768bd; flex: none; font-size: .72rem; font-weight: 800; padding: .35rem .55rem; }
.module-panel-body { display: grid; gap: 1.5rem; grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.28fr); padding: 1.2rem 0; }.module-checklist-pane { border-right: 1px solid #e8edf4; padding-right: 1.25rem; }.module-checklist-pane .h6 { color: #284663; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }.module-curriculum-pane .module-curriculum { border-top: 0; margin-top: 0; padding-top: 0; }
.module-card { border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: 0 .2rem .9rem rgba(25, 50, 90, .04); overflow: hidden; }
.module-card.is-complete { border-color: #9ce1ca; }
.module-card .card-header { background: white; border-bottom: 0; padding: 1.35rem 1.35rem .8rem; }
.module-number { color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.module-card .accordion-button { background: #fff; box-shadow: none; color: var(--ink); padding: .7rem 1.35rem 1.25rem; font-size: .92rem; font-weight: 700; }
.module-card .accordion-button:not(.collapsed) { color: var(--accent); }
.module-card .accordion-button::after { transform: scale(.8); }
.module-card .accordion-body { padding: .1rem 1.35rem 1.35rem; }
.module-summary { color: var(--muted); font-size: .93rem; min-height: 2.8rem; }
.badge-soft { background: #eef5ff; color: #1b5cae; font-weight: 700; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { border-top: 1px solid #edf0f5; padding: .75rem 0; }
.checklist li:first-child { border-top: 0; }
.form-check-input { cursor: pointer; margin-top: .3rem; }
.form-check-input:checked { background-color: var(--mint); border-color: var(--mint); }
.form-check-label { color: #334155; cursor: pointer; font-size: .92rem; line-height: 1.45; }
.is-done .form-check-label { color: #8a96a8; text-decoration: line-through; }
.module-curriculum { border-top: 1px solid #e8edf4; margin-top: 1rem; padding-top: 1rem; }
.curriculum-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.curriculum-section { color: #526177; font-size: .8rem; line-height: 1.4; margin-bottom: 1rem; }
.curriculum-label { color: #2b609d; display: block; font-size: .67rem; font-weight: 800; letter-spacing: .08em; margin-bottom: .38rem; text-transform: uppercase; }
.curriculum-section ul, .chapter-list { margin: 0; padding-left: 1.15rem; }
.curriculum-section li + li, .chapter-list li + li { margin-top: .28rem; }
.chapter-list { color: #344c6b; font-weight: 600; }
.project-milestone { background: #edf7f3; border-left: 3px solid #35a37e; border-radius: .35rem; color: #245b48; font-size: .79rem; line-height: 1.4; margin-bottom: 1rem; padding: .7rem .8rem; }
.project-milestone .curriculum-label { color: #2b8064; }
.project-milestone strong { display: block; font-weight: 650; }
.exit-list { list-style: none; padding-left: 0 !important; }
.exit-list li { padding-left: 1.35rem; position: relative; }
.exit-list li::before { color: #2c9a75; content: "✓"; font-weight: 800; left: 0; position: absolute; }
.resource-grid { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.resource-link { background: #f7faff; border: 1px solid #dbe8f9; border-radius: .55rem; color: #27486d; display: block; padding: .65rem .7rem; text-decoration: none; }
.resource-link:hover { background: #eef6ff; border-color: #9dc4f3; color: #153f73; }
.resource-link strong, .resource-link span, .resource-link small { display: block; }
.resource-link strong { font-size: .78rem; line-height: 1.3; }.resource-link > span:not(.resource-priority) { color: #627995; font-size: .68rem; margin-top: .1rem; }.resource-link small { color: #63758b; font-size: .67rem; line-height: 1.35; margin-top: .3rem; }
.resource-priority { color: #1e65be !important; font-size: .62rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.outcome { background: #f2faf7; border-left: 3px solid var(--mint); border-radius: .4rem; color: #25654f; font-size: .86rem; padding: .7rem .85rem; }
.ready-card { background: linear-gradient(125deg, #ecf5ff, #f5faff); border: 1px solid #d7e7fb; border-radius: 1.1rem; padding: 1.75rem; }
thead th { background: #f8fafc !important; color: #64748b !important; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
td, th { padding: .95rem 1.2rem !important; }
@media (max-width: 991.98px) { .schedule-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .module-route-phase { grid-template-columns: minmax(10rem, .65fr) minmax(0, 1.35fr); }.module-route-chips { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .skill-map-top, .specialization-heading, .specialization-grid, .schedule-lanes { grid-template-columns: 1fr; } .schedule-heading { align-items: flex-start; flex-direction: column; } .track-summary, .module-route-phase { grid-template-columns: 1fr; } .module-route-chips { grid-column: auto; } .module-workspace { min-height: 0; } .module-tabs { padding: .45rem; } .module-tab { flex-basis: 10rem; padding: .6rem; } .module-panel { padding: 1.15rem; } .module-panel-body { grid-template-columns: 1fr; } .module-checklist-pane { border-bottom: 1px solid #e8edf4; border-right: 0; padding-bottom: 1rem; padding-right: 0; } }
@media (max-width: 575.98px) { .app-nav-inner { align-items: flex-start; flex-direction: column; gap: .25rem; padding-bottom: .55rem; padding-top: .55rem; } .app-nav-links { max-width: 100%; overflow-x: auto; white-space: nowrap; } .app-nav-links a { padding: .36rem .5rem; } .display-4 { font-size: 2.35rem; } .role-targets, .curriculum-grid { grid-template-columns: 1fr; } .learning-step:not(:last-child)::after { margin-right: .2rem; } .module-card .card-header { padding: 1.15rem 1.15rem .65rem; } .module-card .accordion-button, .module-card .accordion-body { padding-left: 1.15rem; padding-right: 1.15rem; } }