:root { --pico-font-size: 100%; }
main.container { padding-top: 0.5rem; }
header.topbar { margin-bottom: 1rem; border-bottom: 1px solid var(--pico-muted-border-color); padding-bottom: .5rem; }
header.topbar .brand { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
header.topbar .brand a { text-decoration: none; }
header.topbar .user { font-size: .9em; display: flex; gap: .4rem; align-items: center; }
header.topbar .user form { display: inline; margin: 0; }
.mainnav { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-top: .5rem; }
.mainnav a { padding: .25rem .6rem; border-radius: .4rem; text-decoration: none; font-size: .95em; }
.mainnav a:hover { background: var(--pico-muted-border-color); }
.mainnav a.active { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
button.link { background: none; border: 0; padding: 0; color: var(--pico-primary); width: auto; margin: 0; }
.flash { padding: .6rem 1rem; border-radius: .4rem; }
.flash.ok { background: #e6f6ea; color: #14532d; }
.flash.error { background: #fdecec; color: #7f1d1d; }
.muted { color: var(--pico-muted-color); font-size: .9em; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.card { border: 1px solid var(--pico-muted-border-color); border-radius: .5rem; padding: .8rem 1rem; }
.card .v { font-size: 1.6rem; font-weight: 600; }
.table-wrap { overflow-x: auto; }
table { font-size: .92em; }
.badge { display: inline-block; padding: 0 .45rem; border-radius: .3rem; font-size: .8em; background: #eef; color: #224; }
.badge.ok, .badge.running, .badge.handoff, .badge.interested { background: #e6f6ea; color: #14532d; }
.badge.error, .badge.dnc, .badge.do_not_call, .badge.urgent, .badge.failed { background: #fdecec; color: #7f1d1d; }
.badge.paused, .badge.retry, .badge.callback, .badge.callback_later { background: #fff6e0; color: #6b4b00; }
pre.prompt { white-space: pre-wrap; max-height: 28rem; overflow: auto; font-size: .85em; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actions form { margin: 0; }
.actions button, .actions a[role=button] { width: auto; margin: 0; }
.transcript .agent { color: #1e3a8a; }
.transcript .user { color: #374151; }
textarea { font-family: ui-monospace, monospace; font-size: .9em; }