:root {
  --bg: #0d1117; --panel: #161b22; --panel-2: #1c232c; --border: #2a313c;
  --text: #e6edf3; --muted: #9aa7b4; --subtle: #6b7682;
  --brand: #ff6b35; --ok: #3fb950; --busy: #d29922; --fail: #f85149;
  --radius: 10px; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); }
button { font: inherit; cursor: pointer; }
a { color: var(--brand); }
input, textarea { font: inherit; }
[hidden] { display: none !important; }

/* token gate */
.gate { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 50; }
.gate-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem; width: min(92vw, 360px); display: grid; gap: .75rem; }
.gate-card h1 { margin: 0; font-size: 1.25rem; }
.gate-card p { margin: 0; color: var(--muted); }
.gate-card input { padding: .6rem .7rem; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); }
.gate-card button { padding: .6rem; background: var(--brand); color: #111; border: 0; border-radius: 8px; font-weight: 600; }
.err { color: var(--fail); }

/* top bar */
.topbar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem;
  border-bottom: 1px solid var(--border); background: var(--panel); }
.brand { font-weight: 700; }
.spend { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: .35rem .7rem; }
.ghost:hover { color: var(--text); }

/* layout */
.layout { display: grid; grid-template-columns: 260px 1fr; height: calc(100vh - 49px); }
.sidebar { border-right: 1px solid var(--border); padding: .75rem; overflow-y: auto; background: var(--panel); }
.main { overflow: hidden; display: flex; flex-direction: column; }

.primary { background: var(--brand); color: #111; border: 0; border-radius: 8px; padding: .55rem; font-weight: 600; }
.block { width: 100%; }

/* project list */
.projects { margin-top: .75rem; display: grid; gap: .35rem; }
.proj { text-align: left; width: 100%; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: .55rem .6rem; color: var(--text); display: grid; gap: .15rem; }
.proj:hover { border-color: var(--subtle); }
.proj.active { border-color: var(--brand); }
.proj .row { display: flex; align-items: center; gap: .5rem; }
.proj .name { font-weight: 600; }
.proj .meta { color: var(--subtle); font-size: .8rem; font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--subtle); }
.dot.live { background: var(--ok); } .dot.building { background: var(--busy); } .dot.failed { background: var(--fail); }

/* new-site form */
.form { padding: 1.5rem; max-width: 640px; display: grid; gap: .9rem; }
.form h2 { margin: 0; }
.form label { display: grid; gap: .3rem; color: var(--muted); }
.form input, .form textarea { padding: .6rem .7rem; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); width: 100%; }
.form textarea { min-height: 9rem; resize: vertical; font: inherit; }
.hint { color: var(--subtle); font-size: .82rem; }

/* build view */
.build { display: grid; grid-template-columns: minmax(360px, 1fr) 1.4fr; height: 100%; }
.chat { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; }
.build-head { padding: .7rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.build-head .name { font-weight: 700; }
.build-head .cost { margin-left: auto; color: var(--busy); font-variant-numeric: tabular-nums; }
.pill { font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.phase { display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; }
.phase .k { font-weight: 600; }
.phase .d { color: var(--muted); }
.phase .c { margin-left: auto; color: var(--busy); font-variant-numeric: tabular-nums; font-size: .85rem; }
.phase.done { border-color: color-mix(in oklab, var(--ok) 40%, var(--border)); }
.phase.active { border-color: var(--brand); }
.lines { font-family: var(--mono); font-size: .76rem; color: var(--subtle); white-space: pre-wrap;
  max-height: 9rem; overflow-y: auto; padding: .4rem .55rem; background: #0b0f14; border: 1px solid var(--border); border-radius: 8px; }
.result { padding: .7rem .8rem; border-radius: 8px; border: 1px solid var(--border); }
.result.live { border-color: var(--ok); } .result.fail { border-color: var(--fail); color: var(--fail); }
.result a { font-weight: 600; }
.cred { font-family: var(--mono); font-size: .78rem; color: var(--muted); }

.composer { border-top: 1px solid var(--border); padding: .7rem; display: grid; gap: .5rem; background: var(--panel); }
.composer textarea { width: 100%; min-height: 3rem; max-height: 10rem; resize: vertical; padding: .55rem .6rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.composer .sendrow { display: flex; gap: .5rem; align-items: center; }
.composer .sendrow .hint { flex: 1; }

/* preview */
.preview { display: flex; flex-direction: column; min-width: 0; background: #0b0f14; }
.preview-head { padding: .5rem .8rem; border-bottom: 1px solid var(--border); display: flex; gap: .5rem; align-items: center; }
.preview-head .url { color: var(--muted); font-family: var(--mono); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-head .spacer { flex: 1; }
.preview iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.preview .empty { flex: 1; display: grid; place-items: center; color: var(--subtle); text-align: center; padding: 2rem; }
.framenote { color: var(--subtle); font-size: .76rem; padding: .4rem .8rem; border-top: 1px solid var(--border); }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .build { grid-template-columns: 1fr; }
  .preview { display: none; }
}