/* Technical console. Function over form, on purpose. */
:root { --bg:#0e0f11; --fg:#d7d9dc; --dim:#7d828a; --line:#24272c; --ok:#4fb477; --err:#e06c75; --warn:#d7a848; --acc:#61afef; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
a { color:var(--acc); text-decoration:none; } a:hover { text-decoration:underline; }
nav.top { display:flex; gap:16px; align-items:center; padding:8px 14px; border-bottom:1px solid var(--line); }
nav.top .spacer { flex:1; }
main { padding:12px 14px; }
.dim { color:var(--dim); } .ok { color:var(--ok); } .err { color:var(--err); } .warn { color:var(--warn); }
.flash { margin:8px 14px 0; padding:6px 10px; border:1px solid var(--line); }
button, input[type=submit], .linkish { background:transparent; color:var(--acc); border:1px solid var(--line); padding:3px 8px; font:inherit; cursor:pointer; }
button:hover { border-color:var(--acc); }
input[type=text], input[type=password], input[type=email], textarea, select { background:#15171a; color:var(--fg); border:1px solid var(--line); padding:5px 7px; font:inherit; width:100%; }
table { border-collapse:collapse; width:100%; } td, th { border-bottom:1px solid var(--line); padding:4px 6px; text-align:left; vertical-align:top; }
th { color:var(--dim); font-weight:normal; }
.split { display:grid; grid-template-columns: minmax(420px, 1fr) minmax(480px, 1.2fr); gap:14px; height: calc(100vh - 60px); }
.col { display:flex; flex-direction:column; min-height:0; }
#log { flex:1; overflow-y:auto; border:1px solid var(--line); padding:8px; white-space:pre-wrap; word-break:break-word; }
#log .ev { padding:2px 0; border-bottom:1px dotted var(--line); }
#log .think { color:var(--dim); font-style:italic; }
#log .say { color:var(--fg); background:#15171a; padding:6px; margin:4px 0; border-radius:8px; border-bottom:0; }
#log .say + .say { margin-top:2px; }
#log img.shot { display:block; max-width:100%; max-height:280px; margin:6px 0 2px; border:1px solid var(--line); border-radius:8px; }
#log .user { color:var(--acc); background:#101820; padding:6px; margin:4px 0; }
#log .ask { border:1px solid var(--warn); padding:8px; margin:6px 0; }
#log .usage, #log .model { color:var(--dim); font-size:11px; }
form.compose { display:flex; gap:6px; margin-top:8px; align-items:flex-start; }
form.compose textarea { height:64px; }
.opts { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; } .opts label { color:var(--dim); } .opts select { width:auto; }
iframe.live { flex:1; width:100%; border:1px solid var(--line); background:#000; }
.card { border:1px solid var(--line); padding:10px; margin-bottom:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
label.f { display:block; color:var(--dim); margin-top:6px; }
img.thumb { max-height:80px; border:1px solid var(--line); }
pre { white-space:pre-wrap; word-break:break-word; margin:0; }