:root {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f0f2f5; --border: #dfe3e8;
  --text: #16191d; --muted: #66707c; --accent: #2563eb; --accent-text: #ffffff;
  --ok: #15803d; --ok-bg: #dcfce7; --warn: #a16207; --warn-bg: #fef3c7;
  --bad: #b91c1c; --bad-bg: #fee2e2; --info: #1d4ed8; --info-bg: #dbeafe; --idle-bg: #e5e7eb;
  --radius: 10px; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117; --surface: #161b22; --surface-2: #1f262e; --border: #2d353f;
    --text: #e6edf3; --muted: #8b96a3; --accent: #3b82f6;
    --ok: #4ade80; --ok-bg: #12301f; --warn: #fbbf24; --warn-bg: #3a2c0b;
    --bad: #f87171; --bad-bg: #3b1515; --info: #93c5fd; --info-bg: #172554; --idle-bg: #2a313a;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.error { color: var(--bad); margin: .5rem 0 0; }

button, .btn {
  font: inherit; font-size: .88rem; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  padding: .45rem .8rem; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
}
button:hover:not(:disabled), .btn:hover { border-color: var(--muted); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.danger { color: var(--bad); border-color: var(--bad); background: transparent; }
button.ghost { background: transparent; }
button.small, .btn.small { padding: .3rem .6rem; font-size: .8rem; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: .5rem .6rem; width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
label { display: block; font-size: .85rem; font-weight: 600; margin: .7rem 0 .3rem; }
label.check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
label.check input { width: auto; margin-top: .2rem; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-box { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem; }
.login-box button { width: 100%; margin-top: 1rem; justify-content: center; }

.brand { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.projpick { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; }
.projpick select { width: auto; max-width: 46vw; padding: .3rem .5rem; font-weight: 600; }
.top { display: flex; justify-content: space-between; align-items: center; padding: .7rem 16px; background: var(--surface); border-bottom: 1px solid var(--border); gap: .5rem; }
.top-right { display: flex; align-items: center; gap: .6rem; }
.tabs { display: flex; gap: .25rem; padding: .4rem 12px; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; position: sticky; top: 0; z-index: 5; scrollbar-width: none; }
.tabs button { border: 0; background: transparent; color: var(--muted); padding: .5rem .75rem; border-radius: 8px; }
.tabs button.active { background: var(--surface-2); color: var(--text); font-weight: 600; }
main { padding: 16px; max-width: 1280px; margin: 0 auto; }
main h2 { margin-top: .4rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-bottom: 1.4rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-bottom: 12px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; min-width: 0; }
.row { display: flex; gap: .5rem; align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; margin-bottom: .8rem; }
.row.wrap select { width: auto; }
#taskAdd { margin-bottom: .6rem; }
#taskAdd input { flex: 1; }

.agent .head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.agent .name { font-weight: 700; font-size: 1.05rem; }
.agent .role { color: var(--muted); font-size: .82rem; margin: .1rem 0 .6rem; }
.pills { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.pill { font-size: .74rem; padding: .15rem .55rem; border-radius: 999px; background: var(--idle-bg); color: var(--muted); white-space: nowrap; font-weight: 600; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.info { background: var(--info-bg); color: var(--info); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .7rem; margin: 0 0 .7rem; font-size: .84rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.toggle { margin-top: .6rem; font-size: .82rem; }
.loginhint { background: var(--warn-bg); color: var(--text); border-radius: 8px; padding: .5rem .6rem; font-size: .82rem; margin-bottom: .6rem; }
.loginhint code { font-family: var(--mono); font-size: .78rem; display: block; margin-top: .25rem; overflow-wrap: anywhere; }

.list { display: flex; flex-direction: column; gap: 6px; }
.item { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; text-align: left; width: 100%; color: var(--text); font-size: .86rem; }
.item:hover { border-color: var(--muted); }
.item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .m { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.empty { color: var(--muted); font-size: .86rem; padding: .4rem 0; }

.pre { font-family: var(--mono); font-size: .78rem; line-height: 1.5; background: var(--surface-2); border-radius: 8px; padding: .7rem; margin: 0 0 .6rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.pre.log { max-height: 60vh; }
.pre.tall { max-height: 72vh; }
.editor { font-family: var(--mono); font-size: .82rem; margin-bottom: .5rem; }
.msgbox { margin-bottom: .7rem; }
.msgbox h3 { margin-bottom: .3rem; }
details summary { cursor: pointer; color: var(--muted); font-size: .85rem; margin: .3rem 0; }

.banner { padding: .55rem .75rem; border-radius: 8px; margin: 0 0 .8rem; }
.banner.warn { background: var(--warn-bg); color: var(--text); }

dialog { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); width: min(900px, calc(100vw - 24px)); padding: 16px; }
dialog::backdrop { background: rgba(0,0,0,.45); }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: .6rem 1rem; border-radius: 8px; font-size: .88rem; z-index: 20; max-width: calc(100vw - 32px); }
.toast.bad { background: var(--bad); color: #fff; }

/* Live */
.tiny { font-size: .74rem; }
.mt { margin-top: 1.2rem; }
.grow { flex: 1; }
.min { min-width: 0; }
.schedbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .75rem; margin-bottom: 1rem; }
.live { display: grid; gap: 12px; margin-bottom: 1.4rem; }
.livejob { border-left: 3px solid var(--info); }
.livejob .lt { font-size: .88rem; margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livejob .row { flex-wrap: wrap; }
.live-out { max-height: 300px; margin-top: .5rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--info); flex: none; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
.limits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-bottom: 1.4rem; }
.limit { display: flex; flex-direction: column; gap: .35rem; }
.lim { margin-top: .35rem; }
.bar { height: 8px; background: var(--idle-bg); border-radius: 999px; overflow: hidden; margin: .25rem 0 .2rem; }
.fill { height: 100%; border-radius: 999px; }
.fill.ok { background: var(--ok); } .fill.warn { background: var(--warn); } .fill.bad { background: var(--bad); }
.note { overflow-wrap: anywhere; }
.agent.busy { border-color: var(--info); }
.rc { flex-wrap: wrap; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--border); }
select.inline { width: auto; padding: .25rem .45rem; font-size: .85rem; }
.item.static { cursor: default; }
.item .why, .why { color: var(--warn); }
.num { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--surface-2); font-size: .78rem; font-weight: 700; color: var(--muted); }

/* Warteschlange */
.ctl { margin-bottom: 12px; }
.ctl-row { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-end; }
.ctl-row select { width: auto; }
.ctl-row .check { margin: 0 0 .4rem; }
.lbl { font-size: .8rem; font-weight: 600; color: var(--muted); margin: 0 0 .3rem; display: block; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; font-size: .82rem; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--accent); color: var(--accent-text); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .7rem; }
.qlist { display: flex; flex-direction: column; gap: 8px; }
.qitem { display: flex; gap: .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: .6rem .7rem .6rem .35rem; }
.qitem.chained { margin-left: 1.4rem; border-left: 3px solid var(--accent); }
.qitem.other { opacity: .8; }
.qitem.st-running { border-color: var(--info); background: var(--info-bg); }
.qitem.st-done, .qitem.st-stopped, .qitem.st-interrupted { opacity: .65; }
.qitem.st-failed { border-color: var(--bad); }
.qitem.dragging { opacity: 1; box-shadow: 0 6px 24px rgba(0,0,0,.25); border-color: var(--accent); position: relative; z-index: 3; }
.handle { flex: none; width: 22px; display: flex; flex-direction: column; justify-content: center; gap: 3px; cursor: grab; touch-action: none; padding: 0 4px; }
.handle span { display: block; height: 2px; background: var(--muted); border-radius: 2px; }
.dragging .handle { cursor: grabbing; }
.qbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.qbody .row { flex-wrap: wrap; }
.qbody .facts { margin: .2rem 0; }
.qbody details textarea { margin: .3rem 0; }
.qprompt { font-size: .86rem; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qbody .actions { margin-top: .1rem; }
.count { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: .7rem; font-weight: 700; margin-left: .2rem; }
.banner.small { font-size: .82rem; }
.presets button { font-size: .75rem; }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
#qForm .actions { margin-top: .8rem; }

@media (max-width: 560px) {
  .brand strong { display: none; }
  .two { grid-template-columns: 1fr; }
  .hide-s { display: none; }
  .qitem.chained { margin-left: .7rem; }
  .item { flex-wrap: wrap; }
  .item .t { flex-basis: 100%; order: 9; white-space: normal; }
  main { padding: 12px; }
  .top { padding: .6rem 12px; }
  #clock { display: none; }
}