:root {
  --bg: #090b15;
  --panel: #111525;
  --panel-soft: #171b2f;
  --line: rgba(255, 255, 255, 0.1);
  --text: #f7f4ff;
  --muted: #aaa7bd;
  --violet: #9f7aea;
  --pink: #ff66c4;
  --orange: #ff9e66;
  --green: #59e1a7;
  --red: #ff7185;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(159, 122, 234, 0.15), transparent 28rem),
    radial-gradient(circle at 85% 90%, rgba(255, 102, 196, 0.1), transparent 28rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.ambient { position: fixed; width: 23rem; height: 23rem; border-radius: 50%; filter: blur(90px); opacity: 0.15; pointer-events: none; }
.ambient-one { top: -10rem; right: 12%; background: var(--pink); }
.ambient-two { bottom: -13rem; left: 4%; background: var(--violet); }

.topbar {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 11, 21, 0.82);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #100b19;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  font: 800 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: 0 8px 28px rgba(255, 102, 196, 0.25);
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; letter-spacing: 0.02em; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.seat-badge { padding: 8px 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 13px; }
.seat-badge span { color: var(--green); font-weight: 800; }

.login-shell {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.65fr);
  gap: 8vw;
  align-items: center;
  width: min(1120px, calc(100% - 48px));
  margin: auto;
  padding: 70px 0;
}
.login-copy h1 { margin: 14px 0 22px; font-size: clamp(48px, 7vw, 86px); line-height: 0.97; letter-spacing: -0.055em; max-width: 740px; }
.login-copy > p:not(.eyebrow) { color: var(--muted); font-size: 18px; line-height: 1.7; max-width: 660px; }
.eyebrow { color: var(--pink); text-transform: uppercase; letter-spacing: 0.13em; font-size: 11px; font-weight: 800; }
.feature-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.feature-row span { padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,0.025); color: #d8d3e6; font-size: 12px; }

.login-card {
  position: relative;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(24, 28, 49, 0.96), rgba(13, 16, 30, 0.96));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.login-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--orange), var(--pink), var(--violet)); }
.rabbit-orbit { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid rgba(255, 102, 196, 0.35); border-radius: 50%; color: var(--pink); font: 800 17px ui-monospace, monospace; box-shadow: inset 0 0 25px rgba(255, 102, 196, 0.1); }
.login-card h2 { font-size: 26px; margin: 28px 0 24px; }
.login-card label { display: block; color: #cfcbdb; font-size: 12px; font-weight: 700; margin: 16px 0 7px; }
.login-card input { width: 100%; padding: 13px 14px; color: var(--text); background: rgba(3, 5, 12, 0.55); border: 1px solid var(--line); border-radius: 10px; outline: none; }
.login-card input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(159, 122, 234, 0.12); }
.login-card .primary { width: 100%; margin-top: 22px; }
.form-message { min-height: 19px; margin: 14px 0 0; color: var(--red); font-size: 12px; }

