:root{--bg:#f4f6f9;--bg-elevated:#fff;--bg-soft:#eef2f7;--border:#d8e0ea;--text:#1a2332;--muted:#66788c;--accent:#c9851a;--accent-dim:#a86c10;--accent-soft:#c9851a1f;--ok:#1f9a5c;--warn:#c9851a;--danger:#d64545;--info:#2b7fc4;--sidebar:260px;--sidebar-collapsed:76px;--shadow:0 8px 28px #1a233214;--font:"Segoe UI", "Helvetica Neue", sans-serif;--display:"Trebuchet MS", "Segoe UI", sans-serif;--ease:.22s ease}*{box-sizing:border-box}html,body,#root{min-height:100%;font-family:var(--font);background:var(--bg);color:var(--text);margin:0}body{background:radial-gradient(1100px 520px at 8% -8%, #c9851a1a, transparent 55%), radial-gradient(900px 480px at 100% 0%, #2b7fc414, transparent 50%), var(--bg)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{grid-template-columns:var(--sidebar) 1fr;min-height:100vh;transition:grid-template-columns var(--ease);display:grid}.app-shell.sidebar-collapsed{grid-template-columns:var(--sidebar-collapsed) 1fr}.sidebar{border-right:1px solid var(--border);background:linear-gradient(#fff 0%,#f5f8fc 100%);flex-direction:column;gap:.75rem;height:100vh;padding:.9rem .7rem;display:flex;position:sticky;top:0;overflow:hidden;box-shadow:2px 0 18px #1a23320b}.sidebar-top{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-start;gap:.35rem;padding:.15rem .2rem .65rem;display:flex}.brand{align-items:center;gap:.7rem;min-width:0;padding:.15rem .2rem;display:flex}.brand-mark{width:38px;height:38px;font-family:var(--display);letter-spacing:.04em;color:#fff;background:linear-gradient(145deg,#d4982a 0%,#a86c10 100%);border-radius:10px;flex-shrink:0;place-items:center;font-size:.78rem;font-weight:700;display:grid;box-shadow:0 4px 12px #a86c1047}.brand-text{min-width:0;overflow:hidden}.brand h1{font-family:var(--display);letter-spacing:.02em;color:var(--text);white-space:nowrap;margin:0;font-size:1.05rem}.brand p{color:var(--muted);white-space:nowrap;margin:.15rem 0 0;font-size:.72rem}.sidebar-toggle{border:1px solid var(--border);background:var(--bg-elevated);width:32px;height:32px;color:var(--muted);transition:background var(--ease), color var(--ease), border-color var(--ease);border-radius:8px;flex-shrink:0;place-items:center;padding:0;display:grid}.sidebar-toggle:hover{background:var(--bg-soft);color:var(--text);border-color:#c5d0dd}.nav{scrollbar-width:thin;flex-direction:column;flex:1;gap:.85rem;padding:.25rem .15rem;display:flex;overflow:hidden auto}.nav-group{flex-direction:column;gap:.2rem;display:flex}.nav-group-label{letter-spacing:.08em;text-transform:uppercase;color:#8a9aab;white-space:nowrap;padding:.2rem .75rem .35rem;font-size:.68rem;font-weight:700;overflow:hidden}.nav a{color:var(--muted);transition:background var(--ease), color var(--ease), box-shadow var(--ease);border-radius:10px;align-items:center;gap:.7rem;min-height:40px;padding:.62rem .75rem;display:flex;position:relative}.nav a:hover{background:var(--bg-soft);color:var(--text)}.nav a.active{background:var(--accent-soft);color:var(--accent-dim);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}.nav-icon{flex-shrink:0;place-items:center;width:20px;height:20px;display:grid}.nav-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sidebar-foot{border-top:1px solid var(--border);flex-direction:column;gap:.55rem;padding:.75rem .2rem .2rem;display:flex}.user-chip{align-items:center;gap:.65rem;min-width:0;padding:.35rem .4rem;display:flex}.user-avatar{width:34px;height:34px;color:var(--accent-dim);background:var(--accent-soft);border:1px solid #c9851a38;border-radius:10px;flex-shrink:0;place-items:center;font-size:.72rem;font-weight:700;display:grid}.user-meta{min-width:0;overflow:hidden}.user-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:600;overflow:hidden}.user-role{color:var(--muted);text-transform:capitalize;white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.logout-btn{justify-content:center;align-items:center;gap:.55rem;width:100%;padding:.55rem .75rem;display:flex}.app-shell.sidebar-collapsed .brand-text,.app-shell.sidebar-collapsed .nav-group-label,.app-shell.sidebar-collapsed .nav-label,.app-shell.sidebar-collapsed .user-meta{display:none}.app-shell.sidebar-collapsed .sidebar-top{flex-direction:column;align-items:center;gap:.45rem}.app-shell.sidebar-collapsed .brand{justify-content:center;padding:0}.app-shell.sidebar-collapsed .nav a{justify-content:center;padding:.7rem .45rem}.app-shell.sidebar-collapsed .nav a.active{box-shadow:none}.app-shell.sidebar-collapsed .user-chip{justify-content:center;padding:.25rem}.app-shell.sidebar-collapsed .logout-btn{padding:.55rem}.main{min-width:0;padding:1.5rem 1.75rem 2rem;overflow:auto}.page-head{justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.25rem;display:flex}.page-head h2{font-family:var(--display);color:var(--text);margin:0;font-size:1.6rem}.page-head p{color:var(--muted);margin:.35rem 0 0}.grid{gap:1rem;display:grid}.grid.stats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.card{background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:1rem 1.1rem}.stat .label{color:var(--muted);font-size:.8rem}.stat .value{color:var(--text);margin-top:.35rem;font-size:1.7rem;font-weight:700}.btn{background:var(--accent);color:#fff;border:1px solid #0000;border-radius:8px;padding:.55rem .95rem;font-weight:600}.btn:hover{background:var(--accent-dim)}.btn.secondary{background:var(--bg-elevated);border-color:var(--border);color:var(--text)}.btn.secondary:hover{background:var(--bg-soft)}.btn.danger{background:var(--danger);color:#fff}.btn:disabled{opacity:.55;cursor:not-allowed}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:.92rem}th,td{text-align:left;border-bottom:1px solid var(--border);padding:.7rem .6rem}th{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;background:var(--bg-soft);font-size:.78rem;font-weight:600}tbody tr:hover{background:#eef2f7b3}.badge{text-transform:uppercase;border-radius:999px;padding:.15rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}.badge.paid{color:var(--ok);background:#1f9a5c24}.badge.unpaid,.badge.review{color:var(--danger);background:#d645451f}.badge.manual,.badge.bypass{color:var(--info);background:#2b7fc41f}.form{gap:.75rem;display:grid}.form.row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}label{color:var(--muted);gap:.35rem;font-size:.85rem;display:grid}label.check{color:var(--text);cursor:pointer;flex-direction:row;align-items:flex-start;gap:.55rem;display:flex}label.check input[type=checkbox]{width:auto;accent-color:var(--accent);flex-shrink:0;margin-top:.2rem}input,select,textarea{border:1px solid var(--border);color:var(--text);background:#fff;border-radius:8px;padding:.55rem .7rem}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid #c9851a59}.login-page{place-items:center;min-height:100vh;padding:1rem;display:grid}.login-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px;width:min(420px,100%);padding:2rem 1.75rem;box-shadow:0 20px 50px #1a23321a}.login-card h1{font-family:var(--display);color:var(--accent);margin:0 0 .25rem}.login-card .sub{color:var(--muted);margin-bottom:1.5rem}.error{color:var(--danger);font-size:.9rem}.success{color:var(--ok);font-size:.9rem}.cameras-grid{grid-template-columns:repeat(auto-fill,minmax(280px,360px));align-items:start;gap:1rem;display:grid}.camera-tile{max-width:360px}.camera-feed{background:#1a2332;width:100%;height:100%;position:relative;overflow:hidden}.camera-feed img{object-fit:cover;background:#1a2332;width:100%;height:100%;transition:opacity .2s;display:block}.camera-feed img.is-pending{opacity:0}.camera-feed img.is-ready{opacity:1}.camera-feed-overlay{z-index:2;color:#c8d2de;background:#1a2332;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;display:flex;position:absolute;inset:0}.camera-feed-overlay .loader-label{color:#c8d2de;font-size:.9rem}.camera-feed-live{z-index:3;color:#fff;letter-spacing:.06em;pointer-events:none;background:#d64545e6;border-radius:4px;padding:.2rem .45rem;font-size:.65rem;font-weight:700;position:absolute;top:8px;right:8px}.camera-tile .preview-wrap{border:1px solid var(--border);cursor:zoom-in;background:#1a2332;border-radius:8px;width:100%;height:200px;padding:0;display:block;position:relative;overflow:hidden}.camera-tile .preview-click{border:1px solid var(--border)}.camera-tile .preview-click:hover{border-color:var(--accent)}.camera-modal{z-index:1000;background:#1a23328c;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.camera-modal-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;width:min(1100px,96vw);overflow:hidden;box-shadow:0 24px 80px #1a233233}.camera-modal-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;display:flex}.camera-modal-body{background:#1a2332;height:min(78vh,720px)}.camera-modal-body .camera-feed{height:100%}.camera-modal-body .camera-feed img{object-fit:contain}.camera-tile .preview-wrap .camera-feed{pointer-events:none;height:100%}.camera-tile .detect-badge{color:var(--text);border:1px solid var(--border);background:#ffffffeb;border-radius:6px;padding:.25rem .5rem;font-size:.75rem;position:absolute;top:8px;left:8px}.camera-tile .meta{color:var(--muted);justify-content:space-between;margin-top:.5rem;font-size:.85rem;display:flex}.status-dot{border-radius:50%;width:8px;height:8px;margin-right:.35rem;display:inline-block}.status-dot.connected{background:var(--ok)}.status-dot.error,.status-dot.stopped{background:var(--danger)}.status-dot.connecting,.status-dot.reconnecting{background:var(--warn)}.toolbar{flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1rem;display:flex}.muted{color:var(--muted)}.plate-missing{color:var(--muted);font-size:.9rem;font-style:italic;font-weight:500}.evidence-none{color:var(--muted)}.evidence-btn{border:1px solid var(--border);background:var(--bg-elevated);width:34px;height:34px;color:var(--accent);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0;display:inline-flex}.evidence-btn:hover{border-color:var(--accent);background:#fff}.evidence-modal{z-index:1100;background:#1a23328c;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.evidence-modal-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;width:min(720px,96vw);overflow:hidden;box-shadow:0 24px 80px #1a233233}.evidence-modal-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;display:flex}.evidence-modal-body{background:#1a2332;place-items:center;min-height:220px;max-height:min(70vh,560px);padding:.75rem;display:grid}.evidence-modal-body img{object-fit:contain;border-radius:6px;max-width:100%;max-height:min(68vh,540px)}.password-field{grid-template-columns:1fr auto;align-items:stretch;gap:.45rem;display:grid}.password-field input{width:100%}.password-toggle{white-space:nowrap;padding-inline:.75rem}.loader-wrap{min-height:160px;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:.85rem;padding:2.5rem 1rem;display:flex}.loader-wrap.inline{flex-direction:row;min-height:0;padding:1rem}.loader-wrap.page{min-height:50vh}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.75s linear infinite spin}.spinner.sm{border-width:2px;width:18px;height:18px}.btn .spinner.sm{vertical-align:middle;margin-right:.4rem;display:inline-block}.loader-label{font-size:.9rem}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.app-shell,.app-shell.sidebar-collapsed{grid-template-columns:1fr}.sidebar{z-index:10;height:auto;max-height:none;position:sticky;top:0;overflow:visible}.sidebar-top{align-items:center}.nav{flex-flow:wrap;gap:.45rem;overflow:visible}.nav-group{flex-flow:wrap;gap:.25rem}.nav-group-label{width:100%;padding:.35rem .5rem .1rem}.app-shell.sidebar-collapsed .brand-text,.app-shell.sidebar-collapsed .nav-group-label,.app-shell.sidebar-collapsed .nav-label,.app-shell.sidebar-collapsed .user-meta{display:block}.app-shell.sidebar-collapsed .sidebar-top{flex-direction:row;align-items:center}.app-shell.sidebar-collapsed .nav a{justify-content:flex-start;padding:.62rem .75rem}.app-shell.sidebar-collapsed .logout-btn .nav-label{display:inline}.sidebar-toggle{display:none}.sidebar-foot{flex-direction:row;justify-content:space-between;align-items:center}.logout-btn{width:auto}}