:root{--primary: #7366ff;--primary-hover: #5b4dff;--primary-soft: #efeefe;--danger: #fc564a;--danger-hover: #e83a2e;--success: #54ba4a;--warning: #ffaa05;--text: #2f2f3b;--text-muted: #898ea5;--text-strong: #1f1f2c;--border: #e5e7eb;--border-soft: #f1f2f4;--bg-page: #f7f8f9;--bg-surface: #ffffff;--bg-soft: #fafafb;--sidebar-width: 256px;--header-height: 64px;--radius: 8px;--radius-sm: 6px;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);--shadow: 0 2px 8px rgba(15, 23, 42, .06);--shadow-lg: 0 10px 30px rgba(115, 102, 255, .12);color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg-page);color:var(--text);font-family:Rubik,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4{color:var(--text-strong);margin:0;font-weight:600}h1{font-size:22px}h2{font-size:18px}h3{font-size:16px}.muted{color:var(--text-muted);font-size:12px}.error{color:var(--danger);font-size:13px;margin-top:8px}button{background:var(--primary);color:#fff;border:0;border-radius:var(--radius-sm);padding:9px 16px;cursor:pointer;font-size:13px;font-weight:500;font-family:inherit;transition:background .15s,transform .05s}button:hover{background:var(--primary-hover)}button:active{transform:translateY(1px)}button:disabled{background:#c4c7d4;cursor:not-allowed}button.secondary{background:#fff;color:var(--text);border:1px solid var(--border)}button.secondary:hover{background:var(--bg-page);border-color:#d4d6dc}button.danger{background:var(--danger)}button.danger:hover{background:var(--danger-hover)}button.ghost{background:transparent;color:var(--text-muted);padding:6px 10px}button.ghost:hover{background:var(--border-soft);color:var(--text)}button.icon-btn{background:var(--primary-soft);color:var(--primary);padding:7px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center}button.icon-btn:hover{background:var(--primary);color:#fff}input,select,textarea{background:#fff;color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;font-family:inherit;width:100%;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #7366ff26}label{font-size:12px;color:var(--text-muted);display:block;margin-bottom:6px;font-weight:500}.app-shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:var(--header-height) 1fr;min-height:100vh}.sidebar{grid-row:1 / span 2;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar-brand{height:var(--header-height);display:flex;align-items:center;gap:10px;padding:0 22px;border-bottom:1px solid var(--border-soft)}.sidebar-brand .logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#a48fff);display:grid;place-items:center;color:#fff;font-weight:700;box-shadow:var(--shadow-lg)}.sidebar-brand .brand-name{font-weight:600;color:var(--text-strong);font-size:15px}.sidebar-nav{padding:16px 12px;flex:1;overflow-y:auto}.sidebar-group{text-transform:uppercase;font-size:10px;letter-spacing:.08em;color:var(--text-muted);padding:14px 12px 6px;font-weight:600}.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-weight:500;margin-bottom:2px;cursor:pointer;transition:background .15s,color .15s}.sidebar-item:hover{background:var(--border-soft);text-decoration:none}.sidebar-item.active{background:var(--primary-soft);color:var(--primary)}.sidebar-item.active .sidebar-icon{color:var(--primary)}.sidebar-icon{width:18px;height:18px;color:var(--text-muted);flex-shrink:0}.topbar{background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;grid-column:2}.topbar h1{font-size:18px}.topbar .breadcrumb{display:flex;gap:8px;align-items:center;color:var(--text-muted);font-size:12px}.topbar-right{display:flex;gap:14px;align-items:center}.user-chip{display:flex;align-items:center;gap:10px;padding:6px 10px}.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#a48fff);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}.user-info{line-height:1.2}.user-info .name{font-size:13px;font-weight:600;color:var(--text-strong)}.user-info .role{font-size:11px;color:var(--text-muted)}.main{grid-column:2;padding:24px 28px;overflow-y:auto}.card{background:var(--bg-surface);border-radius:var(--radius);border:1px solid var(--border-soft);box-shadow:var(--shadow-sm);padding:20px;margin-bottom:18px}.card-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border-soft)}.card-header h3{font-size:15px}.card-header .subtitle{color:var(--text-muted);font-size:12px;margin-top:4px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}.player-card{background:var(--bg-surface);border-radius:var(--radius);border:1px solid var(--border-soft);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .15s,box-shadow .15s}.player-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.player-card video{width:100%;aspect-ratio:16/9;background:#0b0d10;display:block}.player-card .meta{padding:12px 16px;display:flex;justify-content:space-between;align-items:center}.player-card .meta strong{color:var(--text-strong);font-weight:600}.status-pill{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:500;background:var(--border-soft);color:var(--text-muted)}.status-pill.live{background:#e7f6e8;color:var(--success)}.status-pill.error{background:#ffe5e3;color:var(--danger)}.status-pill.warning{background:#fff4dc;color:var(--warning)}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--border-soft)}th{color:var(--text-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--bg-soft)}tbody tr:hover{background:var(--bg-soft)}.tabs{display:flex;gap:4px;margin-bottom:18px;background:#fff;padding:6px;border-radius:var(--radius);border:1px solid var(--border-soft);width:fit-content;box-shadow:var(--shadow-sm)}.tab{padding:8px 16px;background:transparent;color:var(--text-muted);border-radius:var(--radius-sm);font-size:13px;font-weight:500;text-transform:capitalize}.tab:hover{background:var(--border-soft);color:var(--text)}.tab.active{background:var(--primary);color:#fff}.tab.active:hover{background:var(--primary-hover)}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#f7f8f9,#efeefe)}.login-card{width:100%;max-width:400px;padding:36px 32px;background:#fff;border-radius:12px;box-shadow:0 20px 60px #7366ff2e}.login-card .login-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px}.login-card .login-brand .logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#a48fff);display:grid;place-items:center;color:#fff;font-weight:700;font-size:22px;box-shadow:var(--shadow-lg)}.login-card h2{font-size:22px}.login-card .subtitle{color:var(--text-muted);font-size:13px;margin-top:4px}.form-row{margin-bottom:14px}.checkbox-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}.checkbox-list label{background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--text);margin:0;font-size:13px;font-weight:500;transition:background .15s,border-color .15s}.checkbox-list label:hover{background:var(--primary-soft);border-color:var(--primary)}.checkbox-list label:has(input:checked){background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}.checkbox-list input{width:auto;accent-color:var(--primary)}.empty{text-align:center;padding:40px 20px;color:var(--text-muted)}.empty-icon{font-size:32px;margin-bottom:8px;opacity:.6}.form-inline{display:grid;gap:10px;align-items:end}.form-inline.users{grid-template-columns:1fr 1fr 140px auto}.form-inline.cameras{grid-template-columns:1fr 2fr auto}.form-inline.apikeys{grid-template-columns:1fr 220px 160px auto}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}.table-scroll table{min-width:640px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;display:grid;place-items:center;padding:20px;z-index:200;animation:fade-in .12s ease-out}.modal{background:#fff;border-radius:12px;padding:22px;width:100%;max-width:380px;box-shadow:0 24px 60px #0f172a40}.modal h3{font-size:16px;margin-bottom:10px}.modal-body{font-size:13px;color:var(--text);line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.toast-stack{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:300;width:min(92vw,360px);pointer-events:none}.toast{padding:11px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;color:#fff;box-shadow:var(--shadow);text-align:center;animation:toast-in .18s ease-out}.toast.success{background:var(--success)}.toast.error{background:var(--danger)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.menu-btn,.sidebar-close,.sidebar-backdrop{display:none}.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}@media (max-width: 900px){:root{--sidebar-width: 0px}.sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;z-index:120;transform:translate(-100%);transition:transform .22s ease-out;box-shadow:none}.sidebar.open{transform:translate(0);box-shadow:0 0 40px #0f172a4d}.sidebar-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a66;z-index:110;opacity:0;pointer-events:none;transition:opacity .22s}.sidebar-backdrop.show{opacity:1;pointer-events:auto}.sidebar-close{display:inline-flex;margin-left:auto;font-size:16px}.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0}.menu-bars{display:block;width:18px;height:2px;background:var(--text-strong);border-radius:2px;position:relative}.menu-bars:before,.menu-bars:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text-strong);border-radius:2px}.menu-bars:before{top:-6px}.menu-bars:after{top:6px}.app-shell{grid-template-columns:1fr}.topbar{grid-column:1;padding:0 14px;gap:8px}.main{grid-column:1;padding:16px 14px}.user-info{display:none}.user-chip{padding:6px 2px}.breadcrumb{display:none}.form-inline.users,.form-inline.cameras,.form-inline.apikeys{grid-template-columns:1fr}.card{padding:16px}.card-header{flex-wrap:wrap;gap:10px}.checkbox-list{grid-template-columns:1fr}}