:root {
  --bg: #05060a; --bg-soft: #0b0d16;
  --panel: rgba(255,255,255,0.04); --panel-2: rgba(255,255,255,0.07);
  --stroke: rgba(255,255,255,0.1); --stroke-2: rgba(255,255,255,0.16);
  --text: #f2f4fb; --muted: #9aa3bd;
  --accent: #7c5cff; --accent-2: #18d3c8; --accent-3: #ff7ac0;
  --radius: 20px; --radius-sm: 13px; --shadow: 0 30px 80px -40px rgba(124,92,255,0.55);
  font-family: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.5; }
h1,h2,h3,h4 { font-family: "Space Grotesk", sans-serif; margin: 0; letter-spacing: -0.02em; line-height: 1.12; }
a { color: inherit; text-decoration: none; }
.grad { background: linear-gradient(100deg, var(--accent), var(--accent-3), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }

.bg-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.4; }
.orb--1 { width: 460px; height: 460px; background: var(--accent); top: -160px; left: -120px; }
.orb--2 { width: 420px; height: 420px; background: var(--accent-2); bottom: -180px; right: -140px; opacity: 0.3; }
.grid-fade { position: absolute; inset: 0; background-image: linear-gradient(var(--stroke) 1px, transparent 1px), linear-gradient(90deg, var(--stroke) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%); opacity: 0.4; }

/* top bar */
.cab-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 24px; padding: 14px 24px; background: linear-gradient(180deg, rgba(5,6,10,0.9), rgba(5,6,10,0.4)); backdrop-filter: blur(14px); border-bottom: 1px solid var(--stroke); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent-3)); font-family: "Space Grotesk"; font-weight: 700; box-shadow: var(--shadow); }
.brand__name strong { display: block; font-size: 14px; }
.brand__name small { color: var(--muted); font-size: 11px; }
.cab-top__progress { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 13px; color: var(--muted); }
.cab-top__progress .bar { width: 160px; height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.cab-top__progress .bar__fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.5s; }
.cab-top__progress strong { color: var(--text); font-family: "Space Grotesk"; }
.cab-top__back { color: var(--muted); font-size: 14px; }
.cab-top__back:hover { color: var(--text); }

/* layout */
.cab-layout { display: grid; grid-template-columns: 300px 1fr; gap: 28px; max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; align-items: start; }

/* sidebar */
.cab-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 4px; }
.nav-group { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px 8px; font-weight: 700; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; transition: 0.18s; cursor: pointer; }
.nav-item:hover { background: var(--panel); }
.nav-item.is-active { background: var(--panel-2); border-color: var(--stroke-2); }
.nav-item__num { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: var(--panel-2); font-family: "Space Grotesk"; font-weight: 700; font-size: 13px; color: var(--muted); }
.nav-item.is-active .nav-item__num { background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #fff; }
.nav-item.is-done .nav-item__num { background: rgba(24,211,200,0.18); color: var(--accent-2); }
.nav-item__title { font-size: 13px; line-height: 1.25; }
.nav-item__title small { display: block; color: var(--muted); font-size: 11px; }

/* main */
.cab-main { min-width: 0; }
.lesson-head { padding: 30px; border-radius: var(--radius); background: linear-gradient(150deg, rgba(124,92,255,0.16), rgba(24,211,200,0.05)); border: 1px solid var(--stroke-2); margin-bottom: 22px; }
.lesson-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); font-weight: 700; }
.lesson-head h1 { font-size: clamp(24px, 3.4vw, 36px); margin: 12px 0; }
.lesson-head .result { color: var(--text); font-size: 16px; max-width: 640px; }
.lesson-head .mission { color: var(--muted); margin-top: 12px; max-width: 680px; }
.lesson-head .ring { float: right; }

.lesson-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.block { padding: 24px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--stroke); margin-bottom: 18px; }
.block h3 { font-size: 17px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.block h3 .ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--panel-2); font-size: 14px; }
.block--span { grid-column: 1 / -1; }

/* steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--stroke); cursor: pointer; transition: 0.18s; }
.step:hover { border-color: var(--stroke-2); }
.step.done { opacity: 0.6; }
.step.done .step__text { text-decoration: line-through; }
.step__box { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; border: 2px solid var(--stroke-2); display: grid; place-items: center; font-size: 13px; transition: 0.18s; }
.step.done .step__box { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; }
.step__text { font-size: 14px; }

/* checks */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.checklist li:not(.check) { position: relative; padding-left: 30px; font-size: 14px; }
.checklist li:not(.check)::before { content: "✓"; position: absolute; left: 0; top: 0; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: rgba(24,211,200,0.15); color: var(--accent-2); font-size: 12px; }
.checklist .check { align-items: center; }
.checklist .check span:last-child { font-size: 14px; }

