:root { --paper:#edede4; --panel:#f8f7ef; --ink:#31493c; --muted:#748174; --line:#d1d8ca; --accent:#55745c; --danger:#9b5546; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
[hidden] { display:none!important; }
button,input,textarea,select { font:inherit; }
button { border:1px solid var(--accent); border-radius:5px; padding:10px 14px; background:var(--accent); color:white; cursor:pointer; }
button.quiet { background:transparent; color:var(--ink); border-color:var(--line); }
button.danger { background:transparent; color:var(--danger); border-color:#d8b8ae; }
header { height:66px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
header nav { display:flex; align-items:center; gap:12px; } header a { color:inherit; text-decoration:none; font-size:13px; }
.brand { font-weight:650; font-size:17px; letter-spacing:-.04em; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(430px,100%); }
.dashboard { width:min(1250px,calc(100% - 36px)); margin:0 auto; padding:38px 0 70px; }
.heading,.row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
h1 { margin:0; font-size:38px; font-weight:550; letter-spacing:-.06em; } h2 { margin:0 0 8px; font-size:20px; font-weight:600; letter-spacing:-.03em; }
.eyebrow { margin:0 0 8px; color:#869284; font:9px ui-monospace,monospace; letter-spacing:.16em; }
.grid { display:grid; grid-template-columns:1fr 1.35fr; gap:16px; margin:28px 0 16px; }
.card { padding:24px; border:1px solid var(--line); border-radius:9px; background:var(--panel); box-shadow:0 10px 35px #30463308; }
.full { margin-top:16px; }
form { display:grid; gap:13px; margin-top:20px; }
label { display:grid; gap:6px; color:var(--muted); font-size:11px; }
input,textarea,select { width:100%; border:1px solid #cbd4c5; border-radius:5px; padding:10px 11px; background:#fffef8; color:var(--ink); outline:none; }
input:focus,textarea:focus,select:focus { border-color:#78917a; box-shadow:0 0 0 3px #78917a1c; }
textarea { resize:vertical; line-height:1.5; } .columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.check { display:flex; flex-direction:row; align-items:center; padding-top:20px; } .check input { width:auto; }
.help { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.list { display:grid; gap:8px; margin-top:18px; }
.list-item,.agent { border-top:1px solid var(--line); padding:13px 0; }
.list-item { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.list-item strong,.agent strong { display:block; font-size:13px; } .list-item small,.agent small { color:var(--muted); font-size:9px; }
.list-item button,.agent button { padding:6px 9px; font-size:10px; }
.agent { display:grid; grid-template-columns:minmax(140px,.7fr) minmax(220px,1.4fr) minmax(130px,.7fr) auto; gap:14px; align-items:center; }
.agent-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.pill { display:inline-block; margin-top:5px; padding:3px 6px; border-radius:10px; background:#dce6d7; color:#587055; font:8px ui-monospace,monospace; }
.pill.off { background:#e7e3db; color:#817a6d; }
.runs { overflow:auto; }
table { width:100%; border-collapse:collapse; margin-top:16px; font-size:11px; } th,td { padding:10px 8px; border-top:1px solid var(--line); text-align:left; vertical-align:top; } th { color:var(--muted); font-weight:500; }
.error { min-height:18px; color:var(--danger); font-size:11px; } #notice { min-height:20px; margin-top:12px; color:var(--accent); font-size:12px; }
dialog { width:min(680px,calc(100% - 24px)); padding:0; border:0; border-radius:10px; background:transparent; } dialog::backdrop { background:#263a2d66; backdrop-filter:blur(3px); } dialog .card { margin:0; }
@media(max-width:850px) { .grid { grid-template-columns:1fr; } .agent { grid-template-columns:1fr; } .agent-actions { justify-content:flex-start; } }
@media(max-width:520px) { .columns { grid-template-columns:1fr; } .dashboard { width:min(100% - 20px,1250px); } header { padding:0 12px; } }