*{box-sizing:border-box}
:root{
  --bg:#1f2128;--surface:#fff;--surface-2:#fafaff;--text:#18181d;--muted:#7b7b86;
  --line:rgba(24,24,29,.11);--line-strong:rgba(24,24,29,.17);
  --accent:#5500ff;--accent-2:#8a5cff;--accent-soft:rgba(85,0,255,.08);
  --accent-line:rgba(85,0,255,.32);--danger:#b42318;
}
html{min-height:100%;background:var(--bg)}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background-color:#1f2128;
  background-image:
    radial-gradient(circle at 50% -10%,rgba(85,0,255,.34) 0%,rgba(85,0,255,.14) 24%,rgba(85,0,255,.04) 42%,transparent 60%),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2284%22%20viewBox%3D%220%200%2096%2084%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238A5CFF%22%20stroke-opacity%3D%220.12%22%20stroke-width%3D%221%22%3E%3Cpolygon%20points%3D%2224%2C2%2046%2C14%2046%2C38%2024%2C50%202%2C38%202%2C14%22/%3E%3Cpolygon%20points%3D%2272%2C2%2094%2C14%2094%2C38%2072%2C50%2050%2C38%2050%2C14%22/%3E%3Cpolygon%20points%3D%2248%2C26%2070%2C38%2070%2C62%2048%2C74%2026%2C62%2026%2C38%22/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(145deg,#262831 0%,#1e2028 45%,#23252d 100%);
  background-repeat:no-repeat,repeat,no-repeat;background-position:top center,top left,top left;background-size:auto,96px 84px,cover;
  padding:30px 16px 46px;
}
button,input,select,textarea{font:inherit} a{color:inherit}
.app-shell{width:min(1160px,100%);margin:0 auto;border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.28)}
.app-head{padding:25px 28px 0;border-bottom:1px solid var(--line);background:radial-gradient(circle at 95% -20%,rgba(85,0,255,.09),transparent 32%),#fff}
.head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.eyebrow{color:var(--accent);font-size:10px;font-weight:850;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.brand-title{margin:0;font-size:clamp(26px,4vw,42px);line-height:1.02;letter-spacing:-.04em}
.brand-subtitle{margin:9px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.dashboard-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.external-btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);font-size:12px;font-weight:750;transition:.18s ease;white-space:nowrap}
.external-btn:hover{border-color:var(--accent-line);color:var(--accent);transform:translateY(-1px)}
.tabs{display:flex;gap:24px;margin-top:22px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tab-btn{position:relative;border:0;background:transparent;color:var(--muted);padding:13px 2px 14px;cursor:pointer;font-size:12px;font-weight:850;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
.tab-btn.active{color:var(--accent)}.tab-btn.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:999px 999px 0 0;background:var(--accent)}
.tab-page{display:none;padding:26px 28px 34px}.tab-page.active{display:block}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:28px;align-items:center;padding:24px;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;background:linear-gradient(145deg,rgba(85,0,255,.035),transparent 55%),#fff}
.hero-kicker{color:var(--accent);font-size:9px;font-weight:850;letter-spacing:.17em;text-transform:uppercase;margin-bottom:8px}
.hero h2{margin:0;font-size:clamp(26px,4vw,40px);line-height:1.05;letter-spacing:-.04em}.hero p{margin:12px 0 0;color:#555560;font-size:13px;line-height:1.6;max-width:650px}
.progress-card{border:1px solid var(--accent-line);border-radius:12px;padding:16px;background:var(--surface-2)}
.progress-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.progress-top strong{font-size:24px;color:var(--accent);letter-spacing:-.03em}.progress-top span{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.bar{height:8px;background:#e9e7f0;border-radius:999px;overflow:hidden;margin:12px 0 10px}.fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:inherit}.progress-meta{display:grid;gap:4px;color:var(--muted);font-size:11px}
.course-controls{margin:18px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.segmented{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:#f7f7fa}.segmented button{border:0;border-radius:7px;padding:8px 10px;background:transparent;color:var(--muted);font-size:11px;font-weight:800;cursor:pointer}.segmented button.active{background:#fff;color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.small-action{border:1px solid var(--line);background:#fff;padding:9px 11px;border-radius:9px;cursor:pointer;font-size:11px;font-weight:800}.small-action:hover{border-color:var(--accent-line);color:var(--accent)}
.week-card{border:1px solid var(--line);border-radius:12px;background:#fff;margin:10px 0;overflow:hidden;box-shadow:0 7px 18px rgba(46,31,82,.05)}
.week-card[open]{border-color:var(--accent-line);box-shadow:0 12px 26px rgba(46,31,82,.08)}
.week-summary{list-style:none;cursor:pointer;padding:15px 17px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;user-select:none}.week-summary::-webkit-details-marker{display:none}
.week-num{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:900;font-size:12px}
.week-title{font-weight:820;letter-spacing:-.015em}.week-goal{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.4}
.week-right{text-align:right;display:flex;align-items:center;gap:12px}.week-count{font-size:10px;color:var(--muted);font-weight:800;white-space:nowrap}.chev{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);color:var(--accent);transition:transform .2s ease}.week-card[open] .chev{transform:rotate(180deg)}
.week-body{padding:0 15px 15px;border-top:1px solid var(--line);background:linear-gradient(180deg,#fcfbff,#fff 65px)}
.assignment{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:14px;background:#fff}.assignment.done{opacity:.62}.assignment.overdue{border-left:3px solid var(--danger)}
.assignment-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.assignment-title{font-size:14px;font-weight:800;letter-spacing:-.01em}.assignment-meta{margin-top:4px;color:var(--muted);font-size:10px}
.badge{flex:0 0 auto;padding:5px 7px;border-radius:7px;background:var(--accent-soft);color:var(--accent);font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}
.assignment-desc{margin-top:10px;color:#414149;font-size:12px;line-height:1.55}.resource-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.resource-links a{text-decoration:none;color:var(--accent);border-bottom:1px solid var(--accent-line);font-size:10px;font-weight:750}
.assignment-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}.complete-btn{border:1px solid #b6e4c9;background:#effaf3;color:#166534;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:10px;font-weight:850}.done .complete-btn{background:#166534;color:#fff;border-color:#166534}
.note{width:100%;min-height:56px;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:8px;resize:vertical;color:var(--text);background:#fafafa;font-size:11px}.note:focus,input:focus,select:focus{outline:2px solid rgba(85,0,255,.16);border-color:var(--accent-line)}
.sync-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
.tool-card{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 7px 18px rgba(46,31,82,.05)}.tool-card.full{grid-column:1/-1}
.tool-head{padding:14px 15px;border-bottom:1px solid var(--line);background:#fafafa;display:flex;justify-content:space-between;align-items:center;gap:10px}.tool-head strong{font-size:12px;letter-spacing:.03em}.tool-label{font-size:8px;color:var(--accent);font-weight:900;letter-spacing:.14em;text-transform:uppercase}.tool-body{padding:15px}.tool-body p{margin:0 0 12px;color:var(--muted);font-size:11px;line-height:1.55}
.field{display:grid;gap:5px;margin:9px 0}.field label{font-size:9px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:#5c5c66}.field input,.field select{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:11px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.action-btn{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:8px;padding:9px 10px;cursor:pointer;font-size:10px;font-weight:850}.action-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.action-btn.danger{color:var(--danger)}.action-btn:hover{border-color:var(--accent-line)}
.status{padding:9px 10px;border-radius:8px;background:#f6f6f8;color:#565661;font-size:10px;line-height:1.45;margin:10px 0}.status.ok{background:#eefaf3;color:#126b3d}.status.warn{background:#fff7ed;color:#9a4f00}.status.bad{background:#fff0ef;color:#9f2017}
.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dashboard-card{display:block;text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:13px;background:linear-gradient(145deg,var(--accent-soft),transparent 70%),#fff}.dashboard-card:hover{border-color:var(--accent-line);transform:translateY(-1px)}.dashboard-card small{display:block;color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.dashboard-card strong{display:block;margin-top:5px;font-size:13px}.dashboard-card span{display:block;margin-top:4px;color:var(--muted);font-size:10px;line-height:1.4}
.timer-strip{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:14px 15px;display:flex;justify-content:space-between;align-items:center;gap:14px;background:#18181d;color:#fff}.timer-copy small{color:#a9a9b4;font-size:9px}.clock{font-size:24px;font-variant-numeric:tabular-nums}.timer-buttons{display:flex;gap:7px;flex-wrap:wrap}.timer-buttons button{border:1px solid rgba(255,255,255,.12);background:#24242b;color:#fff;border-radius:8px;padding:8px 9px;cursor:pointer;font-size:9px;font-weight:800}.timer-buttons button.primary{background:var(--accent);border-color:var(--accent)}
.footer{padding:14px 28px 20px;color:rgba(255,255,255,.58);font-size:9px;line-height:1.5;width:min(1160px,100%);margin:0 auto}.empty{border:1px dashed var(--line-strong);border-radius:10px;padding:24px;text-align:center;color:var(--muted);font-size:11px}

.attention-banner{
  display:none;margin:16px 0 2px;border:1px solid rgba(180,35,24,.34);
  border-left:4px solid var(--danger);border-radius:10px;padding:12px 13px;
  background:linear-gradient(145deg,rgba(180,35,24,.07),rgba(180,35,24,.025)),#fff;
  box-shadow:0 7px 18px rgba(180,35,24,.06);align-items:center;justify-content:space-between;gap:12px;
}
.attention-banner.show{display:flex}
.attention-copy strong{display:block;color:var(--danger);font-size:11px;letter-spacing:.035em}
.attention-copy span{display:block;margin-top:3px;color:#6d4744;font-size:10px;line-height:1.4}
.attention-go{
  flex:0 0 auto;border:1px solid rgba(180,35,24,.28);background:#fff;color:var(--danger);
  border-radius:8px;padding:8px 10px;cursor:pointer;font-size:9px;font-weight:850;
  text-transform:uppercase;letter-spacing:.06em;
}
.attention-go:hover{background:#fff3f2}
.week-card.has-overdue{border-color:rgba(180,35,24,.38);box-shadow:0 10px 24px rgba(180,35,24,.08)}
.week-card.has-overdue .week-num{background:rgba(180,35,24,.09);color:var(--danger)}
.week-card.has-overdue .week-title{color:#7d1c16}
.week-card.has-overdue .chev{border-color:rgba(180,35,24,.26);color:var(--danger)}
.assignment.overdue{border-left:4px solid var(--danger);background:linear-gradient(90deg,rgba(180,35,24,.055),#fff 28%)}
.assignment.overdue .assignment-title{color:#851e17}
.assignment.overdue .assignment-meta{color:var(--danger);font-weight:800}
.overdue-pill{
  display:inline-flex;margin-left:6px;padding:3px 5px;border-radius:999px;background:#fff0ef;color:var(--danger);
  font-size:7px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;
}
.assignment.flash-overdue{animation:overduePulse 1.25s ease 0s 2}
@keyframes overduePulse{0%,100%{box-shadow:0 0 0 0 rgba(180,35,24,0)}45%{box-shadow:0 0 0 4px rgba(180,35,24,.14)}}

@media(max-width:820px){
  body{padding:12px 8px 28px}.app-shell{border-radius:12px}.app-head{padding:18px 16px 0}.head-row{display:block}.dashboard-links{justify-content:flex-start;margin-top:14px}.brand-title{font-size:29px}.tab-page{padding:18px 14px 24px}.hero{grid-template-columns:1fr;gap:16px;padding:17px}.sync-layout{grid-template-columns:1fr}.tool-card.full{grid-column:auto}.link-grid{grid-template-columns:1fr}.week-summary{padding:13px 12px;gap:10px}.week-goal{display:none}.week-right{gap:6px}.week-count{display:none}.assignment{padding:12px}.timer-strip{align-items:flex-start;flex-direction:column}.footer{padding:12px 15px 18px}
}

/* ==========================================================
   V5 MODERN / TECHNICAL VISUAL SYSTEM
   Restrained radii, thin borders, navy system header, grid,
   and ASX-inspired information hierarchy.
   ========================================================== */
:root{
  --sys-navy:#211b33;
  --sys-navy-2:#30264b;
  --sys-blue:#6b3cff;
  --sys-blue-dark:#4d25c7;
  --sys-grid:rgba(107,60,255,.045);
  --panel:#ffffff;
  --panel-alt:#f6f8fa;
  --page:#eef2f4;
  --steel:#c9d2d8;
  --ink:#17242c;
  --ink-2:#41525d;
}
body{
  color:var(--ink);
  background-color:#1b242a;
  background-image:
    linear-gradient(rgba(107,60,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,60,255,.045) 1px,transparent 1px),
    radial-gradient(circle at 50% -14%,rgba(85,0,255,.18),transparent 38%),
    linear-gradient(145deg,#1b242a,#141d22);
  background-size:34px 34px,34px 34px,auto,cover;
  padding:22px 14px 38px;
}
.app-shell{
  border-radius:5px;
  border:1px solid #8999a3;
  box-shadow:0 20px 55px rgba(0,0,0,.24);
  background:var(--page);
}
.app-head{
  padding:0;
  border-bottom:4px solid var(--sys-blue);
  background:linear-gradient(90deg,var(--sys-navy),var(--sys-navy-2));
  color:#fff;
}
.head-row{
  min-height:78px;
  padding:16px 22px 12px;
  align-items:center;
}
.eyebrow{
  margin:0 0 5px;
  color:#c0adff;
  font-size:8px;
  letter-spacing:.16em;
}
.brand-title{
  font-size:clamp(23px,3.3vw,34px);
  line-height:1;
  letter-spacing:-.025em;
  font-weight:720;
}
.brand-subtitle{
  color:rgba(255,255,255,.60);
  margin-top:7px;
  font-size:10px;
}
.dashboard-links{gap:6px}
.external-btn{
  border-radius:3px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.82);
  padding:8px 10px;
  font-size:9px;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.external-btn:hover{
  border-color:rgba(119,201,239,.65);
  color:#fff;
  background:rgba(107,60,255,.10);
  transform:none;
}
.tabs{
  margin:0;
  padding:0 22px;
  gap:0;
  border-top:1px solid rgba(255,255,255,.075);
}
.tab-btn{
  color:rgba(255,255,255,.58);
  padding:13px 18px 12px;
  border-left:1px solid rgba(255,255,255,.07);
  font-size:9px;
  letter-spacing:.12em;
}
.tab-btn:last-child{border-right:1px solid rgba(255,255,255,.07)}
.tab-btn.active{
  color:#fff;
  background:rgba(107,60,255,.11);
}
.tab-btn.active::after{
  height:3px;
  background:var(--sys-blue);
  border-radius:0;
}
.tab-page{
  padding:22px 24px 30px;
  background:
    linear-gradient(var(--sys-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--sys-grid) 1px,transparent 1px),
    var(--page);
  background-size:30px 30px;
}
.hero{
  border-radius:3px;
  border:1px solid var(--steel);
  border-top:4px solid var(--sys-blue);
  background:#fff;
  box-shadow:none;
}
.hero-kicker{
  color:var(--sys-blue-dark);
  font-size:8px;
  letter-spacing:.16em;
}
.hero h2{
  font-size:clamp(26px,3.7vw,38px);
  letter-spacing:-.035em;
  color:var(--ink);
}
.hero p{color:#53646e}
.progress-card{
  border-radius:2px;
  border:1px solid var(--steel);
  background:#f7f9fa;
}
.progress-top strong{color:var(--sys-blue-dark)}
.bar{border-radius:0;height:6px;background:#dfe6ea}
.fill{border-radius:0;background:linear-gradient(90deg,var(--sys-blue),var(--accent))}
.segmented{
  border-radius:3px;
  border:1px solid var(--steel);
  background:#e9eef1;
  padding:2px;
}
.segmented button{
  border-radius:2px;
  font-size:9px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.segmented button.active{
  color:var(--sys-blue-dark);
  border:1px solid #bdc9d0;
  box-shadow:none;
}
.small-action,.action-btn,.complete-btn,.attention-go{
  border-radius:3px;
}
.week-card{
  border-radius:3px;
  border:1px solid var(--steel);
  box-shadow:none;
}
.week-card[open]{box-shadow:none;border-color:#aab9c2}
.week-summary{padding:12px 14px}
.week-num{
  width:38px;height:38px;
  border-radius:2px;
  background:#f0ecff;
  color:var(--sys-blue-dark);
}
.week-title{font-size:12px;letter-spacing:.01em}
.week-goal,.week-count{font-size:9px}
.chev{
  border-radius:2px;
  border-color:#c1ccd2;
  color:var(--sys-blue-dark);
}
.week-body{
  background:#f8fafb;
  border-top:1px solid #d4dde2;
}
.assignment{
  border-radius:2px;
  border-color:#d0d9de;
  box-shadow:none;
}
.assignment-top{align-items:center}
.assignment-title{font-size:12px}
.assignment-desc{font-size:11px;color:#42535d}
.badge{
  border-radius:2px;
  background:#f2efff;
  color:#514169;
  border:1px solid #d8d0ee;
}
.complete-btn{
  border-color:#b9d3c3;
  background:#f3faf5;
  padding:7px 9px;
}
.note{
  border-radius:2px;
  background:#fbfcfd;
}
.attention-banner{
  border-radius:2px;
  box-shadow:none;
}
.timer-strip{
  border-radius:3px;
  border-color:#354a56;
  background:linear-gradient(90deg,#211b33,#30264b);
}
.timer-buttons button{border-radius:2px}
.tool-card{
  border-radius:3px;
  border:1px solid var(--steel);
  box-shadow:none;
}
.tool-head{
  background:#f1eef8;
  border-color:#d5cfdf;
}
.tool-label{color:var(--sys-blue-dark)}
.field input,.field select{
  border-radius:2px;
  border-color:#cbd5da;
}
.status{border-radius:2px}
.dashboard-card{
  border-radius:2px;
  border-color:#c8d4db;
  background:#fff;
}
.dashboard-card small{color:var(--sys-blue-dark)}
.link-grid{gap:8px}
.footer{color:rgba(255,255,255,.48)}

/* Build Lab */
.build-intro{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:14px;
  margin-bottom:14px;
}
.build-panel{
  border:1px solid var(--steel);
  border-top:4px solid var(--sys-blue);
  background:#fff;
  min-height:100%;
}
.build-panel .panel-head{
  padding:11px 13px;
  border-bottom:1px solid var(--steel);
  background:#edf2f5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.panel-code{
  color:var(--sys-blue-dark);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.build-panel .panel-body{padding:16px}
.build-panel h2,.build-panel h3{margin:0;color:var(--ink)}
.build-panel h2{font-size:24px;letter-spacing:-.03em}
.build-panel p{color:var(--ink-2);font-size:11px;line-height:1.65}
.stack-map{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--steel);
  border-right:0;
  border-bottom:0;
}
.stack-cell{
  padding:12px 10px;
  border-right:1px solid var(--steel);
  border-bottom:1px solid var(--steel);
  background:#fafcfd;
}
.stack-cell code{
  display:block;
  color:var(--sys-blue-dark);
  font-size:10px;
  font-weight:850;
}
.stack-cell span{
  display:block;
  margin-top:5px;
  color:#657782;
  font-size:8px;
  line-height:1.35;
}
.build-progress{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:center;
}
.build-progress strong{
  font-size:28px;
  font-variant-numeric:tabular-nums;
  color:var(--sys-blue-dark);
}
.build-progress .bar{margin:6px 0}
.build-filter{
  display:flex;
  gap:0;
  margin:14px 0 10px;
  overflow-x:auto;
}
.build-filter button{
  border:1px solid var(--steel);
  border-right:0;
  background:#f4f7f9;
  color:#60727d;
  padding:9px 11px;
  cursor:pointer;
  font-size:8px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}
.build-filter button:last-child{border-right:1px solid var(--steel)}
.build-filter button.active{
  background:var(--sys-navy);
  color:#fff;
  border-color:var(--sys-navy);
}
.lesson{
  border:1px solid var(--steel);
  background:#fff;
  margin-top:9px;
}
.lesson[open]{border-color:#9eb0ba}
.lesson summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  background:#fff;
}
.lesson summary::-webkit-details-marker{display:none}
.lesson-code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:var(--sys-blue-dark);
  font-size:8px;
  letter-spacing:.09em;
  font-weight:850;
}
.lesson-title{font-size:12px;font-weight:800}
.lesson-sub{margin-top:3px;color:#6a7b85;font-size:9px}
.lesson-status{
  font-size:8px;
  color:#6b7b84;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.lesson.done .lesson-status{color:#197249}
.lesson-body{
  border-top:1px solid var(--steel);
  padding:14px;
  background:#f8fafb;
}
.lesson-body p{margin:0 0 10px;color:#40515b;font-size:11px;line-height:1.6}
.lesson-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.lesson-section{
  border:1px solid #d2dce1;
  background:#fff;
  padding:12px;
}
.lesson-section h4{
  margin:0 0 8px;
  color:#23343d;
  font-size:9px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.code-block{
  margin:0;
  padding:12px;
  overflow:auto;
  border:1px solid #cbd7dd;
  background:#111c22;
  color:#d8e7ef;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:9px;
  line-height:1.55;
  white-space:pre;
}
.resource-list{
  display:grid;
  gap:6px;
}
.resource-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px;
  border:1px solid #d4dde2;
  background:#fff;
  color:#315566;
  text-decoration:none;
  font-size:9px;
  font-weight:700;
}
.resource-list a:hover{border-color:#a990ff;background:#f8f5ff}
.lesson-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.lesson-actions button{
  border:1px solid #aebfc9;
  border-radius:2px;
  background:#fff;
  padding:8px 9px;
  cursor:pointer;
  font-size:8px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.lesson-actions button.primary{
  background:var(--sys-blue);
  border-color:var(--sys-blue-dark);
  color:#fff;
}
.style-lab{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:12px;
}
.lab-controls{
  border:1px solid var(--steel);
  background:#fff;
  padding:12px;
}
.lab-controls label{
  display:grid;
  gap:4px;
  margin-bottom:10px;
  color:#52656f;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lab-controls input[type="range"],.lab-controls input[type="color"]{width:100%}
.lab-preview{
  --lab-accent:#d4479a;
  --lab-radius:3px;
  --lab-pad:16px;
  border:1px solid #9eafb8;
  border-top:4px solid var(--lab-accent);
  border-radius:var(--lab-radius);
  background:#fff;
  padding:var(--lab-pad);
}
.lab-preview small{
  color:var(--lab-accent);
  font-size:8px;
  font-weight:850;
  letter-spacing:.13em;
}
.lab-preview h3{margin:7px 0 8px;font-size:20px;letter-spacing:-.025em}
.lab-preview p{margin:0;color:#5f707a;font-size:10px;line-height:1.5}
.lab-code{
  margin-top:10px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:8px;
  color:#52646e;
}
.architecture{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--steel);
  background:#fff;
}
.arch-node{
  padding:12px 8px;
  min-height:82px;
  border-right:1px solid var(--steel);
  position:relative;
}
.arch-node:last-child{border-right:0}
.arch-node:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-7px;top:31px;
  z-index:3;
  width:14px;height:14px;
  display:grid;place-items:center;
  color:var(--sys-blue-dark);
  background:#fff;
  font-size:10px;
}
.arch-node strong{
  display:block;
  color:var(--sys-blue-dark);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:9px;
}
.arch-node span{
  display:block;
  margin-top:6px;
  color:#657781;
  font-size:8px;
  line-height:1.35;
}
@media(max-width:820px){
  .head-row{min-height:auto;padding:14px}
  .tabs{padding:0 8px}
  .tab-btn{padding:12px 11px;font-size:8px}
  .tab-page{padding:15px 10px 22px}
  .build-intro,.lesson-grid,.style-lab{grid-template-columns:1fr}
  .stack-map{grid-template-columns:1fr 1fr}
  .architecture{grid-template-columns:1fr}
  .arch-node{border-right:0;border-bottom:1px solid var(--steel);min-height:auto}
  .arch-node:last-child{border-bottom:0}
  .arch-node:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-7px}
  .lesson summary{grid-template-columns:52px minmax(0,1fr)}
  .lesson-status{grid-column:2}
}


/* V5.2 AUTOSAVE STATUS */
.autosave-status{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:rgba(255,255,255,.66);
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}
.autosave-dot{
  width:7px;height:7px;border-radius:50%;
  background:#8b93a0;
  box-shadow:0 0 0 3px rgba(139,147,160,.10);
}
.autosave-status.local .autosave-dot{background:#a990ff;box-shadow:0 0 0 3px rgba(169,144,255,.13)}
.autosave-status.syncing .autosave-dot{background:#f0b429;box-shadow:0 0 0 3px rgba(240,180,41,.12)}
.autosave-status.cloud .autosave-dot{background:#4bd38b;box-shadow:0 0 0 3px rgba(75,211,139,.12)}
.autosave-status.error .autosave-dot{background:#ef6b62;box-shadow:0 0 0 3px rgba(239,107,98,.12)}
.autosave-status.syncing .autosave-dot{animation:savePulse 1s ease-in-out infinite}
@keyframes savePulse{0%,100%{opacity:.45}50%{opacity:1}}
.autosave-mobile{
  display:none;
  padding:8px 12px;
  border-top:1px solid rgba(255,255,255,.07);
}
@media(max-width:820px){
  .head-row .autosave-status{display:none}
  .autosave-mobile{display:flex}
}


/* V5.4 ADJUSTABLE DUE DATES */
.schedule-tools{
  margin:14px 0 4px;
  border:1px solid var(--steel);
  background:#fff;
}
.schedule-tools-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--steel);
  background:#f1eef8;
}
.schedule-tools-head strong{
  font-size:9px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.schedule-tools-head span{
  color:#6c6280;
  font-size:8px;
}
.schedule-tools-body{
  display:flex;
  align-items:end;
  gap:9px;
  flex-wrap:wrap;
  padding:11px 12px;
}
.schedule-field{
  display:grid;
  gap:4px;
}
.schedule-field label{
  color:#625873;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.schedule-field input{
  width:90px;
  min-height:36px;
  padding:7px 8px;
  border:1px solid #cbc3da;
  border-radius:2px;
  background:#fff;
  color:var(--ink);
  font-size:10px;
}
.schedule-btn{
  min-height:36px;
  border:1px solid #bdb2d3;
  border-radius:2px;
  background:#fff;
  color:#4f3a71;
  padding:7px 10px;
  cursor:pointer;
  font-size:8px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.schedule-btn.primary{
  background:#5b32d6;
  border-color:#4724b2;
  color:#fff;
}
.schedule-btn.danger{color:#9c2820}
.due-editor{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:9px;
}
.due-editor label{
  color:#6a6078;
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.due-editor input[type="date"]{
  min-height:34px;
  padding:5px 7px;
  border:1px solid #c9c0d8;
  border-radius:2px;
  background:#fff;
  color:#332846;
  font-size:10px;
}
.due-reset{
  min-height:34px;
  border:1px solid #d3ccdf;
  border-radius:2px;
  background:#faf9fc;
  color:#625873;
  padding:5px 8px;
  cursor:pointer;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.due-reset[hidden]{display:none}
.custom-date-note{
  color:#6b54a3;
  font-size:8px;
  font-weight:750;
}
@media(max-width:820px){
  .schedule-tools-body{align-items:stretch}
  .schedule-field{width:100%}
  .schedule-field input{width:100%;font-size:16px}
  .schedule-btn{flex:1 1 auto}
  .due-editor{align-items:stretch}
  .due-editor label{width:100%}
  .due-editor input[type="date"]{width:100%;font-size:16px}
}


/* ==========================================================
   V5.5 PERSONAL THEME SYSTEM
   Modern editorial UI + softer feminine default. The user's
   accent color is applied through CSS custom properties.
   ========================================================== */
:root{
  --theme-accent:#d4479a;
  --theme-accent-2:#e693c4;
  --theme-dark:#2a1827;
  --theme-dark-2:#43223a;
  --theme-page:#fcf8fb;
  --theme-tint:#f7e8f1;
  --theme-border:#d8ccd4;
  --theme-glow:rgba(212,71,154,.16);
  --theme-grid:rgba(212,71,154,.026);
}

/* Remove the ASX-like grid-heavy feel and use a softer editorial canvas. */
body{
  background-color:#19151a;
  background-image:
    radial-gradient(circle at 18% -4%,var(--theme-glow),transparent 30%),
    radial-gradient(circle at 86% 0%,rgba(255,255,255,.045),transparent 22%),
    linear-gradient(145deg,var(--theme-dark),#171419 72%);
  background-size:auto,auto,cover;
}
.app-shell{
  border-color:rgba(255,255,255,.13);
  border-radius:8px;
  background:var(--theme-page);
}
.app-head{
  border-bottom:3px solid var(--theme-accent);
  background:
    radial-gradient(circle at 78% -90%,rgba(255,255,255,.10),transparent 40%),
    linear-gradient(105deg,var(--theme-dark),var(--theme-dark-2));
}
.eyebrow{color:var(--theme-accent-2)}
.tab-page{
  background:
    linear-gradient(180deg,rgba(255,255,255,.48),transparent 120px),
    var(--theme-page);
  background-size:auto;
}
.tab-btn.active::after,
.pull-tab::before,
.hidden-note-panel::before{
  background:var(--theme-accent);
}
.external-btn:hover{
  border-color:var(--theme-accent-2);
  background:rgba(255,255,255,.07);
}
.hero{
  border-radius:7px;
  border-color:var(--theme-border);
  border-top:3px solid var(--theme-accent);
  background:
    linear-gradient(135deg,var(--theme-tint),rgba(255,255,255,.84) 34%,#fff 72%);
}
.progress-card,
.week-card,
.assignment,
.tool-card,
.build-panel,
.schedule-tools,
.lesson{
  border-color:var(--theme-border);
}
.progress-card,
.week-card,
.tool-card,
.build-panel,
.schedule-tools,
.lesson{
  border-radius:6px;
}
.assignment{border-radius:5px}
.week-num,
.badge{
  background:var(--theme-tint);
  color:var(--sys-blue-dark);
}
.week-card[open],
.lesson[open]{border-color:var(--theme-accent-2)}
.tool-head,
.build-panel .panel-head,
.schedule-tools-head{
  background:linear-gradient(90deg,var(--theme-tint),#f7f5f8);
  border-color:var(--theme-border);
}
.progress-card{background:linear-gradient(150deg,var(--theme-tint),#fff 64%)}
.bar{background:#e9e3e8}
.fill{background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2))}
.segmented{background:#f3eef2;border-color:var(--theme-border)}
.segmented button.active{color:var(--sys-blue-dark);border-color:var(--theme-border)}
.dashboard-card{
  border-color:var(--theme-border);
  background:linear-gradient(145deg,var(--theme-tint),#fff 70%);
}
.timer-strip{
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(105deg,var(--theme-dark),var(--theme-dark-2));
}
.schedule-btn.primary,
.lesson-actions button.primary{
  background:var(--theme-accent);
  border-color:var(--sys-blue-dark);
}
.schedule-btn,
.due-reset{color:var(--sys-blue-dark);border-color:var(--theme-border)}
.custom-date-note,
.panel-code,
.tool-label,
.dashboard-card small,
.lesson-code,
.arch-node strong{
  color:var(--sys-blue-dark);
}
.due-editor input[type="date"],
.schedule-field input,
.field input,.field select,
.note{
  border-color:var(--theme-border);
}
.resource-list a:hover{
  border-color:var(--theme-accent-2);
  background:var(--theme-tint);
}

/* Compact per-user theme picker in the header */
.theme-strip{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.68);
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.theme-strip-label{margin-right:2px}
.theme-swatch{
  width:22px;
  height:22px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  padding:0;
  cursor:pointer;
  background:var(--swatch);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}
.theme-swatch:hover,
.theme-swatch.active{
  outline:2px solid rgba(255,255,255,.78);
  outline-offset:2px;
}
.theme-custom-wrap{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:6px;
  background:rgba(255,255,255,.05);
  overflow:hidden;
}
.theme-custom-wrap input[type="color"]{
  width:38px;
  height:38px;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}
.theme-reset{
  min-height:28px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.76);
  padding:5px 7px;
  cursor:pointer;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.theme-reset:hover{background:rgba(255,255,255,.09);color:#fff}
.theme-personal-note{
  width:100%;
  text-align:right;
  color:rgba(255,255,255,.42);
  font-size:7px;
  letter-spacing:.04em;
  text-transform:none;
  font-weight:600;
}

@media(max-width:820px){
  .theme-strip{
    justify-content:flex-start;
    margin-top:8px;
  }
  .theme-personal-note{text-align:left}
  .theme-swatch{width:28px;height:28px}
  .theme-custom-wrap{width:34px;height:34px}
}


/* ==========================================================
   V5.7 COURSEWORK-ONLY CHIC TYPOGRAPHY + EDITORIAL DETAIL
   Build Lab intentionally remains unchanged from V5.5.
   ========================================================== */
#pageCoursework{
  --cw-display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --cw-body:"Manrope",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* Hero: editorial/fashion feel without changing Build Lab */
#pageCoursework .hero{
  position:relative;
  overflow:hidden;
  padding-top:24px;
  background:
    linear-gradient(135deg,var(--theme-tint),rgba(255,255,255,.92) 42%,#fff 78%);
}
#pageCoursework .hero::after{
  content:"";
  position:absolute;
  right:-34px;
  top:-42px;
  width:150px;
  height:150px;
  border:1px solid var(--theme-border);
  border-radius:50%;
  opacity:.55;
}
#pageCoursework .hero-kicker{
  font-family:var(--cw-body);
  font-size:9px;
  line-height:1.2;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--sys-blue-dark);
  margin-bottom:9px;
}
#pageCoursework .hero h2{
  font-family:var(--cw-display);
  font-weight:400;
  font-size:clamp(38px,5vw,56px);
  line-height:.92;
  letter-spacing:.035em;
  text-transform:uppercase;
}
#pageCoursework .hero p{
  font-family:var(--cw-body);
  max-width:720px;
  font-size:11px;
  line-height:1.7;
}

/* Progress reads more like a planner dashboard than a system panel */
#pageCoursework .progress-card{
  border-radius:8px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),var(--theme-tint));
  border-color:var(--theme-border);
}
#pageCoursework .progress-top strong{
  font-family:var(--cw-display);
  font-size:30px;
  line-height:1;
  font-weight:400;
  letter-spacing:.04em;
}
#pageCoursework .progress-meta,
#pageCoursework .progress-top span{
  font-family:var(--cw-body);
}

/* Filters */
#pageCoursework .segmented button{
  font-family:var(--cw-body);
  font-weight:800;
  letter-spacing:.07em;
}

/* Week headers */
#pageCoursework .week-card{
  border-radius:8px;
  background:#fff;
  overflow:hidden;
}
#pageCoursework .week-summary{
  position:relative;
  background:
    linear-gradient(90deg,var(--theme-tint),#fff 38%);
  padding:14px 16px;
}
#pageCoursework .week-summary::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--theme-accent);
}
#pageCoursework .week-num{
  width:42px;
  height:42px;
  border-radius:50%;
  font-family:var(--cw-display);
  font-size:17px;
  letter-spacing:.04em;
  border:1px solid var(--theme-border);
  background:#fff;
  color:var(--sys-blue-dark);
}
#pageCoursework .week-title{
  font-family:var(--cw-display);
  font-size:22px;
  line-height:1;
  font-weight:400;
  letter-spacing:.055em;
  text-transform:uppercase;
}
#pageCoursework .week-goal,
#pageCoursework .week-count{
  font-family:var(--cw-body);
}

/* Assignment cards: softer editorial hierarchy */
#pageCoursework .assignment{
  position:relative;
  border-radius:7px;
  background:
    linear-gradient(180deg,#fff,rgba(255,255,255,.97));
  border-color:var(--theme-border);
  padding-top:15px;
}
#pageCoursework .assignment::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:13px;
  width:2px;
  border-radius:2px;
  background:var(--theme-accent-2);
  opacity:.75;
}
#pageCoursework .assignment-title{
  font-family:var(--cw-body);
  font-size:14px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25;
}
#pageCoursework .assignment-meta{
  font-family:var(--cw-body);
  font-size:8px;
  letter-spacing:.045em;
}
#pageCoursework .assignment-desc{
  font-family:var(--cw-body);
  font-size:11px;
  line-height:1.7;
}
#pageCoursework .badge{
  font-family:var(--cw-body);
  border-radius:999px;
  padding-left:9px;
  padding-right:9px;
}
#pageCoursework .complete-btn{
  font-family:var(--cw-body);
  border-radius:999px;
  font-weight:800;
  padding-left:12px;
  padding-right:12px;
}
#pageCoursework .note{
  font-family:var(--cw-body);
  border-radius:7px;
  background:#fffdfd;
}
#pageCoursework .due-editor label,
#pageCoursework .due-editor input,
#pageCoursework .due-reset,
#pageCoursework .schedule-tools,
#pageCoursework .schedule-tools button,
#pageCoursework .schedule-tools input{
  font-family:var(--cw-body);
}

/* Slightly more elegant attention state */
#pageCoursework .attention-banner{
  border-radius:8px;
}
#pageCoursework .attention-copy strong{
  font-family:var(--cw-display);
  font-size:20px;
  font-weight:400;
  letter-spacing:.04em;
  text-transform:uppercase;
}
#pageCoursework .attention-copy span{
  font-family:var(--cw-body);
}

/* Desktop polish only; no hover-dependent functionality */
@media (hover:hover) and (pointer:fine){
  #pageCoursework .assignment{
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
  }
  #pageCoursework .assignment:hover{
    transform:translateY(-1px);
    border-color:var(--theme-accent-2);
    box-shadow:0 8px 22px rgba(30,18,27,.055);
  }
}

@media(max-width:820px){
  #pageCoursework .hero h2{font-size:40px}
  #pageCoursework .hero-kicker{font-size:9px}
  #pageCoursework .week-title{font-size:20px}
  #pageCoursework .assignment-title{font-size:13px}
}


/* ==========================================================
   BLOOM & BUILD — CODED CONCEPT
   The top-right inspiration image is replaced by functional
   circular program progress above the mini calendar.
   ========================================================== */
:root{
  --bb-bg:#eadcdf;--bb-canvas:#fbf7f6;--bb-card:#fffdfc;--bb-ink:#321a25;
  --bb-copy:#715d65;--bb-line:#eadcdf;--bb-serif:"Playfair Display",Georgia,serif;
  --bb-sans:"DM Sans","Segoe UI",sans-serif;
}
html{background:var(--bb-bg)}
body{margin:0;padding:22px;font-family:var(--bb-sans);color:var(--bb-ink);background:radial-gradient(circle at 8% -5%,rgba(255,255,255,.72),transparent 24%),radial-gradient(circle at 88% 0%,var(--theme-glow),transparent 26%),linear-gradient(135deg,#eadadd,#e2d4d8 50%,#eee4e2)}
button,input,select,textarea{font-family:var(--bb-sans)}
.bloom-shell{width:min(1480px,100%);margin:0 auto;background:var(--bb-canvas);border:1px solid rgba(94,51,69,.13);border-radius:18px;box-shadow:0 28px 75px rgba(74,42,54,.16);overflow:hidden}
.bloom-head{min-height:82px;padding:0 28px;display:grid;grid-template-columns:minmax(245px,.8fr) auto minmax(245px,.8fr);align-items:center;gap:24px;color:var(--bb-ink);background:rgba(255,253,252,.94);border-bottom:1px solid var(--bb-line);backdrop-filter:blur(14px)}
.bloom-brand{display:flex;align-items:center;gap:13px;min-width:0}.bloom-mark{width:42px;height:46px;position:relative;flex:0 0 auto}.bloom-mark span{position:absolute;bottom:3px;width:17px;height:34px;background:linear-gradient(180deg,var(--theme-accent-2),var(--theme-accent));border-radius:80% 10% 80% 10%}.bloom-mark span:first-child{left:5px;transform:rotate(-28deg)}.bloom-mark span:last-child{right:5px;transform:scaleX(-1) rotate(-28deg)}
.bloom-head .brand-title{margin:0;color:var(--bb-ink);font-family:var(--bb-serif);font-size:30px;line-height:1;letter-spacing:-.035em;font-weight:600}.bloom-head .brand-subtitle{margin:5px 0 0;color:#9a7a87;font-size:8px;text-transform:uppercase;letter-spacing:.20em;font-weight:700}
.bloom-tabs{margin:0;padding:0;border:0;display:flex;gap:8px;justify-content:center}.bloom-tabs .tab-btn{border:0;border-radius:12px;padding:12px 16px;color:#5d4b52;font-size:11px;letter-spacing:0;text-transform:none;font-weight:700}.bloom-tabs .tab-btn.active{color:#6d1f42;background:var(--theme-tint)}.bloom-tabs .tab-btn.active::after{display:none}.bloom-head-status{display:flex;justify-content:flex-end}.bloom-head .autosave-status{color:#75636b;background:#f8f2f3;border:1px solid var(--bb-line);border-radius:999px;padding:8px 11px}.autosave-mobile{display:none!important}
.bloom-course-page{padding:14px 16px 24px;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 190px),var(--bb-canvas)}.coursework-layout{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:14px;align-items:start}.coursework-main{min-width:0}
.bloom-hero{min-height:196px;display:grid;grid-template-columns:36% minmax(0,1fr);overflow:hidden;border:1px solid var(--bb-line);border-radius:14px;background:radial-gradient(circle at 82% 20%,rgba(255,255,255,.85),transparent 28%),linear-gradient(120deg,#f5e5e6,#f9efef 62%,#f2e1e4)}
.hero-still-life{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(117,63,78,.12),transparent 40%),linear-gradient(160deg,#d9c3bd,#f1ddd8)}.hero-still-life::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,#f6e8e8)}.leaf{position:absolute;width:24px;height:76px;border-radius:90% 8% 90% 8%;background:#7b6759;opacity:.72;transform-origin:bottom}.leaf-a{left:22px;top:-12px;transform:rotate(32deg)}.leaf-b{left:52px;top:10px;transform:rotate(61deg) scale(.76)}
.book{position:absolute;left:74px;width:170px;height:34px;display:flex;align-items:center;border-radius:3px;box-shadow:0 9px 18px rgba(68,39,47,.12);padding-left:14px;font-family:var(--bb-serif);font-size:8px;letter-spacing:.08em;color:#8d5e6e}.book-one{bottom:46px;background:#f9eceb;transform:rotate(-2deg)}.book-two{bottom:16px;left:88px;background:#efe0dc;transform:rotate(2deg)}
.mug{position:absolute;left:20px;bottom:18px;width:92px;height:64px;border-radius:9px 9px 25px 25px;background:#e8bba8;box-shadow:0 10px 18px rgba(68,39,47,.14)}.mug::before{content:"";position:absolute;left:10px;right:10px;top:7px;height:17px;border-radius:50%;background:#8f5a47;box-shadow:inset 0 0 0 5px #dcae9b}.mug::after{content:"";position:absolute;right:-20px;top:18px;width:28px;height:28px;border:7px solid #e8bba8;border-left:0;border-radius:0 22px 22px 0}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:26px 34px 26px 30px}.bloom-course-page .hero-kicker{margin-bottom:7px;color:#9e657d;font-size:8px!important;font-family:var(--bb-sans)!important;letter-spacing:.22em!important;text-transform:uppercase!important;font-weight:700!important}.bloom-course-page .bloom-hero h2{margin:0;max-width:710px;color:var(--bb-ink);font-family:var(--bb-serif)!important;font-size:clamp(35px,4.2vw,59px)!important;line-height:.98!important;letter-spacing:-.045em!important;text-transform:none!important;font-weight:600}.bloom-course-page .bloom-hero p{max-width:680px;margin:12px 0 0;color:#7a6069;font-size:11px;line-height:1.65}.hero-microcopy{margin-top:12px;color:#9b7080;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.program-strip{margin-top:12px;display:grid;grid-template-columns:180px minmax(230px,1fr) minmax(300px,auto);align-items:center;gap:18px;padding:14px 18px;border:1px solid var(--bb-line);border-radius:13px;background:var(--bb-card);box-shadow:0 4px 14px rgba(79,43,57,.035)}.program-title span{display:block;font-family:var(--bb-serif);font-size:17px;font-weight:600}.program-title small{display:block;margin-top:2px;color:#9a818a;font-size:9px}.program-bar-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.program-strip .bar{height:9px;margin:0;border-radius:999px;background:#f2dfe5}.program-strip .fill{border-radius:999px;background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2))}.program-strip #progressPct{min-width:44px;font-family:var(--bb-serif);font-size:18px}.program-metrics{display:flex;gap:13px;justify-content:flex-end;flex-wrap:wrap;color:#806d74;font-size:9px}.program-metrics span{white-space:nowrap}
.next-row{margin-top:12px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,.8fr);gap:12px}.next-assignment-card,.next-due-card{border:1px solid var(--bb-line);border-radius:14px;background:var(--bb-card);box-shadow:0 5px 16px rgba(79,43,57,.035)}.next-assignment-card{padding:17px}.next-label-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.next-label-row>div:last-child{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px}.next-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:var(--theme-accent);color:white;font-size:15px}.mini-label{color:#6e5360;font-size:9px;text-transform:uppercase;letter-spacing:.11em;font-weight:800}.timing-pill{padding:6px 9px;border-radius:999px;background:var(--theme-tint);color:var(--sys-blue-dark);font-size:8px;font-weight:800}
.next-card-body{margin-top:13px;display:grid;grid-template-columns:155px minmax(0,1fr);gap:18px;align-items:center}.next-card-art{min-height:132px;border-radius:11px;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(79,43,57,.08),transparent),#ead4cf}.notebook-page{position:absolute;left:24px;top:18px;width:110px;height:98px;transform:rotate(-5deg);border-radius:4px;padding:17px 12px;background:#fbf5ed;box-shadow:0 10px 22px rgba(65,37,46,.13);color:#7d5664;font-family:var(--bb-serif);font-style:italic;font-size:12px;line-height:1.35}.notebook-page span{display:block}.next-week{color:#a47a89;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.10em}.next-card-copy h3{margin:5px 0 7px;color:var(--bb-ink);font-family:var(--bb-serif);font-size:23px;line-height:1.08}.next-card-copy p{margin:0;color:#7c6970;font-size:10px;line-height:1.6}.next-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}.primary-cta{min-height:39px;padding:9px 15px;border:1px solid var(--theme-accent);border-radius:9px;background:var(--theme-accent);color:white;cursor:pointer;font-family:var(--bb-serif);font-size:12px}.primary-cta span{margin-left:10px}.quiet-cta{min-height:39px;border:0;background:transparent;color:#9b6b7c;cursor:pointer;font-size:9px;font-weight:700}
.next-due-card{padding:17px}.due-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.due-card-head strong{display:block;margin-top:5px;font-family:var(--bb-serif);font-size:16px}.calendar-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--theme-tint);color:var(--sys-blue-dark)}.next-date-input{width:100%;margin-top:15px;min-height:42px;border:1px solid var(--bb-line);border-radius:9px;padding:8px 11px;background:#fff;color:var(--bb-ink);font-size:11px}.quick-date-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px}.quick-date-grid button{min-height:32px;border:0;border-radius:8px;background:var(--theme-tint);color:var(--sys-blue-dark);font-size:8px;font-weight:800;cursor:pointer}.due-note{margin-top:11px;display:flex;gap:9px;align-items:flex-start;padding:10px;border-radius:10px;background:#fbf1f3;color:#80646e}.due-note>span{font-size:18px;color:var(--theme-accent)}.due-note p{margin:0;font-size:9px;line-height:1.45}.due-note strong{color:#5c3a47}
.coursework-section{margin-top:12px;padding:16px;border:1px solid var(--bb-line);border-radius:14px;background:var(--bb-card);box-shadow:0 5px 16px rgba(79,43,57,.035)}.coursework-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #f0e4e7}.coursework-section-head>div{display:flex;align-items:center;gap:10px}.section-icon{font-size:24px;color:var(--theme-accent)}.coursework-section-head h3{margin:0;font-family:var(--bb-serif);font-size:21px}.coursework-section-head p{margin:2px 0 0;color:#8c737d;font-size:9px}.course-controls{margin:12px 0 7px}.segmented{border:0;border-radius:999px;padding:3px;background:#f8eff1}.segmented button{border-radius:999px!important;padding:8px 12px;font-size:9px;text-transform:none!important}.segmented button.active{background:#fff!important;color:var(--sys-blue-dark)!important;border:0!important;box-shadow:0 2px 8px rgba(75,38,52,.06)}.small-action{border:0;background:transparent;color:#8e536c;text-transform:none;font-size:9px;text-decoration:underline;cursor:pointer}
.schedule-tools{margin:10px 0 4px;border:1px solid #f0e2e5;border-radius:10px;background:#fcf8f8}.schedule-tools-head{background:transparent!important;border-color:#f0e2e5!important;padding:9px 11px}.schedule-tools-head strong{font-size:8px}.schedule-tools-head span{font-size:8px;color:#a18690}.schedule-tools-body{padding:9px 11px}.schedule-field input{border-color:#eadcdf;border-radius:8px}.schedule-btn{border-radius:8px;background:#fff;border-color:#eadcdf;color:#76505f}.schedule-btn.primary{background:var(--theme-accent);border-color:var(--theme-accent);color:#fff}
.week-card{margin:8px 0;border:1px solid #efe2e5!important;border-radius:10px!important;background:#fff!important;box-shadow:0 3px 12px rgba(85,48,63,.025)!important}.week-card[open]{border-color:var(--theme-accent-2)!important}.week-summary{padding:11px 12px!important;background:#fff!important;grid-template-columns:auto minmax(0,1fr) auto!important}.week-summary::before{display:none!important}.week-num{width:28px!important;height:28px!important;border-radius:50%!important;background:var(--theme-tint)!important;color:var(--sys-blue-dark)!important;border:0!important;font-size:8px!important}.week-title{font-family:var(--bb-serif)!important;font-size:13px!important;text-transform:none!important;letter-spacing:-.01em!important}.week-goal{font-size:8px!important;color:#9b858e!important}.week-count{font-size:8px!important}.chev{border:0!important;background:#faf4f5!important;border-radius:50%!important;color:#8a5b6d!important}.week-body{background:#fcf9f9!important;border-color:#f0e5e8!important;padding:0 12px 12px!important}.assignment{border:0!important;border-top:1px solid #efe5e7!important;border-radius:0!important;background:transparent!important;padding:12px 5px!important;box-shadow:none!important}.assignment:first-child{border-top:0!important}.assignment::before{display:none!important}.assignment-title{font-family:var(--bb-sans)!important;font-size:10px!important;font-weight:700!important}.assignment-meta,.assignment-desc{font-size:8px!important;color:#8a777f!important}.badge{padding:4px 7px!important;border:0!important;border-radius:999px!important;background:var(--theme-tint)!important;color:var(--sys-blue-dark)!important}.due-editor{margin-top:7px}.due-editor input[type="date"]{min-height:31px;border-radius:7px;border-color:#eadcdf;background:#fff}.due-reset{min-height:31px;border-radius:7px}.complete-btn{border-radius:999px!important;border-color:#d8e8df!important;background:#f4faf6!important;color:#39755a!important;padding:6px 9px!important}.done .complete-btn{background:#39755a!important;color:white!important}.note{border-radius:8px!important;border-color:#ece1e4!important;background:#fff!important;font-size:9px!important}.attention-banner{border-radius:10px}.timer-strip{margin-top:12px;border:0;border-radius:14px;background:linear-gradient(110deg,var(--theme-dark),var(--theme-dark-2));box-shadow:0 8px 20px rgba(55,29,40,.12)}
.coursework-sidebar{display:grid;gap:12px;position:sticky;top:12px}.side-card{border:1px solid var(--bb-line);border-radius:14px;background:var(--bb-card);box-shadow:0 5px 16px rgba(79,43,57,.035);padding:15px}.side-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.side-card-head strong{display:block;margin-top:4px;font-family:var(--bb-serif);font-size:16px}.side-chip{padding:6px 8px;border-radius:8px;background:#f8f1f3;color:#8a6975;font-size:8px;font-weight:700}.progress-ring-row{display:grid;grid-template-columns:105px minmax(0,1fr);gap:13px;align-items:center;margin-top:14px}.progress-ring{--progress:0%;width:102px;height:102px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--theme-accent) var(--progress),#f0e4e7 0);position:relative}.progress-ring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:#fffdfc}.progress-ring-inner{position:relative;z-index:1;display:grid;place-items:center;text-align:center}.progress-ring-inner strong{font-family:var(--bb-serif);font-size:25px;line-height:1;color:var(--bb-ink)}.progress-ring-inner span{margin-top:3px;color:#9a7f89;font-size:7px;text-transform:uppercase;letter-spacing:.08em}.side-progress-stats{display:grid;gap:8px}.side-progress-stats div{display:grid;grid-template-columns:8px minmax(0,1fr);gap:7px;align-items:center;color:#75636a;font-size:8px;line-height:1.35}.stat-dot,.status-dot{width:6px;height:6px;border-radius:50%;background:#ccb2bc;display:block}.status-dot{background:#4b9c76}
.calendar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.calendar-head strong{font-family:var(--bb-serif);font-size:16px}.calendar-head button{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#8c6474;cursor:pointer;font-size:18px}.calendar-weekdays,.mini-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}.calendar-weekdays span{color:#a38b94;font-size:7px;font-weight:800}.mini-calendar{margin-top:5px}.cal-day{position:relative;min-height:30px;display:grid;place-items:center;border-radius:50%;font-size:8px;color:#66545b}.cal-day.muted{opacity:.28}.cal-day.today{background:var(--theme-accent);color:#fff;font-weight:800}.cal-day.has-due:not(.today)::after{content:"";position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--theme-accent)}.calendar-note{margin:10px 0 0;color:#99838c;font-size:7px;display:flex;align-items:center;gap:6px}.calendar-note span{width:5px;height:5px;border-radius:50%;background:var(--theme-accent)}
.appearance-card .theme-strip{justify-content:flex-start;margin-top:12px;color:#806b73;text-transform:none;letter-spacing:0}.appearance-card .theme-swatch{width:27px;height:27px;border-color:#e1d0d6;box-shadow:inset 0 0 0 2px white}.appearance-card .theme-swatch:hover,.appearance-card .theme-swatch.active{outline-color:var(--theme-accent)}.appearance-card .theme-custom-wrap{width:30px;height:30px;border-color:#e1d0d6;background:#fff}.appearance-card .theme-reset{min-height:30px;border-color:#e1d0d6;background:#fff;color:#765c65;border-radius:8px}.appearance-card .theme-personal-note{width:100%;text-align:left;color:#a18a93;font-size:7px}
.quote-card{min-height:150px;position:relative;overflow:hidden;background:radial-gradient(circle at 100% 0%,var(--theme-glow),transparent 38%),linear-gradient(135deg,#f8e6e9,#f1dadd)}.quote-mark{color:#b66a87;font-family:var(--bb-serif);font-size:42px;line-height:.6}.quote-card p{max-width:185px;margin:5px 0 0;font-family:var(--bb-serif);font-size:18px;line-height:1.12;color:#5d3545}.quote-card>span{display:block;margin-top:8px;color:#9c7180;font-size:8px;text-transform:uppercase;letter-spacing:.12em}.botanical{position:absolute;right:-3px;bottom:-6px;width:85px;height:120px}.botanical b{position:absolute;width:24px;height:64px;border-radius:90% 5% 90% 5%;background:var(--theme-accent);opacity:.24;transform-origin:bottom}.botanical b:nth-child(1){left:26px;bottom:0;transform:rotate(-20deg)}.botanical b:nth-child(2){left:47px;bottom:8px;transform:rotate(15deg) scale(.82)}.botanical b:nth-child(3){left:5px;bottom:15px;transform:rotate(-55deg) scale(.75)}.save-card{display:flex;align-items:center;gap:10px}.save-cloud-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#edf7f1;color:#4c8b68}.save-card strong{display:block;font-size:9px}.save-card span{display:block;margin-top:3px;color:#9a858d;font-size:7px}
#pageBuild,#pageSync{padding:18px;background:var(--bb-canvas)}#pageBuild .build-panel,#pageBuild .lesson,#pageSync .tool-card,#pageSync .hero{border-color:var(--bb-line)!important;border-radius:12px!important;background:var(--bb-card)!important;box-shadow:0 5px 16px rgba(79,43,57,.035)!important}#pageBuild .build-panel .panel-head,#pageSync .tool-head{background:linear-gradient(90deg,var(--theme-tint),#fbf8f8)!important;border-color:var(--bb-line)!important}#pageBuild .panel-code,#pageBuild .lesson-code,#pageSync .tool-label{color:var(--sys-blue-dark)!important}#pageBuild .build-panel h2,#pageSync .hero h2{color:var(--bb-ink)!important;font-family:var(--bb-serif)!important;text-transform:none!important;letter-spacing:-.035em!important}#pageBuild .lesson-title{font-family:var(--bb-sans)!important;color:var(--bb-ink)!important}#pageBuild .lesson-body,#pageBuild .stack-cell,#pageBuild .arch-node,#pageBuild .lesson-section,#pageBuild .lab-controls,#pageBuild .lab-preview{background:#fffdfc!important;border-color:var(--bb-line)!important}#pageBuild .code-block{background:#2d2027!important;border-radius:9px!important}#pageBuild .build-filter button{border-color:var(--bb-line)!important;background:#fffdfc!important;color:#836d75!important}#pageBuild .build-filter button.active{background:var(--theme-accent)!important;color:white!important;border-color:var(--theme-accent)!important}#pageSync .hero{border-top:0!important}#pageSync .field input,#pageSync .field select{border-color:var(--bb-line)!important;border-radius:9px!important}#pageSync .action-btn{border-radius:9px!important}.footer{width:min(1480px,100%);margin:0 auto;padding:11px 10px 18px;color:#755f68;font-size:8px}
@media(max-width:1080px){.bloom-head{grid-template-columns:1fr auto;gap:12px}.bloom-tabs{grid-column:1/-1;grid-row:2;padding-bottom:8px}.bloom-head-status{grid-column:2;grid-row:1}.coursework-layout{grid-template-columns:1fr}.coursework-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.side-progress{grid-column:1/-1}}
@media(max-width:760px){body{padding:0;background:var(--bb-canvas)}.bloom-shell{border:0;border-radius:0;box-shadow:none}.bloom-head{display:block;padding:15px 14px 0}.bloom-brand{margin-bottom:12px}.bloom-tabs{justify-content:flex-start;overflow:auto;padding-bottom:8px}.bloom-tabs .tab-btn{padding:10px 12px;white-space:nowrap}.bloom-head-status{display:none}.autosave-mobile{display:flex!important;color:#7b6870;padding:7px 0 10px}.bloom-course-page{padding:10px}.bloom-hero{grid-template-columns:1fr;min-height:0}.hero-still-life{min-height:135px}.hero-copy{padding:20px 17px 22px}.bloom-course-page .bloom-hero h2{font-size:36px!important}.program-strip{grid-template-columns:1fr;gap:10px}.program-metrics{justify-content:flex-start}.next-row{grid-template-columns:1fr}.next-card-body{grid-template-columns:110px minmax(0,1fr);gap:12px}.next-card-art{min-height:118px}.notebook-page{left:13px;top:15px;width:86px;height:90px;font-size:10px}.coursework-section{padding:11px}.coursework-section-head{align-items:flex-start}.coursework-section-head .small-action{white-space:nowrap}.coursework-sidebar{grid-template-columns:1fr}.side-progress{grid-column:auto}.progress-ring-row{grid-template-columns:102px minmax(0,1fr)}.quick-date-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.next-card-body{grid-template-columns:1fr}.next-card-art{display:none}.progress-ring-row{grid-template-columns:1fr;justify-items:center}.side-progress-stats{width:100%}}


/* ==========================================================
   NEXTRA V2 — refined Coursework identity + true dark mode
   ========================================================== */

:root{
  --nx-bg:#f1eeec;
  --nx-page:#fbfaf9;
  --nx-card:#ffffff;
  --nx-panel:#f7f4f3;
  --nx-text:#27232a;
  --nx-muted:#746f76;
  --nx-line:#e2dcda;
  --nx-shadow:0 7px 20px rgba(39,27,35,.05);
}

/* Nextra brand */
.nextra-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.nextra-mark{
  width:42px;
  height:42px;
  position:relative;
  flex:0 0 auto;
}
.nextra-mark span{
  position:absolute;
  bottom:7px;
  width:11px;
  height:27px;
  background:linear-gradient(180deg,var(--theme-accent-2),var(--theme-accent));
}
.nextra-mark .mark-left{
  left:7px;
  clip-path:polygon(0 0,100% 0,100% 70%,45% 100%,0 78%);
}
.nextra-mark .mark-right{
  right:7px;
  clip-path:polygon(55% 0,100% 20%,100% 100%,0 100%,0 30%);
}
.nextra-brand .brand-title{
  font-family:var(--bb-serif)!important;
  font-size:31px!important;
  letter-spacing:-.035em!important;
}
.nextra-brand .brand-subtitle{
  text-transform:uppercase;
  letter-spacing:.19em;
  font-size:7px;
}

/* Nextra-style hero */
.nextra-hero{
  min-height:205px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  border:1px solid var(--nx-line);
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(105deg,rgba(255,255,255,.82),rgba(255,255,255,.42)),
    linear-gradient(135deg,#f7f4f1,#eee9e6);
  box-shadow:var(--nx-shadow);
}
.nextra-hero-copy{
  padding:30px 28px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.nextra-program-label{
  color:#8f8791;
  font-size:8px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.nextra-hero h2{
  margin:6px 0 7px;
  color:var(--nx-text);
  font-family:var(--bb-serif)!important;
  font-size:clamp(42px,5vw,68px)!important;
  line-height:.92!important;
  letter-spacing:-.055em!important;
  text-transform:none!important;
  font-weight:600!important;
}
.nextra-hero-copy>p{
  margin:0;
  max-width:720px;
  color:var(--nx-muted);
  font-size:11px;
  line-height:1.6;
}
.hero-tags{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:14px;
}
.hero-tags span{
  padding:6px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--theme-accent) 9%,#f0ecec);
  color:#655d65;
  font-size:8px;
  font-weight:700;
}

.nextra-hero-art{
  position:relative;
  min-height:205px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.28),transparent),
    linear-gradient(135deg,#d9d4d2,#f6f3f1 46%,#cfc8c5);
}
.nextra-hero-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(251,250,249,.1),rgba(251,250,249,.02));
}
.arch-curve{
  position:absolute;
  border-radius:50%;
  border:22px solid rgba(87,82,88,.18);
  border-left-color:transparent;
  border-bottom-color:transparent;
}
.curve-a{
  width:310px;height:310px;left:-55px;top:-155px;transform:rotate(28deg);
}
.curve-b{
  width:235px;height:235px;right:-45px;top:-70px;transform:rotate(63deg);
  border-width:18px;
  border-color:rgba(255,255,255,.42);
  border-left-color:transparent;
  border-bottom-color:transparent;
}
.curve-c{
  width:190px;height:190px;left:70px;bottom:-115px;transform:rotate(38deg);
  border-width:16px;
  border-color:rgba(96,90,95,.13);
  border-left-color:transparent;
}
.arch-block{
  position:absolute;
  right:31%;
  bottom:0;
  width:140px;
  height:102px;
  padding:18px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:rgba(118,108,112,.46);
  color:white;
  backdrop-filter:blur(4px);
  z-index:2;
}
.arch-block strong{
  font-family:var(--bb-serif);
  font-size:16px;
  line-height:1.05;
  font-weight:500;
}
.arch-quote{
  position:absolute;
  right:22px;
  top:41px;
  width:170px;
  z-index:2;
  color:#514c52;
  font-family:var(--bb-serif);
  font-style:italic;
  font-size:13px;
  line-height:1.28;
  text-align:right;
}

/* Appearance mode control */
.mode-toggle{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-top:12px;
  padding:4px;
  border:1px solid var(--nx-line);
  border-radius:10px;
  background:var(--nx-panel);
}
.mode-toggle button{
  min-height:33px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--nx-muted);
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}
.mode-toggle button.active{
  background:var(--nx-card);
  color:var(--sys-blue-dark);
  box-shadow:0 2px 8px rgba(34,22,31,.06);
}

/* Make the overall current layout closer to the Nextra reference */
.bloom-course-page{
  background:var(--nx-page)!important;
}
.bloom-shell{
  background:var(--nx-page)!important;
}
.bloom-head{
  background:color-mix(in srgb,var(--nx-card) 94%,transparent)!important;
  border-color:var(--nx-line)!important;
}
.program-strip,
.next-assignment-card,
.next-due-card,
.coursework-section,
.side-card{
  background:var(--nx-card)!important;
  border-color:var(--nx-line)!important;
  box-shadow:var(--nx-shadow)!important;
}
.coursework-section{
  padding-top:14px!important;
}
.week-card{
  border-color:var(--nx-line)!important;
}
.week-summary{
  background:var(--nx-card)!important;
}
.week-body{
  background:var(--nx-panel)!important;
}
.assignment{
  color:var(--nx-text)!important;
}
.assignment-title{
  color:var(--nx-text)!important;
}
.assignment-meta,
.assignment-desc,
.week-goal,
.program-metrics,
.side-progress-stats div,
.calendar-note{
  color:var(--nx-muted)!important;
}
.schedule-tools,
.due-note{
  background:var(--nx-panel)!important;
  border-color:var(--nx-line)!important;
}
.segmented{
  background:var(--nx-panel)!important;
}
.note,
.due-editor input[type="date"],
.next-date-input,
.schedule-field input{
  background:var(--nx-card)!important;
  color:var(--nx-text)!important;
  border-color:var(--nx-line)!important;
}

/* DARK MODE */
html[data-appearance="dark"]{
  --nx-bg:#151318;
  --nx-page:#18151b;
  --nx-card:#211d24;
  --nx-panel:#29242c;
  --nx-text:#f3edf2;
  --nx-muted:#aaa0a8;
  --nx-line:#373038;
  --nx-shadow:0 9px 28px rgba(0,0,0,.22);

  --bb-bg:#151318;
  --bb-canvas:#18151b;
  --bb-card:#211d24;
  --bb-ink:#f3edf2;
  --bb-copy:#aaa0a8;
  --bb-line:#373038;
}
html[data-appearance="dark"],
html[data-appearance="dark"] body{
  background:
    radial-gradient(circle at 12% -4%,var(--theme-glow),transparent 26%),
    linear-gradient(145deg,#100e12,#1a161c 55%,#121014)!important;
  color:var(--nx-text);
}
html[data-appearance="dark"] .bloom-head{
  background:rgba(27,23,29,.94)!important;
}
html[data-appearance="dark"] .brand-title,
html[data-appearance="dark"] .nextra-hero h2,
html[data-appearance="dark"] .program-title span,
html[data-appearance="dark"] .coursework-section-head h3,
html[data-appearance="dark"] .week-title,
html[data-appearance="dark"] .side-card-head strong,
html[data-appearance="dark"] .calendar-head strong,
html[data-appearance="dark"] .next-card-copy h3,
html[data-appearance="dark"] .due-card-head strong{
  color:var(--nx-text)!important;
}
html[data-appearance="dark"] .brand-subtitle,
html[data-appearance="dark"] .nextra-program-label,
html[data-appearance="dark"] .nextra-hero-copy>p,
html[data-appearance="dark"] .program-title small,
html[data-appearance="dark"] .coursework-section-head p{
  color:var(--nx-muted)!important;
}
html[data-appearance="dark"] .nextra-hero{
  background:
    linear-gradient(110deg,rgba(255,255,255,.025),rgba(255,255,255,.015)),
    linear-gradient(135deg,#252029,#1b181e)!important;
}
html[data-appearance="dark"] .nextra-hero-art{
  background:
    radial-gradient(circle at 75% 0%,var(--theme-glow),transparent 35%),
    linear-gradient(135deg,#2c282f,#171519)!important;
}
html[data-appearance="dark"] .arch-quote{color:#e0d6de}
html[data-appearance="dark"] .hero-tags span{
  color:#d6ccd3;
  background:color-mix(in srgb,var(--theme-accent) 15%,#2a252c);
}
html[data-appearance="dark"] .program-strip,
html[data-appearance="dark"] .next-assignment-card,
html[data-appearance="dark"] .next-due-card,
html[data-appearance="dark"] .coursework-section,
html[data-appearance="dark"] .side-card,
html[data-appearance="dark"] .week-card,
html[data-appearance="dark"] .schedule-tools{
  background:var(--nx-card)!important;
  border-color:var(--nx-line)!important;
}
html[data-appearance="dark"] .week-summary{
  background:var(--nx-card)!important;
}
html[data-appearance="dark"] .week-body,
html[data-appearance="dark"] .schedule-tools,
html[data-appearance="dark"] .due-note,
html[data-appearance="dark"] .segmented,
html[data-appearance="dark"] .mode-toggle{
  background:var(--nx-panel)!important;
}
html[data-appearance="dark"] .assignment{
  border-color:var(--nx-line)!important;
}
html[data-appearance="dark"] .note,
html[data-appearance="dark"] .due-editor input[type="date"],
html[data-appearance="dark"] .next-date-input,
html[data-appearance="dark"] .schedule-field input{
  background:#18151b!important;
  color:var(--nx-text)!important;
  border-color:var(--nx-line)!important;
}
html[data-appearance="dark"] .segmented button.active,
html[data-appearance="dark"] .mode-toggle button.active{
  background:#342e37!important;
  color:#fff!important;
}
html[data-appearance="dark"] .calendar-card,
html[data-appearance="dark"] .appearance-card,
html[data-appearance="dark"] .save-card{
  background:var(--nx-card)!important;
}
html[data-appearance="dark"] .progress-ring::after{
  background:var(--nx-card)!important;
}
html[data-appearance="dark"] .cal-day{
  color:#c7bdc4;
}
html[data-appearance="dark"] .quote-card{
  background:
    radial-gradient(circle at 100% 0%,var(--theme-glow),transparent 38%),
    linear-gradient(135deg,#2e242c,#211c22)!important;
}
html[data-appearance="dark"] .quote-card p{color:#f1e7ee!important}
html[data-appearance="dark"] .theme-custom-wrap,
html[data-appearance="dark"] .theme-reset{
  background:#19161b!important;
  border-color:var(--nx-line)!important;
  color:#cbbfc8!important;
}

/* Build Lab + Sync follow mode */
html[data-appearance="dark"] #pageBuild,
html[data-appearance="dark"] #pageSync{
  background:var(--nx-page)!important;
}
html[data-appearance="dark"] #pageBuild .build-panel,
html[data-appearance="dark"] #pageBuild .lesson,
html[data-appearance="dark"] #pageSync .tool-card,
html[data-appearance="dark"] #pageSync .hero{
  background:var(--nx-card)!important;
  border-color:var(--nx-line)!important;
  color:var(--nx-text)!important;
}
html[data-appearance="dark"] #pageBuild .build-panel .panel-head,
html[data-appearance="dark"] #pageSync .tool-head{
  background:var(--nx-panel)!important;
  border-color:var(--nx-line)!important;
}
html[data-appearance="dark"] #pageBuild .lesson-body,
html[data-appearance="dark"] #pageBuild .stack-cell,
html[data-appearance="dark"] #pageBuild .arch-node,
html[data-appearance="dark"] #pageBuild .lesson-section,
html[data-appearance="dark"] #pageBuild .lab-controls,
html[data-appearance="dark"] #pageBuild .lab-preview{
  background:#1b181e!important;
  border-color:var(--nx-line)!important;
  color:var(--nx-text)!important;
}
html[data-appearance="dark"] #pageBuild .lesson-title,
html[data-appearance="dark"] #pageBuild .build-panel h2,
html[data-appearance="dark"] #pageSync .hero h2{
  color:var(--nx-text)!important;
}
html[data-appearance="dark"] #pageBuild .build-panel p,
html[data-appearance="dark"] #pageBuild .lesson-body p,
html[data-appearance="dark"] #pageBuild .lesson-sub,
html[data-appearance="dark"] #pageSync .tool-body p{
  color:var(--nx-muted)!important;
}
html[data-appearance="dark"] #pageSync .field input,
html[data-appearance="dark"] #pageSync .field select{
  background:#18151b!important;
  color:var(--nx-text)!important;
  border-color:var(--nx-line)!important;
}

/* System mode mirrors OS preference */
@media(prefers-color-scheme:dark){
  html[data-appearance="system"]{
    --nx-bg:#151318;
    --nx-page:#18151b;
    --nx-card:#211d24;
    --nx-panel:#29242c;
    --nx-text:#f3edf2;
    --nx-muted:#aaa0a8;
    --nx-line:#373038;
    --nx-shadow:0 9px 28px rgba(0,0,0,.22);
    --bb-bg:#151318;
    --bb-canvas:#18151b;
    --bb-card:#211d24;
    --bb-ink:#f3edf2;
    --bb-copy:#aaa0a8;
    --bb-line:#373038;
  }
  html[data-appearance="system"],
  html[data-appearance="system"] body{
    background:linear-gradient(145deg,#100e12,#1a161c 55%,#121014)!important;
    color:var(--nx-text);
  }
  html[data-appearance="system"] .bloom-head,
  html[data-appearance="system"] .program-strip,
  html[data-appearance="system"] .next-assignment-card,
  html[data-appearance="system"] .next-due-card,
  html[data-appearance="system"] .coursework-section,
  html[data-appearance="system"] .side-card,
  html[data-appearance="system"] .week-card{
    background:var(--nx-card)!important;
    border-color:var(--nx-line)!important;
  }
  html[data-appearance="system"] .nextra-hero{
    background:linear-gradient(135deg,#252029,#1b181e)!important;
  }
  html[data-appearance="system"] .nextra-hero h2,
  html[data-appearance="system"] .brand-title,
  html[data-appearance="system"] .program-title span,
  html[data-appearance="system"] .coursework-section-head h3,
  html[data-appearance="system"] .week-title,
  html[data-appearance="system"] .side-card-head strong{
    color:var(--nx-text)!important;
  }
  html[data-appearance="system"] .week-body,
  html[data-appearance="system"] .schedule-tools,
  html[data-appearance="system"] .due-note,
  html[data-appearance="system"] .segmented,
  html[data-appearance="system"] .mode-toggle{
    background:var(--nx-panel)!important;
  }
}

@media(max-width:860px){
  .nextra-hero{grid-template-columns:1fr}
  .nextra-hero-art{min-height:155px}
  .arch-block{right:auto;left:36px}
  .arch-quote{right:18px;top:28px}
}


/* ==========================================================
   NEXTRA V2.1 — DARK CANVAS MODE
   Dark mode affects the surrounding/page background only.
   Foreground panels stay light for contrast and readability.
   ========================================================== */

html[data-appearance="dark"]{
  --nx-bg:#121014;
  --nx-page:transparent;
  --nx-card:#fffdfc;
  --nx-panel:#f7f4f3;
  --nx-text:#27232a;
  --nx-muted:#746f76;
  --nx-line:#e2dcda;
  --nx-shadow:0 12px 34px rgba(0,0,0,.24);

  --bb-bg:#121014;
  --bb-canvas:transparent;
  --bb-card:#fffdfc;
  --bb-ink:#321a25;
  --bb-copy:#715d65;
  --bb-line:#eadcdf;
}

html[data-appearance="dark"],
html[data-appearance="dark"] body{
  background:
    radial-gradient(circle at 16% -5%,var(--theme-glow),transparent 28%),
    radial-gradient(circle at 88% 8%,rgba(255,255,255,.04),transparent 20%),
    linear-gradient(145deg,#100d12,#1a151c 55%,#121014)!important;
  color:var(--nx-text)!important;
}

/* Keep the main shell and page transparent so the dark background is visible. */
html[data-appearance="dark"] .bloom-shell{
  background:transparent!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.30)!important;
}
html[data-appearance="dark"] .bloom-course-page,
html[data-appearance="dark"] #pageBuild,
html[data-appearance="dark"] #pageSync{
  background:transparent!important;
}

/* Header stays light instead of becoming a dark bar. */
html[data-appearance="dark"] .bloom-head{
  background:rgba(255,253,252,.96)!important;
  color:#27232a!important;
  border-color:#e2dcda!important;
}
html[data-appearance="dark"] .bloom-head .brand-title{
  color:#27232a!important;
}
html[data-appearance="dark"] .bloom-head .brand-subtitle,
html[data-appearance="dark"] .bloom-head .autosave-status{
  color:#746f76!important;
}

/* Keep the hero and all primary panels light. */
html[data-appearance="dark"] .nextra-hero{
  background:
    linear-gradient(105deg,rgba(255,255,255,.84),rgba(255,255,255,.45)),
    linear-gradient(135deg,#f7f4f1,#eee9e6)!important;
  border-color:#e2dcda!important;
}
html[data-appearance="dark"] .nextra-hero-art{
  background:
    linear-gradient(135deg,rgba(255,255,255,.28),transparent),
    linear-gradient(135deg,#d9d4d2,#f6f3f1 46%,#cfc8c5)!important;
}
html[data-appearance="dark"] .nextra-hero h2{
  color:#27232a!important;
}
html[data-appearance="dark"] .nextra-hero-copy>p,
html[data-appearance="dark"] .nextra-program-label{
  color:#746f76!important;
}
html[data-appearance="dark"] .arch-quote{
  color:#514c52!important;
}

html[data-appearance="dark"] .program-strip,
html[data-appearance="dark"] .next-assignment-card,
html[data-appearance="dark"] .next-due-card,
html[data-appearance="dark"] .coursework-section,
html[data-appearance="dark"] .side-card,
html[data-appearance="dark"] .week-card,
html[data-appearance="dark"] .schedule-tools,
html[data-appearance="dark"] #pageBuild .build-panel,
html[data-appearance="dark"] #pageBuild .lesson,
html[data-appearance="dark"] #pageSync .tool-card,
html[data-appearance="dark"] #pageSync .hero{
  background:#fffdfc!important;
  color:#27232a!important;
  border-color:#e2dcda!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}

/* Secondary inset surfaces remain pale, not charcoal. */
html[data-appearance="dark"] .week-body,
html[data-appearance="dark"] .schedule-tools-head,
html[data-appearance="dark"] .due-note,
html[data-appearance="dark"] .segmented,
html[data-appearance="dark"] .mode-toggle,
html[data-appearance="dark"] #pageBuild .build-panel .panel-head,
html[data-appearance="dark"] #pageSync .tool-head,
html[data-appearance="dark"] #pageBuild .lesson-body,
html[data-appearance="dark"] #pageBuild .stack-cell,
html[data-appearance="dark"] #pageBuild .arch-node,
html[data-appearance="dark"] #pageBuild .lesson-section,
html[data-appearance="dark"] #pageBuild .lab-controls,
html[data-appearance="dark"] #pageBuild .lab-preview{
  background:#f7f4f3!important;
  color:#27232a!important;
  border-color:#e2dcda!important;
}

/* Inputs remain bright and easy to scan. */
html[data-appearance="dark"] .note,
html[data-appearance="dark"] .due-editor input[type="date"],
html[data-appearance="dark"] .next-date-input,
html[data-appearance="dark"] .schedule-field input,
html[data-appearance="dark"] #pageSync .field input,
html[data-appearance="dark"] #pageSync .field select{
  background:#ffffff!important;
  color:#27232a!important;
  border-color:#ddd5d3!important;
}

/* Typography stays dark because the cards are light. */
html[data-appearance="dark"] .program-title span,
html[data-appearance="dark"] .coursework-section-head h3,
html[data-appearance="dark"] .week-title,
html[data-appearance="dark"] .assignment-title,
html[data-appearance="dark"] .side-card-head strong,
html[data-appearance="dark"] .calendar-head strong,
html[data-appearance="dark"] .next-card-copy h3,
html[data-appearance="dark"] .due-card-head strong,
html[data-appearance="dark"] #pageBuild .lesson-title,
html[data-appearance="dark"] #pageBuild .build-panel h2,
html[data-appearance="dark"] #pageSync .hero h2{
  color:#27232a!important;
}
html[data-appearance="dark"] .assignment-meta,
html[data-appearance="dark"] .assignment-desc,
html[data-appearance="dark"] .week-goal,
html[data-appearance="dark"] .program-metrics,
html[data-appearance="dark"] .side-progress-stats div,
html[data-appearance="dark"] .calendar-note,
html[data-appearance="dark"] #pageBuild .build-panel p,
html[data-appearance="dark"] #pageBuild .lesson-body p,
html[data-appearance="dark"] #pageBuild .lesson-sub,
html[data-appearance="dark"] #pageSync .tool-body p{
  color:#746f76!important;
}

/* Keep the progress donut center light. */
html[data-appearance="dark"] .progress-ring::after{
  background:#fffdfc!important;
}

/* Theme / mode controls remain light cards. */
html[data-appearance="dark"] .mode-toggle{
  background:#f2eeee!important;
}
html[data-appearance="dark"] .mode-toggle button{
  color:#746f76!important;
}
html[data-appearance="dark"] .mode-toggle button.active{
  background:#fff!important;
  color:var(--sys-blue-dark)!important;
}
html[data-appearance="dark"] .theme-custom-wrap,
html[data-appearance="dark"] .theme-reset{
  background:#fff!important;
  border-color:#ddd5d3!important;
  color:#6f5c64!important;
}

/* Dark canvas also works on mobile without turning panels dark. */
@media(max-width:760px){
  html[data-appearance="dark"] body{
    background:
      radial-gradient(circle at 15% -3%,var(--theme-glow),transparent 25%),
      linear-gradient(145deg,#100d12,#18131a)!important;
  }
  html[data-appearance="dark"] .bloom-shell{
    background:transparent!important;
  }
}


@media(prefers-color-scheme:dark){
  html[data-appearance="system"]{
    --nx-page:transparent;
    --nx-card:#fffdfc;
    --nx-panel:#f7f4f3;
    --nx-text:#27232a;
    --nx-muted:#746f76;
    --nx-line:#e2dcda;
    --bb-canvas:transparent;
    --bb-card:#fffdfc;
    --bb-ink:#321a25;
    --bb-copy:#715d65;
    --bb-line:#eadcdf;
  }
  html[data-appearance="system"],
  html[data-appearance="system"] body{
    background:
      radial-gradient(circle at 16% -5%,var(--theme-glow),transparent 28%),
      linear-gradient(145deg,#100d12,#1a151c 55%,#121014)!important;
    color:#27232a!important;
  }
  html[data-appearance="system"] .bloom-shell,
  html[data-appearance="system"] .bloom-course-page,
  html[data-appearance="system"] #pageBuild,
  html[data-appearance="system"] #pageSync{
    background:transparent!important;
  }
  html[data-appearance="system"] .bloom-head,
  html[data-appearance="system"] .program-strip,
  html[data-appearance="system"] .next-assignment-card,
  html[data-appearance="system"] .next-due-card,
  html[data-appearance="system"] .coursework-section,
  html[data-appearance="system"] .side-card,
  html[data-appearance="system"] .week-card,
  html[data-appearance="system"] #pageBuild .build-panel,
  html[data-appearance="system"] #pageBuild .lesson,
  html[data-appearance="system"] #pageSync .tool-card,
  html[data-appearance="system"] #pageSync .hero{
    background:#fffdfc!important;
    color:#27232a!important;
    border-color:#e2dcda!important;
  }
}


/* ==========================================================
   NEXTRA V2.2 — CUSTOM SURFACES
   Three independent theme tokens:
   --user-background, --user-panel, --theme-accent
   ========================================================== */
:root{
  --user-background:#f1eeec;
  --user-panel:#fffdfc;
  --user-panel-soft:#f7f4f3;
  --user-panel-line:#e2dcda;
  --user-panel-text:#27232a;
  --user-panel-muted:#746f76;
}

/* Appearance color controls */
.surface-customizer{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.surface-color-field{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.surface-color-field>span{
  color:#6f6269;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.surface-color-control{
  min-width:0;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:4px 8px 4px 4px;
  border:1px solid var(--user-panel-line);
  border-radius:9px;
  background:rgba(255,255,255,.52);
}
.surface-color-control input[type="color"]{
  width:30px;
  height:30px;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}
.surface-color-control code{
  color:#6f6269;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:8px;
}
.accent-presets{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px;
}
.accent-presets .theme-swatch{
  width:26px;
  height:26px;
  border-color:var(--user-panel-line);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.82);
}
.appearance-actions{
  display:grid;
  gap:7px;
  margin-top:10px;
}
.appearance-actions .theme-reset{
  width:max-content;
  min-height:30px;
  padding:5px 9px;
  border:1px solid var(--user-panel-line);
  border-radius:8px;
  background:rgba(255,255,255,.58);
  color:#6e5d65;
  cursor:pointer;
}
.appearance-actions .theme-personal-note{
  width:100%;
  text-align:left;
  color:#918189;
  font-size:7px;
}

/* All appearance modes use the configurable canvas. */
html,
body{
  background-color:var(--user-background)!important;
}
body{
  background:
    radial-gradient(circle at 16% -5%,var(--theme-glow),transparent 28%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--user-background) 88%,#000 12%),
      var(--user-background) 56%,
      color-mix(in srgb,var(--user-background) 92%,#000 8%))!important;
}

/* Main floating cards and panels all use the user-selected panel token. */
.bloom-head,
.program-strip,
.next-assignment-card,
.next-due-card,
.coursework-section,
.side-card,
.week-card,
.schedule-tools,
#pageBuild .build-panel,
#pageBuild .lesson,
#pageSync .tool-card,
#pageSync .hero{
  background:var(--user-panel)!important;
  border-color:var(--user-panel-line)!important;
}

/* Soft/inset panel surfaces are derived automatically. */
.week-body,
.schedule-tools-head,
.due-note,
.segmented,
.mode-toggle,
#pageBuild .build-panel .panel-head,
#pageSync .tool-head,
#pageBuild .lesson-body,
#pageBuild .stack-cell,
#pageBuild .arch-node,
#pageBuild .lesson-section,
#pageBuild .lab-controls,
#pageBuild .lab-preview{
  background:var(--user-panel-soft)!important;
  border-color:var(--user-panel-line)!important;
}

/* Inputs remain slightly brighter/darker than the panel itself. */
.note,
.due-editor input[type="date"],
.next-date-input,
.schedule-field input,
#pageSync .field input,
#pageSync .field select{
  background:color-mix(in srgb,var(--user-panel) 91%,#fff 9%)!important;
  color:var(--user-panel-text)!important;
  border-color:var(--user-panel-line)!important;
}

/* Text adapts to selected panel luminance. */
.brand-title,
.nextra-hero h2,
.program-title span,
.coursework-section-head h3,
.week-title,
.assignment-title,
.side-card-head strong,
.calendar-head strong,
.next-card-copy h3,
.due-card-head strong,
#pageBuild .lesson-title,
#pageBuild .build-panel h2,
#pageSync .hero h2{
  color:var(--user-panel-text)!important;
}
.brand-subtitle,
.nextra-program-label,
.nextra-hero-copy>p,
.program-title small,
.coursework-section-head p,
.assignment-meta,
.assignment-desc,
.week-goal,
.program-metrics,
.side-progress-stats div,
.calendar-note,
#pageBuild .build-panel p,
#pageBuild .lesson-body p,
#pageBuild .lesson-sub,
#pageSync .tool-body p{
  color:var(--user-panel-muted)!important;
}

/* The hero is kept lighter than the canvas but follows panel tuning. */
.nextra-hero{
  background:
    linear-gradient(105deg,
      color-mix(in srgb,var(--user-panel) 96%,#fff 4%),
      color-mix(in srgb,var(--user-panel) 86%,transparent 14%)),
    linear-gradient(135deg,var(--user-panel-soft),var(--user-panel))!important;
  border-color:var(--user-panel-line)!important;
}
.nextra-hero-art{
  background:
    radial-gradient(circle at 78% 0%,var(--theme-glow),transparent 36%),
    linear-gradient(135deg,
      color-mix(in srgb,var(--user-panel) 74%,#777 26%),
      color-mix(in srgb,var(--user-panel) 94%,#fff 6%) 48%,
      color-mix(in srgb,var(--user-panel) 68%,#777 32%))!important;
}
.arch-quote{color:var(--user-panel-text)!important}

/* Progress center follows panel instead of pure white. */
.progress-ring::after{
  background:var(--user-panel)!important;
}

/* Current dark-mode default: dark canvas + soft light-grey panels. */
html[data-appearance="dark"]{
  --user-background:#121014;
  --user-panel:#dedade;
  --user-panel-soft:#d2ced3;
  --user-panel-line:#beb8c0;
  --user-panel-text:#29242b;
  --user-panel-muted:#6f6870;
}

/* Light-mode default. */
html[data-appearance="light"]{
  --user-background:#f1eeec;
  --user-panel:#fffdfc;
  --user-panel-soft:#f7f4f3;
  --user-panel-line:#e2dcda;
  --user-panel-text:#27232a;
  --user-panel-muted:#746f76;
}

/* System light baseline. JS replaces these when OS dark and/or custom colors exist. */
html[data-appearance="system"]{
  --user-background:#f1eeec;
  --user-panel:#fffdfc;
  --user-panel-soft:#f7f4f3;
  --user-panel-line:#e2dcda;
  --user-panel-text:#27232a;
  --user-panel-muted:#746f76;
}

/* Remove old dark-mode overrides that tried to make cards white/dark explicitly.
   These declarations come last, so the custom variables win. */
html[data-appearance="dark"] .bloom-shell,
html[data-appearance="system"] .bloom-shell{
  background:transparent!important;
}
html[data-appearance="dark"] .bloom-course-page,
html[data-appearance="dark"] #pageBuild,
html[data-appearance="dark"] #pageSync,
html[data-appearance="system"] .bloom-course-page,
html[data-appearance="system"] #pageBuild,
html[data-appearance="system"] #pageSync{
  background:transparent!important;
}

/* Keep selected-mode controls readable on arbitrary panels. */
.mode-toggle button{
  color:var(--user-panel-muted)!important;
}
.mode-toggle button.active{
  background:color-mix(in srgb,var(--user-panel) 80%,#fff 20%)!important;
  color:var(--sys-blue-dark)!important;
}
.theme-reset{
  border-color:var(--user-panel-line)!important;
}

/* Mobile color controls */
@media(max-width:760px){
  .surface-color-field{
    grid-template-columns:1fr;
    gap:4px;
  }
  .surface-color-control{
    grid-template-columns:42px minmax(0,1fr);
  }
  .surface-color-control input[type="color"]{
    width:38px;height:34px;
  }
}


/* ==========================================================
   NEXTRA V2.3 — FIXED THEME ENGINE
   This layer intentionally wins over all earlier appearance CSS.
   ========================================================== */
:root{
  --user-background:#f1eeec;
  --user-panel:#fffdfc;
  --user-panel-soft:#f4f1f2;
  --user-panel-line:#ddd6da;
  --user-panel-text:#27232a;
  --user-panel-muted:#746f76;
}

.mode-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding:8px 9px;
  border:1px solid var(--user-panel-line);
  border-radius:8px;
  background:color-mix(in srgb,var(--user-panel) 88%,#fff 12%);
}
.mode-status-row span{
  color:var(--user-panel-muted);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mode-status-row strong{
  color:var(--sys-blue-dark);
  font-size:9px;
}
.surface-presets{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:10px;
}
.surface-presets button{
  min-height:32px;
  border:1px solid var(--user-panel-line);
  border-radius:8px;
  background:color-mix(in srgb,var(--user-panel) 90%,#fff 10%);
  color:var(--user-panel-text);
  font-size:8px;
  font-weight:750;
  cursor:pointer;
}

/* The PAGE CANVAS is always controlled by --user-background.
   Use a class as a second independent signal so mode switching
   cannot be cancelled by older data-appearance rules. */
html,
body{
  min-height:100%;
}
body{
  background-color:var(--user-background)!important;
  background-image:
    radial-gradient(circle at 16% -6%,var(--theme-glow),transparent 27%),
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--user-background) 84%,#000 16%),
      var(--user-background) 56%,
      color-mix(in srgb,var(--user-background) 92%,#000 8%)
    )!important;
  background-attachment:fixed!important;
}

/* Light mode keeps the original page/shell relationship. */
body.mode-light .bloom-shell{
  background:var(--nx-page,#fbfaf9)!important;
}

/* Dark Canvas exposes the dark canvas around all the light-grey cards. */
body.mode-dark-canvas .bloom-shell,
body.mode-dark-canvas .bloom-course-page,
body.mode-dark-canvas #pageBuild,
body.mode-dark-canvas #pageSync{
  background:transparent!important;
}

/* Every major floating surface uses the selected Panel color. */
body.mode-dark-canvas .bloom-head,
body.mode-dark-canvas .nextra-hero,
body.mode-dark-canvas .program-strip,
body.mode-dark-canvas .next-assignment-card,
body.mode-dark-canvas .next-due-card,
body.mode-dark-canvas .coursework-section,
body.mode-dark-canvas .side-card,
body.mode-dark-canvas .week-card,
body.mode-dark-canvas .schedule-tools,
body.mode-dark-canvas #pageBuild .build-panel,
body.mode-dark-canvas #pageBuild .lesson,
body.mode-dark-canvas #pageSync .tool-card,
body.mode-dark-canvas #pageSync .hero,

body.mode-light .bloom-head,
body.mode-light .program-strip,
body.mode-light .next-assignment-card,
body.mode-light .next-due-card,
body.mode-light .coursework-section,
body.mode-light .side-card,
body.mode-light .week-card,
body.mode-light .schedule-tools,
body.mode-light #pageBuild .build-panel,
body.mode-light #pageBuild .lesson,
body.mode-light #pageSync .tool-card,
body.mode-light #pageSync .hero{
  background:var(--user-panel)!important;
  color:var(--user-panel-text)!important;
  border-color:var(--user-panel-line)!important;
}

/* Hero art stays tonal but derives from the selected panel. */
body.mode-dark-canvas .nextra-hero{
  background:
    linear-gradient(105deg,
      color-mix(in srgb,var(--user-panel) 95%,#fff 5%),
      color-mix(in srgb,var(--user-panel) 89%,transparent 11%)),
    linear-gradient(135deg,var(--user-panel-soft),var(--user-panel))!important;
}
body.mode-dark-canvas .nextra-hero-art{
  background:
    radial-gradient(circle at 78% 0%,var(--theme-glow),transparent 34%),
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--user-panel) 70%,#777 30%),
      color-mix(in srgb,var(--user-panel) 95%,#fff 5%) 48%,
      color-mix(in srgb,var(--user-panel) 66%,#777 34%)
    )!important;
}

/* Secondary surfaces are derived instead of hardcoded white. */
body.mode-dark-canvas .week-body,
body.mode-dark-canvas .schedule-tools-head,
body.mode-dark-canvas .due-note,
body.mode-dark-canvas .segmented,
body.mode-dark-canvas .mode-toggle,
body.mode-dark-canvas #pageBuild .build-panel .panel-head,
body.mode-dark-canvas #pageSync .tool-head,
body.mode-dark-canvas #pageBuild .lesson-body,
body.mode-dark-canvas #pageBuild .stack-cell,
body.mode-dark-canvas #pageBuild .arch-node,
body.mode-dark-canvas #pageBuild .lesson-section,
body.mode-dark-canvas #pageBuild .lab-controls,
body.mode-dark-canvas #pageBuild .lab-preview{
  background:var(--user-panel-soft)!important;
  border-color:var(--user-panel-line)!important;
}

/* Inputs match the grey panels instead of glowing white. */
body.mode-dark-canvas .note,
body.mode-dark-canvas .due-editor input[type="date"],
body.mode-dark-canvas .next-date-input,
body.mode-dark-canvas .schedule-field input,
body.mode-dark-canvas #pageSync .field input,
body.mode-dark-canvas #pageSync .field select{
  background:color-mix(in srgb,var(--user-panel) 92%,#fff 8%)!important;
  color:var(--user-panel-text)!important;
  border-color:var(--user-panel-line)!important;
}

/* Text follows panel contrast. */
body.mode-dark-canvas .brand-title,
body.mode-dark-canvas .nextra-hero h2,
body.mode-dark-canvas .program-title span,
body.mode-dark-canvas .coursework-section-head h3,
body.mode-dark-canvas .week-title,
body.mode-dark-canvas .assignment-title,
body.mode-dark-canvas .side-card-head strong,
body.mode-dark-canvas .calendar-head strong,
body.mode-dark-canvas .next-card-copy h3,
body.mode-dark-canvas .due-card-head strong,
body.mode-dark-canvas #pageBuild .lesson-title,
body.mode-dark-canvas #pageBuild .build-panel h2,
body.mode-dark-canvas #pageSync .hero h2{
  color:var(--user-panel-text)!important;
}
body.mode-dark-canvas .brand-subtitle,
body.mode-dark-canvas .nextra-program-label,
body.mode-dark-canvas .nextra-hero-copy>p,
body.mode-dark-canvas .program-title small,
body.mode-dark-canvas .coursework-section-head p,
body.mode-dark-canvas .assignment-meta,
body.mode-dark-canvas .assignment-desc,
body.mode-dark-canvas .week-goal,
body.mode-dark-canvas .program-metrics,
body.mode-dark-canvas .side-progress-stats div,
body.mode-dark-canvas .calendar-note,
body.mode-dark-canvas #pageBuild .build-panel p,
body.mode-dark-canvas #pageBuild .lesson-body p,
body.mode-dark-canvas #pageBuild .lesson-sub,
body.mode-dark-canvas #pageSync .tool-body p{
  color:var(--user-panel-muted)!important;
}

body.mode-dark-canvas .progress-ring::after{
  background:var(--user-panel)!important;
}
body.mode-dark-canvas .mode-toggle button{
  color:var(--user-panel-muted)!important;
}
body.mode-dark-canvas .mode-toggle button.active{
  background:color-mix(in srgb,var(--user-panel) 76%,#fff 24%)!important;
  color:var(--sys-blue-dark)!important;
}

/* In dark canvas, the shell border is subtle instead of a bright frame. */
body.mode-dark-canvas .bloom-shell{
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.35)!important;
}

/* Prevent the older system/dark rules from repainting the cards. */
html[data-appearance="dark"] .bloom-head,
html[data-appearance="dark"] .program-strip,
html[data-appearance="dark"] .next-assignment-card,
html[data-appearance="dark"] .next-due-card,
html[data-appearance="dark"] .coursework-section,
html[data-appearance="dark"] .side-card,
html[data-appearance="dark"] .week-card,
html[data-appearance="dark"] #pageBuild .build-panel,
html[data-appearance="dark"] #pageBuild .lesson,
html[data-appearance="dark"] #pageSync .tool-card,
html[data-appearance="dark"] #pageSync .hero{
  background:var(--user-panel)!important;
  color:var(--user-panel-text)!important;
  border-color:var(--user-panel-line)!important;
}


/* V2.4 Code Lab navigation */
.bloom-tabs a.tab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* ==========================================================
   NEXTRA V2.6 — EMBEDDED CODE LAB
   Internal tab: no separate-page routing required.
   ========================================================== */
#pageCode{
  padding:18px;
  background:transparent;
}
.cl-panel{
  border:1px solid var(--user-panel-line,var(--nx-line));
  border-radius:14px;
  background:var(--user-panel,var(--nx-card));
  color:var(--user-panel-text,var(--nx-text));
  box-shadow:var(--nx-shadow);
}
.cl-hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);
  gap:12px;
}
.cl-hero-main{padding:26px}
.cl-kicker{
  color:var(--sys-blue-dark);
  font-size:8px;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.cl-hero h2{
  margin:6px 0 8px;
  max-width:850px;
  font-family:var(--bb-serif);
  font-size:clamp(36px,5vw,62px);
  line-height:.95;
  letter-spacing:-.05em;
  text-transform:none;
}
.cl-hero p,.cl-map>p,.cl-section-head p{
  margin:0;
  color:var(--user-panel-muted,var(--nx-muted));
  font-size:10px;
  line-height:1.65;
}
.cl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.cl-chips span{
  padding:6px 9px;border-radius:999px;
  background:var(--theme-tint);
  color:var(--sys-blue-dark);
  font-size:8px;font-weight:800
}
.cl-layer-card{padding:15px;display:grid;align-content:center;gap:6px}
.cl-layer{
  display:grid;grid-template-columns:66px 1fr;gap:8px;align-items:center;
  padding:8px;border:1px solid var(--user-panel-line);border-radius:8px;
  background:var(--user-panel-soft);
}
.cl-layer code{color:var(--sys-blue-dark);font-weight:850}
.cl-layer span{color:var(--user-panel-muted);font-size:8px}
.cl-map,.cl-panel:not(.cl-hero-main):not(.cl-layer-card){margin-top:12px;padding:16px}
.cl-map h3,.cl-section-head h3{
  margin:3px 0 5px;font-family:var(--bb-serif);font-size:22px;letter-spacing:-.03em;
}
.cl-body-map{
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px
}
.cl-body-map>div{
  min-height:86px;padding:10px;border:1px solid var(--user-panel-line);border-radius:8px;background:var(--user-panel-soft)
}
.cl-body-map code{display:block;color:var(--sys-blue-dark);font-size:8px;font-weight:850}
.cl-body-map strong{display:block;margin-top:6px;font-size:9px}
.cl-body-map span{display:block;margin-top:3px;color:var(--user-panel-muted);font-size:8px;line-height:1.4}
.cl-section-head{padding-bottom:11px;border-bottom:1px solid var(--user-panel-line)}
.cl-anatomy-list{display:grid;gap:7px;margin-top:11px}
.cl-anatomy-card{
  border:1px solid var(--user-panel-line);border-radius:9px;background:var(--user-panel-soft);overflow:hidden
}
.cl-anatomy-card>summary{
  list-style:none;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:10px;cursor:pointer
}
.cl-anatomy-card>summary::-webkit-details-marker{display:none}
.cl-anatomy-card summary strong{display:block;font-family:var(--bb-serif);font-size:14px}
.cl-anatomy-card summary small{display:block;margin-top:2px;color:var(--user-panel-muted);font-size:7px}
.cl-num{
  width:31px;height:31px;display:grid;place-items:center;border-radius:8px;
  background:var(--theme-accent);color:#fff;font-size:8px;font-weight:850
}
.cl-anatomy-body{padding:0 10px 11px;border-top:1px solid var(--user-panel-line)}
.cl-explain{padding:10px 0 8px}
.cl-explain h4,.cl-two h4,.cl-refs h4{margin:0 0 5px;font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.cl-explain p{margin:0;color:var(--user-panel-muted);font-size:9px;line-height:1.55}
.cl-jump{
  margin-top:8px;border:0;border-radius:7px;background:var(--theme-accent);color:#fff;padding:7px 9px;
  font-size:8px;font-weight:800;cursor:pointer
}
.cl-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cl-two>section,.cl-refs{
  padding:9px;border:1px solid var(--user-panel-line);border-radius:8px;
  background:var(--user-panel)
}
.cl-two pre{
  margin:0;overflow:auto;white-space:pre;background:#20191f;color:#f4eef2;border-radius:8px;padding:10px;
  font:8px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace
}
.cl-term{display:grid;grid-template-columns:minmax(105px,.38fr) 1fr;gap:7px;padding:5px 0;border-bottom:1px solid var(--user-panel-line)}
.cl-term:last-child{border-bottom:0}
.cl-term code{color:var(--sys-blue-dark);font-size:8px;font-weight:800}
.cl-term span{color:var(--user-panel-muted);font-size:8px;line-height:1.4}
.cl-refs{margin-top:8px}
.cl-refs>div{display:flex;flex-wrap:wrap;gap:5px}
.cl-refs a{
  padding:6px 7px;border:1px solid var(--user-panel-line);border-radius:7px;background:var(--user-panel);
  color:var(--user-panel-text);text-decoration:none;font-size:7px;font-weight:750
}
.cl-lesson-map{display:grid;gap:5px;margin-top:11px}
.cl-lesson-row{
  display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:9px;align-items:center;
  padding:8px 9px;border:1px solid var(--user-panel-line);border-radius:8px;background:var(--user-panel-soft);
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease
}
.cl-lesson-row.related{
  background:color-mix(in srgb,var(--theme-tint) 70%,var(--user-panel) 30%);
  border-color:var(--theme-accent);
  box-shadow:inset 3px 0 0 var(--theme-accent)
}
.cl-lesson-row>code{color:var(--sys-blue-dark);font-size:8px;font-weight:850}
.cl-lesson-row strong{display:block;font-size:9px}
.cl-lesson-row span{display:block;margin-top:2px;color:var(--user-panel-muted);font-size:7px}
.cl-lesson-actions{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
.cl-lesson-actions button{
  padding:6px 7px;border:1px solid var(--user-panel-line);border-radius:7px;background:var(--user-panel);
  color:var(--user-panel-text);font-size:7px;font-weight:800;cursor:pointer
}
.cl-dictionary{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.cl-dict-group{padding:9px;border:1px solid var(--user-panel-line);border-radius:8px;background:var(--user-panel-soft)}
.cl-dict-group h3{margin:0 0 7px;font-family:var(--bb-serif);font-size:14px}
.cl-dict-item{border-top:1px solid var(--user-panel-line)}
.cl-dict-item:first-of-type{border-top:0}
.cl-dict-item summary{list-style:none;display:flex;justify-content:space-between;gap:8px;padding:7px 2px;cursor:pointer}
.cl-dict-item summary::-webkit-details-marker{display:none}
.cl-dict-item code{color:var(--sys-blue-dark);font-size:8px;font-weight:800}
.cl-dict-item>div{padding:0 2px 8px}
.cl-dict-item p{margin:0;color:var(--user-panel-muted);font-size:8px;line-height:1.45}
.cl-dict-item a{display:inline-block;margin-top:5px;color:var(--sys-blue-dark);font-size:7px;font-weight:800}
.cl-inspector{
  display:flex;flex-direction:column;gap:3px;margin-top:11px;padding:10px;
  border:1px solid var(--user-panel-line);border-radius:8px;background:var(--user-panel-soft)
}
.cl-inspector>strong{font-size:9px}
.cl-inspector>span{color:var(--user-panel-muted);font-size:8px}
.cl-inspector-card{
  display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:9px;align-items:center
}
.cl-inspector-card+.cl-inspector-card{margin-top:6px;padding-top:6px;border-top:1px solid var(--user-panel-line)}
.cl-inspector-card code{color:var(--sys-blue-dark);font-size:8px;font-weight:850}
.cl-inspector-card strong{display:block;font-size:9px}
.cl-inspector-card span{display:block;margin-top:2px;color:var(--user-panel-muted);font-size:7px}
.cl-inspector-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.cl-inspector-actions button{
  padding:6px 7px;border:1px solid var(--user-panel-line);border-radius:7px;background:var(--user-panel);
  color:var(--user-panel-text);font-size:7px;font-weight:800;cursor:pointer
}
.cl-toolbar{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cl-toolbar select,.cl-toolbar input{
  min-height:35px;border:1px solid var(--user-panel-line);border-radius:8px;background:var(--user-panel);
  color:var(--user-panel-text);padding:7px 8px;font-size:8px
}
.cl-toolbar select{min-width:190px}
.cl-toolbar input{flex:1;min-width:190px}
.cl-toolbar button{
  min-height:35px;border:0;border-radius:8px;background:var(--theme-accent);color:#fff;padding:7px 10px;font-size:8px;font-weight:800;cursor:pointer
}
.cl-source-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;color:var(--user-panel-muted);font-size:7px}
.cl-source-viewer{
  margin-top:8px;height:610px;overflow:auto;border:1px solid #382e36;border-radius:9px;
  background:#1a151a;color:#eee7ec;font:8px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace
}
.cl-source-line{
  display:grid;grid-template-columns:54px minmax(0,1fr);min-height:18px;cursor:pointer
}
.cl-source-line:hover{background:color-mix(in srgb,var(--theme-accent) 12%,#1a151a 88%)}
.cl-source-line .cl-ln{user-select:none;text-align:right;padding:0 9px 0 4px;color:#756973;border-right:1px solid #302730}
.cl-source-line .cl-src{padding-left:9px;white-space:pre}
.cl-source-line.mapped{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--theme-accent) 74%,#fff 26%)}
.cl-source-line.search-hit{background:color-mix(in srgb,var(--theme-accent) 27%,#1a151a 73%)}
.cl-source-line.selected{
  background:color-mix(in srgb,var(--theme-accent) 50%,#1a151a 50%)!important;
  outline:1px solid var(--theme-accent);outline-offset:-1px
}
@media(max-width:900px){
  .cl-hero{grid-template-columns:1fr}
  .cl-body-map{grid-template-columns:1fr 1fr}
  .cl-dictionary{grid-template-columns:1fr}
}
@media(max-width:620px){
  #pageCode{padding:10px}
  .cl-hero-main{padding:18px 14px}
  .cl-hero h2{font-size:38px}
  .cl-body-map{grid-template-columns:1fr}
  .cl-two{grid-template-columns:1fr}
  .cl-term{grid-template-columns:1fr}
  .cl-lesson-row{grid-template-columns:48px minmax(0,1fr)}
  .cl-lesson-actions{grid-column:2;justify-content:flex-start}
  .cl-inspector-card{grid-template-columns:50px minmax(0,1fr)}
  .cl-inspector-actions{grid-column:2;justify-content:flex-start}
  .cl-source-viewer{height:520px}
}


/* V2.6.1 — Code Lab Home button */
.cl-home-row{
  margin-top:14px;
  display:flex;
  justify-content:flex-start;
}
.cl-home-btn{
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--user-panel-line);
  border-radius:8px;
  background:var(--user-panel);
  color:var(--user-panel-text);
  font-size:8px;
  font-weight:850;
  cursor:pointer;
}
.cl-home-btn:hover{
  border-color:var(--theme-accent);
  color:var(--sys-blue-dark);
}


/* V2.6.2 — coursework note editor stability */
.assignment .note{
  min-height:112px!important;
  resize:vertical!important;
  overflow:auto!important;
  line-height:1.5!important;
}
.assignment .note:focus{
  outline:2px solid color-mix(in srgb,var(--theme-accent) 48%,transparent)!important;
  outline-offset:1px;
  border-color:var(--theme-accent)!important;
}


/* ==========================================================
   NEXTRA V2.7 — COURSEWORK FILE WORKSPACE
   ========================================================== */
.assignment-workspace{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:10px;
  align-items:start;
  margin-top:10px;
}
.assignment-notes-panel,
.assignment-files-panel{
  min-width:0;
  border:1px solid var(--user-panel-line,var(--line));
  border-radius:9px;
  background:var(--user-panel-soft,#f7f4f3);
  padding:9px;
}
.workspace-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:22px;
}
.workspace-label{
  color:var(--user-panel-text,var(--text));
  font-size:8px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.workspace-hint{
  color:var(--user-panel-muted,var(--muted));
  font-size:7px;
}
.assignment-notes-panel .note{
  margin-top:6px!important;
  min-height:126px!important;
  background:color-mix(in srgb,var(--user-panel) 91%,#fff 9%)!important;
}
.work-file-input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
.work-upload-box{
  margin-top:6px;
  min-height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:10px;
  border:1.5px dashed color-mix(in srgb,var(--theme-accent) 40%,var(--user-panel-line) 60%);
  border-radius:8px;
  background:color-mix(in srgb,var(--theme-tint) 38%,var(--user-panel) 62%);
  text-align:center;
  cursor:pointer;
  transition:border-color .12s ease,background .12s ease;
}
.work-upload-box:hover{
  border-color:var(--theme-accent);
  background:color-mix(in srgb,var(--theme-tint) 55%,var(--user-panel) 45%);
}
.work-upload-box:focus-within{
  outline:2px solid color-mix(in srgb,var(--theme-accent) 38%,transparent);
  outline-offset:1px;
}
.work-upload-icon{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--theme-accent);
  color:#fff;
  font-size:15px;
  line-height:1;
}
.work-upload-box strong{
  color:var(--user-panel-text,var(--text));
  font-size:9px;
}
.work-upload-box small{
  max-width:260px;
  color:var(--user-panel-muted,var(--muted));
  font-size:7px;
  line-height:1.35;
}
.work-status{
  min-height:0;
  margin-top:6px;
  color:var(--user-panel-muted,var(--muted));
  font-size:7px;
  line-height:1.4;
}
.work-status.ok{color:#39755a}
.work-status.warn{color:#8a6021}
.work-status.bad{color:#9d2e2e}
.work-file-list{
  display:grid;
  gap:5px;
  margin-top:6px;
}
.work-file-empty{
  padding:8px;
  border-radius:7px;
  color:var(--user-panel-muted,var(--muted));
  background:color-mix(in srgb,var(--user-panel) 80%,transparent 20%);
  font-size:7px;
  text-align:center;
}
.work-file-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:7px 8px;
  border:1px solid var(--user-panel-line,var(--line));
  border-radius:7px;
  background:color-mix(in srgb,var(--user-panel) 92%,#fff 8%);
}
.work-file-main{
  min-width:0;
}
.work-file-name{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--user-panel-text,var(--text));
  font-size:8px;
  font-weight:800;
}
.work-file-meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:2px;
  color:var(--user-panel-muted,var(--muted));
  font-size:7px;
}
.work-file-cloud{
  color:#39755a;
}
.work-file-local{
  color:#8a6021;
}
.work-file-actions{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.work-file-actions button{
  min-height:28px;
  padding:5px 7px;
  border:1px solid var(--user-panel-line,var(--line));
  border-radius:6px;
  background:var(--user-panel);
  color:var(--user-panel-text,var(--text));
  font-size:7px;
  font-weight:800;
  cursor:pointer;
}
.work-file-actions button:hover{
  border-color:var(--theme-accent);
  color:var(--sys-blue-dark);
}
.work-file-actions .work-delete{
  color:#9d2e2e;
}
.work-files-help{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid var(--user-panel-line,var(--line));
  color:var(--user-panel-muted,var(--muted));
  font-size:7px;
  line-height:1.45;
}
@media(max-width:900px){
  .assignment-workspace{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   NEXTRA V2.8 — LEARNING AREA DRAWER
   ========================================================== */
.header-left-cluster{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.side-menu-btn{
  width:38px;
  height:38px;
  flex:0 0 auto;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:4px;
  padding:0;
  border:1px solid var(--user-panel-line,var(--bb-line));
  border-radius:9px;
  background:color-mix(in srgb,var(--user-panel,var(--bb-card)) 90%,#fff 10%);
  color:var(--user-panel-text,var(--bb-ink));
  cursor:pointer;
}
.side-menu-btn span{
  width:15px;
  height:1.5px;
  border-radius:999px;
  background:currentColor;
  transition:transform .18s ease,opacity .18s ease;
}
.side-menu-btn:hover{
  border-color:var(--theme-accent);
  color:var(--sys-blue-dark);
}
.bloom-head-status{
  gap:9px;
  align-items:center;
}
.current-location{
  min-width:112px;
  padding-right:10px;
  border-right:1px solid var(--user-panel-line,var(--bb-line));
  text-align:right;
}
.current-location span{
  display:block;
  color:var(--sys-blue-dark);
  font-size:7px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.current-location strong{
  display:block;
  margin-top:2px;
  color:var(--user-panel-text,var(--bb-ink));
  font-size:8px;
  white-space:nowrap;
}

.learning-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:980;
  background:rgba(17,12,16,.42);
  backdrop-filter:blur(2px);
}
.learning-drawer{
  position:fixed;
  inset:0 auto 0 0;
  z-index:990;
  width:min(365px,calc(100vw - 34px));
  display:flex;
  flex-direction:column;
  padding:18px;
  overflow:auto;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--user-panel,var(--bb-card)) 96%,#fff 4%),
      var(--user-panel,var(--bb-card)));
  color:var(--user-panel-text,var(--bb-ink));
  border-right:1px solid var(--user-panel-line,var(--bb-line));
  box-shadow:22px 0 55px rgba(24,14,21,.22);
  transform:translateX(-104%);
  transition:transform .22s cubic-bezier(.2,.78,.24,1);
}
.learning-drawer.open{
  transform:translateX(0);
}
body.drawer-open{
  overflow:hidden;
}
.drawer-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding-bottom:15px;
  border-bottom:1px solid var(--user-panel-line,var(--bb-line));
}
.drawer-kicker{
  color:var(--sys-blue-dark);
  font-size:8px;
  font-weight:850;
  letter-spacing:.16em;
}
.drawer-top h2{
  margin:5px 0 5px;
  font-family:var(--bb-serif);
  font-size:27px;
  line-height:1;
  letter-spacing:-.035em;
}
.drawer-top p{
  margin:0;
  color:var(--user-panel-muted,var(--bb-copy));
  font-size:9px;
  line-height:1.5;
}
.drawer-close{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--user-panel-line,var(--bb-line));
  border-radius:50%;
  background:transparent;
  color:var(--user-panel-text,var(--bb-ink));
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.drawer-close:hover{
  border-color:var(--theme-accent);
  color:var(--theme-accent);
}
.learning-area-menu{
  display:grid;
  gap:10px;
  margin-top:15px;
}
.learning-area-card{
  overflow:hidden;
  border:1px solid var(--user-panel-line,var(--bb-line));
  border-radius:11px;
  background:var(--user-panel-soft,#f5f1f2);
}
.learning-area-card.active{
  border-color:color-mix(in srgb,var(--theme-accent) 50%,var(--user-panel-line) 50%);
  box-shadow:inset 3px 0 0 var(--theme-accent);
}
.learning-area-head{
  display:flex;
  gap:10px;
  align-items:center;
  padding:11px;
  border-bottom:1px solid var(--user-panel-line,var(--bb-line));
}
.learning-area-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--theme-tint);
  color:var(--sys-blue-dark);
  font-size:11px;
  font-weight:900;
}
.learning-area-head strong{
  display:block;
  font-family:var(--bb-serif);
  font-size:15px;
}
.learning-area-head small{
  display:block;
  margin-top:2px;
  color:var(--user-panel-muted,var(--bb-copy));
  font-size:7px;
  line-height:1.35;
}
.learning-area-pages{
  display:grid;
  padding:6px;
  gap:4px;
}
.learning-page-btn{
  width:100%;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:9px 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--user-panel-text,var(--bb-ink));
  text-align:left;
  cursor:pointer;
}
.learning-page-btn:hover{
  background:color-mix(in srgb,var(--theme-tint) 46%,var(--user-panel) 54%);
}
.learning-page-btn.active{
  background:var(--theme-tint);
  color:var(--sys-blue-dark);
}
.learning-page-symbol{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:color-mix(in srgb,var(--user-panel) 75%,transparent 25%);
  font-size:10px;
}
.learning-page-btn strong{
  display:block;
  font-size:9px;
}
.learning-page-btn small{
  display:block;
  margin-top:2px;
  color:var(--user-panel-muted,var(--bb-copy));
  font-size:7px;
}
.learning-page-btn.active small{
  color:color-mix(in srgb,var(--sys-blue-dark) 70%,var(--user-panel-muted) 30%);
}
.learning-page-arrow{
  color:var(--user-panel-muted,var(--bb-copy));
  font-size:11px;
}
.drawer-future-card{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:10px;
  margin-top:14px;
  padding:11px;
  border:1px dashed color-mix(in srgb,var(--theme-accent) 40%,var(--user-panel-line) 60%);
  border-radius:10px;
  background:color-mix(in srgb,var(--theme-tint) 32%,var(--user-panel) 68%);
}
.drawer-future-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--theme-accent);
  color:white;
  font:800 9px ui-monospace,SFMono-Regular,Consolas,monospace;
}
.drawer-future-card strong{
  display:block;
  font-size:9px;
}
.drawer-future-card p{
  margin:3px 0 0;
  color:var(--user-panel-muted,var(--bb-copy));
  font-size:7px;
  line-height:1.45;
}
.drawer-utility{
  margin-top:auto;
  padding-top:15px;
}
.drawer-utility button{
  width:100%;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:10px;
  border:1px solid var(--user-panel-line,var(--bb-line));
  border-radius:9px;
  background:var(--user-panel-soft,#f5f1f2);
  color:var(--user-panel-text,var(--bb-ink));
  text-align:left;
  cursor:pointer;
}
.drawer-utility button.active{
  border-color:var(--theme-accent);
  background:var(--theme-tint);
}
.drawer-utility button>span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--user-panel);
}
.drawer-utility strong{display:block;font-size:9px}
.drawer-utility small{
  display:block;
  margin-top:2px;
  color:var(--user-panel-muted,var(--bb-copy));
  font-size:7px;
}
@media(max-width:1080px){
  .current-location{display:none}
}
@media(max-width:760px){
  .header-left-cluster{
    width:100%;
  }
  .side-menu-btn{
    width:36px;height:36px;
  }
  .learning-drawer{
    padding:15px;
  }
}


/* ==========================================================
   NEXTRA V2.8.1 — CODING PANEL LAYERING / RADIUS FIX
   Fixes square child backgrounds showing through rounded cards
   and makes nested Build Lab blocks read as inset content.
   ========================================================== */

/* The parent owns the rounded silhouette. Child backgrounds are clipped
   so no square panel can stick through a rounded corner. */
#pageBuild .build-panel{
  position:relative;
  overflow:hidden!important;
  border-radius:14px!important;
  border:1px solid var(--user-panel-line,var(--bb-line))!important;
  border-top:3px solid var(--theme-accent)!important;
  background:var(--user-panel,var(--bb-card))!important;
  box-shadow:0 8px 24px rgba(42,28,37,.07)!important;
}

/* Header belongs visually to the card instead of looking like a second
   rectangular card sitting on top of it. */
#pageBuild .build-panel .panel-head{
  margin:0!important;
  padding:11px 14px!important;
  border:0!important;
  border-bottom:1px solid var(--user-panel-line,var(--bb-line))!important;
  border-radius:0!important;
  background:color-mix(
    in srgb,
    var(--theme-tint) 34%,
    var(--user-panel,var(--bb-card)) 66%
  )!important;
  box-shadow:none!important;
}

/* Give the content breathing room so nested blocks are visibly contained
   inside the rounded parent rather than touching its edge. */
#pageBuild .build-panel .panel-body{
  padding:17px!important;
  background:var(--user-panel,var(--bb-card))!important;
}

/* The four HTML/CSS/JS/SQL cells are now one recessed rounded module. */
#pageBuild .stack-map{
  margin-top:13px!important;
  overflow:hidden!important;
  border:1px solid var(--user-panel-line,var(--bb-line))!important;
  border-radius:10px!important;
  background:var(--user-panel-soft,#f4f1f2)!important;
  box-shadow:inset 0 1px 2px rgba(52,35,46,.035)!important;
}

/* Remove the old outer-edge border trick that made this look like a
   foreground table pasted over the card. */
#pageBuild .stack-cell{
  min-width:0;
  padding:12px 11px!important;
  background:transparent!important;
  border:0!important;
  border-right:1px solid var(--user-panel-line,var(--bb-line))!important;
}
#pageBuild .stack-cell:last-child{
  border-right:0!important;
}
#pageBuild .stack-cell code{
  color:var(--sys-blue-dark)!important;
}
#pageBuild .stack-cell span{
  color:var(--user-panel-muted,var(--bb-copy))!important;
}

/* Other Build Lab nested diagrams use the same inset visual hierarchy. */
#pageBuild .architecture,
#pageBuild .lab-controls,
#pageBuild .lab-preview,
#pageBuild .lesson-section{
  overflow:hidden!important;
  border:1px solid var(--user-panel-line,var(--bb-line))!important;
  border-radius:10px!important;
  background:var(--user-panel-soft,#f4f1f2)!important;
  box-shadow:inset 0 1px 2px rgba(52,35,46,.03)!important;
}

#pageBuild .arch-node,
#pageBuild .stack-cell{
  background:transparent!important;
}

/* Lesson cards also clip their own internal header/body layers. */
#pageBuild .lesson{
  overflow:hidden!important;
  border-radius:11px!important;
  border-color:var(--user-panel-line,var(--bb-line))!important;
  background:var(--user-panel,var(--bb-card))!important;
}
#pageBuild .lesson>summary{
  border-radius:0!important;
}
#pageBuild .lesson-body{
  border-radius:0!important;
}

/* Dark-canvas mode keeps exactly the same hierarchy with the user's
   selected grey panel color. */
body.mode-dark-canvas #pageBuild .build-panel,
body.mode-dark-canvas #pageBuild .lesson{
  background:var(--user-panel)!important;
}
body.mode-dark-canvas #pageBuild .build-panel .panel-body{
  background:var(--user-panel)!important;
}
body.mode-dark-canvas #pageBuild .build-panel .panel-head{
  background:color-mix(
    in srgb,
    var(--theme-tint) 28%,
    var(--user-panel) 72%
  )!important;
}
body.mode-dark-canvas #pageBuild .stack-map,
body.mode-dark-canvas #pageBuild .architecture,
body.mode-dark-canvas #pageBuild .lab-controls,
body.mode-dark-canvas #pageBuild .lab-preview,
body.mode-dark-canvas #pageBuild .lesson-section{
  background:var(--user-panel-soft)!important;
}

/* At tablet/mobile widths the four-cell strip wraps cleanly and keeps
   rounded outer corners instead of creating awkward square seams. */
@media(max-width:900px){
  #pageBuild .stack-map{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #pageBuild .stack-cell{
    border-right:1px solid var(--user-panel-line,var(--bb-line))!important;
    border-bottom:1px solid var(--user-panel-line,var(--bb-line))!important;
  }
  #pageBuild .stack-cell:nth-child(2n){
    border-right:0!important;
  }
  #pageBuild .stack-cell:nth-last-child(-n+2){
    border-bottom:0!important;
  }
}
@media(max-width:520px){
  #pageBuild .stack-map{
    grid-template-columns:1fr!important;
  }
  #pageBuild .stack-cell{
    border-right:0!important;
    border-bottom:1px solid var(--user-panel-line,var(--bb-line))!important;
  }
  #pageBuild .stack-cell:last-child{
    border-bottom:0!important;
  }
}


/* V2.9 sync diagnostics */
.sync-health-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
.sync-health-grid>div{padding:9px;border:1px solid var(--user-panel-line,var(--bb-line));border-radius:8px;background:var(--user-panel-soft,#f5f1f2)}
.sync-health-grid span{display:block;color:var(--user-panel-muted,var(--bb-copy));font-size:7px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sync-health-grid strong{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--user-panel-text,var(--bb-ink));font-size:9px}
.sync-recovery-info{margin-top:10px;padding:10px;border:1px solid color-mix(in srgb,var(--theme-accent) 30%,var(--user-panel-line) 70%);border-radius:8px;background:color-mix(in srgb,var(--theme-tint) 35%,var(--user-panel) 65%)}
.sync-recovery-info strong{font-size:9px}.sync-recovery-info p{margin:4px 0 0;color:var(--user-panel-muted,var(--bb-copy));font-size:8px;line-height:1.5}
@media(max-width:560px){.sync-health-grid{grid-template-columns:1fr}}


/* ==========================================================
   NEXTRA V3.1 — CODE LAB MODULE / FOLDER BROWSER
   ========================================================== */
.cl-source-workspace{
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.cl-folder-browser{
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 90%,var(--background));
  border-radius:12px;
  overflow:hidden;
  position:sticky;
  top:12px;
}
.cl-folder-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-bottom:1px solid var(--line);
}
.cl-folder-title span{
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.14em;
  opacity:.58;
}
.cl-folder-title strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85rem;
}
.cl-folder-group{
  border-bottom:1px solid var(--line);
  background:transparent;
}
.cl-folder-group:last-child{border-bottom:0}
.cl-folder-group>summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:18px auto 1fr;
  align-items:center;
  gap:7px;
  padding:11px 12px;
  user-select:none;
}
.cl-folder-group>summary::-webkit-details-marker{display:none}
.cl-folder-group>summary:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cl-folder-group>summary code{font-weight:850;font-size:.82rem}
.cl-folder-group>summary small{
  justify-self:end;
  font-size:.65rem;
  letter-spacing:.04em;
  opacity:.55;
}
.cl-folder-icon{display:inline-block;transition:transform .16s ease;opacity:.62}
.cl-folder-group:not([open]) .cl-folder-icon{transform:rotate(-90deg)}
.cl-folder-files{display:grid;gap:3px;padding:0 8px 9px 24px}
.cl-file-btn{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:8px 9px;
  border-radius:8px;
  cursor:pointer;
  display:grid;
  gap:2px;
  color:inherit;
}
.cl-file-btn:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cl-file-btn.active{
  background:color-mix(in srgb,var(--accent) 15%,var(--panel));
  box-shadow:inset 3px 0 0 var(--accent);
}
.cl-file-btn code{font-weight:850;font-size:.76rem}
.cl-file-btn span{font-size:.68rem;opacity:.58}
.cl-source-main{min-width:0}
.cl-current-file{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:14px;
  margin-bottom:10px;
}
.cl-current-file>div:first-child{display:grid;gap:2px}
.cl-current-file span{
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.13em;
  opacity:.55;
}
.cl-current-file strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9rem;
}
.cl-source-search{display:flex;gap:7px;min-width:min(100%,420px)}
.cl-source-search input{flex:1;min-width:0}
.cl-source-search button{flex:0 0 auto}
@media(max-width:860px){
  .cl-source-workspace{grid-template-columns:1fr}
  .cl-folder-browser{position:static}
  .cl-current-file{align-items:stretch;flex-direction:column}
  .cl-source-search{min-width:0;width:100%}
}


/* ==========================================================
   NEXTRA V3.2 — HOME / ROUTING / PROFILE
   ========================================================== */

.nextra-site-head{
  min-height:72px!important;
  padding:0 26px!important;
  display:grid!important;
  grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr)!important;
  align-items:center!important;
  gap:18px!important;
}
.header-brand-link{
  display:inline-flex;
  align-items:center;
  gap:11px;
  width:max-content;
  color:inherit;
  text-decoration:none;
}
.header-brand-link .nextra-mark{
  width:29px;
  height:25px;
  flex:0 0 auto;
}
.header-brand-copy{display:grid;line-height:1}
.header-brand-copy strong{
  font-family:var(--bb-serif,Georgia,serif);
  font-size:22px;
  letter-spacing:-.035em;
  font-weight:650;
}
.header-brand-copy span{
  margin-top:5px;
  font-size:7px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.55;
}
.site-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.site-actions a{
  text-decoration:none;
  color:inherit;
  padding:10px 13px;
  border-radius:10px;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.site-actions a:hover{
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  transform:translateY(-1px);
}
.site-actions a.active{
  color:var(--accent);
  background:var(--accent-soft);
}
.header-save-status{
  display:flex;
  justify-content:flex-end;
}

.nextra-home-page.active{
  display:block;
  padding:0!important;
}
.home-stage{
  min-height:calc(100vh - 150px);
  padding:clamp(42px,7vw,82px) 24px 64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  overflow:hidden;
}
.home-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 13%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 27%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 80%,transparent),transparent 46%);
  opacity:.9;
}
.home-stage>*{position:relative;z-index:1}
.home-logo-wrap{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.home-logo-mark{
  width:86px;
  height:74px;
  position:relative;
  margin-bottom:16px;
}
.home-mark-left,
.home-mark-right{
  position:absolute;
  top:5px;
  width:48px;
  height:58px;
  border:4px solid var(--accent);
  border-radius:7px 25px 7px 25px;
  transform:skewY(-13deg) rotate(7deg);
  box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 17%,transparent);
}
.home-mark-left{left:7px}
.home-mark-right{
  right:7px;
  transform:scaleX(-1) skewY(-13deg) rotate(7deg);
}
.home-wordmark{
  font-family:var(--bb-serif,Georgia,serif);
  font-size:clamp(66px,10vw,116px);
  line-height:.82;
  letter-spacing:-.065em;
  font-weight:650;
}
.home-tagline{
  margin-top:18px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.home-welcome-block{
  text-align:center;
  margin-top:34px;
}
.home-welcome-kicker{
  color:var(--accent);
  font-size:8px;
  letter-spacing:.18em;
  font-weight:900;
}
.home-welcome-block h2{
  margin:8px 0 4px;
  font-family:var(--bb-serif,Georgia,serif);
  font-size:clamp(27px,4vw,40px);
  letter-spacing:-.035em;
  font-weight:600;
}
.home-welcome-block p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}
.home-launch-menu{
  width:min(720px,100%);
  margin-top:34px;
  display:grid;
  gap:18px;
}
.home-area-group{display:grid;gap:8px}
.home-area-heading{
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 5px;
}
.home-area-icon{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--accent);
  background:var(--panel);
  font-size:10px;
  font-weight:900;
}
.home-area-heading>div{display:grid}
.home-area-heading strong{
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.home-area-heading small{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}
.home-link-stack{display:grid;gap:8px}
.home-launch-link{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 24px;
  align-items:center;
  gap:12px;
  min-height:70px;
  padding:11px 15px;
  color:inherit;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--panel) 95%,var(--accent) 5%);
  box-shadow:0 8px 24px rgba(38,25,52,.045);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.home-launch-link:hover{
  transform:translateY(-2px);
  border-color:var(--accent-line);
  box-shadow:0 13px 30px rgba(38,25,52,.08);
}
.home-launch-symbol{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:13px;
  font-weight:900;
}
.home-launch-copy{display:grid}
.home-launch-copy strong{font-size:13px;letter-spacing:-.01em}
.home-launch-copy small{margin-top:4px;color:var(--muted);font-size:9px}
.home-launch-arrow{color:var(--accent);font-size:17px;font-weight:700}
.home-system-link{
  width:min(720px,100%);
  margin-top:18px;
}
.home-system-link a{
  display:grid;
  grid-template-columns:28px 1fr 20px;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  color:var(--muted);
  text-decoration:none;
  border-top:1px solid var(--line);
}
.home-system-link a:hover{color:var(--accent)}
.home-system-link a>span:nth-child(2){display:grid}
.home-system-link strong{font-size:10px}
.home-system-link small{margin-top:2px;font-size:8px}

.profile-preview{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:14px;
}
.profile-avatar{
  width:50px;
  height:50px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  background:var(--accent);
  font-family:var(--bb-serif,Georgia,serif);
  font-size:22px;
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 18%,transparent);
}
.profile-preview>div:last-child{display:grid}
.profile-preview small{
  color:var(--muted);
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.profile-preview strong{margin-top:2px;font-size:16px}
.profile-preview span{margin-top:3px;color:var(--muted);font-size:9px}

.bloom-tabs,
.learning-drawer,
.learning-drawer-backdrop,
.side-menu-btn{
  display:none!important;
}

@media(max-width:760px){
  .nextra-site-head{
    min-height:auto!important;
    padding:13px 14px 0!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:10px!important;
  }
  .header-brand-copy span{display:none}
  .site-actions{justify-content:flex-end}
  .site-actions a{padding:9px 10px;font-size:9px}
  .header-save-status{display:none}
  .nextra-site-head .autosave-mobile{
    grid-column:1/-1;
    display:flex!important;
    padding:5px 0 10px;
  }
  .home-stage{
    min-height:calc(100vh - 118px);
    padding:44px 14px 46px;
  }
  .home-logo-mark{width:68px;height:59px}
  .home-mark-left,.home-mark-right{width:39px;height:48px}
  .home-wordmark{font-size:64px}
  .home-launch-link{
    grid-template-columns:40px minmax(0,1fr) 20px;
    min-height:66px;
    padding:10px 12px;
  }
}