/* homework + pro */
.callout { padding: 18px; border-radius: 13px; font-size: 14px; line-height: 1.5; }
.callout--home { background: rgba(255,122,192,0.1); border: 1px solid rgba(255,122,192,0.3); }
.callout--pro { background: rgba(124,92,255,0.12); border: 1px solid rgba(124,92,255,0.35); }
.callout strong { display: block; margin-bottom: 6px; font-family: "Space Grotesk"; }

/* vocab */
.vocab { display: grid; gap: 8px; }
.vocab li { list-style: none; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--stroke); font-size: 13px; }
.vocab b { color: var(--accent-2); }

/* assistant inline prompt */
.ask-mentor { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ask-mentor button { padding: 8px 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--stroke-2); color: var(--text); font-size: 13px; cursor: pointer; transition: 0.18s; }
.ask-mentor button:hover { background: var(--accent); border-color: var(--accent); }

/* lesson footer nav */
.lesson-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.lesson-foot a { padding: 12px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--stroke-2); font-size: 14px; transition: 0.18s; }
.lesson-foot a:hover { background: var(--panel-2); }
.lesson-foot a.disabled { opacity: 0.35; pointer-events: none; }

/* progress ring */
.ring { position: relative; width: 64px; height: 64px; }
.ring svg { transform: rotate(-90deg); }
.ring__pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Space Grotesk"; font-weight: 700; font-size: 14px; }

/* assistant fab + panel (shared with landing) */
.assistant-fab { position: fixed; bottom: 24px; right: 24px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--stroke-2); background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #fff; font-size: 24px; cursor: pointer; box-shadow: var(--shadow); display: grid; place-items: center; }
.assistant-fab__pulse { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent-2); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } }
.assistant-panel { position: fixed; bottom: 96px; right: 24px; z-index: 60; width: min(380px, calc(100vw - 32px)); height: 500px; max-height: calc(100vh - 130px); display: flex; flex-direction: column; background: var(--bg-soft); border: 1px solid var(--stroke-2); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none; transition: 0.25s; }
.assistant-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.assistant-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--stroke); background: linear-gradient(120deg, rgba(124,92,255,0.2), rgba(255,122,192,0.08)); }
.assistant-panel__head small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.assistant-close { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; }
.assistant-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.a-msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.a-msg--bot { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--stroke); border-bottom-left-radius: 4px; }
.a-msg--user { align-self: flex-end; background: linear-gradient(120deg, var(--accent), var(--accent-3)); color: #fff; border-bottom-right-radius: 4px; }
.a-typing { opacity: 0.6; font-style: italic; }
.assistant-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--stroke); }
.assistant-form input { flex: 1; padding: 11px 14px; border-radius: 12px; background: rgba(5,6,10,0.6); border: 1px solid var(--stroke-2); color: var(--text); font-size: 14px; }
.assistant-form input:focus { outline: none; border-color: var(--accent); }
.assistant-form button { width: 44px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-size: 16px; cursor: pointer; }

/* ====== guided player ====== */
.player { max-width: 720px; }
.reveal-in { animation: fadeUp .45s cubic-bezier(.2,.7,.2,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.player__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.player__title { font-size: clamp(26px, 4vw, 40px); margin: 8px 0 18px; }
.badge { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--stroke-2); font-size: 13px; font-weight: 600; color: var(--accent-2); }
.goal-card { padding: 20px 22px; border-radius: var(--radius); background: linear-gradient(150deg, rgba(124,92,255,0.18), rgba(24,211,200,0.06)); border: 1px solid var(--stroke-2); margin-bottom: 16px; }
.goal-card__lbl { font-size: 13px; font-weight: 700; color: var(--accent-2); }
.goal-card p { margin: 8px 0 0; font-size: 17px; }
.mission { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.meta-row { display: flex; gap: 26px; margin-bottom: 26px; }
.meta { display: flex; flex-direction: column; }
.meta strong { font-family: "Space Grotesk"; font-size: 26px; }
.meta span { color: var(--muted); font-size: 13px; }

.big-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 24px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 700; font-family: "Space Grotesk"; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-3)); box-shadow: var(--shadow); cursor: pointer; transition: transform .15s; text-decoration: none; }
.big-btn:hover { transform: translateY(-2px); }
.big-btn.is-done { background: linear-gradient(120deg, var(--accent-2), var(--accent)); }
.ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; margin-top: 10px; border: 1px solid var(--stroke-2); border-radius: 14px; background: var(--panel); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; transition: .18s; }
.ghost-btn:hover { background: var(--panel-2); }
.ghost-btn.sm { width: auto; margin: 0; padding: 12px 16px; font-size: 14px; }

