:root{--bg: #0f1115;--surface: #191d24;--surface-2: #222833;--border: #2c333f;--text: #e8ebf0;--muted: #98a2b3;--accent: #4caf50;--accent-dark: #2e7d32;--danger: #e5484d;--warn: #f5a623;--radius: 12px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}a{color:var(--accent)}button{font:inherit;cursor:pointer;border:none;border-radius:10px;padding:10px 14px;background:var(--surface-2);color:var(--text);transition:background .15s,opacity .15s}button:hover{background:#2b3340}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent-dark)}button.primary:hover{background:var(--accent)}button.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}button.ghost{background:transparent;border:1px solid var(--border)}button.small{padding:6px 10px;font-size:.85rem}input,select,textarea{font:inherit;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:9px 11px;width:100%}.app{max-width:900px;margin:0 auto;padding:0 12px calc(76px + env(safe-area-inset-bottom,0px));min-height:100%}header.topbar{position:sticky;top:0;z-index:20;background:#0f1115eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:14px 4px 10px;display:flex;align-items:center;justify-content:space-between}header.topbar h1{font-size:1.25rem;margin:0;display:flex;align-items:center;gap:8px}nav.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0px)}nav.tabbar a{flex:1;text-align:center;padding:10px 4px 12px;color:var(--muted);text-decoration:none;font-size:.72rem;display:flex;flex-direction:column;align-items:center;gap:3px}nav.tabbar a.active{color:var(--accent)}nav.tabbar a .ic{font-size:1.3rem}.banner{background:#3a2a12;border:1px solid var(--warn);color:#ffdca8;border-radius:var(--radius);padding:10px 14px;margin:10px 0;font-size:.9rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.thumb{position:relative;aspect-ratio:4 / 3;border-radius:10px;overflow:hidden;background:var(--surface-2);cursor:pointer}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb .tag{position:absolute;left:6px;bottom:6px;background:#000000b3;padding:2px 7px;border-radius:20px;font-size:.72rem}.thumb .act{position:absolute;right:6px;top:6px;font-size:.9rem}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.filters select,.filters input{width:auto;flex:1 1 130px;min-width:120px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.muted{color:var(--muted)}.small{font-size:.85rem}.pill{background:var(--surface-2);border-radius:20px;padding:3px 10px;font-size:.8rem}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:7px 12px;border-radius:20px;background:var(--surface-2);border:1px solid var(--border);font-size:.85rem}.chip.active{background:var(--accent-dark);border-color:var(--accent)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#000000d9;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:16px}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;max-width:560px;width:100%;margin:auto;overflow:hidden}.modal img.full{width:100%;max-height:55vh;object-fit:contain;background:#000}.modal .body{padding:16px}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-card{max-width:340px;width:100%}.field{margin-bottom:12px}.field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:5px}.stat-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.tile{background:var(--surface-2);border-radius:10px;padding:12px}.tile .n{font-size:1.6rem;font-weight:700}.tile .l{font-size:.78rem;color:var(--muted)}.bar-row{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:.85rem}.bar-row .name{width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-track{flex:1;background:var(--surface-2);border-radius:6px;height:16px;overflow:hidden}.bar-fill{height:100%;background:var(--accent-dark)}.bar-row .val{width:30px;text-align:right;color:var(--muted)}.zone-canvas{position:relative;width:100%;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:10px;overflow:hidden}.zone-canvas img{width:100%;display:block}.zone-rect{position:absolute;border:2px solid;border-radius:4px;font-size:.7rem;padding:1px 4px}.zone-rect.futter{border-color:#f5a623;background:#f5a6232e;color:#ffdca8}.zone-rect.traenke{border-color:#4aa3ff;background:#4aa3ff2e;color:#bfe0ff}.heatmap{display:grid;grid-template-columns:auto repeat(24,1fr);gap:2px;font-size:.6rem;overflow-x:auto}.heatmap .cell{aspect-ratio:1;border-radius:2px;background:var(--surface-2)}.heatmap .lbl{color:var(--muted);display:flex;align-items:center}.spinner{text-align:center;padding:30px;color:var(--muted)}.error-box{color:var(--danger);padding:10px}