.availability-shell { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 32px; }
.availability-card { width: min(560px, 100%); padding: 44px; border: 1px solid rgba(255,158,102,.28); border-radius: 22px; background: linear-gradient(145deg, rgba(31,27,34,.97), rgba(15,17,27,.98)); box-shadow: var(--shadow); text-align: center; }
.availability-icon { display: grid; width: 60px; height: 60px; margin: 0 auto 24px; place-items: center; color: var(--orange); border: 1px solid rgba(255,158,102,.35); border-radius: 50%; font-size: 22px; }
.availability-card h1 { margin: 10px 0 12px; font-size: 38px; }.availability-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }.availability-cohort { margin: 22px 0; padding: 13px; color: #d5d0df; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }

.primary, .secondary {
  border: 0;
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 800;
  transition: transform 140ms ease, opacity 140ms ease, border-color 140ms ease;
}
.primary { color: #130b18; background: linear-gradient(135deg, var(--orange), var(--pink)); box-shadow: 0 8px 22px rgba(255, 102, 196, 0.18); }
.secondary { color: var(--text); background: var(--panel-soft); border: 1px solid var(--line); }
.primary:hover, .secondary:hover { transform: translateY(-1px); }
.primary:disabled, .secondary:disabled { cursor: wait; opacity: 0.55; transform: none; }

.course-shell { height: calc(100vh - 70px); min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); overflow: hidden; }
.lab-nav { min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); padding: 25px 17px; background: rgba(12, 14, 26, 0.72); }
.nav-heading { padding: 0 9px 14px; }
.nav-heading h2 { margin: 7px 0; font-size: 18px; }
#labList { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-gutter: stable; }
#labList::-webkit-scrollbar { width: 7px; height: 7px; }
#labList::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255,255,255,.16); }
.lab-link { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px; margin: 4px 0; color: var(--muted); text-align: left; border: 1px solid transparent; border-radius: 11px; background: transparent; }
.lab-link > span { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.04); font: 700 11px ui-monospace, monospace; }
.lab-link div { min-width: 0; }
.lab-link strong, .lab-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-link strong { color: inherit; font-size: 12px; }
.lab-link small { color: #77758a; font-size: 10px; margin-top: 3px; }
.lab-link:hover { color: var(--text); background: rgba(255,255,255,0.035); }
.lab-link.active { color: var(--text); border-color: rgba(255, 102, 196, 0.28); background: linear-gradient(90deg, rgba(255,102,196,0.1), rgba(159,122,234,0.06)); }
.lab-link.running > span { color: var(--green); box-shadow: inset 0 0 0 1px rgba(89, 225, 167, 0.25); }
.lab-link.locked { cursor: not-allowed; opacity: .58; }.lab-link.locked > span { color: #77758a; }.lab-link .solution-available { display: inline-flex; width: fit-content; margin-top: 5px; padding: 3px 5px; color: var(--green); border-radius: 5px; background: rgba(89,225,167,.1); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.nav-note { flex: 0 0 auto; margin: 16px 8px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.nav-note strong { color: var(--green); }
.nav-note p { margin: 6px 0 0; }

.workspace { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(430px, 0.78fr) minmax(520px, 1.22fr); height: 100%; }
.instructions { overflow-y: auto; padding: 38px clamp(26px, 4vw, 55px) 70px; border-right: 1px solid var(--line); }
.lab-heading { display: flex; justify-content: space-between; gap: 20px; }
.lab-heading h1 { margin: 8px 0 12px; font-size: clamp(32px, 3vw, 48px); line-height: 1.04; letter-spacing: -0.04em; }
.summary { color: var(--muted); line-height: 1.65; margin: 0; }
.duration { height: fit-content; white-space: nowrap; border: 1px solid var(--line); border-radius: 99px; padding: 7px 10px; color: var(--muted); font-size: 11px; }
.lab-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 25px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,6,13,.38); }
.lab-tab { min-width: 0; padding: 10px 12px; color: var(--muted); border: 0; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 850; }
.lab-tab:hover { color: var(--text); }
.lab-tab.active { color: var(--text); background: var(--panel-soft); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.lab-tab span { display: inline-flex; margin-left: 5px; padding: 3px 5px; color: var(--muted); border-radius: 5px; background: rgba(255,255,255,.055); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.lab-tab span.available { color: var(--green); background: rgba(89,225,167,.1); }
.lab-tab-panel { min-width: 0; }
.instructions section { margin-top: 30px; }
.instructions section > h2 { font-size: 16px; margin-bottom: 13px; }
.objective-card { display: flex; gap: 14px; padding: 18px; border-radius: 14px; border: 1px solid rgba(159, 122, 234, 0.25); background: rgba(159, 122, 234, 0.07); }
.objective-card h2 { margin: 1px 0 6px; font-size: 13px; }
.objective-card p { color: #d3cfe0; line-height: 1.55; margin: 0; font-size: 13px; }
.objective-icon { color: var(--violet); font-size: 22px; }
.locked-lab-notice { display: flex; gap: 15px; align-items: flex-start; padding: 20px; border: 1px solid rgba(255,158,102,.3); border-radius: 14px; background: rgba(255,158,102,.07); }.locked-lab-notice > span { color: var(--orange); font-size: 25px; }.locked-lab-notice h2 { margin: 0 0 6px; }.locked-lab-notice p { margin: 0; color: var(--muted); line-height: 1.55; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding: 8px 8px 8px 28px; color: #cac6d6; font-size: 13px; line-height: 1.5; }
.checklist li::before { content: "✓"; position: absolute; left: 4px; color: var(--green); font-weight: 900; }
.section-intro { margin: -5px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.section-intro code { color: #dceeff; font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.expected-list { display: grid; gap: 12px; }
.expected-artifact { min-width: 0; padding: 15px; border: 1px solid rgba(105,199,255,.22); border-radius: 12px; background: rgba(105,199,255,.045); }
.expected-artifact h3 { margin: 0; color: #dceeff; font-size: 12px; }
.expected-artifact p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.expected-artifact pre { margin-top: 12px; }
.tasks { margin: 0; padding: 0; list-style: none; counter-reset: task; }
.tasks li { counter-increment: task; position: relative; margin: 0 0 20px; padding-left: 38px; color: #d7d3e1; font-size: 13px; line-height: 1.55; }
.tasks li::before { content: counter(task); position: absolute; left: 0; top: -2px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--pink); font: 800 10px ui-monospace, monospace; }
.tasks p { margin: 0 0 9px; }
pre { margin: 9px 0 0; padding: 12px 14px; overflow-x: auto; border: 1px solid rgba(255,255,255,0.075); border-radius: 10px; color: #e6ddf7; background: #080a12; font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hint-box { margin-top: 28px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 12px; }
.hint-box summary { color: var(--orange); cursor: pointer; font-weight: 800; }
.hint-box li { margin: 9px 0; line-height: 1.5; }
.solution-card { padding: 18px; border: 1px solid rgba(89,225,167,.28); border-radius: 14px; background: rgba(89,225,167,.055); scroll-margin-top: 18px; }
.solution-card.locked { border-color: var(--line); background: rgba(255,255,255,.025); }
.solution-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.solution-heading h2 { margin: 5px 0 0; font-size: 16px; }
.solution-heading span { padding: 6px 9px; color: var(--green); border-radius: 99px; background: rgba(89,225,167,.1); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.solution-card.locked .solution-heading span { color: var(--muted); background: rgba(255,255,255,.055); }
.solution-card > p { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.solution-card video { display: block; width: 100%; margin-top: 16px; border-radius: 10px; background: #000; }
.solution-steps-section { padding-bottom: 30px; }
.solution-steps-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.solution-steps-heading h2 { margin: 5px 0 0; font-size: 18px; }
.solution-steps-heading > span { color: var(--green); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.solution-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: solution-step; }
.solution-steps > li { counter-increment: solution-step; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.solution-step-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.solution-step-heading strong { position: relative; padding-left: 30px; color: #ded9e8; font-size: 12px; }
.solution-step-heading strong::before { content: counter(solution-step); position: absolute; left: 0; top: -4px; display: grid; width: 22px; height: 22px; place-items: center; color: var(--pink); border: 1px solid var(--line); border-radius: 6px; font: 800 9px ui-monospace, monospace; }
.solution-steps li > p { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.solution-steps pre { margin-top: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-command { flex: 0 0 auto; padding: 6px 8px; color: #ddd7e8; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.035); font-size: 9px; font-weight: 800; }
.copy-command:hover, .copy-command.copied { color: var(--green); border-color: rgba(89,225,167,.32); }
.solution-step-loading { color: var(--muted); font-size: 12px; }
.solution-step-loading.failure { color: var(--red); }
.action-bar { display: flex; gap: 10px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.result { white-space: pre-wrap; }
.result.success { border-color: rgba(89,225,167,0.4); color: #aaf3d4; }
.result.failure { border-color: rgba(255,113,133,0.45); color: #ffb0bc; }
.result.waiting { border-color: rgba(159,122,234,0.4); color: #d7c5fb; }
.checker-result { color: var(--muted); }
.checker-line { display: block; min-height: 1.65em; }
.checker-line.pass { color: #8ef0c5; }
.checker-line.fail { color: #ff8fa1; }
.checker-line.summary { margin-top: 7px; padding-top: 7px; border-top: 1px solid currentColor; font-weight: 900; }

.celebration { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; overflow: hidden; pointer-events: none; background: radial-gradient(circle at center, rgba(89,225,167,.12), transparent 48%); }
.celebration-particles { position: absolute; inset: 0; overflow: hidden; }
.celebration-card { position: relative; z-index: 2; width: min(430px, calc(100% - 36px)); padding: 28px; text-align: center; border: 1px solid rgba(89,225,167,.42); border-radius: 20px; background: rgba(13,17,25,.94); box-shadow: 0 28px 100px rgba(0,0,0,.55), 0 0 60px rgba(89,225,167,.12); animation: celebration-card-in .45s cubic-bezier(.2,.9,.3,1.25) both; backdrop-filter: blur(15px); }
.celebration-card h2 { margin: 10px 0 8px; font-size: clamp(30px, 6vw, 48px); letter-spacing: -.04em; }
.celebration-card > p:last-child { margin: 0; color: var(--muted); line-height: 1.55; }
.celebration-mark { display: grid; width: 58px; height: 58px; margin: 0 auto 18px; place-items: center; color: #07130e; border-radius: 50%; background: var(--green); box-shadow: 0 0 35px rgba(89,225,167,.36); font-size: 30px; font-weight: 950; }
.confetti-piece { position: absolute; top: -24px; left: var(--x); width: 9px; height: 17px; border-radius: 2px; background: var(--color); animation: confetti-fall var(--duration) var(--delay) cubic-bezier(.16,.75,.36,1) both; }
.celebration-balloon { position: absolute; bottom: -130px; left: var(--x); width: 48px; height: 61px; border-radius: 50% 50% 46% 46%; background: var(--color); box-shadow: inset -10px -8px 0 rgba(0,0,0,.11); animation: balloon-rise var(--duration) var(--delay) ease-out both; }
.celebration-balloon::before { content:""; position:absolute; left:20px; bottom:-7px; border:5px solid transparent; border-bottom:0; border-top:8px solid var(--color); }
.celebration-balloon::after { content:""; position:absolute; left:23px; top:61px; width:1px; height:92px; background:rgba(255,255,255,.42); }
@keyframes celebration-card-in { from { opacity:0; transform:scale(.72) translateY(20px); } to { opacity:1; transform:none; } }
@keyframes confetti-fall { 0% { opacity:0; transform:translate3d(0,-20px,0) rotate(0); } 10% { opacity:1; } 100% { opacity:.9; transform:translate3d(var(--drift),105vh,0) rotate(760deg); } }
@keyframes balloon-rise { 0% { opacity:0; transform:translateY(0) rotate(-4deg); } 12% { opacity:.95; } 100% { opacity:.75; transform:translateY(-125vh) rotate(8deg); } }

.terminal-panel { min-width: 0; position: relative; display: flex; flex-direction: column; background: #05070c; }
.terminal-bar { height: 43px; flex: 0 0 auto; display: grid; grid-template-columns: 80px 1fr auto; align-items: center; padding: 0 14px; color: #777b89; border-bottom: 1px solid #20232d; background: #0d1017; font: 11px ui-monospace, monospace; }
.terminal-bar > span { text-align: center; }
.terminal-bar button { color: #9a9dab; background: transparent; border: 0; font-size: 10px; }
.terminal-bar button:hover { color: var(--text); }
.terminal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.terminal-actions button { min-height: 28px; padding: 0 8px; border-radius: 7px; }
.terminal-actions button:focus-visible { color: var(--text); outline: 2px solid var(--violet); outline-offset: 1px; }
.terminal-actions .terminal-check { color: #0b1711; background: var(--green); font-weight: 900; }
.terminal-actions .terminal-check:hover { color: #0b1711; filter: brightness(1.08); }
.terminal-actions .terminal-check:disabled { cursor: not-allowed; opacity: .42; filter: none; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff6e76; }
.window-dots i:nth-child(2) { background: #f6bf4f; }
.window-dots i:nth-child(3) { background: #63c98b; }
#terminalFrame { width: 100%; flex: 1; border: 0; opacity: 0; background: #000; }
#terminalFrame.ready { opacity: 1; }
.terminal-placeholder { position: absolute; inset: 43px 0 0; z-index: 2; display: grid; place-content: center; justify-items: center; color: #808493; background: #05070c; font-size: 12px; }
.verification-panel { position: absolute; z-index: 4; top: 53px; right: 12px; left: 12px; max-height: min(52%, 440px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,13,22,.97); box-shadow: 0 18px 55px rgba(0,0,0,.55); backdrop-filter: blur(12px); }
.verification-heading { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 12px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.verification-heading button { padding: 5px 7px; color: var(--muted); border: 0; background: transparent; font-size: 9px; }
.verification-heading button:hover { color: var(--text); }
.verification-panel .result { min-height: 0; margin: 0; overflow: auto; border: 0; border-radius: 0; }
body.terminal-expanded { overflow: hidden; }
.terminal-panel:fullscreen,
.terminal-panel:-webkit-full-screen,
.terminal-panel.terminal-maximized { position: fixed; inset: 0; z-index: 200; width: 100vw; height: 100vh; height: 100dvh; border: 0; }
.spinner { width: 28px; height: 28px; border: 2px solid #242838; border-top-color: var(--pink); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.confirm-dialog { width: min(500px, calc(100% - 30px)); padding: 0; color: var(--text); border: 1px solid var(--line); border-radius: 17px; background: var(--panel); box-shadow: 0 30px 100px #000; }.confirm-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }.confirm-dialog form { padding: 26px; }.confirm-dialog h2 { margin: 8px 0 10px; }.confirm-dialog p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }.confirm-dialog form > div { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }

@media (max-width: 1150px) {
  .course-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .workspace { grid-template-columns: minmax(380px, 0.85fr) minmax(430px, 1.15fr); }
}

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .course-shell { display: block; height: auto; min-height: calc(100vh - 70px); overflow: visible; }
  .lab-nav { display: block; border-right: 0; border-bottom: 1px solid var(--line); }
  #labList { display: flex; gap: 5px; overflow-x: auto; overflow-y: hidden; padding: 0 0 7px; scrollbar-gutter: auto; }
  #labList .lab-link { flex: 0 0 min(220px, 72vw); margin: 0; }
  .nav-note, .nav-heading h2 { display: none; }
  .workspace { display: block; height: auto; }
  .instructions { height: auto; overflow: visible; border-right: 0; }
  .terminal-panel { height: 70vh; border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .topbar { padding: 0 16px; }
  .login-shell { width: min(100% - 28px, 520px); padding: 36px 0; }
  .login-copy h1 { font-size: 48px; }
  .instructions { padding: 28px 18px 50px; }
  .lab-heading { display: block; }
  .duration { display: inline-block; margin-top: 14px; }
  .action-bar { flex-direction: column; }
  .terminal-bar { grid-template-columns: 30px minmax(80px, 1fr) auto; padding: 0 8px; }
  .terminal-actions { gap: 1px; }
  .terminal-actions button { padding: 0 5px; font-size: 9px; }
  .terminal-actions .terminal-check { padding: 0 7px; }
  .window-dots i { width: 6px; height: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-card { animation: none; }
  .confetti-piece, .celebration-balloon { display: none; }
}