/* ==========================================================================
   C++ Mastery · Learning app shell
   ========================================================================== */

body.app { background: var(--paper-2); }

/* ---------------------------------------------------------------- app shell */
.app-shell {
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr);
  min-height: 100svh;
  padding-top: var(--nav-h);
}
@media (max-width: 1080px) { .app-shell { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- sidebar */
.side {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-right: 1px solid var(--line);
  padding: 1.1rem 0.85rem 3rem;
}
@media (max-width: 1080px) {
  .side {
    position: fixed; z-index: 80; left: 0; top: var(--nav-h);
    width: min(90vw, 340px); transform: translateX(-102%);
    transition: transform .45s var(--ease-out); box-shadow: var(--sh-2);
  }
  body.side-open .side { transform: none; }
  body.side-open::after { content: ""; position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(0,0,0,.35); z-index: 70; }
}
.side-search {
  width: 100%; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink);
  border-radius: 10px; padding: 0.55rem 0.75rem; font-size: var(--f-sm); margin-bottom: 0.9rem;
  outline: none; transition: border-color .25s, background .25s;
}
.side-search:focus { border-color: var(--blue); background: var(--paper); }
.side-group-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); padding: 1rem 0.5rem 0.45rem; }
.ch-btn {
  width: 100%; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 0.6rem; align-items: center;
  border: 0; background: none; text-align: left; cursor: pointer;
  padding: 0.55rem 0.6rem; border-radius: 12px; color: var(--ink);
  transition: background .22s, transform .22s var(--ease-out);
}
.ch-btn:hover { background: var(--paper-2); }
.ch-btn.active { background: rgba(0,113,227,.09); }
.ch-btn .num { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); text-align: right; }
.ch-btn .t { font-size: 0.9rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.ch-btn .t em { display: block; font-style: normal; font-size: 0.72rem; color: var(--ink-3); font-weight: 400; margin-top: 0.1rem; }
.ch-btn.active .num { color: var(--blue); }
.ring { --p: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--paper-3) 0); }
html[data-theme="dark"] .ring { background: conic-gradient(var(--blue) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.ring::after { content: ""; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); }
.ring.done { background: var(--green); }
.ring.done::after { background: var(--paper); position: relative; z-index: 1; }
.ring.done::before { content: "✓"; position: absolute; font-size: 0.62rem; color: #fff; z-index: 2; }
.les-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.34rem 0.6rem 0.34rem 2.1rem; font-size: var(--f-xs); color: var(--ink-2); cursor: pointer; border-radius: 9px; }
.les-row:hover { background: var(--paper-2); color: var(--ink); }
.les-row.cur { color: var(--blue); font-weight: 500; }
.les-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--paper-3); flex: none; }
.les-row.ok .dot { background: var(--green); }
.les-row.ex .dot { background: var(--amber); }
.les-row.ok { color: var(--ink); }

/* ----------------------------------------------------------------- main col */
.main { min-width: 0; padding: clamp(1.4rem, 3.4vw, 3rem) clamp(1.1rem, 3.6vw, 3.4rem) 6rem; }
.main-inner { max-width: 860px; margin: 0 auto; }
@media (min-width: 1500px) { .main-inner { max-width: 940px; } }

.topbar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.hamburger { display: none; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 0.42rem 0.62rem; cursor: pointer; }
@media (max-width: 1080px) { .hamburger { display: inline-flex; } }
.crumb { font-size: var(--f-xs); color: var(--ink-3); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.crumb b { color: var(--ink); font-weight: 500; }
.topbar .spacer { flex: 1; }

.crumb-check { display: flex; align-items: center; gap: 0.4rem; }
.grad-bar { height: 3px; position: fixed; top: var(--nav-h); left: 0; width: 0; z-index: 95; background: var(--grad-signature); transition: width .18s linear; }

/* --------------------------------------------------------- lesson typography */
.lesson-head { margin-bottom: 2rem; }
.lesson-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -0.032em; }
.lesson-head .meta { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.9rem; flex-wrap: wrap; }
.lesson-head .lede { font-size: var(--f-lead); color: var(--ink-2); margin-top: 0.9rem; line-height: 1.5; }

