:root {
    --bg:#06090f;--surface:#0c1219;--surface-2:#111a25;--surface-3:#182430;
    --accent:#00e5a0;--accent-glow:rgba(0,229,160,0.15);--accent-dim:rgba(0,229,160,0.08);
    --danger:#ff3b5c;--danger-dim:rgba(255,59,92,0.1);
    --text:#dde4ed;--text-muted:#556a80;--border:#1a2738;
    --sidebar-w:240px;--radius:6px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Syne',sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* LOGIN */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at 20% 80%,rgba(0,229,160,.04) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(0,50,80,.1) 0%,transparent 50%),var(--bg)}
.login-container{width:100%;max-width:400px;padding:2.5rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;animation:fadeUp .5s ease}
.login-brand{text-align:center;margin-bottom:2rem}
.brand-icon{font-size:2.5rem;color:var(--accent);display:block;margin-bottom:.5rem}
.login-brand h1{font-family:'Orbitron',sans-serif;font-size:1.8rem;font-weight:700;letter-spacing:.15em}
.login-brand p{color:var(--text-muted);font-family:'DM Mono',monospace;font-size:.8rem;margin-top:.25rem}

/* APP LAYOUT */
body{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);min-height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100}
.sidebar-brand{padding:1.5rem 1.25rem;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--border)}
.sidebar-brand .brand-icon{font-size:1.5rem;color:var(--accent);margin:0}
.brand-text{font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:.12em}
.nav-menu{list-style:none;padding:1rem .75rem;flex:1}
.nav-menu li+li{margin-top:.25rem}
.nav-link{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;color:var(--text-muted);text-decoration:none;border-radius:var(--radius);font-weight:500;transition:all .2s;font-size:.9rem}
.nav-link:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.nav-link.active{color:var(--accent);background:var(--accent-dim)}
.nav-icon{font-size:1rem;width:1.25rem;text-align:center}
.sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border)}
.user-info{display:flex;flex-direction:column;margin-bottom:.5rem}
.user-name{font-weight:600;font-size:.85rem}
.user-role{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.nav-link-logout{color:var(--danger);font-size:.8rem;padding:.4rem .85rem}
.main-content{margin-left:var(--sidebar-w);padding:2rem 2.5rem;flex:1;min-height:100vh}

/* PAGE HEADER */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.page-header h2{font-family:'Orbitron',sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:.06em}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.2rem;border:1px solid transparent;border-radius:var(--radius);font-family:'Syne',sans-serif;font-weight:600;font-size:.85rem;cursor:pointer;text-decoration:none;transition:all .2s;line-height:1.4}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#06090f;border-color:var(--accent)}
.btn-primary:hover{background:#00ffba;letter-spacing:.04em}
.btn-accent{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-dim)}
.btn-ghost{background:transparent;color:var(--text-muted);border-color:var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--text-muted)}
.btn-danger{background:var(--danger-dim);color:var(--danger);border-color:rgba(255,59,92,.3)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:.3rem .7rem;font-size:.75rem}
.btn-full{width:100%;justify-content:center}
.btn-close{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;line-height:1;padding:.25rem}
.btn-close:hover{color:var(--text)}

/* FORMS */
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-weight:600;font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.form-group input,.form-group select{width:100%;padding:.65rem .85rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:'DM Mono',monospace;font-size:.85rem;transition:border-color .2s}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.form-group small{display:block;margin-top:.3rem;font-size:.75rem;color:var(--text-muted)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-inline{display:flex;align-items:flex-end;gap:1rem}
.form-inline .form-group{flex:1;margin-bottom:0}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:2rem;margin-bottom:1.5rem;animation:fadeUp .4s ease}
.form-card h3{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.04em;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
.form-actions{display:flex;gap:.75rem;margin-top:1.5rem}

/* ALERTS */
.alert{padding:.75rem 1rem;border-radius:var(--radius);margin-bottom:1.25rem;font-size:.85rem;font-weight:500}
.alert-success{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(0,229,160,.2)}
.alert-error{background:var(--danger-dim);color:var(--danger);border:1px solid rgba(255,59,92,.2)}

/* BADGE */
.badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-family:'DM Mono',monospace;font-size:.7rem;font-weight:500;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}
.badge-accent{background:var(--accent-dim);color:var(--accent);border-color:rgba(0,229,160,.2)}

/* TABLE */
.table-wrapper{overflow-x:auto;animation:fadeUp .4s ease}
.data-table{width:100%;border-collapse:collapse}
.data-table thead{background:var(--surface)}
.data-table th{padding:.75rem 1rem;text-align:left;font-family:'Orbitron',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);border-bottom:2px solid var(--border)}
.data-table td{padding:.7rem 1rem;border-bottom:1px solid var(--border);font-size:.85rem;vertical-align:middle}
.data-table tr:hover{background:var(--surface-2)}
.data-table code{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--accent);background:var(--accent-dim);padding:.15rem .5rem;border-radius:4px}
.td-mono{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--text-muted)}
.td-url{font-family:'DM Mono',monospace;font-size:.78rem;color:var(--text-muted);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-actions{white-space:nowrap;display:flex;gap:.4rem;flex-wrap:wrap}

/* CAMERA GRID */
.camera-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;animation:fadeUp .4s ease}
.camera-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.camera-card:hover{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}
.camera-preview{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0a0a}
.camera-preview img{width:100%;height:100%;object-fit:cover;display:block}
.no-signal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:.85rem;color:var(--text-muted);background:#0a0a0a}
.camera-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}
.camera-card:hover .camera-overlay{opacity:1}
.camera-info{padding:.75rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.camera-id{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--accent);opacity:.7}
.camera-name{font-weight:600;font-size:.9rem}

/* LAYOUT GRID */
.layout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.layout-item{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.layout-preview{aspect-ratio:16/10;overflow:hidden;background:#0a0a0a}
.layout-preview img{width:100%;height:100%;object-fit:cover}
.layout-info{padding:.5rem .75rem;display:flex;align-items:center;justify-content:space-between;font-size:.8rem}

/* MODAL - Z-INDEX ALTO */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:99999;backdrop-filter:blur(4px)}
.modal-overlay.active{display:flex}
.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;animation:fadeUp .3s ease}
.modal-live{width:90vw;max-width:1280px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid var(--border)}
.modal-header h3{font-family:'Orbitron',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:.04em}
.modal-body{padding:0;position:relative}
.live-stream{width:100%;display:block;background:#000;min-height:400px}
.stream-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--accent);font-family:'DM Mono',monospace;font-size:.85rem}

/* EMPTY */
.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-muted)}
.empty-state p{margin-bottom:1.5rem;font-size:1rem}

/* FOOTER */
.app-footer{margin-left:var(--sidebar-w);padding:1.5rem 2.5rem;border-top:1px solid var(--border);font-family:'DM Mono',monospace;font-size:.7rem;color:var(--text-muted);text-align:center}
.text-muted{color:var(--text-muted)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* GRAIN - z-index baixo para não cobrir modal */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E")}

/* RESPONSIVE */
@media(max-width:768px){.sidebar{display:none}.main-content,.app-footer{margin-left:0}.form-row{grid-template-columns:1fr}.camera-grid{grid-template-columns:1fr}.modal-live{width:98vw}.main-content{padding:1rem}}