:root {
  --navy: #173a5e;
  --navy-dark: #102a43;
  --blue-soft: #e9f2f9;
  --orange: #b45309;
  --orange-soft: #fff3e6;
  --green: #2f6f4e;
  --green-soft: #eaf5ef;
  --ink: #1f2933;
  --muted: #5b6773;
  --line: #cbd5df;
  --surface: #ffffff;
  --page: #f4f7fa;
  --danger: #9b1c1c;
  --danger-soft: #fff0f0;
  --focus: #0b6fa4;
  font-family: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); color: var(--ink); }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--ink); }
a { color: #0b5f95; }
a:hover { color: #083f64; }
button, input, textarea, select { font: inherit; }
button, .button {
  border: 1px solid transparent;
  border-radius: 0.4rem;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.button-primary, button.primary { background: var(--navy); color: #fff; }
.button-primary:hover, button.primary:hover { background: var(--navy-dark); color: #fff; }
.button-secondary, button.secondary { background: #fff; color: var(--navy-dark); border-color: var(--line); }
.button-warn, button.warn { background: var(--orange); color: #fff; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

.site-header { background: var(--navy-dark); color: #fff; border-bottom: 4px solid var(--orange); }
.site-header .inner {
  max-width: 1200px; margin: 0 auto; padding: 0.8rem 1rem;
  display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.brand { color: #fff; text-decoration: none; font-weight: 800; letter-spacing: 0.01em; }
.site-nav { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.site-nav a { color: #fff; text-underline-offset: 0.2em; }
.site-nav button { padding: 0.45rem 0.65rem; background: transparent; color: #fff; border-color: #8ba3b8; }

main.page { max-width: 1120px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
main.narrow { max-width: 720px; }
h1, h2, h3 { color: var(--navy-dark); line-height: 1.2; }
h1 { margin-top: 0; }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 78ch; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 0.65rem; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgb(15 23 42 / 0.05); }
.card h2, .card h3 { margin-top: 0; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actions { display: flex; gap: 0.65rem; flex-wrap: wrap; align-items: center; }
.meta { color: var(--muted); font-size: 0.92rem; }
.status { min-height: 1.4rem; font-weight: 700; }
.status.ok { color: var(--green); }
.status.error { color: var(--danger); }
.notice { border-left: 4px solid var(--navy); background: var(--blue-soft); padding: 0.8rem 1rem; margin: 1rem 0; }
.notice.warning { border-left-color: var(--orange); background: var(--orange-soft); }
.notice.success { border-left-color: var(--green); background: var(--green-soft); }
.notice.danger { border-left-color: var(--danger); background: var(--danger-soft); }

label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  width: 100%; border: 1px solid #96a7b7; border-radius: 0.35rem; padding: 0.65rem; background: #fff; color: var(--ink);
}
.form-row { margin-bottom: 0.9rem; }
.help { margin-top: 0.25rem; color: var(--muted); font-size: 0.9rem; }
.checkbox-row { display: flex; align-items: flex-start; gap: 0.55rem; }
.checkbox-row input { margin-top: 0.2rem; }
.checkbox-row label { font-weight: 600; margin: 0; }

.hero { padding: 3.5rem 1rem; max-width: 1000px; margin: 0 auto; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); max-width: 16ch; }
.hero .actions { margin-top: 1.5rem; }
.dashboard-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dashboard-links a.card { color: inherit; text-decoration: none; }
.dashboard-links a.card:hover { border-color: var(--navy); }
.progress-line { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }

.ide-page { min-height: calc(100vh - 66px); padding: 0.75rem; }
.ide-toolbar { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.75rem; }
.ide-toolbar .spacer { flex: 1; }
.ide-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.65fr);
  grid-template-rows: minmax(390px, 53vh) minmax(280px, 38vh);
  grid-template-areas: "instructions editor" "preview preview";
  gap: 0.75rem;
}
.ide-panel { background: #fff; border: 1px solid var(--line); border-radius: 0.55rem; overflow: hidden; min-width: 0; }
.instructions-panel { grid-area: instructions; display: flex; flex-direction: column; }
.editor-panel { grid-area: editor; display: flex; flex-direction: column; }
.preview-panel { grid-area: preview; display: flex; flex-direction: column; }
.panel-heading { padding: 0.65rem 0.8rem; background: #edf3f8; border-bottom: 1px solid var(--line); color: var(--navy-dark); font-weight: 800; }
.instructions-content { padding: 0.9rem; overflow: auto; white-space: pre-wrap; line-height: 1.5; }
.editor-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); background: #edf3f8; flex-wrap: wrap; }
.editor-tab { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--navy-dark); padding: 0.65rem 0.8rem; }
.editor-tab[aria-selected="true"] { background: #fff; box-shadow: inset 0 -3px 0 var(--orange); }
.editor-wrap { flex: 1; min-height: 0; }
.code-editor { display: none; width: 100%; height: 100%; resize: none; border: 0; border-radius: 0; padding: 0.85rem; font-family: Consolas, "Courier New", monospace; font-size: 0.95rem; line-height: 1.45; tab-size: 2; }
.code-editor.active { display: block; }
.code-editor[readonly] { background: #f7f8fa; }
.preview-meta { padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--line); background: #fbfcfd; color: var(--muted); }
.preview-frame { flex: 1; width: 100%; border: 0; background: white; }
.publish-box { margin-top: 0.75rem; background: #fff; border: 1px solid var(--line); border-radius: 0.55rem; padding: 0.85rem; }
.publish-box textarea { min-height: 70px; }

.work-session { margin-bottom: 1.25rem; }
.work-team { margin: 0.8rem 0; padding: 0.8rem; border-left: 4px solid var(--orange); background: #fff; }
.work-students { display: grid; gap: 0.65rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.student-site-link { border: 1px solid var(--line); border-radius: 0.45rem; padding: 0.65rem; background: #fafcfe; }
.student-site-link a { font-weight: 800; }
.work-page-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.45rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { border: 1px solid var(--line); padding: 0.6rem; text-align: left; vertical-align: top; }
th { background: var(--navy); color: #fff; }
tr:nth-child(even) td { background: #f8fafc; }
.badge { display: inline-block; padding: 0.16rem 0.45rem; border-radius: 999px; background: var(--blue-soft); color: var(--navy-dark); font-size: 0.82rem; font-weight: 700; }
.badge.good { background: var(--green-soft); color: var(--green); }
.badge.warn { background: var(--orange-soft); color: #7a3c00; }
.badge.bad { background: var(--danger-soft); color: var(--danger); }

.published-layout { display: grid; grid-template-rows: auto minmax(70vh, 1fr); min-height: calc(100vh - 66px); }
.published-bar { padding: 0.75rem 1rem; background: #fff; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.published-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.viewer-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.submission-list { display: grid; gap: 1rem; }
.submission-card { border: 1px solid var(--line); border-radius: 0.55rem; padding: 0.85rem; background: #fff; }
.submission-preview { width: 100%; min-height: 360px; border: 1px solid var(--line); margin-top: 0.75rem; background: #fff; }
.team-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; }
.team-summary .card { margin: 0; }

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

@media (max-width: 850px) {
  .grid.two, .grid.three, .dashboard-links { grid-template-columns: 1fr; }
  .ide-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(420px, 52vh) minmax(300px, 42vh); grid-template-areas: "instructions" "editor" "preview"; }
  .instructions-content { max-height: 40vh; }
}
.actions-between { justify-content: space-between; }
.compact-title { margin-bottom: 0.35rem; }
.compact-title-tight { margin-bottom: 0.25rem; }
.no-top-margin { margin-top: 0; }
.action-row { margin-top: 0.8rem; }
.editor-save-row { align-items: end; min-height: 100%; }

/* Enhanced browser code editor (CodeMirror-based) */
.editor-wrap { position: relative; }
.code-editor-pane { display: none; height: 100%; min-height: 0; flex-direction: column; background: #fff; }
.code-editor-pane.active { display: flex; }
.code-editor-tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}
.editor-tool-button {
  padding: 0.34rem 0.52rem;
  font-size: 0.8rem;
  background: #fff;
  color: var(--navy-dark);
  border: 1px solid var(--line);
  border-radius: 0.3rem;
}
.editor-tool-button:hover { background: var(--blue-soft); }
.editor-help { margin-left: auto; font-size: 0.8rem; color: var(--muted); position: relative; }
.editor-help summary { cursor: pointer; font-weight: 700; color: var(--navy-dark); padding: 0.28rem 0.35rem; }
.editor-help-body {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 20;
  width: min(520px, 75vw);
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 4px 16px rgb(15 23 42 / 0.16);
  line-height: 1.4;
}
.editor-help-shortcuts { display: block; margin-top: 0.35rem; font-family: Consolas, "Courier New", monospace; color: var(--muted); }
.code-editor-host { flex: 1; min-height: 0; overflow: hidden; }
.code-editor-host .CodeMirror { height: 100%; font-family: Consolas, "Courier New", monospace; font-size: 0.93rem; line-height: 1.45; }
.code-editor-host .CodeMirror-lines { padding: 0.45rem 0; }
.code-editor-host .CodeMirror-gutters { background: #f4f7fa; border-right: 1px solid #d6dee7; }
.code-editor-host .CodeMirror-linenumber { color: #667788; }
.code-editor-host .CodeMirror-activeline-background { background: #fff8e8; }
.code-editor-host .CodeMirror-activeline-gutter { background: #eef4f9; }
.code-editor-host .CodeMirror-matchingbracket,
.code-editor-host .CodeMirror-matchingtag {
  color: inherit !important;
  background: #d7f4df;
  outline: 1px solid #2f6f4e;
  border-radius: 2px;
  font-weight: 700;
}
.code-editor-host .CodeMirror-nonmatchingbracket,
.code-editor-host .CodeMirror-nonmatchingtag {
  color: var(--danger) !important;
  background: var(--danger-soft);
  outline: 1px solid var(--danger);
}
.code-editor-host .cm-referencehighlight {
  background: #ffe4a8;
  border-bottom: 1px solid #b45309;
  border-radius: 2px;
}
.code-editor-host .CodeMirror-selected { background: #b8d8f0; }
.code-editor-host .CodeMirror-foldmarker { color: var(--navy); text-shadow: none; }
.code-editor-status {
  min-height: 1.75rem;
  padding: 0.28rem 0.55rem;
  border-top: 1px solid var(--line);
  background: #f8fafc;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CodeMirror-dialog { background: #fff; color: var(--ink); border-color: var(--line); }
.CodeMirror-dialog input { width: auto; min-width: 12rem; padding: 0.25rem 0.35rem; border: 1px solid #96a7b7; }
.CodeMirror-hints { font-family: Consolas, "Courier New", monospace; font-size: 0.9rem; z-index: 1000; }
.CodeMirror-hint-active { background: var(--navy); color: #fff; }

@media (max-width: 700px) {
  .editor-help { margin-left: 0; }
  .editor-help-body { left: 0; right: auto; width: min(520px, 90vw); }
  .code-editor-status { white-space: normal; }
}

/* v9 classroom visual system ------------------------------------------------ */
:root {
  --navy: #163d66;
  --navy-dark: #0d2b47;
  --blue: #1f5f99;
  --blue-bright: #2f7fbe;
  --blue-soft: #eaf4fb;
  --blue-pale: #f4f9fd;
  --orange: #f47c20;
  --burnt-orange: #bf5718;
  --orange-soft: #fff0e4;
  --green: #2e704d;
  --green-soft: #eaf6ef;
  --ink: #14283b;
  --muted: #5b6b7a;
  --line: #c8d6e3;
  --surface: #ffffff;
  --page: #f3f7fb;
  --focus: #0b6fa4;
}

html,
body {
  background:
    radial-gradient(circle at 8% 2%, rgb(47 127 190 / 0.08), transparent 28rem),
    linear-gradient(180deg, #f7fbfe 0, var(--page) 18rem, var(--page) 100%);
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
}

.site-header {
  position: relative;
  background: linear-gradient(115deg, var(--navy-dark) 0%, #164c7b 55%, var(--blue) 100%);
  border-bottom: 0;
  box-shadow: 0 2px 12px rgb(13 43 71 / 0.18);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--burnt-orange), var(--orange) 55%, #ff9a45);
}
.site-header .inner {
  max-width: 1240px;
  min-height: 68px;
  padding: 0.75rem 1.15rem 0.95rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  font-size: 1.04rem;
  letter-spacing: 0.015em;
}
.brand::before {
  content: "GP";
  width: 2.45rem;
  height: 2.45rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid rgb(255 255 255 / 0.82);
  border-radius: 0.62rem;
  background: linear-gradient(145deg, var(--orange), var(--burnt-orange));
  color: #fff;
  font-weight: 900;
  font-size: 0.88rem;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.18);
}
.site-nav {
  gap: 0.25rem;
}
.site-nav a,
.site-nav button {
  border-radius: 0.42rem;
  padding: 0.48rem 0.68rem;
  text-decoration: none;
  font-weight: 700;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav button:hover {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
}

main.page {
  max-width: 1180px;
  padding-top: 1.6rem;
}
main.page > h1,
main.page > .lead {
  max-width: 900px;
}
h1,
h2,
h3 {
  color: var(--navy-dark);
}
h1 {
  letter-spacing: -0.025em;
}
.lead {
  line-height: 1.62;
}

.card {
  border: 1px solid #cbd9e6;
  border-radius: 0.78rem;
  box-shadow: 0 4px 14px rgb(28 66 99 / 0.06);
}
.card::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1rem -1rem 0.9rem;
  border-radius: 0.78rem 0.78rem 0 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
}
.grid.two > .card:nth-child(even)::before,
.team-summary .card:nth-child(even)::before {
  background: linear-gradient(90deg, var(--burnt-orange), var(--orange));
}
.card h2,
.card h3 {
  margin-bottom: 0.5rem;
}

.button-primary,
button.primary {
  background: linear-gradient(135deg, #174b78, var(--blue));
  box-shadow: 0 2px 6px rgb(13 43 71 / 0.15);
}
.button-primary:hover,
button.primary:hover {
  background: linear-gradient(135deg, var(--navy-dark), #174b78);
}
.button-warn,
button.warn {
  background: linear-gradient(135deg, var(--burnt-orange), var(--orange));
}
.button-secondary,
button.secondary {
  border-color: #aec1d3;
  color: var(--navy-dark);
}
.button-secondary:hover,
button.secondary:hover {
  background: var(--blue-soft);
  border-color: #7fa6c8;
}

.badge {
  background: #e2f1fb;
  border: 1px solid #c2deef;
}
.badge.warn {
  background: var(--orange-soft);
  border-color: #f2c8a8;
  color: #87400d;
}

.notice {
  border: 1px solid #c6ddec;
  border-left: 5px solid var(--blue);
  border-radius: 0.55rem;
  background: linear-gradient(90deg, #edf7fd, #f9fcfe);
}
.notice.warning {
  border-color: #f1c9aa;
  border-left-color: var(--burnt-orange);
  background: linear-gradient(90deg, #fff0e5, #fff9f4);
}

/* Public classroom landing page */
.landing-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.2rem 1rem 3.5rem;
}
.classroom-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: clamp(2rem, 5vw, 4rem);
  background:
    linear-gradient(115deg, rgb(13 43 71 / 0.98), rgb(22 76 123 / 0.94)),
    linear-gradient(45deg, var(--navy-dark), var(--blue));
  color: #fff;
  box-shadow: 0 12px 32px rgb(13 43 71 / 0.18);
}
.classroom-hero::after {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  right: -8rem;
  top: -9rem;
  border-radius: 50%;
  border: 3.5rem solid rgb(244 124 32 / 0.16);
  pointer-events: none;
}
.course-kicker {
  margin: 0 0 0.8rem;
  color: #ffd2af;
  font-size: 0.79rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.classroom-hero h1 {
  color: #fff;
  font-size: clamp(2.3rem, 6vw, 4.5rem);
  max-width: 12ch;
  margin: 0;
}
.hero-subtitle {
  margin: 0.7rem 0 0;
  font-size: clamp(1.12rem, 2.3vw, 1.5rem);
  font-weight: 800;
  color: #dcebfa;
}
.classroom-hero .lead {
  color: #eef6fc;
  max-width: 66ch;
  margin-top: 1rem;
}
.classroom-hero .actions {
  margin-top: 1.45rem;
}
.classroom-hero .button-primary {
  background: linear-gradient(135deg, var(--orange), var(--burnt-orange));
}
.classroom-hero .button-primary:hover {
  background: linear-gradient(135deg, #ff9142, var(--burnt-orange));
}
.classroom-hero .button-secondary {
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  border-color: rgb(255 255 255 / 0.62);
}
.classroom-hero .button-secondary:hover {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}
.classroom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.classroom-tile {
  background: #fff;
  border: 1px solid #cbd9e6;
  border-radius: 0.8rem;
  padding: 1.15rem;
  box-shadow: 0 4px 14px rgb(28 66 99 / 0.05);
}
.classroom-tile .tile-label {
  display: inline-block;
  color: var(--burnt-orange);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.classroom-tile h2 {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
}
.classroom-tile p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}
.classroom-expectations {
  margin-top: 1.25rem;
  padding: 1.1rem 1.2rem;
  border-radius: 0.8rem;
  background: linear-gradient(90deg, #eef6fc, #fff8f1);
  border: 1px solid #cbd9e6;
}
.classroom-expectations h2 {
  margin: 0 0 0.4rem;
  font-size: 1.08rem;
}
.classroom-expectations p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.site-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  color: #66798a;
  font-size: 0.86rem;
}

/* Login pages */
.classroom-login {
  padding-top: 2.2rem;
}
.login-heading {
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
  border-radius: 0.8rem;
  background: linear-gradient(105deg, var(--navy-dark), var(--blue));
  color: #fff;
  box-shadow: 0 7px 20px rgb(13 43 71 / 0.12);
}
.login-heading .course-kicker {
  margin-bottom: 0.35rem;
}
.login-heading h1 {
  color: #fff;
  margin: 0 0 0.35rem;
}
.login-heading p {
  margin: 0;
  color: #e7f1f9;
}
.classroom-login .card::before {
  background: linear-gradient(90deg, var(--burnt-orange), var(--orange));
}

/* Dashboard / teacher portal */
.page-banner {
  margin-bottom: 1.1rem;
  padding: 1rem 1.1rem;
  border-left: 6px solid var(--orange);
  border-radius: 0.7rem;
  background: linear-gradient(100deg, #eaf4fb, #ffffff);
  border-top: 1px solid #c9dbe8;
  border-right: 1px solid #c9dbe8;
  border-bottom: 1px solid #c9dbe8;
}
.page-banner .course-kicker {
  color: var(--burnt-orange);
  margin-bottom: 0.35rem;
}
.page-banner h1 {
  margin: 0 0 0.25rem;
}
.page-banner .lead {
  margin: 0;
}
.dashboard-links a.card:hover,
.team-summary .card:hover {
  transform: translateY(-1px);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 7px 18px rgb(28 66 99 / 0.09);
}

/* IDE */
.ide-page {
  background: linear-gradient(180deg, #f7fbfe, #edf4f9);
}
.ide-toolbar {
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.65rem;
  border: 1px solid #c5d7e5;
  border-radius: 0.62rem;
  background: #fff;
  box-shadow: 0 2px 8px rgb(28 66 99 / 0.05);
}
.ide-toolbar strong {
  color: var(--navy-dark);
  font-size: 1rem;
}
.ide-panel,
.publish-box {
  border-color: #c3d4e2;
  box-shadow: 0 3px 12px rgb(28 66 99 / 0.05);
}
.panel-heading {
  color: #fff;
  background: linear-gradient(105deg, var(--navy), var(--blue));
  border-bottom: 3px solid var(--orange);
}
.editor-tabs {
  background: #eef5fa;
}
.editor-tab[aria-selected="true"] {
  color: var(--navy-dark);
  font-weight: 900;
  box-shadow: inset 0 -4px 0 var(--orange);
}
.preview-meta {
  background: #f8fbfd;
}
.publish-box h2 {
  margin-top: 0;
}
.publish-box {
  border-top: 4px solid var(--burnt-orange);
}
.code-editor-host .CodeMirror-activeline-background {
  background: #fff6e9;
}
.code-editor-host .cm-referencehighlight {
  background: #ffe1a3;
  border-bottom-color: var(--burnt-orange);
}

/* Tables / Student Work */
th {
  background: linear-gradient(105deg, var(--navy-dark), var(--blue));
}
.work-team {
  border-left-color: var(--orange);
  border-radius: 0.45rem;
  box-shadow: 0 2px 8px rgb(28 66 99 / 0.05);
}
.student-site-link {
  background: linear-gradient(180deg, #fff, #f8fbfd);
}

@media (max-width: 850px) {
  .classroom-grid { grid-template-columns: 1fr; }
  .classroom-hero { padding: 2rem 1.3rem; }
  .site-header .inner { min-height: 62px; }
}