:root{--bg:#f1f3f4;--card:#fff;--text:#202124;--muted:#5f6368;--line:#dadce0;--primary:#1a73e8;--primary-d:#1557b0;--ok:#188038;--warn:#e37400;--bad:#d93025;--radius:10px;--shadow:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15)}
@media (prefers-color-scheme:dark){:root{--bg:#121316;--card:#1e2023;--text:#e8eaed;--muted:#9aa0a6;--line:#3c4043;--primary:#8ab4f8;--primary-d:#aecbfa;--ok:#81c995;--warn:#fdd663;--bad:#f28b82}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.45 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
h1,h2,h3{margin:0 0 .5em;font-weight:500}
a{color:var(--primary)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 4px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:-1px;border-color:transparent}
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--text);padding:9px 16px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
button:hover,.btn:hover{background:rgba(128,128,128,.12)}
button.primary,.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
button.primary:hover{background:var(--primary-d)}
button.danger{color:var(--bad)}
button.ok{background:var(--ok);border-color:var(--ok);color:#fff}
button.bad{background:var(--bad);border-color:var(--bad);color:#fff}
button:disabled{opacity:.5;cursor:default}
.msg{margin-top:12px;padding:10px 12px;border-radius:8px;background:rgba(217,48,37,.1);color:var(--bad);display:none}
.msg.show{display:block}.msg.okmsg{background:rgba(24,128,56,.12);color:var(--ok)}
.auth{max-width:400px;margin:8vh auto;padding:0 16px}
.auth .card{padding:28px}
.auth h1{font-size:22px}.auth .logo{font-size:36px}
.auth button.primary{width:100%;justify-content:center;margin-top:20px;padding:12px}
.muted{color:var(--muted)}.small{font-size:12px}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;background:rgba(128,128,128,.18)}
.badge.online,.badge.erledigt,.badge.abgeschlossen{background:rgba(24,128,56,.15);color:var(--ok)}
.badge.offline{background:rgba(128,128,128,.2);color:var(--muted)}
.badge.aktiv{background:rgba(26,115,232,.15);color:var(--primary)}
.badge.fehlgeschlagen{background:rgba(217,48,37,.15);color:var(--bad)}
.topbar{height:52px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:4px;padding:0 12px;position:relative;z-index:1100}
.topbar .brand{font-weight:600;margin-right:12px;white-space:nowrap}
.tabs{display:flex;gap:2px;overflow-x:auto;flex:1}
.tab{padding:14px 12px;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;white-space:nowrap}
.tab.active{border-bottom-color:var(--primary);color:var(--primary);font-weight:500}
.page{height:calc(100% - 52px);overflow:auto;padding:16px}
.page.hidden,.hidden{display:none!important}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;color:var(--muted);font-weight:500}
.tablewrap{overflow-x:auto}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.toolbar h2{margin:0;flex:1}
.toolbar input,.toolbar select{width:auto}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:6px}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatch{width:28px;height:28px;border-radius:50%;border:3px solid transparent;padding:0}
.swatch.sel{border-color:var(--text)}
dialog{border:0;border-radius:14px;padding:22px;box-shadow:var(--shadow);width:min(480px,94vw);background:var(--card);color:var(--text);max-height:92vh;overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.4)}
.row{display:flex;gap:10px}.row>*{flex:1}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
#page-live{padding:0;display:flex;position:relative;overflow:hidden}
#side{width:340px;max-width:44vw;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:1050}
#side .filter{padding:10px}
#vlist{overflow:auto;flex:1}
.vitem{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;align-items:center}
.vitem:hover,.vitem.sel{background:rgba(26,115,232,.1)}
.vitem .nm{font-weight:500}
#mapwrap{flex:1;position:relative}
#map{position:absolute;inset:0}
#detail{position:absolute;top:12px;right:12px;width:320px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:auto;z-index:1000;display:none;padding:16px}
#detail.show{display:block}
#detail h3{display:flex;align-items:center;gap:6px}
.kv{display:flex;justify-content:space-between;padding:3px 0}.kv span:first-child{color:var(--muted)}
.progress{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin:4px 0 8px}
.progress>i{display:block;height:100%;background:var(--ok)}
.stoprow{display:flex;gap:8px;padding:4px 0;font-size:13px;align-items:flex-start}
.stoprow b{min-width:22px;height:22px;border-radius:50%;background:var(--muted);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.stoprow.erledigt b{background:var(--ok)}.stoprow.fehlgeschlagen b{background:var(--bad)}
.hist{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.hist .row{gap:6px}.hist input{padding:6px}
.vm{position:relative;width:34px;height:34px}
.vm .lbl{position:absolute;left:50%;top:36px;transform:translateX(-50%);background:#fff;color:#202124;font:600 11px system-ui;padding:1px 6px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.4);white-space:nowrap}
.vm.off{opacity:.55}
.hamb{display:none}
@media(max-width:800px){#side{position:absolute;left:0;top:0;bottom:0;width:260px;max-width:80vw;transform:translateX(-100%);transition:.2s}#side.open{transform:none}.hamb{display:inline-flex}#detail{top:auto;bottom:8px;max-height:55%}}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#323232;color:#fff;padding:10px 18px;border-radius:8px;z-index:3000}
@media(max-width:800px){#me{display:none}.topbar .btn{padding:6px 8px}.topbar{overflow:hidden}}