/* Brainfeed app. Same system as the marketing site: Geist, cobalt, light cool neutrals, flat surfaces. */
:root {
  color-scheme: light;
  --bg: oklch(0.985 0.004 258);
  --surface: #fff;
  --sunk: oklch(0.962 0.008 258);
  --ink: oklch(0.19 0.035 262);
  --muted: oklch(0.43 0.025 262);
  --faint: oklch(0.5 0.02 262);
  --line: oklch(0.915 0.01 260);
  --line-strong: oklch(0.84 0.02 260);
  --blue: oklch(0.52 0.235 262);
  --blue-deep: oklch(0.42 0.2 263);
  --blue-ink: oklch(0.34 0.15 264);
  --blue-soft: oklch(0.955 0.035 262);
  --green: oklch(0.45 0.12 160);
  --green-soft: oklch(0.955 0.04 160);
  --red: oklch(0.5 0.19 28);
  --red-soft: oklch(0.96 0.03 25);
  --amber: oklch(0.45 0.1 70);
  --amber-soft: oklch(0.96 0.045 85);
  --dark: oklch(0.17 0.03 262);
  --font: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --display: "Funnel Display", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --lift: 0 1px 2px oklch(0.2 0.05 262 / .06), 0 24px 48px -24px oklch(0.2 0.08 262 / .22);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }
.boot { padding: 48px; color: var(--muted); }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }
:is(.btn, a, input, textarea, select, summary, button, [tabindex]):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* icons as masks, same set as the marketing site */
.ico { display: inline-block; width: 1.15em; height: 1.15em; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -0.2em; }
.i-arrow { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/arrow-right.svg); }
.i-ext { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/arrow-up-right.svg); }
.i-check { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/check.svg); }
.i-x { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/x.svg); }
.i-copy { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/copy.svg); }
.i-file { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/file-text.svg); }
.i-inbox { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/layers.svg); }
.i-notes { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/book-open.svg); }
.i-rss { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/rss.svg); }
.i-plug { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/plug.svg); }
.i-gear { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/settings.svg); }
.i-skip { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/skip-forward.svg); }
.i-edit { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/pencil.svg); }
.i-undo { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/undo-2.svg); }
.i-play { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/play.svg); }
.i-down { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/download.svg); }
.i-lock { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/lock.svg); }
.i-plus { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/plus.svg); }
.i-link { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/link-2.svg); }
.i-warn { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/triangle-alert.svg); }
.i-dot { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/circle-dot.svg); }
.i-alert { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/git-compare.svg); }
.i-spark { --i: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/sparkles.svg); }
.fav { width: 20px; height: 20px; border-radius: 5px; flex: none; background: var(--sunk); object-fit: cover; }
.fav-lg { width: 28px; height: 28px; border-radius: 7px; }
.fav-fb { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--blue-soft); color: var(--blue-ink); font-size: 11px; font-weight: 700; flex: none; }
.fav-lg.fav-fb { width: 28px; height: 28px; border-radius: 7px; font-size: 13px; }

/* buttons: same as the marketing site */
.btn { font: inherit; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 12px; padding: 10px 18px; cursor: pointer; transition: background .15s, border-color .15s, transform .2s var(--ease); text-decoration: none; white-space: nowrap; line-height: 1.3; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 1px 0 oklch(1 0 0 / .25) inset, 0 8px 20px -10px oklch(0.45 0.22 262 / .7); }
.btn-blue:hover:not(:disabled) { background: var(--blue-deep); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover:not(:disabled) { background: oklch(0.28 0.04 262); }
.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { border-color: var(--ink); }
.btn-danger { color: var(--red); }
.btn-sm { font-size: 14px; padding: 7px 14px; border-radius: 10px; }
.btn-lg { font-size: 16px; padding: 13px 26px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn kbd, .kbd { font-family: var(--mono); font-size: 11px; font-weight: 500; border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; opacity: .65; line-height: 1.5; }
.link { font: inherit; color: var(--blue-deep); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* fields */
.field { display: grid; gap: 6px; }
.field > label, .lbl { font-size: 14px; font-weight: 500; }
.input { font: inherit; font-size: 16px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
.input::placeholder { color: var(--faint); }
.input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
textarea.input { resize: vertical; line-height: 1.45; }
.mono { font-family: var(--mono); font-size: 14px; }
.hint { color: var(--muted); font-size: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* shell */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 20px 14px 16px; border-right: 1px solid var(--line); background: var(--bg); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; text-decoration: none; padding: 0 8px; }
.nav { display: grid; gap: 2px; margin-top: 28px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; font-weight: 500; color: var(--muted); }
.nav a:hover { background: var(--sunk); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--blue-soft); color: var(--blue-ink); }
.nav .badge { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--blue); color: #fff; border-radius: 999px; padding: 0 8px; min-width: 22px; text-align: center; line-height: 20px; }
.side-foot { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.side-foot b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.agent-state { display: flex; align-items: center; gap: 8px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.pulse.on { background: var(--green); }
.pulse.run { background: var(--blue); animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.main { padding: 36px clamp(20px, 4vw, 56px) 96px; min-width: 0; }
.page { max-width: 1120px; margin: 0 auto; }
.page-narrow { max-width: 760px; margin: 0 auto; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.head h1 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
.head .lede { color: var(--muted); margin-top: 8px; max-width: 38em; text-wrap: pretty; font-size: 16px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--sunk); border-radius: 12px; margin-bottom: 24px; }
.tabs a { padding: 6px 16px; border-radius: 9px; text-decoration: none; font-weight: 500; color: var(--muted); font-size: 14px; }
.tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
h2.sec { font-size: 21px; letter-spacing: -0.025em; font-weight: 600; margin: 0 0 14px; }

/* relation chip: text and color together */
.rel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 12px 4px 10px; border-radius: 999px; width: fit-content; }
.rel-builds { background: var(--blue-soft); color: var(--blue-ink); }
.rel-new { background: var(--green-soft); color: var(--green); }
.rel-conflict { background: var(--red-soft); color: var(--red); }

/* queue */
.agent-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.queue-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.stack { max-width: 640px; width: 100%; outline: none; }
.pile { position: relative; margin-bottom: 20px; }
.pile::before, .pile::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.pile.l2::before { transform: translateY(14px) scale(.94); opacity: .55; }
.pile.l2::after { transform: translateY(7px) scale(.97); opacity: .85; }
.pile.l1::after { transform: translateY(7px) scale(.97); opacity: .85; }
.pile.l1::before, .pile.l0::before, .pile.l0::after { display: none; }
.card { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 14px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; box-shadow: var(--lift); }
.card.dragging { cursor: grabbing; transition: none; }
.card.snap { transition: transform .3s var(--ease); }
.card.editing { cursor: default; user-select: text; }
.c-src { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.c-src b { color: var(--ink); font-weight: 600; }
.c-src .date { margin-left: auto; font-family: var(--mono); font-size: 12px; }
.c-title { font-family: var(--display); font-size: clamp(22px, 2.4vw, 27px); line-height: 1.18; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; }
.c-idea { font-size: 16px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.c-why { color: var(--muted); font-size: 14.5px; line-height: 1.5; padding-top: 12px; border-top: 1px solid var(--line); }
.c-why b { color: var(--ink); font-weight: 600; }
.c-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.c-link { font-size: 14px; color: var(--blue-deep); text-decoration: none; font-weight: 500; display: inline-flex; gap: 4px; align-items: center; max-width: 100%; }
.c-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.stamp { position: absolute; top: 18px; font-weight: 700; font-size: 14px; padding: 3px 12px; border-radius: 8px; border: 2px solid; opacity: 0; background: var(--surface); text-transform: uppercase; letter-spacing: .06em; pointer-events: none; }
.stamp-yes { right: 20px; color: var(--green); transform: rotate(6deg); }
.stamp-no { left: 20px; color: var(--red); transform: rotate(-6deg); }
.card[data-dir="yes"] .stamp-yes, .card[data-dir="no"] .stamp-no { opacity: 1; }
.edit-form { display: grid; gap: 12px; }
.edit-form .count { font-size: 12px; color: var(--muted); text-align: right; font-family: var(--mono); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions .btn-blue { margin-left: auto; }
.actions .btn { min-width: 0; }
.undo-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 16px; padding: 10px 14px; border-radius: 14px; background: var(--sunk); border: 1px solid var(--line); font-size: 14px; }
.undo-bar .what { font-weight: 500; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.undo-bar .link { margin-left: auto; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; font-weight: 600; }
.keys { margin-top: 16px; color: var(--muted); font-size: 13px; display: flex; gap: 6px 16px; flex-wrap: wrap; }
.keys .kbd { margin-right: 4px; }
.brain { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 36px); display: grid; gap: 22px; position: sticky; top: 32px; }
.brain h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.brain .path { font-family: var(--mono); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.brain .note-title { font-weight: 600; font-size: 16px; margin-top: 6px; }
.heads { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.heads li { padding: 4px 0 4px 12px; border-left: 2px solid var(--line-strong); }
.brain .reason { font-size: 14px; color: var(--muted); margin-top: 12px; }
.kv { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.kv b { color: var(--ink); font-weight: 500; }
.topic-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.topic-list span { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); }

/* states */
.state { padding: 56px 0 24px; max-width: 520px; display: grid; gap: 12px; justify-items: start; }
.state h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; }
.state p { color: var(--muted); text-wrap: pretty; font-size: 16px; }
.state .actions { margin-top: 8px; }
.err { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-weight: 500; }
.err .btn { margin-left: auto; }
.skeleton { border-radius: 12px; background: var(--sunk); height: 14px; }
.skel-card { height: 320px; border-radius: 20px; border: 1px solid var(--line); background: var(--sunk); max-width: 640px; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton, .skel-card { animation: breathe 1.4s ease-in-out infinite; }
  @keyframes breathe { 50% { opacity: .55; } }
}
.progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; width: 100%; max-width: 420px; }
.progress i { display: block; height: 100%; width: 35%; background: var(--blue); border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .progress i { animation: slide 1.4s ease-in-out infinite; }
  @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
}
@media (prefers-reduced-motion: reduce) { .progress i { width: 60%; } }
.running { display: grid; gap: 14px; padding: 28px 0; max-width: 520px; }
.running h2 { font-size: 26px; letter-spacing: -0.03em; }
.running .meta { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }

/* overview */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line-strong); }
.stat { padding: 20px 24px 20px 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat b { display: block; font-family: var(--display); font-size: clamp(32px, 3.6vw, 44px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.stat.good b { color: var(--green); }
.ov-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); margin-top: 44px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--font); font-size: 12px; fill: var(--muted); }
.chart .bar { fill: var(--blue); }
.chart .bar.below { fill: oklch(0.72 0.12 262); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .target { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .tl { fill: var(--ink); font-weight: 600; }
.legend { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 12px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows .t { font-weight: 500; }
.rows .s { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.rows .bad { color: var(--red); grid-column: 1 / -1; }

/* notes */
.search { position: relative; max-width: 420px; flex: 1 1 260px; }
.notes-list { list-style: none; margin: 8px 0 0; padding: 0; }
.note { border-top: 1px solid var(--line); padding: 20px 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 16px; }
.note:last-child { border-bottom: 1px solid var(--line); }
.note .n-main { min-width: 0; display: grid; gap: 8px; }
.note h3 { font-size: 19px; letter-spacing: -0.02em; font-weight: 600; }
.n-meta { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13.5px; }
.note p { color: var(--ink); font-size: 15px; text-wrap: pretty; }
.note details summary { cursor: pointer; color: var(--blue-deep); font-size: 14px; font-weight: 500; width: fit-content; }
.md { margin: 10px 0 0; padding: 14px 16px; background: var(--sunk); border: 1px solid var(--line); border-radius: 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* sources */
.src { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px auto; gap: 4px 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.src:last-child { border-bottom: 1px solid var(--line); }
.src .s-main { min-width: 0; }
.src h3 { font-size: 17px; letter-spacing: -0.015em; font-weight: 600; font-family: var(--font); }
.src h3 span { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 6px; }
.src .blurb { color: var(--muted); font-size: 14px; margin-top: 2px; text-wrap: pretty; }
.src .tp { color: var(--faint); font-size: 13px; margin-top: 4px; }
.weight { font-size: 12px; color: var(--muted); display: grid; gap: 4px; }
.weight .track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.weight .track i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.switch { position: relative; display: inline-flex; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.switch span { width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); transition: background .15s; position: relative; display: block; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 1px 2px oklch(0.2 0.05 262 / .3); }
.switch input:checked + span { background: var(--blue); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + span { opacity: .45; }
.savebar { position: sticky; bottom: 16px; margin-top: 24px; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 16px; background: var(--ink); color: #fff; border-radius: 16px; box-shadow: var(--lift); z-index: 5; }
.savebar span { font-size: 14px; }
.savebar .btn { margin-left: auto; }
.savebar .btn-ghost { background: transparent; color: #fff; border-color: oklch(1 0 0 / .3); }
.count-pill { font-size: 13px; padding: 3px 12px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); font-weight: 500; }

/* connect */
.block { margin-top: 36px; }
.block > p { color: var(--muted); margin: -6px 0 14px; max-width: 40em; text-wrap: pretty; }
.code { background: oklch(0.13 0.025 262); border-radius: 16px; overflow: hidden; color: oklch(0.9 0.02 262); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid oklch(1 0 0 / .1); font-family: var(--mono); font-size: 12px; color: oklch(0.78 0.03 262); }
.code pre { margin: 0; padding: 18px 20px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.75; }
.code code { white-space: pre; font-family: inherit; }
.code .btn-ghost { background: oklch(1 0 0 / .08); border-color: oklch(1 0 0 / .25); color: #fff; }
.code .btn-ghost:hover:not(:disabled) { border-color: oklch(0.78 0.12 262); }
.fresh { padding: 18px 20px; border: 1px solid var(--blue); background: var(--blue-soft); border-radius: 16px; display: grid; gap: 10px; margin-top: 16px; }
.fresh b { font-weight: 600; }
.tok-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tok-val { font-family: var(--mono); font-size: 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 12px; overflow-wrap: anywhere; flex: 1 1 280px; min-width: 0; user-select: all; }
.tok-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 16px; }
.tok-form .field { flex: 1 1 220px; max-width: 320px; }
.tokens { list-style: none; margin: 18px 0 0; padding: 0; }
.tokens li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.tokens li:last-child { border-bottom: 1px solid var(--line); }
.tokens .t { font-weight: 500; }
.tokens .d { color: var(--muted); font-size: 14px; }
.tokens .btn { margin-left: auto; }

/* settings */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.set-row:last-of-type { border-bottom: 1px solid var(--line); }
.set-row h3 { font-family: var(--font); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.set-row p { color: var(--muted); font-size: 14px; margin-top: 2px; max-width: 34em; }

/* onboarding */
.steps { display: flex; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 28px; font-size: 14px; color: var(--muted); }
.steps li { list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.steps ol { display: contents; }
.steps .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; }
.steps .on { color: var(--ink); font-weight: 600; }
.steps .on .n { background: var(--blue); border-color: var(--blue); color: #fff; }
.steps .done .n { background: var(--green-soft); border-color: transparent; color: var(--green); }
.ob { max-width: 720px; }
.ob h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; }
.ob .lede { color: var(--muted); font-size: 17px; margin-top: 14px; max-width: 34em; text-wrap: pretty; }
.ob-form { margin-top: 32px; display: grid; gap: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row .input { flex: 1 1 260px; }
.token-box summary { cursor: pointer; color: var(--blue-deep); font-weight: 500; width: fit-content; }
.token-box .field { margin-top: 12px; }
.status { color: var(--muted); min-height: 1.5em; display: flex; align-items: center; gap: 10px; }
.cli-line { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: grid; gap: 8px; }
.cli-line code { font-family: var(--mono); font-size: 13px; background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; width: fit-content; max-width: 100%; overflow-x: auto; }
.topic { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 16px; align-items: center; padding: 6px 0; font-size: 14.5px; }
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.pick-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pick-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.pick-list li:last-child { border-bottom: 1px solid var(--line); }
.pick-list b { font-weight: 600; }
.pick-list .by { color: var(--muted); font-weight: 400; margin-left: 6px; }
.pick-list .why { grid-column: 2; color: var(--muted); font-size: 14px; }
.ob-sec { margin-top: 36px; }

/* auth */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.auth-side { background: var(--blue); color: #fff; padding: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; gap: 32px; justify-content: space-between; }
.auth-side .logo { color: #fff; padding: 0; }
.auth-side h1 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; max-width: 11em; }
.auth-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 17px; color: oklch(0.97 0.02 262); }
.auth-side li { display: flex; gap: 10px; align-items: baseline; }
.auth-main { display: grid; place-items: center; padding: 32px 24px; }
.auth-box { width: 100%; max-width: 420px; display: grid; gap: 20px; }
.auth-box h2 { font-size: 30px; letter-spacing: -0.03em; font-weight: 700; }
.auth-box .tabs { margin: 0; justify-self: start; }
.auth-box form { display: grid; gap: 14px; }
.auth-box .btn { width: 100%; }
.form-msg { min-height: 1.4em; font-size: 14px; color: var(--red); font-weight: 500; }
.keyshow { display: grid; gap: 14px; }
.keyshow .tok-val { font-size: 15px; padding: 14px; flex-basis: 100%; }
.note-box { padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: 14px; font-weight: 500; }

/* toasts */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: var(--lift); }
.toast.bad { background: var(--red); }

/* responsive */
@media (max-width: 1100px) {
  .queue-grid { grid-template-columns: 1fr; }
  .brain { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; position: static; max-width: 640px; }
  .ov-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px 0; border-right: 0; border-bottom: 1px solid var(--line); gap: 0 12px; }
  .side .logo { padding: 0; font-size: 18px; }
  .side-foot { display: none; }
  .nav { order: 3; width: calc(100% + 32px); margin: 8px -16px 0; display: flex; overflow-x: auto; gap: 2px; padding: 0 12px 8px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; padding: 7px 12px; }
  .main { padding-top: 24px; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-side { gap: 20px; padding: 24px 20px 28px; }
  .auth-side ul { display: none; }
  .auth-side h1 { font-size: 30px; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .card { padding: 20px 18px; }
  .actions .btn { flex: 1 1 calc(50% - 10px); }
  .actions .btn-blue { margin-left: 0; order: -1; flex-basis: 100%; }
  .src { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .src .weight { grid-column: 2 / -1; grid-row: 2; max-width: 220px; }
  .note { grid-template-columns: 28px minmax(0, 1fr); }
  .note > .btn { grid-column: 2; justify-self: start; }
  .topic { grid-template-columns: 1fr; gap: 6px; }
  .set-row { align-items: flex-start; }
  .keys { display: none; }
  .c-link span { max-width: 22ch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .card.snap { transition: none; }
}

/* add link, custom feeds, integrations */
.add-link { margin: 0 0 24px; max-width: 640px; }
.add-link .row .input { flex: 1 1 260px; }
.add-link .form-msg { color: var(--muted); font-weight: 400; margin-top: 6px; }
.custom { margin-bottom: 36px; }
.src-end { display: flex; align-items: center; gap: 12px; }
.int { padding: 22px 0; border-top: 1px solid var(--line); max-width: 760px; }
.int:last-child { border-bottom: 1px solid var(--line); }
.int h3 { font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.int > p { color: var(--muted); max-width: 40em; text-wrap: pretty; }
.int a { color: var(--blue-deep); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; flex-basis: 100%; }
.check input { width: 18px; height: 18px; accent-color: var(--blue); }
@media (max-width: 640px) { .src-end { grid-column: 2 / -1; } }

.int .tok-form { margin-top: 14px; }