:root {
  --bg: #0b0f17;
  --bg-soft: #0f1524;
  --panel: #141b2e;
  --panel-2: #1a2440;
  --border: #24334f;
  --text: #e6ecf7;
  --muted: #8b96ad;
  --accent: #5b8cff;
  --green: #22c55e;
  --pink: #e93e60;
  --purple: #8b5cf6;
  --amber: #f59e0b;
  --radius: 14px;
  --shadow: 0 10px 34px rgba(3, 8, 20, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 700px at 80% -10%, #14203d 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 30%, #14203d 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(11, 15, 23, 0.75);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 22px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; }
.brand .logo {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  font-size: 16px;
}
.search {
  flex: 1; position: relative; max-width: 420px; margin-left: auto;
}
.search input {
  width: 100%;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  padding: 9px 34px 9px 14px; font-size: 14px; outline: none;
  transition: border-color .2s;
}
.search input:focus { border-color: var(--accent); }
.search .mag { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; }
.progress-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 12px; white-space: nowrap;
}
.progress-chip .bar { width: 70px; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.progress-chip .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 3px; transition: width .4s; }
.progress-chip span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 40px 22px 80px; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 40px 10px 30px; }
.eyebrow {
  display: inline-block; padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--accent); font-size: 13px; font-weight: 500; margin-bottom: 18px;
  letter-spacing: 0.3px;
}
.hero h1 {
  font-size: clamp(34px, 6vw, 62px); font-weight: 800;
  letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 18px;
}
.grad { background: linear-gradient(90deg, var(--accent), var(--green) 55%, var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { max-width: 640px; margin: 0 auto; color: var(--muted); font-size: 18px; }

.careers-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 42px;
}
.career-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; text-align: left; position: relative; overflow: hidden;
  transition: transform .25s, border-color .25s;
}
.career-card:hover { transform: translateY(-4px); border-color: var(--career, var(--accent)); }
.career-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--career, var(--accent)); }
.career-card h3 { font-size: 24px; font-weight: 700; margin: 12px 0 4px; }
.career-card .tag { font-size: 13px; color: var(--career, var(--accent)); font-weight: 600; }
.career-card p { color: var(--muted); font-size: 15px; margin: 12px 0 18px; }

.btn {
  display: inline-block; border-radius: 10px; padding: 11px 20px;
  font-weight: 600; font-size: 14.5px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); transition: .2s;
}
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--purple)); border-color: transparent; color: #fff; }
.btn.primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn.ghost:hover { border-color: var(--accent); color: #fff; }

.path-visual { margin-top: 54px; }
.path-visual h2 { font-size: 22px; margin-bottom: 22px; text-align: left; }
.milestones {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.milestone {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; min-width: 150px; display: flex; flex-direction: column; gap: 4px;
  position: relative; transition: .2s;
}
.milestone:hover { border-color: var(--accent); transform: translateY(-3px); }
.milestone .num { font-size: 13px; color: var(--accent); font-weight: 700; }
.milestone b { font-size: 15px; }
.milestone small { color: var(--muted); }

/* ---------- Subnav ---------- */
.subnav { background: rgba(15, 21, 36, 0.7); border-bottom: 1px solid var(--border); position: sticky; top: 55px; z-index: 40; backdrop-filter: blur(10px); }
.subnav .nav-inner { display: flex; gap: 4px; overflow-x: auto; padding: 0 18px; }
.subnav::-webkit-scrollbar { height: 0; }
.subtab {
  padding: 11px 14px; background: none; border: none; color: var(--muted);
  font-weight: 600; font-size: 13.5px; white-space: nowrap; border-bottom: 2px solid transparent; transition: .15s;
}
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Section head + controls ---------- */
.section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.section-head .icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  font-size: 22px; background: var(--panel); border: 1px solid var(--border); flex: none;
}
.section-head h1 { font-size: 28px; letter-spacing: -0.5px; }
.section-head p { color: var(--muted); font-size: 15px; max-width: 680px; }

.controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 26px;
}
.chip {
  padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  transition: .2s;
}
.chip:hover { border-color: var(--accent); }
.chip.active { background: linear-gradient(135deg, var(--accent), var(--purple)); color: #fff; border-color: transparent; }
.chip .count { opacity: .7; margin-left: 4px; font-weight: 400; }

/* ---------- Group ---------- */
.group { margin-bottom: 34px; }
.group-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.group-head h3 { font-size: 18px; font-weight: 700; }
.group-head .rule { flex: 1; height: 1px; background: var(--border); }
.group-head .gcount { font-size: 12.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); padding: 3px 9px; border-radius: 20px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 15px 15px 14px; transition: .18s; display: flex; flex-direction: column; gap: 8px;
  border-left: 3px solid var(--border);
}
.card:hover { border-color: var(--border); transform: translateY(-2px); background: var(--panel-2); }
.card[data-status="maitrisee"] { border-left-color: var(--green); }
.card[data-status="encours"] { border-left-color: var(--amber); }
.card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card .name { font-weight: 650; font-size: 15px; }
.card .desc { color: var(--muted); font-size: 13.5px; }
.card .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }

.badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 6px; }
.badge.debutant { background: rgba(245, 158, 11, .15); color: var(--amber); }
.badge.intermediaire { background: rgba(91, 140, 255, .15); color: var(--accent); }
.badge.avance { background: rgba(236, 72, 88, .15); color: var(--pink, #f472b6); }
.badge.ds { background: rgba(91, 140, 255, .15); color: var(--accent); }
.badge.mle { background: rgba(34, 197, 94, .15); color: var(--green); }
.badge.both { background: rgba(139, 92, 246, .15); color: var(--purple); }

/* Status buttons */
.status-btns { display: flex; gap: 4px; margin-top: 4px; }
.st-btn {
  font-size: 10.5px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); font-weight: 600; transition: .15s; flex: 1; text-align: center;
}
.st-btn:hover { color: var(--text); }
.st-btn.on-a { background: rgba(255,255,255,.06); color: var(--text); border-color: var(--muted); }
.st-btn.on-encours { background: rgba(91,140,255,.18); color: var(--accent); border-color: var(--accent); }
.st-btn.on-maitrisee { background: rgba(34,197,94,.18); color: var(--green); border-color: var(--green); }

/* ---------- Compare table ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 8px; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; font-size: 14px; }
.cmp thead th { background: var(--panel-2); font-size: 13px; letter-spacing: .3px; }
.cmp th.ds-c { color: var(--accent); }
.cmp th.mle-c { color: var(--green); }
.cmp tbody tr { border-top: 1px solid var(--border); }
.cmp tbody td:first-child { font-weight: 600; color: var(--text); width: 22%; }

.roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.role-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.role-panel h3 { margin-bottom: 16px; font-size: 20px; }
.role-panel ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.role-panel li { display: flex; gap: 10px; color: var(--muted); font-size: 15px; align-items: flex-start; }
.role-panel li::before { content: "→"; color: var(--accent); font-weight: 700; flex: none; }

/* ---------- Tabs / nav ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
.tab {
  padding: 8px 6px; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-weight: 600; font-size: 14px; transition: .15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Quiz ---------- */
.quiz-careers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.quiz-careers .chip { font-size: 12px; }
.spaced-review-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 11px; }
.spaced-review-panel > div { display: grid; gap: 3px; }
.spaced-review-panel span { color: var(--muted); font-size: 12px; }
.spaced-review-panel .btn:disabled { cursor: default; opacity: .55; }
.spaced-question-meta { margin: -5px 0 12px; color: var(--muted); font-size: 12px; }
.quiz-level { margin: 0 0 12px; color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.quiz { max-width: 720px; margin: 0 auto; }
.q-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 26px; }
.q-card .q { font-size: 19px; font-weight: 700; margin-bottom: 20px; line-height: 1.4; }
.q-prog { display: flex; gap: 6px; margin-bottom: 22px; }
.q-prog i { flex: 1; height: 5px; border-radius: 3px; background: var(--panel-2); }
.q-prog i.done { background: var(--green); }
.q-prog i.cur { background: var(--accent); }
.q-opt {
  display: block; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: 15px; transition: .15s;
}
.q-opt:hover:not(:disabled) { border-color: var(--accent); }
.q-opt.correct { border-color: var(--green); background: rgba(34,197,94,.12); }
.q-opt.wrong { border-color: var(--pink, #f472b6); background: rgba(236,72,88,.12); }
.q-opt:disabled { cursor: default; opacity: .85; }
.q-explain { margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--panel-2); color: var(--muted); font-size: 14px; border-left: 3px solid var(--accent); }
.quiz-result { text-align: center; padding: 40px 20px; }
.quiz-result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.quiz-theme-results { max-width: 520px; margin: 24px auto 0; text-align: left; }
.quiz-theme-results h3 { margin-bottom: 12px; font-size: 14px; }
.quiz-theme-result { margin-top: 10px; }
.quiz-theme-result > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.quiz-theme-result b { color: var(--text); font-weight: 600; }
.quiz-theme-bar { height: 5px; margin-top: 5px; overflow: hidden; border-radius: 4px; background: var(--panel-2); }
.quiz-theme-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--green)); }
.quiz-result .score { font-size: 64px; font-weight: 800; background: linear-gradient(90deg, var(--accent), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quiz-scorebar { max-width: 420px; margin: 20px auto; height: 10px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.quiz-scorebar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); }

/* ---------- Additional data careers ---------- */
.additional-careers { margin-top: 48px; }
.additional-careers .section-head h2 { font-size: 24px; }
.additional-career-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.additional-role { border-top: 3px solid var(--career-accent, var(--accent)); }
.career-kicker { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.additional-role h3 { margin: 5px 0 8px; }
.additional-career-desc { margin-bottom: 14px; color: var(--muted); font-size: 14px; }
.additional-role ul { margin-bottom: 16px; }
.career-skills { display: grid; gap: 8px; margin: 16px 0; }
.career-skills > b, .career-deliverable > b { font-size: 12px; }
.career-skills > div { display: flex; flex-wrap: wrap; gap: 6px; }
.career-skill { padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-soft); color: var(--muted); font-size: 11px; }
.career-skill:hover { border-color: var(--accent); color: var(--text); }
.career-deliverable { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.career-deliverable > b { color: var(--text); }

/* ---------- Personalized plan ---------- */
.plan-careers { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.weekly-goals { margin: 0 0 20px; padding: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.weekly-goals-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.weekly-goals-head > div > span { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.weekly-goals-head h2 { margin-top: 3px; font-size: 18px; }
.weekly-hours-target { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.weekly-hours-target input { width: 62px; padding: 7px 8px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 14px; text-align: center; }
.weekly-hours-target input:focus { outline: none; border-color: var(--accent); }
.weekly-hours-target small { color: var(--muted); font-size: 11px; }
.weekly-metric-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; }
.weekly-metric-label span { color: var(--muted); }
.weekly-metric .plan-progress, .weekly-skills-block > .plan-progress { margin-top: 7px; }
.weekly-study-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 13px 0 20px; }
.weekly-study-controls label { color: var(--muted); font-size: 12px; }
.weekly-study-controls select, .weekly-skill-add select { min-width: 130px; padding: 9px 10px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 12px; }
.weekly-skills-block { padding-top: 16px; border-top: 1px solid var(--border); }
.weekly-skill-list { display: grid; gap: 7px; margin: 12px 0; list-style: none; }
.weekly-skill-list li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
.weekly-skill-list li > button:first-child { display: flex; flex: 1; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; padding: 2px; text-align: left; color: var(--text); background: none; border: 0; font: inherit; font-size: 12px; }
.weekly-skill-list li > button:first-child small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.weekly-skill-list li.complete > button:first-child small { color: var(--green); }
.weekly-skill-remove { width: 26px; height: 26px; color: var(--muted); background: none; border: 0; border-radius: 6px; font-size: 18px; }
.weekly-skill-remove:hover { color: var(--pink); background: var(--panel-2); }
.weekly-skill-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.weekly-skill-add select { flex: 1; min-width: min(100%, 260px); }
.weekly-skill-add button:disabled { cursor: default; opacity: .5; }
.weekly-help { margin-top: 10px; color: var(--muted); font-size: 11px; }
.weekly-history { margin-top: 16px; border-top: 1px solid var(--border); }
.weekly-history > summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 2px 2px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; }
.weekly-history > summary::-webkit-details-marker { display: none; }
.weekly-history > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 17px; }
.weekly-history[open] > summary::after { content: "−"; }
.weekly-history > summary span { margin-left: 8px; color: var(--muted); font-size: 11px; }
.weekly-history ol { display: grid; gap: 8px; margin-top: 11px; list-style: none; }
.weekly-history li { display: grid; gap: 3px; padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; }
.weekly-history li > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.weekly-history li > div span, .weekly-history li p, .weekly-history li small, .weekly-history-empty { color: var(--muted); font-size: 11px; }
.weekly-history li small { line-height: 1.5; }
.weekly-history-empty { margin-top: 10px; }
.job-match { margin: 0 0 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.job-match > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; cursor: pointer; list-style: none; }
.job-match > summary::-webkit-details-marker { display: none; }
.job-match > summary::after { content: "+"; color: var(--accent); font-size: 18px; }
.job-match[open] > summary::after { content: "−"; }
.job-match > summary span { margin-left: auto; color: var(--muted); font-size: 12px; }
.job-match-body { display: grid; gap: 12px; padding: 0 17px 17px; }
.job-match-body > p, .job-match-note { color: var(--muted); font-size: 12px; }
.job-match-body textarea { width: 100%; resize: vertical; padding: 12px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; outline: none; font: inherit; font-size: 13px; line-height: 1.55; }
.job-match-body textarea:focus { border-color: var(--accent); }
.job-match-body > .btn { justify-self: start; }
.job-match-body > .btn:disabled { cursor: default; opacity: .5; }
.job-match-results { display: grid; gap: 10px; padding-top: 4px; }
.job-match-counts { display: flex; flex-wrap: wrap; gap: 7px; }
.job-match-counts span { padding: 5px 8px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 7px; color: var(--muted); font-size: 11px; }
.job-match-counts span:first-child { color: var(--text); }
.job-match-results ul { display: grid; gap: 6px; list-style: none; }
.job-match-results li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.job-match-skill { display: grid; gap: 2px; padding: 2px; text-align: left; color: var(--text); background: none; border: 0; font: inherit; font-size: 12px; }
.job-match-skill small { color: var(--muted); font-size: 10px; }
.job-match-status { flex: none; padding: 3px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; }
.job-status-maitrisee { color: var(--green); background: rgba(34, 197, 94, .1); }
.job-status-encours { color: var(--amber); background: rgba(245, 158, 11, .1); }
.job-status-a { color: var(--muted); background: var(--bg-soft); }
.job-match-empty { padding: 12px; border-radius: 8px; background: var(--bg-soft); }
.job-match-note { font-size: 10px; }
.application-checklist { margin: 0 0 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.application-checklist > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 17px; cursor: pointer; list-style: none; }
.application-checklist > summary::-webkit-details-marker { display: none; }
.application-checklist > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 18px; }
.application-checklist[open] > summary::after { content: "−"; }
.application-checklist > summary span { margin-left: auto; color: var(--muted); font-size: 12px; }
.application-checklist-body { display: grid; gap: 16px; padding: 0 17px 17px; }
.application-checklist-body > p { color: var(--muted); font-size: 12px; }
.application-checklist-body section { display: grid; gap: 8px; }
.application-checklist-body h3 { color: var(--accent); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.application-checklist-body ul { display: grid; gap: 6px; list-style: none; }
.application-checklist-body li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; }
.application-checklist-body li label { display: flex; align-items: flex-start; gap: 9px; color: var(--text); cursor: pointer; font-size: 12px; }
.application-checklist-body input { flex: none; margin-top: 3px; accent-color: var(--accent); }
.application-checklist-body li.checked label span { color: var(--muted); }
.application-task-action { flex: none; padding: 5px 7px; color: var(--accent); background: none; border: 0; border-radius: 6px; font: inherit; font-size: 10px; font-weight: 700; }
.application-task-action:hover { background: var(--panel-2); }
.application-tracker { margin: 0 0 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.application-tracker > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; cursor: pointer; list-style: none; }
.application-tracker > summary::-webkit-details-marker { display: none; }
.application-tracker > summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 18px; }
.application-tracker[open] > summary::after { content: "−"; }
.application-tracker > summary span { margin-left: auto; color: var(--muted); font-size: 12px; }
.application-tracker-body { display: grid; gap: 13px; padding: 0 17px 17px; }
.application-tracker-note { color: var(--muted); font-size: 11px; }
.application-entry-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 9px; padding: 13px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px; }
.application-entry-form label, .application-entry-fields label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.application-entry-form input, .application-entry-fields input, .application-entry-fields select { width: 100%; min-width: 0; padding: 9px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 12px; }
.application-entry-form input:focus, .application-entry-fields input:focus, .application-entry-fields select:focus { outline: none; border-color: var(--accent); }
.application-entry-form > button { grid-column: 1 / -1; justify-self: start; }
.application-entry-list { display: grid; gap: 8px; }
.application-entry { display: grid; gap: 12px; padding: 13px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px; }
.application-entry-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.application-entry-heading h3 { font-size: 13px; }
.application-entry-heading p, .application-entry-heading a { color: var(--muted); font-size: 11px; }
.application-entry-heading a { display: inline-block; margin-top: 3px; color: var(--accent); }
.application-delete { flex: none; padding: 5px 7px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 10px; }
.application-delete:hover { color: var(--pink); border-color: var(--pink); }
.application-entry-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.application-followup-due { color: var(--amber); font-size: 11px; font-weight: 700; }
.application-tracker-empty { padding: 10px; color: var(--muted); font-size: 12px; }
.plan-summary { padding: 16px 18px; margin-bottom: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.plan-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.plan-summary-row span { color: var(--muted); }
.plan-progress { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 6px; background: var(--panel-2); }
.plan-export { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.plan-export > div { display: grid; gap: 3px; }
.plan-export span { color: var(--muted); font-size: 12px; }
.plan-backup-actions { display: flex !important; flex-wrap: wrap; gap: 8px; }
.plan-backup-message { flex-basis: 100%; }
.portfolio-builder { margin: 0 0 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.portfolio-builder > summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 17px; cursor: pointer; list-style: none; }
.portfolio-builder > summary::-webkit-details-marker { display: none; }
.portfolio-builder > summary::after { content: "+"; color: var(--accent); font-size: 18px; }
.portfolio-builder[open] > summary::after { content: "−"; }
.portfolio-builder > summary span { margin-left: auto; color: var(--muted); font-size: 12px; }
.portfolio-editor { display: grid; gap: 20px; padding: 0 17px 18px; }
.portfolio-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.portfolio-fields label, .portfolio-project-editor label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.portfolio-fields input, .portfolio-project-editor input, .portfolio-project-editor textarea, .portfolio-fields textarea { width: 100%; min-width: 0; padding: 10px 11px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.portfolio-fields input:focus, .portfolio-project-editor input:focus, .portfolio-project-editor textarea:focus, .portfolio-fields textarea:focus { outline: none; border-color: var(--accent); }
.portfolio-bio-field { grid-column: 1 / -1; }
.portfolio-project-editor { display: grid; gap: 12px; }
.portfolio-project-editor h3 { font-size: 14px; }
.portfolio-project-editor fieldset { display: grid; gap: 12px; min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 9px; }
.portfolio-project-editor legend { max-width: 100%; padding: 0 5px; font-size: 12px; font-weight: 700; }
.portfolio-project-editor textarea, .portfolio-fields textarea { resize: vertical; line-height: 1.5; }
.portfolio-link-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portfolio-empty { color: var(--muted); font-size: 13px; }
.portfolio-printable { padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.portfolio-preview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.portfolio-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.portfolio-preview-head h2 { margin: 4px 0; font-size: 26px; letter-spacing: -.5px; }
.portfolio-preview-head p { color: var(--muted); font-size: 14px; }
.portfolio-preview-head > a, .portfolio-preview-links a { color: var(--accent); font-size: 12px; font-weight: 700; }
.portfolio-preview-bio { max-width: 760px; padding: 16px 0; color: var(--muted); font-size: 14px; white-space: pre-wrap; }
.portfolio-preview-section { display: grid; gap: 12px; margin-top: 20px; }
.portfolio-preview-section > h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.portfolio-preview-section > h3 span { color: var(--muted); font-size: 11px; }
.portfolio-skill-row { display: grid; grid-template-columns: minmax(130px, .35fr) 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.portfolio-skill-row b { font-size: 12px; }
.portfolio-skill-row p { color: var(--muted); font-size: 12px; }
.portfolio-preview-project { display: grid; gap: 6px; padding: 14px 15px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; break-inside: avoid; }
.portfolio-preview-project > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.portfolio-preview-project h4 { font-size: 14px; }
.portfolio-preview-project > div:first-child span, .portfolio-preview-project p { color: var(--muted); font-size: 12px; }
.portfolio-preview-project p { white-space: pre-wrap; }
.portfolio-preview-project p b { color: var(--text); }
.portfolio-journal-preview { display: grid; gap: 5px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.portfolio-journal-preview h5 { color: var(--accent); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.portfolio-journal-preview p { white-space: pre-wrap; }
.portfolio-preview-links { display: flex; gap: 14px; margin-top: 3px; }
.portfolio-preview-date { margin-top: 18px; color: var(--muted); font-size: 10px; text-align: right; }
.project .project-complete { padding: 2px 8px; border: 1px solid rgba(34, 197, 94, .35); border-radius: 6px; color: var(--green); font-size: 10.5px; font-weight: 700; }
.project-done-btn { justify-self: start; }
.plan-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--green)); transition: width .3s; }
.plan-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.plan-stage { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 13px; }
.plan-stage.current { border-color: var(--accent); color: var(--text); background: rgba(91, 140, 255, .08); }
.plan-stage.complete .plan-stage-number { color: var(--green); }
.plan-stage-number { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--panel-2); color: var(--accent); font-weight: 700; }
.plan-stage small { margin-left: auto; color: var(--muted); white-space: nowrap; }
.plan-next, .plan-finished { padding: 22px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.plan-next-head { margin-bottom: 16px; }
.plan-next-head .eyebrow { margin-bottom: 8px; }
.plan-next h2, .plan-finished h2 { font-size: 20px; }
.plan-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 20px; }
.plan-skill { display: flex; align-items: center; gap: 9px; padding: 10px 12px; text-align: left; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-soft); color: var(--text); font-size: 13px; }
.plan-skill:hover { border-color: var(--accent); }
.plan-skill > span { color: var(--accent); }
.plan-skill.mastered > span { color: var(--green); }
.plan-skill small { margin-left: auto; color: var(--muted); }
.plan-project { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 15px; margin-bottom: 18px; border-radius: 10px; background: var(--panel-2); }
.plan-project > div { display: grid; gap: 4px; }
.plan-project-label { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.plan-project p { color: var(--muted); font-size: 13px; }
.plan-finished p { margin: 6px 0 16px; color: var(--muted); }
@media (max-width: 700px) { .plan-stages { grid-template-columns: 1fr; } .weekly-goals-head { align-items: flex-start; flex-direction: column; } .job-match > summary, .application-checklist > summary, .application-tracker > summary { flex-wrap: wrap; } .job-match > summary span, .application-checklist > summary span, .application-tracker > summary span { margin-left: 0; } .application-checklist-body li { flex-wrap: wrap; } .application-entry-form, .application-entry-fields { grid-template-columns: 1fr; } .application-entry-form > button { grid-column: auto; } .application-task-action { margin-left: 24px; } .plan-project, .plan-export, .spaced-review-panel { flex-direction: column; align-items: flex-start; } .portfolio-fields, .portfolio-link-fields, .project-journal-grid { grid-template-columns: 1fr; } .portfolio-bio-field { grid-column: auto; } .portfolio-preview-head, .portfolio-preview-project > div:first-child { flex-direction: column; align-items: flex-start; } .portfolio-skill-row { grid-template-columns: 1fr; gap: 4px; } .portfolio-printable { padding: 18px; } .bundle-offer { align-items: flex-start; padding: 17px; } .bundle-price { justify-items: start; } }

/* ---------- Projects ---------- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; align-items: start; }
.project {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 0;
  border-top: 3px solid var(--level-color, var(--accent)); transition: .18s;
}
.project:hover { transform: translateY(-2px); border-color: var(--level-color, var(--accent)); }
.project-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 17px; cursor: pointer; list-style: none; }
.project-summary::-webkit-details-marker { display: none; }
.project-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.project-summary-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.project-summary b { font-size: 15px; line-height: 1.4; }
.project .project-teaser { color: var(--muted); font-size: 13.5px; }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project .project-career { padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
.project-toggle { color: var(--accent); font-size: 20px; line-height: 1; transition: transform .18s; }
.project[open] .project-toggle { transform: rotate(45deg); }
.project-details { display: grid; gap: 14px; padding: 0 17px 18px; }
.project-field h3 { margin-bottom: 4px; color: var(--accent); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.project-field p, .project-field li { color: var(--muted); font-size: 13px; line-height: 1.55; }
.project-field a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.project-field a:hover { color: var(--accent); }
.project-field ol { display: grid; gap: 5px; padding-left: 18px; }
.project-journal { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); }
.project-journal > div:first-child p { color: var(--muted); font-size: 11px; }
.project-journal h3 { margin-bottom: 3px; color: var(--accent); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.project-journal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.project-journal-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.project-journal-grid textarea { width: 100%; resize: vertical; padding: 9px 10px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 12px; line-height: 1.5; font-weight: 400; }
.project-journal-grid textarea:focus { outline: none; border-color: var(--accent); }
.project-review { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); }
.project-review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-review-head h3 { margin: 0 0 2px; color: var(--accent); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.project-review-head span { color: var(--muted); font-size: 10px; }
.project-review-head > b { color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.project-review-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
.review-checks { display: grid; gap: 8px; list-style: none; }
.review-checks label { display: grid; grid-template-columns: 16px 1fr; align-items: start; gap: 8px; cursor: pointer; }
.review-checks input { width: 14px; height: 14px; margin: 2px 0 0; accent-color: var(--green); }
.review-checks span { color: var(--text); font-size: 11px; line-height: 1.5; }
.project-reference { padding-top: 9px; border-top: 1px solid var(--border); }
.project-reference summary { display: flex; justify-content: space-between; gap: 10px; color: var(--text); cursor: pointer; font-size: 11px; font-weight: 650; list-style: none; }
.project-reference summary::-webkit-details-marker { display: none; }
.project-reference summary span { color: var(--accent); font-size: 15px; font-weight: 400; }
.project-reference p { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.55; }

/* ---------- Complete packs ---------- */
.packs-note { display: grid; gap: 4px; max-width: 820px; margin: -6px 0 24px; color: var(--muted); font-size: 14px; }
.packs-note span { color: var(--amber); font-size: 12.5px; font-weight: 600; }
.packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pack-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); border-top: 3px solid var(--purple); }
.pack-cover { display: block; width: calc(100% + 40px); aspect-ratio: 4 / 3; margin: -20px -20px 4px; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.pack-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pack-label { color: var(--amber); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pack-card-top .pack-price { margin-left: auto; color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pack-level { color: var(--muted); font-size: 11px; }
.pack-card h2 { font-size: 17px; line-height: 1.35; }
.pack-career { color: var(--accent); font-size: 12px; font-weight: 600; }
.pack-deliverable { color: var(--muted); font-size: 13.5px; }
.pack-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.pack-actions .btn { padding: 8px 12px; font-size: 12px; text-align: center; }
.pack-demo { border-color: var(--border); }
.pack-buy { align-self: flex-start; }
.pack-sheet { margin-top: 6px; border-top: 1px solid var(--border); }
.pack-sheet summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0 2px; color: var(--text); cursor: pointer; font-size: 12px; font-weight: 650; list-style: none; }
.pack-sheet summary::-webkit-details-marker { display: none; }
.pack-sheet summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sheet-chevron { color: var(--accent); font-size: 17px; font-weight: 400; transition: transform .18s; }
.pack-sheet[open] .sheet-chevron { transform: rotate(45deg); }
.pack-sheet-content { display: grid; gap: 14px; padding-top: 13px; }
.pack-facts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 11px; padding: 11px; border-radius: 8px; background: var(--bg-soft); }
.pack-facts > div { display: grid; align-content: start; gap: 5px; }
.pack-facts small { color: var(--accent); font-size: 9px; font-weight: 750; letter-spacing: .06em; }
.pack-facts span { color: var(--text); font-size: 11px; line-height: 1.45; }
.pack-sheet-content h3 { margin-bottom: 6px; color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.pack-sheet-content ul { display: grid; gap: 5px; list-style: none; }
.pack-sheet-content li { position: relative; padding-left: 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.pack-sheet-content li::before { content: "·"; position: absolute; left: 3px; color: var(--accent); font-weight: 800; }
.pack-limit { padding: 10px 11px; border-left: 2px solid var(--amber); background: rgba(245, 158, 11, .06); color: var(--muted); font-size: 10px; line-height: 1.55; }
.pack-limit b { display: block; margin-bottom: 3px; color: var(--amber); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.pack-price-note { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; }
.pack-price-note span:first-child { color: var(--text); font-weight: 700; }
.bundle-offer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 22px 24px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: linear-gradient(115deg, var(--panel), var(--bg-soft)); }
.bundle-offer > div:first-child > span { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .09em; }
.bundle-offer h2 { margin: 4px 0; font-size: 18px; }
.bundle-offer p { margin: 0; color: var(--muted); font-size: 12px; }
.bundle-price { display: grid; justify-items: end; gap: 3px; white-space: nowrap; }
.bundle-price b { color: var(--text); font-size: 25px; font-variant-numeric: tabular-nums; }
.bundle-price span { color: var(--green); font-size: 11px; font-weight: 650; }

/* ---------- Resources ---------- */
.res-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.res-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; transition: .18s; }
.res-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.res-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.res-card .res-link-mark { color: var(--accent); font-size: 12px; }
.res-card .cat { font-size: 11px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.res-card b { font-size: 15px; }
.res-card span { color: var(--muted); font-size: 13px; }

/* ---------- Search results ---------- */
.no-result { text-align: center; color: var(--muted); padding: 50px 20px; }
.no-result b { font-size: 18px; display: block; margin-bottom: 6px; color: var(--text); }

/* ---------- Lesson modal ---------- */
.card { cursor: pointer; }
.lesson-tag { font-size: 14px; opacity: .8; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(5, 8, 16, 0.72); backdrop-filter: blur(4px); padding: 20px;
  animation: fade .18s ease;
}
.lesson-modal {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px;
  width: 100%; max-width: 720px; max-height: 86vh; overflow: auto; position: relative;
  box-shadow: var(--shadow); animation: pop .18s ease;
}
.lesson-modal::-webkit-scrollbar { width: 8px; }
.lesson-modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.modal-close {
  position: sticky; top: 10px; float: right; margin: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); font-size: 14px;
}
.modal-close:hover { color: var(--text); }
.lesson-body { padding: 6px 28px 30px; }
.lesson-meta { display: flex; gap: 8px; margin-top: 4px; }
.lesson-body h2 { font-size: 26px; margin: 10px 0 8px; letter-spacing: -.3px; }
.lesson-overview { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
.quick-lesson-note { display: inline-block; padding: 3px 8px; border-radius: 6px; background: rgba(91, 140, 255, .12); color: var(--accent); font-size: 11px; font-weight: 700; }
.lesson-practice { padding: 14px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--panel); color: var(--muted); font-size: 14px; }
.lesson-body h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent);
  margin: 22px 0 10px; display: flex; align-items: center; gap: 8px;
}
.lesson-body h4::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.lesson-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lesson-list li { position: relative; padding-left: 22px; color: var(--text); font-size: 14.5px; }
.lesson-list li::before { content: "▹"; position: absolute; left: 0; color: var(--accent); }
.lesson-code {
  background: #0a0e18; border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 13px; line-height: 1.6; overflow-x: auto; color: #d7e2ff;
}
.lesson-res { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lesson-res a { color: var(--accent); }
.lesson-res a:hover { text-decoration: underline; }
.lesson-done { margin-top: 26px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- Interview practice ---------- */
.interview-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.interview-choice { display: grid; gap: 5px; min-width: 0; padding: 14px; text-align: left; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 11px; transition: border-color .18s, background .18s; }
.interview-choice:hover, .interview-choice.active { border-color: var(--accent); background: var(--panel-2); }
.interview-choice > span { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.interview-choice b { font-size: 13px; line-height: 1.35; }
.interview-choice small { color: var(--muted); font-size: 11px; }
.interview-choice i { color: var(--green); font-size: 10px; font-style: normal; font-weight: 700; }
.interview-card { max-width: 900px; margin: 0 auto; padding: clamp(18px, 4vw, 32px); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.interview-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.interview-meta span { padding: 4px 8px; background: var(--panel-2); border-radius: 6px; color: var(--muted); font-size: 11px; }
.interview-card > h2 { margin-bottom: 8px; font-size: clamp(21px, 3vw, 28px); letter-spacing: -.4px; }
.interview-context { margin-bottom: 20px; color: var(--muted); }
.interview-schema { display: grid; gap: 4px; margin: 0 0 20px; padding: 13px 15px; overflow-x: auto; background: #0a0e18; border: 1px solid var(--border); border-radius: 9px; color: #d7e2ff; font: 12px/1.6 "SF Mono", "JetBrains Mono", Consolas, monospace; }
.interview-task { margin-bottom: 18px; padding: 16px; border-left: 3px solid var(--accent); border-radius: 0 9px 9px 0; background: var(--bg-soft); }
.interview-task h3 { margin-bottom: 5px; font-size: 13px; }
.interview-task p { color: var(--text); font-size: 14px; }
.interview-answer-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.interview-answer { display: block; width: 100%; min-height: 180px; resize: vertical; padding: 13px 14px; color: var(--text); background: #0a0e18; border: 1px solid var(--border); border-radius: 9px; outline: none; font: inherit; font-size: 13px; line-height: 1.65; }
.interview-answer:focus { border-color: var(--accent); }
.interview-answer::placeholder { color: #69758d; }
.interview-local-note { margin: 6px 0 14px; color: var(--muted); font-size: 11px; }
.interview-details { border-top: 1px solid var(--border); }
.interview-details summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 2px; cursor: pointer; font-size: 13px; font-weight: 700; list-style: none; }
.interview-details summary::-webkit-details-marker { display: none; }
.interview-details summary::after { content: "+"; color: var(--accent); font-size: 17px; line-height: 1; }
.interview-details[open] summary::after { content: "−"; }
.interview-details summary span { margin-left: auto; color: var(--muted); font-size: 12px; }
.interview-details ol { display: grid; gap: 9px; padding: 0 0 16px 22px; color: var(--muted); font-size: 13px; }
.interview-rubric-hint { margin: -2px 0 11px; color: var(--muted); font-size: 12px; }
.interview-checks { display: grid; gap: 8px; padding: 0 0 16px; list-style: none; }
.interview-checks label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; color: var(--muted); font-size: 13px; }
.interview-checks input { flex: none; margin-top: 4px; accent-color: var(--accent); }
.interview-checks input:checked + span { color: var(--text); }
.interview-simulation { display: grid; gap: 12px; margin: 20px 0; padding: 15px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; }
.interview-simulation-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 13px; }
.interview-simulation-top span { color: var(--muted); font-size: 12px; }
.interview-mode-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.interview-mode { display: flex; align-items: center; gap: 8px; padding: 8px 11px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 12px; cursor: pointer; }
.interview-mode.active { border-color: var(--accent); background: var(--panel-2); }
.interview-mode small { color: var(--muted); font-size: 11px; }
.interview-start { justify-self: start; }
.interview-timer-row, .interview-simulation-result { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.interview-timer-row > span, .interview-simulation-result > span { flex: 1; color: var(--muted); font-size: 12px; }
.interview-timer { min-width: 76px; color: var(--text); font: 700 24px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
.interview-timer.urgent { color: var(--pink); }
.interview-simulation-result { padding-top: 2px; }
.interview-worked { margin-top: 16px; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--border); padding: 40px 22px; text-align: center; color: var(--muted); font-size: 13.5px; }
.footer-links { display: flex; justify-content: center; gap: 18px; margin-top: 14px; }
.footer-link { padding: 0; color: var(--muted); background: none; border: 0; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer-link:hover { color: var(--text); }
.contact-card { display: grid; justify-items: start; gap: 7px; max-width: 640px; padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.contact-card > span { color: var(--muted); font-size: 12px; }
.contact-card a { color: var(--accent); font-size: 16px; font-weight: 700; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
.site-info-content { display: grid; gap: 20px; max-width: 820px; padding: clamp(18px, 4vw, 28px); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.site-info-content section + section { padding-top: 16px; border-top: 1px solid var(--border); }
.site-info-content h2 { margin-bottom: 7px; font-size: 15px; }
.site-info-content p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.site-info-content a { color: var(--accent); }
@media (max-width: 700px) { .footer-links { flex-wrap: wrap; gap: 10px 15px; } }

/* ---------- Empty states / progress ---------- */
.overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ov-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: .18s; }
.ov-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ov-card .row { display: flex; align-items: center; gap: 10px; }
.ov-card .icon { font-size: 20px; }
.ov-card b { color: var(--text); }
.ov-card .bar { flex: 1; height: 7px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.ov-card .bar i { display: block; height: 100%; transition: width .4s; }
.ov-card small { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .career-hero, .roles-grid { grid-template-columns: 1fr; }
  .progress-chip { display: none; }
  .interview-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .application-entry-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page { padding: 24px 16px 60px; }
  .hero { padding: 24px 4px 20px; }
  .section-head h1 { font-size: 23px; }
}
@media (max-width: 700px) { .application-entry-form, .application-entry-fields { grid-template-columns: 1fr; } }

@media print {
  @page { margin: 16mm; }
  html, body { min-height: 0 !important; background: #fff !important; color: #151923 !important; }
  body * { visibility: hidden !important; }
  #root > header, #root > nav, #root > footer { display: none !important; }
  #root > main.page { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  #root > main.page > :not(.portfolio-printable) { display: none !important; }
  .portfolio-printable, .portfolio-printable * { visibility: visible !important; }
  .portfolio-printable { position: static !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; color: #151923 !important; box-shadow: none !important; }
  .portfolio-printable a { color: #174ea6 !important; text-decoration: underline !important; }
  .portfolio-preview-head { border-color: #c8ced8 !important; }
  .portfolio-preview-head p, .portfolio-preview-bio, .portfolio-skill-row p, .portfolio-preview-project > div:first-child span, .portfolio-preview-project p, .portfolio-preview-date, .portfolio-empty { color: #454b57 !important; }
  .portfolio-skill-row, .portfolio-preview-project, .portfolio-journal-preview { border-color: #c8ced8 !important; }
  .portfolio-preview-project { break-inside: avoid; }
  .portfolio-preview-project p b, .portfolio-skill-row b, .portfolio-preview-project h4, .portfolio-preview-section > h3, .portfolio-journal-preview h5 { color: #151923 !important; }
}