/* step wizard */
.step-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.step-counter { font-family: "Space Grotesk"; font-weight: 700; color: var(--muted); font-size: 14px; }
.link-btn { background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; padding: 4px; }
.link-btn:hover { color: var(--text); }
.dots { display: flex; gap: 7px; margin-bottom: 18px; }
.dot { flex: 1; height: 6px; border-radius: 999px; background: var(--panel-2); transition: .25s; }
.dot.filled { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.dot.active { background: var(--accent-3); }
.step-card { padding: 30px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--stroke-2); margin-bottom: 14px; }
.step-card__num { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-3)); font-family: "Space Grotesk"; font-weight: 700; font-size: 22px; color: #fff; margin-bottom: 16px; }
.step-card__text { font-size: 20px; line-height: 1.5; margin-bottom: 20px; }
.tool-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; margin-bottom: 18px; border-radius: 12px; background: rgba(124,92,255,0.14); border: 1px solid rgba(124,92,255,0.4); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.tool-btn:hover { background: rgba(124,92,255,0.24); }
.step-actions { display: flex; gap: 10px; align-items: center; }
.step-actions .big-btn { flex: 1; }
.step-foot { display: flex; justify-content: space-between; }

/* recap */
.celebrate { font-size: 56px; text-align: center; }
.recap .player__title { text-align: center; }
.recap .mission { text-align: center; }
.check { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--stroke); cursor: pointer; margin-bottom: 8px; transition: .15s; }
.check.on { border-color: rgba(24,211,200,0.4); }
.check__box { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px; border: 2px solid var(--stroke-2); display: grid; place-items: center; font-size: 13px; }
.check.on .check__box { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.callout { padding: 18px; border-radius: 13px; font-size: 14px; line-height: 1.5; }
.callout strong { display: block; margin-bottom: 6px; font-family: "Space Grotesk"; }
.callout.home { background: rgba(255,122,192,0.1); border: 1px solid rgba(255,122,192,0.3); }
.callout.pro { background: rgba(124,92,255,0.12); border: 1px solid rgba(124,92,255,0.35); }
.recap-foot { display: flex; gap: 12px; margin-top: 8px; }
.recap-foot .ghost-btn { margin: 0; flex: 0 0 auto; width: auto; }
.recap-foot .big-btn { flex: 1; }

/* worksheet (constructor) */
.worksheet { display: block; margin: 0 0 14px; }
.worksheet > span { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.worksheet em { color: var(--accent-2); font-style: normal; font-weight: 400; font-size: 12px; }
.worksheet textarea, .worksheet input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; background: rgba(5,6,10,0.6); border: 1px solid var(--stroke-2); color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.worksheet textarea:focus, .worksheet input:focus { outline: none; border-color: var(--accent); }

/* export row + trophy + toast */
.export-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.export-row .tool-btn { flex: 1; justify-content: center; margin: 0; }
.cab-top__trophy { background: var(--panel-2); border: 1px solid var(--stroke-2); border-radius: 12px; width: 42px; height: 42px; font-size: 19px; cursor: pointer; transition: .18s; }
.cab-top__trophy:hover { background: var(--accent); border-color: var(--accent); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); z-index: 90; background: var(--bg-soft); border: 1px solid var(--stroke-2); color: var(--text); padding: 12px 20px; border-radius: 12px; font-size: 14px; box-shadow: var(--shadow); opacity: 0; transition: .3s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ===== full-screen IDE (lesson step workspace) ===== */
.cab-layout.ide-mode { display: block; max-width: 100%; margin: 0; padding: 0; }
.cab-layout.ide-mode .cab-side { display: none; }
.ide { height: calc(100vh - 66px); display: flex; flex-direction: column; }
.ide__top { display: flex; align-items: center; gap: 18px; padding: 10px 20px; border-bottom: 1px solid var(--stroke); background: var(--bg-soft); }
.ide__title { font-family: "Space Grotesk"; font-weight: 700; font-size: 15px; }
.ide__legend { margin-left: auto; color: var(--muted); font-size: 13px; }
.ide__grid { flex: 1; display: grid; grid-template-columns: 360px 1fr 1fr; min-height: 0; }
.ide__task { overflow-y: auto; padding: 22px; border-right: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 14px; }
.ide__num { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--accent), var(--accent-3)); font-family: "Space Grotesk"; font-weight: 700; font-size: 21px; color: #fff; }
.ide__text { font-size: 19px; line-height: 1.45; font-weight: 500; margin: 0; }
.ide__tools { display: flex; gap: 8px; flex-wrap: wrap; }
.ide__tools .ghost-btn, .ide__tools .tool-btn { margin: 0; width: auto; }
.ide__nav { display: flex; gap: 10px; align-items: center; }
.ide__nav .big-btn { flex: 1; }
.ide__nav .ghost-btn { margin: 0; width: auto; }
.ide__rail { margin-top: 6px; border-top: 1px solid var(--stroke); padding-top: 14px; display: flex; flex-direction: column; gap: 5px; }

.ide__editor, .ide__preview { display: flex; flex-direction: column; min-height: 0; }
.ide__editor { border-right: 1px solid var(--stroke); }
.ide__pane-h { padding: 11px 16px; font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--stroke); background: var(--bg-soft); }
.ide__gen { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--stroke); }
.ide__gen input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 11px; background: rgba(5,6,10,0.6); border: 1px solid var(--stroke-2); color: var(--text); font-size: 14px; }
.ide__gen input:focus { outline: none; border-color: var(--accent); }
.ide__gen .big-btn { width: auto; flex: 0 0 auto; padding: 11px 16px; font-size: 14px; }
#ide-code { flex: 1; resize: none; padding: 16px; border: 0; background: #0a0c14; color: #cdd3ee; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; line-height: 1.55; }
#ide-code:focus { outline: none; }
.ide__acts { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--stroke); }
.ide__acts .tool-btn { margin: 0; flex: 1; justify-content: center; }
#ide-frame { flex: 1; width: 100%; border: 0; background: #fff; }

