* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #121212; color: #eee; }
.container { max-width: 760px; margin: 0 auto; padding: 24px; }
h1 { color: #1db954; }
input, select, button { font-size: 1rem; padding: 10px; border-radius: 6px; border: 1px solid #333; }
input, select { width: 100%; background: #1e1e1e; color: #eee; margin-bottom: 12px; }
button { background: #1db954; color: #000; border: none; cursor: pointer; font-weight: 600; }
button:hover { background: #1ed760; }
.row { display: flex; gap: 12px; align-items: flex-end; }
.row > * { flex: 1; }
.job { background: #1e1e1e; border-radius: 8px; padding: 14px; margin-top: 12px; }
.job h3 { margin: 0 0 6px; font-size: 0.95rem; word-break: break-all; }
.bar { height: 8px; background: #333; border-radius: 4px; overflow: hidden; margin: 8px 0; }
.bar > div { height: 100%; background: #1db954; width: 0; transition: width .3s; }
.status { font-size: .85rem; color: #aaa; }
.status.completed { color: #1db954; }
.status.error { color: #e0245e; }
.warn { color: #f5a623; font-size: .85rem; }
.fail { color: #e0245e; font-size: .8rem; }
.login-card { max-width: 340px; margin: 12vh auto; }