@viberaven/cli 1.4.4 → 1.5.0

package/dist/stack/stack.css

@@ -0,0 +1,442 @@
+/* VibeRaven Studio: the Stack cockpit.
+   Charcoal surfaces, restrained gold, a stack-first workspace. */
+
+:root {
+  --bg: #101011;
+  --panel: #151515;
+  --panel-2: #1e1e1e;
+  --line: #262626;
+  --line-2: #363636;
+  --text: #ffffff;
+  --text-2: #d6d6d6;
+  --text-3: #a3a3a3;
+  --blue: #7cc4ff;
+  --acid: #dfbd6e;
+  --acid-2: #ebcd8a;
+  --on-acid: #120d00;
+  --green: #7cf29a;
+  --amber: #ffd166;
+  --red: #ff7a7a;
+  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
+  --side: 370px;
+  --top: 68px;
+  --r: 8px;
+  --r-lg: 14px;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
+button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
+button:disabled { cursor: default; opacity: 0.7; }
+a { color: inherit; }
+code, pre { font-family: var(--mono); font-size: 12.5px; }
+::selection { background: rgba(255,255,255,0.22); }
+:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-thumb:hover { background: #4a4a4a; background-clip: padding-box; }
+
+.app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 24px 32px; padding: 0 40px 48px; max-width: 1500px; margin: auto; min-height: 100vh; }
+.app.agent-open { grid-template-columns: minmax(0, 1fr) var(--side); }
+.top, .stage, .side { position: relative; }
+
+/* ---------- top bar ---------- */
+.top { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 4px; background: var(--bg); border-bottom: 1px solid var(--line); }
+.top .brand { display: flex; align-items: center; gap: 10px; }
+.top .brand img { width: 26px; height: 26px; border-radius: 6px; }
+.top .name { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
+.top .sep { width: 1px; height: 18px; background: var(--line-2); }
+.top .meta { color: var(--text-3); font-size: 12.5px; }
+.top .spacer { margin-left: auto; }
+
+.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; background: var(--panel-2); color: var(--text); }
+.pill.amber { color: var(--amber); }
+.pill.green { color: var(--green); }
+.pill.red { color: var(--red); }
+.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; background: rgba(255,255,255,0.1); color: #fff; white-space: nowrap; }
+.tag.acid { background: var(--green); color: #052e16; }
+
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background 0.1s, border-color 0.1s, transform 0.06s; }
+.btn:hover:not(:disabled) { background: var(--panel-2); border-color: #4a4a4a; }
+.btn:active:not(:disabled) { transform: translateY(1px); }
+.btn.primary, .btn.acid { background: var(--acid); color: var(--on-acid); border-color: var(--acid); }
+.btn.primary:hover:not(:disabled), .btn.acid:hover:not(:disabled) { background: var(--acid-2); border-color: var(--acid-2); }
+.btn.white { background: #fff; color: #0a0a0a; border-color: #fff; }
+.btn.white:hover:not(:disabled) { background: #e9e9e9; border-color: #e9e9e9; }
+.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); font-weight: 500; }
+.btn.ghost:hover:not(:disabled) { color: var(--text); background: var(--panel); border-color: transparent; }
+.btn.ghost.on { color: var(--text); background: var(--panel-2); }
+.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
+.btn.lg { height: 44px; padding: 0 20px; font-size: 14.5px; border-radius: 10px; }
+.btn .spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ---------- stage ---------- */
+.stage { position: relative; min-width: 0; padding: 20px 0 40px; min-height: calc(100vh - var(--top) - 80px); }
+.stage > * { position: relative; }
+h2 { font-weight: 600; font-size: 18px; letter-spacing: -0.025em; line-height: 1.3; }
+.sub { color: var(--text-3); margin-top: 5px; font-size: 13px; }
+
+/* App setup is the primary workflow. */
+.eyebrow { display: block; color: var(--text-3); font-size: 12px; margin-bottom: 10px; }
+.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
+.workspace-heading h1 { font-size: clamp(32px, 3.4vw, 48px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.2; }
+.workspace-heading p { margin-top: 10px; font-size: 14px; color: var(--text-3); }
+.workspace-heading .btn { border-radius: 8px; flex-shrink: 0; }
+.workspace-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--line); margin: 36px 0 30px; }
+.workspace-tabs button { display: flex; gap: 9px; align-items: center; padding: 0 0 16px; border-bottom: 2px solid transparent; color: var(--text-3); font-size: 13px; }
+.workspace-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--acid); }
+.workspace-tabs button span { color: var(--text-3); font-size: 11px; background: #1b1b1b; border-radius: 4px; min-width: 21px; padding: 1px 5px; }
+.workspace-panel { min-width: 0; }
+.browse-services { display: inline-flex; margin-top: 24px; padding: 8px 0; color: var(--text-2); font-size: 13px; gap: 12px; }
+.browse-services:hover { color: var(--acid); }
+.agent-toggle.on { border-color: #66552d; color: var(--acid); }
+.stack-setup { margin: 24px 0 32px; border: 1px solid #55482c; background: #151517; border-radius: 16px; overflow: hidden; }
+.setup-heading { display: flex; align-items: start; gap: 14px; justify-content: space-between; padding: 24px; }
+.setup-heading .eyebrow { color: var(--acid); margin-bottom: 7px; }
+.setup-heading h2 { font-size: 23px; }
+.setup-heading p, .setup-footer p { font-size: 12px; color: var(--text-3); margin-top: 7px; }
+.setup-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
+.setup-steps li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; }
+.setup-steps li.done { color: var(--text-2); }
+.setup-steps i { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 11px; font-style: normal; font-weight: 600; }
+.setup-steps li.done i { border-color: #2f5d3f; background: #14301f; color: var(--green); }
+.setup-services { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0 24px 24px; }
+.setup-service { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; text-align: left; background: #111113; min-width: 0; }
+.setup-service:hover:not(:disabled) { border-color: #777; }
+.setup-service.selected { border-color: #70603b; background: #242117; }
+.setup-service img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
+.setup-service-copy { min-width: 0; }
+.setup-service strong { display: block; font-size: 12px; font-weight: 600; }
+.setup-service small { display: block; font-size: 10px; color: var(--text-3); margin-top: 2px; }
+.setup-check { color: var(--text-3); margin-left: auto; font-size: 14px; }
+.selected .setup-check { color: var(--acid); }
+.setup-footer { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: #19191b; border-top: 1px solid var(--line); }
+.setup-footer strong { font-size: 12px; font-weight: 500; }
+.setup-footer .btn { margin-left: auto; flex-shrink: 0; }
+.setup-progress { list-style: none; display: grid; gap: 10px; padding: 20px 24px; color: var(--text-2); font-size: 12px; }
+.setup-progress li { display: flex; align-items: center; gap: 10px; }
+.progress-dot { width: 6px; height: 6px; background: var(--text-3); border-radius: 50%; }
+.configured .progress-dot, .review .progress-dot { background: var(--acid); }
+.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--acid); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
+.setup-error { margin: 0 24px 24px; padding: 12px; color: var(--red); border: 1px solid #653b3b; border-radius: 8px; font-size: 13px; }
+.setup-note, .services-empty { color: var(--text-3); padding: 20px 0; }
+.setup-note { padding: 0 24px 24px; }
+
+/* Large service cards, one quiet surface per provider. */
+.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
+.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 24px; }
+.slab { display: flex; flex-direction: column; position: relative; min-width: 0; padding: 24px; border: 1px solid #2d2d2d; border-radius: 12px; background: #151515; transition: border-color .15s; }
+.slab:hover { border-color: #484848; }
+.slab.scanning { border-color: #8d7131; }
+.face { display: flex; flex-direction: column; align-items: flex-start; min-height: 180px; }
+.face-top { align-self: stretch; display: flex; justify-content: flex-end; min-height: 24px; }
+.face-top .tag { background: none; padding: 0; color: var(--text-3); font-size: 11px; font-weight: 500; }
+.face-top .tag.acid { color: var(--green); }
+.face-logo { display: flex; width: 48px; height: 48px; margin: 14px 0 20px; align-items: center; justify-content: center; }
+.face-logo img { width: 100%; height: 100%; object-fit: contain; }
+.face-name { font-size: 21px; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; }
+.face-area { color: var(--text-3); font-size: 12px; margin-top: 5px; }
+.slab-status { display: grid; grid-template-columns: 6px 1fr; gap: 7px; color: var(--text-3); font-size: 12px; min-height: 64px; line-height: 1.6; margin: 20px 0; }
+.slab-status i { width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--line-2); }
+.slab-status i.g { background: var(--green); } .slab-status i.a { background: var(--amber); }
+.slab-status .fixlink { grid-column: 2; justify-self: start; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }
+.slab-status .fixlink:hover { color: var(--acid); }
+.slab-act { display: flex; margin-top: auto; }
+.slab-act .btn { width: 100%; font-size: 12px; background: #1b1b1b; border-color: #363636; color: var(--text-2); }
+.slab-act .btn:hover { background: #252525; }
+.available .slab-act { margin-top: 26px; }
+.tag.dim { color: var(--text-3); }
+.tag.red { background: #2d1919; color: var(--red); }
+.tag.amber { background: #2b2518; color: var(--amber); }
+
+/* findings: full-width rows, real evidence, one clear next action */
+.fixgrid { display: grid; gap: 14px; margin-top: 24px; }
+.fix { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 26px; padding: 24px 26px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 12px; background: #141416; }
+.fix.r { border-left-color: var(--red); }
+.fix.a { border-left-color: var(--amber); }
+.fix:hover { border-color: #3a3a3a; }
+.fix-main { min-width: 0; }
+.fix-top { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 14px; }
+.fix-owner { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 13px; font-weight: 600; }
+.fix-owner img { width: 16px; height: 16px; object-fit: contain; }
+.fix-owner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
+.fix-owner .dot.a { background: var(--amber); } .fix-owner .dot.r { background: var(--red); }
+.fix-meta { color: var(--text-3); font-size: 12.5px; }
+.fix-title { margin-top: 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; }
+.fix-detail { margin-top: 9px; max-width: 74ch; color: var(--text-2); font-size: 14px; line-height: 1.65; }
+.fix-evidence { display: grid; gap: 13px; margin-top: 18px; padding: 16px 18px; border-radius: 10px; background: #191919; }
+.fix-evidence > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 5px 18px; }
+.fix-evidence dt { color: var(--text-3); font-size: 12.5px; font-weight: 600; }
+.fix-evidence dd { color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
+.fix-files { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
+.fix-files-label { color: var(--text-3); font-size: 12.5px; }
+.fix-files code { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: #191919; color: var(--text-2); font-size: 12px; word-break: break-all; }
+.fix-act { display: flex; flex-direction: column; gap: 10px; }
+.fix-act .btn { width: 100%; height: 40px; font-size: 13px; }
+.fix-who { color: var(--text-3); font-size: 12px; line-height: 1.55; }
+
+.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
+.empty { margin-top: 24px; padding: 36px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--text-2); }
+
+/* ---------- agent panel ---------- */
+.side { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: sticky; top: calc(var(--top) + 16px); height: calc(100vh - var(--top) - 36px); border-radius: 12px; background: #121212; border: 1px solid var(--line); overflow: hidden; }
+.side-head { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px; border-bottom: 1px solid var(--line); }
+.side-head.tools { height: auto; flex: 0 0 auto; display: grid; padding: 14px; gap: 10px; }
+.model-field { display: grid; grid-template-columns: 45px minmax(0,1fr); align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); }
+.model-field .sel { width: 100%; }
+.model-note { font-size: 11px; line-height: 1.5; color: var(--text-3); }
+.agent-connection { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
+.agent-connection .pill { min-width: 0; white-space: normal; }
+.agent-connection .pill i { flex-shrink: 0; }
+.connection-action { flex-shrink: 0; color: var(--text-2); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
+.side-head:not(.tools) { flex-shrink: 0; height: auto; min-height: 56px; flex-wrap: wrap; padding-block: 10px; }
+.side-head.tools .sel { flex: 1 1 130px; min-width: 0; max-width: 100%; }
+.side-head.tools .spacer { display: none; }
+.side-head.tools .pill { font-size: 11px; padding: 2px 0; background: none; }
+.side-head .who { font-weight: 700; font-size: 14px; }
+.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--panel); }
+.seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; font-size: 12.5px; font-weight: 500; color: var(--text-2); border-right: 1px solid var(--line); }
+.seg button:last-child { border-right: 0; }
+.seg button.on { background: var(--acid); color: var(--on-acid); }
+.seg i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
+.seg i.g { background: var(--green); } .seg i.a { background: var(--amber); }
+.seg button.on i.g { background: #0f5132; }
+select.sel, input.sel { height: 32px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; }
+
+.thread { flex: 1; min-height: 0; overflow: auto; padding: 14px 14px 18px; }
+.welcome { padding: 18px 6px 6px; }
+.welcome h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }
+.welcome p { color: #e6e6e6; margin-top: 8px; font-size: 14px; }
+.suggest { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
+.suggest-chip { position: relative; overflow: hidden; padding: 13px 14px 13px 16px; border-radius: 12px; background: #181818; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); color: #fff; font-size: 14px; font-weight: 600; text-align: left; transition: transform 0.14s ease, box-shadow 0.14s ease; }
+.suggest-chip::before { content: none; }
+.suggest-chip:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(240,194,75,0.5); }
+.suggest-chip:hover:not(:disabled)::before { opacity: 1; }
+
+.msg { padding: 8px 0; }
+.msg .who { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acid); margin: 0 0 8px 4px; display: flex; gap: 8px; align-items: center; font-weight: 700; }
+.msg .who .t { color: #9a9a9a; text-transform: none; letter-spacing: 0; font-weight: 500; }
+.msg .body { color: #fff; line-height: 1.6; word-break: break-word; font-size: 14px; padding: 14px 16px; border-radius: 14px; background: #181818; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
+.msg.me .who { display: none; }
+.msg.me .body { display: inline-block; background: var(--acid); color: var(--on-acid); border-radius: 14px 14px 4px 14px; padding: 11px 14px; margin-left: 48px; float: right; font-weight: 600; box-shadow: 0 10px 30px -14px rgba(240,194,75,0.6); }
+.msg.me::after { content: ""; display: block; clear: both; }
+.msg.err .who { color: var(--red); }
+.msg.err .body { color: #ffd9d9; box-shadow: inset 0 0 0 1px rgba(255,122,122,0.35); background: #1c1113; }
+.msg .body p + p, .msg .body ul, .msg .body ol, .msg .body pre, .msg .body h4 { margin-top: 8px; }
+.msg .body ul, .msg .body ol { padding-left: 20px; }
+.msg .body li + li { margin-top: 4px; }
+.msg .body h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--acid); }
+.msg .body pre { padding: 10px 12px; background: rgba(0,0,0,0.45); border-radius: 10px; overflow: auto; white-space: pre-wrap; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
+.msg .body code { background: rgba(255,255,255,0.1); padding: 1px 6px; border-radius: 5px; color: #fff; }
+.msg .card { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,0.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); font-weight: 600; }
+.msg .card img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; }
+.working { display: flex; align-items: center; gap: 10px; padding: 10px 4px; color: #fff; font-weight: 600; }
+.working .spin { width: 14px; height: 14px; border: 2px solid var(--acid); border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
+
+.composer { margin: 0 14px 14px; border-radius: 10px; background: #191919; padding: 14px 16px 12px; border: 1px solid var(--line-2); }
+.composer:focus-within { border-color: #8a713b; }
+.composer textarea { width: 100%; min-height: 48px; max-height: 180px; resize: none; background: transparent; border: 0; color: #fff; font: inherit; font-size: 15px; line-height: 1.5; outline: 0; caret-color: var(--acid); }
+.composer textarea::placeholder { color: #9a9a9a; }
+.composer .row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
+.composer .row > .chip { max-width: 100%; }
+.composer select.mode { color: var(--text-2); font-size: 12px; font-weight: 500; max-width: 190px; min-width: 0; cursor: pointer; }
+.composer { flex-shrink: 0; }
+.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,0.08); color: #fff; font-size: 12.5px; font-weight: 500; }
+.chip img { width: 13px; height: 13px; }
+.chip button { display: inline-flex; color: #b8b8b8; }
+.chip button:hover { color: #fff; }
+.composer .send { margin-left: auto; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--acid); border-color: var(--acid); color: var(--on-acid); box-shadow: 0 10px 24px -10px rgba(240,194,75,0.7); }
+.composer .send:hover:not(:disabled) { background: var(--acid-2); border-color: var(--acid-2); }
+.composer .send.stop { background: #fff; border-color: #fff; box-shadow: none; }
+.working .stop { margin-left: auto; height: 30px; }
+.working .stop .sq { width: 9px; height: 9px; border-radius: 2px; background: currentColor; display: inline-block; }
+.hint { padding: 0 16px 10px; color: var(--text-2); font-size: 12.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.hint b { color: var(--text); font-weight: 600; }
+.slow-run { padding: 12px 0; line-height: 1.6; }
+.slow-run[hidden] { display: none; }
+
+/* ---------- drawer: a real workspace, not a popover ---------- */
+.drawer { position: fixed; top: calc(var(--top) + 12px); left: 50%; transform: translateX(-50%); bottom: 20px; width: min(1040px, calc(100vw - 40px)); background: #111111; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; z-index: 40; overflow: hidden; animation: rise 0.18s ease-out; }
+.drawer[data-drawer="releases"] { width: min(1180px, calc(100vw - 40px)); }
+.drawer-veil { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); z-index: 35; }
+@keyframes rise { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
+.drawer-head { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
+.drawer-head h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
+.drawer-title p { margin-top: 6px; max-width: 78ch; color: var(--text-3); font-size: 13px; line-height: 1.6; }
+.drawer-head .btn { flex-shrink: 0; }
+.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 22px; }
+.drawer pre.out { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); color: #e6e6e6; border-radius: var(--r); min-height: 130px; max-height: 46vh; overflow: auto; white-space: pre-wrap; line-height: 1.6; }
+.drawer .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.drawer .row + .row { margin-top: 10px; }
+.drawer .block { padding: 22px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
+.drawer .block + .block { margin-top: 14px; }
+.block-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
+.block-head h4 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
+.block-meta { color: var(--text-3); font-size: 12.5px; }
+.drawer-empty { color: var(--text-3); font-size: 13px; line-height: 1.65; }
+
+/* connection steps: installed is not connected */
+.steps { list-style: none; display: block; }
+.step { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
+.step:first-child { border-top: 0; padding-top: 0; }
+.step-n { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--text-3); font-size: 12.5px; font-weight: 700; }
+.step.done .step-n { border-color: #2f5d3f; background: #14301f; color: var(--green); }
+.step-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; font-weight: 600; }
+.step-state { padding: 2px 8px; border-radius: 5px; background: var(--panel-2); color: var(--text-3); font-size: 11.5px; font-weight: 600; }
+.step-state.ok { color: var(--green); }
+.step-body p { margin-top: 7px; max-width: 78ch; color: var(--text-2); font-size: 13.5px; line-height: 1.65; word-break: break-word; }
+.step-row { margin-top: 13px; }
+
+/* releases */
+.rel-list { list-style: none; display: grid; gap: 10px; }
+.rel { display: flex; align-items: center; gap: 20px; padding: 16px 18px; border-radius: 10px; background: var(--panel-2); }
+.rel-main { flex: 1; min-width: 0; }
+.rel-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.rel .lbl { font-size: 15px; font-weight: 700; }
+.rel-sum { margin-top: 6px; color: var(--text-2); font-size: 13px; line-height: 1.55; }
+.rel-meta { margin-top: 4px; color: var(--text-3); font-size: 12px; }
+.rel .btn { flex-shrink: 0; }
+.compare-fields { align-items: flex-end; gap: 14px; }
+.compare-fields label { display: grid; gap: 8px; color: var(--text-3); font-size: 12.5px; flex: 1 1 210px; }
+.compare-fields input { width: 100%; height: 42px; font-size: 13.5px; }
+.compare-actions { display: flex; gap: 8px; flex-shrink: 0; }
+.compare-actions .btn { height: 42px; }
+.compare-error { margin-top: 14px; padding: 12px 14px; border: 1px solid #653b3b; border-radius: 8px; color: var(--red); font-size: 13px; }
+.diff-result { margin-top: 18px; }
+.diff-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 12px; color: var(--text-3); font-size: 13px; }
+.diff-stats .diff-range { color: var(--text); font-weight: 600; }
+.diff-stats .add { color: var(--green); } .diff-stats .del { color: var(--red); }
+.diff { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre; overflow: auto; }
+.diff .add { color: var(--green); } .diff .del { color: var(--red); } .diff .hd { color: var(--text-3); }
+
+/* ---------- toasts ---------- */
+.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 40; }
+.toast { padding: 10px 14px; border-radius: var(--r); background: #fff; color: #0a0a0a; font-size: 13px; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); animation: pop 0.16s ease-out; max-width: 560px; }
+.toast.err { background: #3b1111; color: #ffb4b4; }
+@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
+
+.scanbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text-2); font-weight: 500; }
+.scanbar .spin { width: 13px; height: 13px; border: 2px solid var(--acid); border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
+
+@media (max-width: 1200px) {
+  .app { gap: 20px; padding: 0 24px 32px; }
+  .app.agent-open { grid-template-columns: minmax(0,1fr) 330px; }
+  .setup-services { grid-template-columns: repeat(2,minmax(0,1fr)); }
+}
+@media (max-width: 900px) {
+  .app.agent-open { grid-template-columns: minmax(0,1fr); }
+  .side { position: static; height: 660px; }
+  .top { flex-wrap: wrap; height: auto; min-height: var(--top); padding-block: 12px; gap: 8px; }
+  .top .meta, .top .sep, .top > .pill { display: none; }
+  .rail { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); }
+  .fix { grid-template-columns: minmax(0,1fr); gap: 18px; }
+  .fix-act { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
+  .fix-act .btn { width: auto; min-width: 190px; }
+  .fix-who { flex: 1 1 220px; }
+}
+@media (max-width: 560px) {
+  .app { padding: 0 16px 24px; gap: 12px; }
+  .top .brand { width: 100%; padding-right: 110px; }
+  .top .spacer { display: none; }
+  .top .agent-toggle { position: absolute; top: 13px; right: 0; }
+  .top .btn { font-size: 12px; padding: 0 10px; }
+  .workspace-heading { align-items: start; flex-direction: column; gap: 22px; }
+  .workspace-heading .btn { width: 100%; }
+  .workspace-tabs { gap: 24px; margin-top: 30px; }
+  .workspace-tabs button { font-size: 12px; gap: 6px; }
+  .rail { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
+  .slab { padding: 16px 12px; }
+  .face { min-height: 165px; }
+  .face-name { font-size: 19px; }
+  .slab-status { min-height: 96px; }
+  .slab-act .btn { font-size: 11px; padding: 0 5px; }
+  .section-head { align-items: start; flex-direction: column; }
+  .fix { padding: 18px 16px; gap: 16px; }
+  .fix-title { font-size: 16.5px; }
+  .fix-evidence { padding: 14px; }
+  .fix-evidence > div { grid-template-columns: minmax(0,1fr); gap: 3px; }
+  .fix-act { flex-direction: column; align-items: stretch; }
+  .fix-act .btn { width: 100%; min-width: 0; }
+  .setup-heading { padding: 20px 16px; }
+  .setup-heading h2 { font-size: 20px; }
+  .setup-services { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0 16px 20px; }
+  .setup-service { padding: 10px 8px; gap: 7px; }
+  .setup-service img { width: 20px; height: 20px; }
+  .setup-service small { font-size: 9px; }
+  .setup-footer { flex-direction: column; align-items: stretch; padding: 20px 16px; gap: 15px; }
+  .setup-footer .btn { margin: 0; }
+  .drawer, .drawer[data-drawer="releases"] { width: calc(100vw - 20px); border-radius: 12px; top: 10px; bottom: 10px; }
+  .drawer-head { padding: 16px; gap: 10px; }
+  .drawer-head h3 { font-size: 17px; }
+  .drawer-body { padding: 14px; }
+  .drawer .block { padding: 16px; }
+  .step { grid-template-columns: 22px minmax(0,1fr); gap: 12px; }
+  .step-n { width: 22px; height: 22px; font-size: 11.5px; }
+  .step-row .btn { width: 100%; }
+  .rel { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
+  .rel .btn { width: 100%; }
+  .compare-actions { width: 100%; }
+  .compare-actions .btn { flex: 1; }
+  .drawer pre.out { max-height: 40vh; }
+  .toast { max-width: calc(100vw - 32px); width: max-content; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
+}
+/* ---------- hosted full check ---------- */
+.fc-veil { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.62); }
+.fc-sheet { position: fixed; z-index: 61; top: 5vh; left: 50%; transform: translateX(-50%); width: min(880px, calc(100vw - 32px)); max-height: 90vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
+.fc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
+.fc-head h2 { font-size: 17px; letter-spacing: -0.01em; }
+.fc-body { overflow: auto; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
+.fc-lead { color: var(--text-2); font-size: 14px; }
+.fc-notice { padding: 10px 14px; border-radius: var(--r); background: #2b2518; color: var(--amber); font-size: 13px; }
+.fc-error { padding: 12px 14px; border-radius: var(--r); background: #2d1919; color: var(--red); }
+.fc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
+.fc-actions a.btn { text-decoration: none; }
+.fc-wait { display: inline-flex; align-items: center; gap: 9px; color: var(--text-3); font-size: 13px; }
+.fc-code { display: flex; align-items: baseline; gap: 14px; padding: 16px 18px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--bg); width: fit-content; }
+.fc-code-label { color: var(--text-3); font-size: 12.5px; }
+.fc-code strong { font-family: var(--mono); font-size: 26px; letter-spacing: 0.18em; color: var(--acid); }
+.fc-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--text-3); font-size: 12.5px; }
+.fc-account .fc-dot::before { content: "·"; margin-right: 12px; color: var(--line-2); }
+.fc-link { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; font-size: 12.5px; }
+.fc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
+.fc-facts > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); min-width: 0; }
+.fc-facts dt { color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
+.fc-facts dd { margin-top: 2px; overflow-wrap: anywhere; }
+.fc-filegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
+.fc-files { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--bg); min-width: 0; }
+.fc-files h4 { font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
+.fc-files ul { list-style: none; max-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
+.fc-files li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
+.fc-files li code { overflow-wrap: anywhere; color: var(--text); }
+.fc-files li span { color: var(--text-3); white-space: nowrap; }
+.fc-raw summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
+.fc-raw pre { margin-top: 10px; max-height: 280px; overflow: auto; padding: 12px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
+.fc-score { display: flex; gap: 18px; align-items: center; }
+.fc-score-num { flex: none; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--acid); font-size: 26px; font-weight: 700; }
+.fc-score-label { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
+.fc-score p { color: var(--text-2); }
+.fc-next { padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--acid); border-radius: 12px; background: #141416; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
+.fc-next h3 { font-size: 16px; }
+.fc-next p { color: var(--text-2); }
+.fc-eyebrow { color: var(--acid); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
+.fc-h4 { font-size: 13px; color: var(--text-2); }
+.fc-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
+.fc-area { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
+.fc-area.locked { opacity: 0.72; border-style: dashed; }
+.fc-area-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.fc-area h5 { font-size: 13.5px; }
+.fc-count { min-width: 24px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 11px; background: var(--panel-2); color: var(--text-3); font-size: 12px; font-weight: 700; }
+.fc-count.on { background: #2b2518; color: var(--amber); }
+.fc-area ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
+.fc-area li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; }
+.fc-area li .tag { height: 20px; font-size: 10.5px; flex: none; }
+.fc-upsell { color: var(--text-2); font-size: 13px; }
+.fc-upsell a { color: var(--acid); }
+.fc-limit { font-size: 18px; line-height: 1.35; }