@media (max-width: 1000px) {
  .ide { height: auto; }
  .ide__grid { grid-template-columns: 1fr; }
  .ide__task { border-right: 0; border-bottom: 1px solid var(--stroke); }
  .ide__editor { border-right: 0; border-bottom: 1px solid var(--stroke); }
  #ide-code { min-height: 280px; }
  #ide-frame { min-height: 360px; }
  .ide__legend { display: none; }
}

/* smart quiz */
.quiz { max-width: 720px; }
.quiz-title { font-size: clamp(22px, 3vw, 30px); margin-bottom: 8px; }
.qcard { padding: 20px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--stroke); margin-bottom: 14px; }
.qcard__q { font-size: 16px; margin-bottom: 14px; line-height: 1.45; }
.qcard__q b { color: var(--accent); font-family: "Space Grotesk"; }
.qopts { display: grid; gap: 8px; }
.qopt { text-align: left; padding: 13px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--stroke-2); color: var(--text); font-size: 14px; cursor: pointer; transition: .15s; }
.qopt:hover:not(:disabled) { border-color: var(--accent); background: rgba(124,92,255,0.12); }
.qopt:disabled { cursor: default; }
.qopt.right { background: rgba(24,211,200,0.16); border-color: var(--accent-2); color: #fff; }
.qopt.wrong { background: rgba(255,90,120,0.16); border-color: #ff5a78; color: #fff; }
.qwhy { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(124,92,255,0.1); border: 1px solid var(--stroke-2); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.quiz-score { font-size: 14px; color: var(--muted); font-family: "Space Grotesk"; }
.quiz-foot .big-btn { width: auto; flex: 0 0 auto; padding: 14px 24px; }

/* lesson rules (intro) */
.rules-card { padding: 18px 20px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--stroke); margin-bottom: 18px; }
.rules-card__lbl { font-size: 13px; font-weight: 700; color: var(--accent-2); margin-bottom: 10px; }
.rules { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.rules li { font-size: 14px; color: var(--muted); }
.rules b { color: var(--text); }

/* step layout: main + rail */
.step-layout { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }
.step-main { min-width: 0; }
.step-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.step-tools .ghost-btn, .step-tools .tool-btn { margin: 0; width: auto; }
.ws-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ws-hint.ok { color: var(--accent-2); }
.big-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* inline checklist on eval steps */
.inline-check { padding: 16px; border-radius: 13px; background: rgba(24,211,200,0.07); border: 1px solid rgba(24,211,200,0.3); margin-bottom: 16px; }
.inline-check__lbl { font-size: 14px; font-weight: 700; color: var(--accent-2); margin-bottom: 10px; }

/* step rail */
.step-rail { position: sticky; top: 84px; background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.step-rail__h { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.rail-item { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 9px 10px; border-radius: 10px; background: transparent; border: 1px solid transparent; cursor: pointer; transition: .15s; }
.rail-item:hover:not([disabled]) { background: var(--panel-2); }
.rail-item.cur { background: var(--panel-2); border-color: var(--stroke-2); }
.rail-item.locked { opacity: 0.4; cursor: not-allowed; }
.rail-item__dot { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--panel-2); display: grid; place-items: center; font-family: "Space Grotesk"; font-weight: 700; font-size: 12px; color: var(--muted); border: 1px solid var(--stroke); }
.rail-item.cur .rail-item__dot { background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #fff; border-color: transparent; }
.rail-item.done .rail-item__dot { background: rgba(24,211,200,0.18); color: var(--accent-2); border-color: transparent; }
.rail-item__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rail-item__t { font-size: 12.5px; line-height: 1.3; color: var(--text); }
.rail-item__a { font-size: 11px; color: var(--accent-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* site builder (real project) */
.cab-top__build { background: linear-gradient(120deg, var(--accent), var(--accent-3)); border: 0; color: #fff; border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); }
.cab-top__build:hover { transform: translateY(-1px); }
.builder-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(3,4,8,0.9); backdrop-filter: blur(8px); display: none; padding: 16px; }
.builder-overlay.open { display: block; }
.builder { max-width: 1200px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; background: var(--bg-soft); border: 1px solid var(--stroke-2); border-radius: 20px; padding: 18px; }
.builder__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.builder__bar strong { font-family: "Space Grotesk"; font-size: 18px; }
.builder__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.builder__actions .tool-btn, .builder__actions .ghost-btn { margin: 0; }
.builder__ai { display: flex; gap: 10px; }
.builder__ai input { flex: 1; padding: 13px 16px; border-radius: 12px; background: rgba(5,6,10,0.6); border: 1px solid var(--stroke-2); color: var(--text); font-size: 15px; }
.builder__ai input:focus { outline: none; border-color: var(--accent); }
.builder__ai .big-btn { width: auto; flex: 0 0 auto; padding: 13px 22px; }
.builder__split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 0; }
.builder__editor, .builder__preview { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.builder__lbl { font-size: 13px; color: var(--muted); font-weight: 600; }
.builder__lbl em { color: var(--accent-2); font-style: normal; font-weight: 400; }
#b-code { flex: 1; resize: none; padding: 14px; border-radius: 12px; background: #0a0c14; border: 1px solid var(--stroke-2); color: #cdd3ee; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; line-height: 1.5; }
#b-code:focus { outline: none; border-color: var(--accent); }
#b-frame { flex: 1; width: 100%; border: 1px solid var(--stroke-2); border-radius: 12px; background: #fff; }
@media (max-width: 860px) {
  .builder__split { grid-template-columns: 1fr; }
  .builder { height: auto; min-height: 100%; }
  .builder__editor, .builder__preview { min-height: 320px; }
}

/* prompt builder modal */
.pb-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(3,4,8,0.7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 18px; }
.pb-overlay.open { display: flex; }
.pb { width: min(460px, 100%); max-height: 90vh; overflow-y: auto; background: var(--bg-soft); border: 1px solid var(--stroke-2); border-radius: 20px; padding: 22px; }
.pb__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pb__head strong { font-family: "Space Grotesk"; font-size: 17px; }
.pb__close { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; }
.pb__hint { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.pb label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 11px; }
.pb input { padding: 11px 13px; border-radius: 10px; background: rgba(5,6,10,0.6); border: 1px solid var(--stroke-2); color: var(--text); font-size: 14px; }
.pb input:focus { outline: none; border-color: var(--accent); }
.pb__out { white-space: pre-wrap; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.5; color: #cdd3ee; background: #0a0c14; border: 1px solid var(--stroke); border-radius: 12px; padding: 14px; margin: 6px 0 14px; }

@media (max-width: 920px) {
  .two { grid-template-columns: 1fr; }
  .step-card__text { font-size: 18px; }
  .step-layout { grid-template-columns: 1fr; }
  .step-rail { position: static; order: 2; }
  .cab-layout { grid-template-columns: 1fr; }
  .cab-main { order: -1; }
  .cab-side { order: 0; }
  .cab-side { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .nav-group { width: 100%; }
  .nav-item { flex: 1 1 calc(50% - 6px); }
  .lesson-grid { grid-template-columns: 1fr; }
  .cab-top__progress .bar { width: 100px; }
}
@media (prefers-reduced-motion: reduce) { .assistant-fab__pulse { animation: none; } }