@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');
:root{--bg:#0e0f12;--panel:#16181d;--panel2:#1b1d23;--line:#23262d;--line2:#2c3038;--text:#edebe6;--muted:#a9a7a0;--dim:#8d8b85;--gold:#f0b84f;--gold-bg:#2a2110;--gold-line:#4a3b1c;--green:#3fcf8e;--green-t:#7ee2b3;--green-bg:#10261c;--green-line:#1f5a3d;--red:#f27a72;--red-bg:#2a1716;--red-line:#5a2a27;--blue:#8fbcff;--blue-bg:#1a2233;--blue-line:#2f4a70;
--display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--sans:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;--mono:'IBM Plex Mono',Consolas,ui-monospace,monospace}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}
.wrap{max-width:520px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.top{display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--display);font-weight:700;font-size:22px}.brand span{color:var(--gold);font-weight:500}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:13px;font-weight:600;background:var(--panel2);color:var(--muted)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.green{background:var(--green-bg);color:var(--green-t)}.pill.gold{background:var(--gold-bg);color:var(--gold)}.pill.red{background:var(--red-bg);color:var(--red)}.pill.blue{background:var(--blue-bg);color:var(--blue)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.card.gold{background:#1f1a10;border-color:var(--gold-line)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat .l{font-size:12px;color:var(--muted)}.stat .v{font-family:var(--mono);font-size:24px;font-weight:500}.stat .v.txt{font-family:var(--sans);font-size:16px;font-weight:600;padding-top:5px}
.row{display:flex;gap:10px;align-items:center}.grow{flex:1;min-width:0}
.h{font-weight:600;font-size:16px}.muted{color:var(--muted);font-size:13px}
.big{font-family:var(--mono);font-size:34px;font-weight:500;color:var(--gold)}
.btn{height:56px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font-weight:600;font-size:16px;padding:0 16px}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#1a1406;font-weight:700;font-size:17px}
.btn.red{background:transparent;border-color:var(--red-line);color:var(--red)}
.btn.blue{background:transparent;border-color:var(--blue-line);color:var(--blue)}
.btn.sm{height:44px;font-size:14px;padding:0 12px;border-radius:10px}
input[type=time],input[type=text],input[type=number],input[type=password],select{height:52px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--text);padding:0 14px;font-size:18px;font-family:var(--mono);min-width:0;color-scheme:dark}
label.chk{display:flex;align-items:center;gap:10px;font-size:14px;color:#cfcdc6}label.chk input{width:22px;height:22px;accent-color:var(--gold)}
.list{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.item{display:flex;align-items:center;gap:12px;min-height:62px;padding:8px 12px 8px 14px;border-bottom:1px solid #1f2228}.item:last-child{border-bottom:0}
.item .t{width:62px;font-family:var(--mono);font-size:18px;font-weight:500}
.item .s{font-size:12px}
.empty{padding:18px;color:var(--muted);font-size:14px;text-align:center}
.offline{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));padding:12px 14px;border-radius:12px;background:var(--red-bg);border:1px solid var(--red-line);color:var(--red);font-weight:600;display:none;text-align:center}
.offline.on{display:block}
.toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);padding:10px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw}
.toast.on{opacity:1}

/* eingebettet in die Verwaltung */
.embed .top .brand{display:none}
.embed .top{justify-content:flex-end}