.prose { font-size: 1.0625rem; line-height: 1.75; letter-spacing: -0.004em; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: 1.5rem; letter-spacing: -0.025em; margin-top: 2.6rem; scroll-margin-top: 90px; }
.prose h3 { font-size: 1.16rem; letter-spacing: -0.018em; margin-top: 2rem; }
.prose h2 + p, .prose h2 + ul, .prose h3 + p { margin-top: 0.7rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.35rem; }
.prose li { margin-top: 0.45rem; }
.prose li::marker { color: var(--ink-3); }
.prose code {
  font-family: var(--font-mono); font-size: 0.875em; padding: 0.14em 0.4em;
  border-radius: 6px; background: rgba(0,113,227,.09); color: #0a5bb8;
  border: 1px solid rgba(0,113,227,.12);
}
html[data-theme="dark"] .prose code { background: rgba(41,151,255,.14); color: #8ec5ff; border-color: rgba(41,151,255,.2); }
.prose a { color: var(--blue); border-bottom: 1px solid rgba(0,113,227,.35); text-decoration: none; }
.prose a:hover { border-bottom-color: var(--blue); }
.prose strong { font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.prose em.hl { font-style: normal; background: linear-gradient(transparent 62%, rgba(255,159,10,.35) 0); }

/* callouts */
.callout { border-radius: var(--r-md); padding: 1rem 1.15rem; border: 1px solid var(--line); background: var(--paper); display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 0.8rem; }
.callout .ic { font-size: 0.95rem; line-height: 1.7; }
.callout b.t { display: block; font-size: 0.92rem; margin-bottom: 0.25rem; }
.callout p, .callout ul { font-size: 0.95rem; line-height: 1.65; }
.callout-tip { background: rgba(48,209,88,.07); border-color: rgba(48,209,88,.28); }
.callout-warn { background: rgba(255,159,10,.08); border-color: rgba(255,159,10,.3); }
.callout-danger { background: rgba(255,69,58,.07); border-color: rgba(255,69,58,.28); }
.callout-info { background: rgba(0,113,227,.06); border-color: rgba(0,113,227,.24); }
.callout-quote { background: var(--paper); border-left: 3px solid var(--blue); }

/* tables in prose */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.prose th, .prose td { text-align: left; padding: 0.62rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); background: var(--paper-2); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }
.prose td code { font-size: 0.82em; }

/* ------------------------------------------------------------------ code block */
.codeblock { border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #0d0d0f; }
.codeblock-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08); }
.codeblock-head .fname { font-family: var(--font-mono); font-size: 0.72rem; color: #98989d; }
.codeblock-head .sp { flex: 1; }
.codeblock-head button {
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #d1d1d6;
  font-size: 0.7rem; padding: 0.26rem 0.6rem; border-radius: 7px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.codeblock-head button:hover { background: rgba(41,151,255,.22); color: #fff; border-color: rgba(41,151,255,.5); }
.codeblock pre { margin: 0; padding: 0.95rem 1.1rem; overflow-x: auto; }
.codeblock code { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.72; color: #e5e5ea; background: none; border: 0; padding: 0; }
.codeblock .row { white-space: pre; }
.codeblock-out, .codeblock-note {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.7rem 1.1rem; background: rgba(48, 209, 88, 0.06);
}
.codeblock-note { background: rgba(255, 255, 255, 0.04); color: #a1a1a6; font-size: 0.8rem; line-height: 1.6; }
.codeblock-out b { display: block; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6e6e73; margin-bottom: 0.4rem; }
.codeblock-out pre { margin: 0; overflow-x: auto; }
.codeblock-out code { font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.65; color: #8ce99a; white-space: pre-wrap; word-break: break-word; }
.codeblock-out .bad { color: #ff9b93; }
.codeblock-out .dim { color: #86868b; }
/* minimal C++ syntax highlighting */
.tok-kw { color: #ff7ab2; } .tok-ty { color: #6bd6ff; } .tok-st { color: #ffd479; }
.tok-nu { color: #b8a1ff; } .tok-cm { color: #6e7781; font-style: italic; } .tok-pp { color: #ff9f0a; }
.tok-fn { color: #8ce99a; } .tok-op { color: #b6bcc8; }

/* --------------------------------------------------------------- exercises */
.ex-block { margin-top: 3rem; }
.ex-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; box-shadow: var(--sh-1); }
.ex-card + .ex-card { margin-top: 1.3rem; }
.ex-head { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.ex-head h3 { font-size: 1.1rem; letter-spacing: -0.02em; }
.ex-head .nums { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); padding-top: 0.28rem; }
.ex-body { padding: 1.1rem 1.25rem 1.25rem; }
.ex-prompt { font-size: 0.98rem; line-height: 1.7; }
.ex-prompt code { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-2); padding: 0.12em 0.36em; border-radius: 5px; }
.ex-io { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.7rem; margin-top: 1rem; }
@media (max-width: 620px) { .ex-io { grid-template-columns: minmax(0,1fr); } }
.io-box { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-2); padding: 0.6rem 0.75rem; }
.io-box b { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); display: block; margin-bottom: 0.35rem; }
.io-box pre { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink); white-space: pre-wrap; word-break: break-word; }

/* editor */
.editor-wrap { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-strong); background: #0d0d0f; }
.editor-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; background: #17171a; border-bottom: 1px solid rgba(255,255,255,.08); }
.editor-bar .tab { font-family: var(--font-mono); font-size: 0.72rem; color: #d1d1d6; background: #0d0d0f; padding: 0.22rem 0.6rem; border-radius: 6px; }
.editor-bar .sp { flex: 1; }
.editor-bar .st { font-size: 0.68rem; color: #6e6e73; font-family: var(--font-mono); }
.CodeMirror { height: auto; min-height: 190px; font-family: var(--font-mono) !important; font-size: 0.84rem; line-height: 1.68; background: #0d0d0f !important; color: #e5e5ea; }
.CodeMirror-gutters { background: #0d0d0f !important; border-right: 1px solid rgba(255,255,255,.06) !important; }
.CodeMirror-linenumber { color: #48484a !important; }
.CodeMirror-cursor { border-left: 2px solid var(--blue-bright) !important; }
.CodeMirror-selected { background: rgba(41,151,255,.25) !important; }
.CodeMirror-activeline-background { background: rgba(255,255,255,.035) !important; }
.CodeMirror-matchingbracket { color: var(--green) !important; border-bottom: 1px solid var(--green); }
.cm-s-cpplab .cm-keyword { color: #ff7ab2; } .cm-s-cpplab .cm-type { color: #6bd6ff; }
.cm-s-cpplab .cm-string { color: #ffd479; } .cm-s-cpplab .cm-number { color: #b8a1ff; }
.cm-s-cpplab .cm-comment { color: #6e7781; font-style: italic; } .cm-s-cpplab .cm-preprocessor { color: #ff9f0a; }
.cm-s-cpplab .cm-def { color: #8ce99a; } .cm-s-cpplab .cm-variable { color: #e5e5ea; }
.cm-s-cpplab .cm-variable-2 { color: #9cdcfe; } .cm-s-cpplab .cm-operator { color: #b6bcc8; }
.cm-s-cpplab .cm-bracket { color: #b6bcc8; } .cm-s-cpplab .cm-builtin { color: #6bd6ff; }
textarea.fallback-editor {
  width: 100%; min-height: 200px; background: #0d0d0f; color: #e5e5ea; border: 0; padding: 0.9rem 1rem;
  font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.7; outline: none; resize: vertical;
}
.ex-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.85rem; align-items: center; }
.ex-actions .sp { flex: 1; }
.stdin-row { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.8rem; }
.stdin-row label { font-size: var(--f-xs); color: var(--ink-3); white-space: nowrap; }
.stdin-row input { flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 0.45rem 0.65rem;
  font-family: var(--font-mono); font-size: 0.78rem; background: var(--paper-2); color: var(--ink); outline: none; }
.stdin-row input:focus { border-color: var(--blue); background: var(--paper); }

/* console */
.console { margin-top: 0.9rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper-2); overflow: hidden; }
.console-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.7rem; border-bottom: 1px solid var(--line);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.console-body { padding: 0.75rem 0.9rem; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.65; white-space: pre-wrap;
  word-break: break-word; max-height: 320px; overflow: auto; color: var(--ink); margin: 0; }
.console-body .err { color: #c0291f; }
html[data-theme="dark"] .console-body .err { color: #ff9b93; }

/* test results */
.tests { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.test { display: grid; grid-template-columns: 22px auto minmax(0,1fr); gap: 0.6rem; align-items: start;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.5rem 0.7rem; background: var(--paper); font-size: var(--f-xs); }
.test .mark { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; color: #fff; }
.test .mark.pass { background: var(--green); } .test .mark.fail { background: var(--red); } .test .mark.wait { background: var(--paper-3); color: var(--ink-3); }
.test .name { font-weight: 600; }
.test pre { margin: 0.2rem 0 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.test .exp { color: var(--ink-3); }

/* solved banner */
.solved { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: var(--r-sm);
  background: rgba(48,209,88,.1); border: 1px solid rgba(48,209,88,.32); font-size: var(--f-sm); color: #1d7f37; font-weight: 500; }
html[data-theme="dark"] .solved { color: #6ee787; }

/* ---------------------------------------------------------------- dashboard */
.dash-hero { border-radius: var(--r-xl); padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--void); color: var(--on-void);
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; overflow: hidden; position: relative; }
@media (max-width: 760px) { .dash-hero { grid-template-columns: minmax(0,1fr); text-align: center; justify-items: center; } }
.ring-lg { --p: 0; --sz: 172px; width: var(--sz); height: var(--sz); border-radius: 50%; position: relative; flex: none;
  background: conic-gradient(from -90deg, #2997ff calc(var(--p) * 1%), rgba(255,255,255,.1) 0);
  transition: --p 1.2s var(--ease-out); display: grid; place-items: center; }
.ring-lg::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--void); }
.ring-lg .val { position: relative; text-align: center; }
.ring-lg .val b { font-size: 2.4rem; font-weight: 600; letter-spacing: -0.04em; display: block; line-height: 1; }
.ring-lg .val span { font-size: 0.7rem; color: var(--on-void-2); letter-spacing: 0.12em; text-transform: uppercase; }
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.8rem; }
@media (max-width: 760px) { .kpi-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.kpi { border: 1px solid var(--void-line); border-radius: var(--r-md); padding: 0.85rem 0.95rem; background: rgba(255,255,255,.04); }
.kpi b { display: block; font-size: 1.55rem; font-weight: 600; letter-spacing: -0.03em; }
.kpi span { font-size: 0.72rem; color: var(--on-void-2); }
.kpi.blue b { color: var(--blue-bright); } .kpi.green b { color: var(--green); } .kpi.violet b { color: #d8a6ff; } .kpi.amber b { color: #ffcf70; }

.dash-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 1.25rem 1.35rem; }
.dash-card h3 { font-size: 1.05rem; letter-spacing: -0.02em; }
.dash-card + .dash-card { margin-top: 1rem; }
.prog-row { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.4fr) auto; gap: 0.9rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.prog-row:first-of-type { border-top: 0; }
.prog-row .nm { font-size: 0.88rem; }
.prog-row .nm em { font-style: normal; display: block; font-size: 0.7rem; color: var(--ink-3); }
.prog-row .pc { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-3); }

/* heatmap */
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; padding-bottom: 0.3rem; }
.heat i { width: 11px; height: 11px; border-radius: 3px; background: var(--paper-3); }
html[data-theme="dark"] .heat i { background: rgba(255,255,255,.08); }
.heat i[data-l="1"] { background: rgba(41,151,255,.32); }
.heat i[data-l="2"] { background: rgba(41,151,255,.55); }
.heat i[data-l="3"] { background: rgba(41,151,255,.8); }
.heat i[data-l="4"] { background: #2997ff; }

/* achievements */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 0.75rem; }
.ach { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.9rem; background: var(--paper); text-align: center;
  opacity: 0.5; filter: grayscale(1); transition: transform .45s var(--ease-out), opacity .4s, filter .4s; }
.ach:hover { transform: translateY(-3px); }
.ach.on { opacity: 1; filter: none; border-color: rgba(255,159,10,.45); box-shadow: 0 10px 30px -14px rgba(255,159,10,.7); }
.ach .em { font-size: 1.6rem; }
.ach b { display: block; font-size: 0.84rem; margin-top: 0.4rem; }
.ach span { font-size: 0.68rem; color: var(--ink-3); display: block; margin-top: 0.2rem; line-height: 1.4; }

/* toast */
.toast-wrap { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 200; display: grid; gap: 0.5rem; justify-items: end; }
.toast {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: var(--r-pill);
  background: rgba(20,20,22,.94); color: #fff; font-size: var(--f-sm); box-shadow: var(--sh-2);
  border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px);
  animation: toastIn .5s var(--ease-spring);
}
.toast.xp b { color: #ffcf70; }
.toast.ok { border-color: rgba(48,209,88,.5); }
.toast.out { animation: toastOut .3s var(--ease-io) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* lesson footer nav */
.lesnav { display: flex; gap: 0.7rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.lesnav a { flex: 1; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0.85rem 1rem; background: var(--paper); transition: transform .4s var(--ease-out), border-color .3s; }
.lesnav a:hover { transform: translateY(-3px); border-color: rgba(41,151,255,.45); text-decoration: none; }
.lesnav a span { font-size: 0.68rem; color: var(--ink-3); display: block; }
.lesnav a b { font-size: 0.92rem; font-weight: 500; }
.lesnav a.next { text-align: right; }
.lesnav a.ghost { opacity: .45; pointer-events: none; }

/* lab page */
.lab-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .lab-grid { grid-template-columns: minmax(0,1fr); } }
.lab-out { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); overflow: hidden; display: flex; flex-direction: column; }
.lab-out .console-body { max-height: 420px; background: #0d0d0f; color: #e5e5ea; flex: 1; min-height: 220px; }
.lab-out .console-body .err { color: #ff9b93; }
.samples { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.samples button { border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-pill);
  font-size: 0.72rem; padding: 0.28rem 0.7rem; cursor: pointer; transition: all .25s; }
.samples button:hover { border-color: var(--blue); color: var(--blue); }
.samples button.on { background: var(--blue); color: #fff; border-color: var(--blue); }

/* segments / tabs */
.seg { display: inline-flex; background: var(--paper-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; border: 1px solid var(--line); }
.seg button { border: 0; background: none; border-radius: var(--r-pill); padding: 0.36rem 0.9rem; font-size: var(--f-xs);
  cursor: pointer; color: var(--ink-2); transition: all .3s var(--ease-out); }
.seg button.on { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); font-weight: 500; }

/* modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 300; display: grid; place-items: center; padding: 1.2rem;
  backdrop-filter: blur(8px); animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--paper); border-radius: var(--r-lg); max-width: 720px; width: 100%; max-height: 82svh; overflow: auto;
  padding: 1.4rem 1.5rem; box-shadow: var(--sh-2); animation: pop .45s var(--ease-spring); }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.modal h3 { font-size: 1.2rem; }
.modal .close { float: right; border: 0; background: var(--paper-2); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }

/* kbd */
kbd { font-family: var(--font-mono); font-size: 0.72rem; border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: 6px; padding: 0.1em 0.4em; background: var(--paper-2); }

.search-hit { display: block; padding: 0.5rem 0.6rem; border-radius: 10px; cursor: pointer; font-size: var(--f-sm); }
.search-hit:hover { background: var(--paper-2); }
.search-hit em { font-style: normal; color: var(--ink-3); font-size: 0.7rem; display: block; }
.empty { text-align: center; color: var(--ink-3); padding: 2rem 1rem; font-size: var(--f-sm); }
.spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%;
  animation: sp .7s linear infinite; display: inline-block; }
@keyframes sp { to { transform: rotate(360deg); } }