body { font-family: system-ui, sans-serif; max-width: 1000px; margin: 2rem auto; padding: 0 1rem; }
h1, h2, h3 { margin-top: 1.5rem; }
button { padding: .4rem .8rem; margin-right: .4rem; cursor: pointer; }
button.danger { background: #fee2e2; border: 1px solid #fecaca; }
select, input { padding: .4rem; margin-right: .3rem; }
.row { margin: .5rem 0; }
.pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; }
.pill.running { background: #d1fae5; color: #065f46; }
.pill.stopped { background: #fee2e2; color: #991b1b; }
.pill.missing { background: #e5e7eb; color: #374151; }
.role-badge { background: #dbeafe; color: #1e40af; padding: .1rem .5rem; border-radius: 4px; font-size: .75rem; margin-left: .3rem; }
pre { background: #111; color: #ddd; padding: .8rem; max-height: 320px; overflow: auto; font-size: .8rem; }
#logs { max-height: 480px; min-height: 100px; }
.hidden { display: none; }
.muted { color: #6b7280; font-size: .85rem; }
table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
th { background: #f9fafb; font-size: .85rem; }
.err { color: #b91c1c; }
.ok  { color: #065f46; }
details { margin: .5rem 0; }
summary { cursor: pointer; font-weight: 600; }
fieldset { border: 1px solid #e5e7eb; padding: .8rem; margin: .5rem 0; }
legend { padding: 0 .4rem; font-size: .85rem; color: #374151; }
nav button { background: #f3f4f6; border: 1px solid #d1d5db; }
nav button.active { background: #2563eb; color: white; border-color: #1d4ed8; }
header { display: flex; align-items: center; justify-content: space-between; }
header .user-info { display: flex; align-items: center; gap: .5rem; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-left: 6px; vertical-align: middle; animation: pulse-dot 2s infinite; }
.live-dot.paused { background: #9ca3af; animation: none; }
.selection-toolbar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.car-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; max-height: 18rem; overflow: auto; border: 1px solid #e5e7eb; padding: .7rem; background: #f9fafb; }
.car-option { display: flex; gap: .5rem; align-items: flex-start; padding: .45rem .55rem; border: 1px solid #e5e7eb; border-radius: 6px; background: white; }
.car-option input { margin-top: .15rem; }
.car-option-text { display: flex; flex-direction: column; gap: .15rem; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }