.bc-lab {
  color-scheme: dark;
  --bc-bg: #050912;
  --bc-panel: #0a1324;
  --bc-panel-2: #0e1b31;
  --bc-panel-3: #122440;
  --bc-border: #243b5b;
  --bc-border-strong: #3a5c86;
  --bc-text: #edf6ff;
  --bc-muted: #9eb1c8;
  --bc-blue: #69d5ff;
  --bc-gold: #ffd36a;
  --bc-green: #70e1ad;
  --bc-red: #ff8d9a;
  --bc-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  --bc-radius: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--bc-text);
}

.bc-lab, .bc-lab * { box-sizing: border-box; }
body.bc-lab-page { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 15% -10%, #12305a 0, transparent 34%), #050912; color: #edf6ff; }
.bc-lab button, .bc-lab select, .bc-lab textarea { font: inherit; }
.bc-lab button, .bc-lab select { color: inherit; }
.bc-lab button:focus-visible, .bc-lab select:focus-visible, .bc-lab textarea:focus-visible, .bc-lab [tabindex]:focus-visible { outline: 3px solid var(--bc-gold); outline-offset: 2px; }
.bc-skip-link { position: fixed; left: 12px; top: -80px; z-index: 9999; background: #ffd36a; color: #111827; padding: 10px 14px; border-radius: 8px; font-weight: 800; }
.bc-skip-link:focus { top: 12px; }

.bc-lab { min-height: 760px; max-width: 1720px; margin: 0 auto; padding: 18px; }
.bc-lab__shell { overflow: hidden; border: 1px solid var(--bc-border); border-radius: 22px; background: rgba(5, 10, 20, .92); box-shadow: var(--bc-shadow); }
.bc-lab__topbar { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(280px, 1.5fr) auto; align-items: center; gap: 18px; min-height: 84px; padding: 16px 20px; border-bottom: 1px solid var(--bc-border); background: linear-gradient(135deg, rgba(18, 45, 80, .9), rgba(7, 15, 29, .96)); }
.bc-brand { display: flex; align-items: center; gap: 12px; }
.bc-brand__mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(145deg, var(--bc-blue), #4b80ff); color: #07101e; font-weight: 1000; box-shadow: inset 0 -5px 12px rgba(0,0,0,.2); }
.bc-brand__eyebrow { margin: 0 0 2px; color: var(--bc-blue); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bc-brand__title { margin: 0; font-size: 1.15rem; line-height: 1.1; }
.bc-course-picker label { display: block; margin: 0 0 6px; color: var(--bc-muted); font-size: .78rem; font-weight: 700; }
.bc-course-picker select { width: 100%; min-height: 42px; border: 1px solid var(--bc-border-strong); border-radius: 10px; background: #091426; padding: 8px 12px; }
.bc-connection { display: flex; align-items: center; gap: 9px; justify-content: flex-end; min-width: 190px; color: var(--bc-muted); font-size: .86rem; }
.bc-connection__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bc-gold); box-shadow: 0 0 0 4px rgba(255,211,106,.12); }
.bc-connection[data-state="engine"] .bc-connection__dot { background: var(--bc-green); box-shadow: 0 0 0 4px rgba(112,225,173,.12); }
.bc-connection[data-state="practice"] .bc-connection__dot { background: var(--bc-blue); box-shadow: 0 0 0 4px rgba(105,213,255,.12); }
.bc-connection[data-state="offline"] .bc-connection__dot { background: var(--bc-red); }

.bc-lab__workspace { display: grid; grid-template-columns: minmax(245px, .75fr) minmax(430px, 1.35fr) minmax(330px, 1fr); min-height: 560px; }
.bc-pane { min-width: 0; background: var(--bc-panel); }
.bc-pane + .bc-pane { border-left: 1px solid var(--bc-border); }
.bc-pane__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 14px; border-bottom: 1px solid var(--bc-border); background: var(--bc-panel-2); }
.bc-pane__header h2 { margin: 0; font-size: .9rem; letter-spacing: .04em; }
.bc-badge { display: inline-flex; align-items: center; border: 1px solid #315376; border-radius: 999px; padding: 4px 8px; color: var(--bc-blue); background: rgba(105,213,255,.07); font-size: .72rem; font-weight: 800; }

.bc-lesson { height: 100%; overflow: auto; padding: 18px; }
.bc-lesson__course { margin: 0 0 8px; color: var(--bc-blue); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.bc-lesson h1 { margin: 0 0 10px; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.12; }
.bc-lesson__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--bc-muted); font-size: .8rem; }
.bc-lesson__task { margin: 0 0 20px; border-left: 4px solid var(--bc-gold); border-radius: 0 10px 10px 0; background: rgba(255,211,106,.07); padding: 13px 14px; line-height: 1.55; }
.bc-lesson h3 { margin: 22px 0 9px; font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bc-muted); }
.bc-objectives { margin: 0; padding-left: 21px; color: #d8e6f4; }
.bc-objectives li { margin: 8px 0; line-height: 1.45; }
.bc-hint { margin-top: 16px; border: 1px solid #4f4626; border-radius: 12px; padding: 13px; background: #211d10; color: #ffe5a4; }
.bc-hint[hidden] { display: none; }
.bc-progress { margin-top: 24px; }
.bc-progress__row { display: flex; justify-content: space-between; gap: 10px; color: var(--bc-muted); font-size: .78rem; }
.bc-progress__track { height: 8px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #17263a; }
.bc-progress__fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--bc-blue), var(--bc-green)); transition: width .25s ease; }

.bc-editor-pane { display: grid; grid-template-rows: auto minmax(360px, 1fr) auto; }
.bc-file-tab { display: flex; align-items: center; min-width: 0; gap: 8px; color: #d8e6f4; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; }
.bc-file-tab__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bc-blue); }
.bc-editor { display: grid; grid-template-columns: auto 1fr; min-height: 0; background: #07101e; }
.bc-editor__lines { min-width: 48px; padding: 16px 11px 16px 8px; border-right: 1px solid #15253b; color: #5f7693; background: #060d19; text-align: right; white-space: pre; overflow: hidden; user-select: none; font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bc-editor textarea { width: 100%; height: 100%; min-height: 430px; resize: none; border: 0; border-radius: 0; padding: 16px; background: transparent; color: #e8f4ff; caret-color: var(--bc-gold); tab-size: 4; white-space: pre; overflow: auto; font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bc-editor textarea::selection { background: rgba(105,213,255,.24); }
.bc-editor__status { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 6px 12px; border-top: 1px solid var(--bc-border); color: var(--bc-muted); background: #081224; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }

.bc-preview { position: relative; display: grid; min-height: 0; place-items: stretch; overflow: hidden; background: #060b14; }
.bc-preview__surface { position: relative; min-height: 470px; overflow: hidden; }
.bc-preview canvas { width: 100%; height: 100%; min-height: 470px; display: block; background: #081226; }
.bc-preview iframe { width: 100%; height: 100%; min-height: 470px; border: 0; background: #081226; }
.bc-preview-card { display: grid; place-items: center; min-height: 470px; padding: 30px; background: radial-gradient(circle at 50% 35%, rgba(45,112,180,.25), transparent 38%), #081226; }
.bc-preview-card__panel { width: min(100%, 360px); border: 1px solid #315376; border-radius: 20px; padding: 25px; background: rgba(10,25,47,.93); box-shadow: 0 20px 50px rgba(0,0,0,.32); }
.bc-preview-card__panel h3 { margin: 0 0 18px; color: var(--bc-gold); font-size: 1.5rem; }
.bc-preview-card__row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-top: 1px solid #213958; }
.bc-preview-card__row span:first-child { color: var(--bc-muted); }
.bc-crystal-wrap { display: grid; place-items: center; gap: 20px; min-height: 470px; padding: 30px; background: radial-gradient(circle, rgba(35,104,166,.3), transparent 45%), #081226; text-align: center; }
.bc-crystal { width: 116px; height: 116px; border: 0; clip-path: polygon(50% 0, 82% 18%, 100% 50%, 82% 82%, 50% 100%, 18% 82%, 0 50%, 18% 18%); background: radial-gradient(circle at 45% 38%, #fff4b8, var(--bc-gold) 34%, #4ca8dd 36%, #1c5f9b 70%); cursor: pointer; filter: drop-shadow(0 0 24px rgba(105,213,255,.45)); transition: transform .15s ease; }
.bc-crystal:hover { transform: scale(1.06) rotate(3deg); }
.bc-crystal:active { transform: scale(.95); }
.bc-preview-note { color: var(--bc-muted); max-width: 340px; line-height: 1.5; }
.bc-preview-score { font-size: 1.35rem; font-weight: 900; }

.bc-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--bc-border); border-bottom: 1px solid var(--bc-border); background: #081326; }
.bc-button { min-height: 40px; border: 1px solid var(--bc-border-strong); border-radius: 10px; padding: 8px 13px; background: #11233d; color: var(--bc-text); font-weight: 800; cursor: pointer; }
.bc-button:hover { border-color: #5e89b7; background: #173054; }
.bc-button--primary { border-color: #6ccff6; background: var(--bc-blue); color: #07101e; }
.bc-button--primary:hover { background: #9ce4ff; }
.bc-button--gold { border-color: #f4c650; background: var(--bc-gold); color: #17130a; }
.bc-button--quiet { background: transparent; }
.bc-button:disabled { opacity: .55; cursor: not-allowed; }

.bc-results { border-top: 0; background: #07101d; }
.bc-results__tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--bc-border); background: #0a1527; }
.bc-results__tab { border: 0; border-bottom: 3px solid transparent; padding: 11px 12px 9px; background: transparent; color: var(--bc-muted); font-size: .8rem; font-weight: 800; cursor: pointer; }
.bc-results__tab[aria-selected="true"] { border-bottom-color: var(--bc-blue); color: var(--bc-text); }
.bc-results__body { min-height: 128px; max-height: 240px; overflow: auto; padding: 14px 18px 18px; }
.bc-empty { color: var(--bc-muted); margin: 0; }
.bc-result-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bc-result-summary strong { font-size: 1.05rem; }
.bc-result-summary__engine { color: var(--bc-muted); font-size: .8rem; }
.bc-checks { display: grid; gap: 8px; }
.bc-check { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; border: 1px solid #20364f; border-radius: 10px; padding: 9px 11px; background: rgba(14,27,49,.7); }
.bc-check[data-pass="true"] { border-color: rgba(112,225,173,.34); }
.bc-check[data-pass="false"] { border-color: rgba(255,141,154,.34); }
.bc-check__icon { color: var(--bc-red); font-weight: 1000; }
.bc-check[data-pass="true"] .bc-check__icon { color: var(--bc-green); }
.bc-check__message { color: #dceafa; font-size: .86rem; line-height: 1.4; }
.bc-console { margin: 0; color: #c7d6e8; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }

.bc-modal { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 24px; background: rgba(1,4,10,.78); backdrop-filter: blur(8px); }
.bc-modal[hidden] { display: none; }
.bc-modal__dialog { width: min(1200px, 96vw); max-height: 90vh; overflow: hidden; border: 1px solid var(--bc-border-strong); border-radius: 18px; background: #07101e; box-shadow: var(--bc-shadow); }
.bc-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bc-border); }
.bc-modal__header h2 { margin: 0; font-size: 1rem; }
.bc-modal__close { width: 38px; height: 38px; border: 1px solid var(--bc-border); border-radius: 9px; background: #11233d; color: var(--bc-text); cursor: pointer; }
.bc-compare { display: grid; grid-template-columns: 1fr 1fr; max-height: 74vh; overflow: auto; }
.bc-compare section + section { border-left: 1px solid var(--bc-border); }
.bc-compare h3 { position: sticky; top: 0; z-index: 2; margin: 0; padding: 10px 14px; background: #0d1c31; color: var(--bc-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.bc-compare pre { margin: 0; min-height: 100%; padding: 16px; white-space: pre-wrap; color: #e8f4ff; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.bc-toast { position: fixed; right: 20px; bottom: 20px; z-index: 999999; max-width: 360px; border: 1px solid var(--bc-border-strong); border-radius: 12px; padding: 12px 15px; background: #10233c; color: var(--bc-text); box-shadow: var(--bc-shadow); }
.bc-toast[hidden] { display: none; }

@media (max-width: 1180px) {
  .bc-lab__workspace { grid-template-columns: 290px 1fr; }
  .bc-preview-pane { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--bc-border); }
  .bc-preview__surface, .bc-preview canvas, .bc-preview iframe, .bc-preview-card, .bc-crystal-wrap { min-height: 400px; }
}
@media (max-width: 760px) {
  .bc-lab { padding: 0; }
  .bc-lab__shell { border-radius: 0; }
  .bc-lab__topbar { grid-template-columns: 1fr; }
  .bc-connection { justify-content: flex-start; }
  .bc-lab__workspace { display: block; }
  .bc-pane + .bc-pane { border-left: 0; border-top: 1px solid var(--bc-border); }
  .bc-lesson { max-height: none; }
  .bc-editor textarea { min-height: 420px; }
  .bc-compare { grid-template-columns: 1fr; }
  .bc-compare section + section { border-left: 0; border-top: 1px solid var(--bc-border); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}