:root{--bg:#050b14;--panel:#0b1828;--panel2:#0e2034;--line:#17344f;--text:#f4f8fc;--muted:#7f9ab3;--blue:#00a8ff;--blue2:#006dff;--orange:#ff8a00;--green:#00dc82;--red:#ff4d5e;--radius:18px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}button,input{font:inherit}.hidden{display:none!important}.btn{border:0;border-radius:10px;padding:11px 16px;font-weight:800;cursor:pointer}.primary{color:#fff;background:linear-gradient(135deg,var(--blue2),var(--blue))}.secondary{color:#d4e3ef;background:#102236;border:1px solid var(--line)}.ghost{width:100%;color:#a8bdce;background:transparent;border:1px solid #26384a}.kicker{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--blue)}
.login{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:radial-gradient(circle at 20% 20%,rgba(0,168,255,.14),transparent 35%),#050b14}.login-art{display:grid;place-items:center;padding:40px}.login-art img{width:min(680px,90%);border-radius:30px;box-shadow:0 30px 80px #0008}.login-side{display:grid;place-items:center;padding:45px;border-left:1px solid #ffffff0d}.login-card{width:min(440px,100%)}.login-card h1{font-size:42px;margin:14px 0 8px}.login-card p{color:var(--muted);line-height:1.6;margin-bottom:28px}.login-card label{display:block;font-size:13px;font-weight:800;margin:16px 0 7px}.login-card input,.form-grid input,.toolbar input{width:100%;border:1px solid var(--line);outline:0;border-radius:10px;background:#081624;color:#fff;padding:13px}.login-card input:focus,.form-grid input:focus,.toolbar input:focus{border-color:var(--blue)}.login-card .primary{width:100%;margin-top:22px;padding:14px}.login-card small{display:block;text-align:center;color:#67839b;margin-top:20px}.mobile-brand{display:none}
.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:linear-gradient(#06111e,#050b13);border-right:1px solid #112b43;display:flex;flex-direction:column;z-index:50}.brand{height:90px;display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #10283e}.brand img{width:58px;height:58px;object-fit:cover;border-radius:12px}.brand b,.brand span{display:block}.brand span{font-size:10px;color:var(--orange);letter-spacing:1.5px;margin-top:4px}.sidebar nav{padding:18px 12px;flex:1}.nav{width:100%;display:flex;gap:13px;align-items:center;border:0;border-radius:11px;padding:13px 15px;margin:3px 0;background:transparent;color:#8da7be;font-weight:800;text-align:left;cursor:pointer}.nav:hover,.nav.active{color:#fff;background:linear-gradient(90deg,#006dff33,#00a8ff12)}.divider{height:1px;background:#10283e;margin:14px}.sidebar-foot{padding:14px;border-top:1px solid #10283e}.server{display:flex;align-items:center;gap:10px;margin-bottom:13px}.server i,.online-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px #00dc8299}.server b,.server small{display:block}.server small{color:var(--muted);margin-top:3px}
.main{margin-left:260px;min-height:100vh;background:radial-gradient(circle at 85% 0,#006dff12,transparent 30%),#07101b}.topbar{height:90px;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#07101be8;backdrop-filter:blur(16px);border-bottom:1px solid #11283d}.top-title{display:flex;align-items:center}.topbar h2{margin:0;font-size:20px}.topbar p{margin:5px 0 0;color:var(--muted);font-size:12px}.profile{display:flex;align-items:center;gap:10px}.profile b,.profile small{display:block}.profile small{color:var(--muted);margin-top:3px}.avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,var(--blue2),var(--blue));font-weight:900}.hamb{display:none;background:transparent;border:0;color:#fff;font-size:22px}.page{display:none;padding:30px}.page.active{display:block}
.hero{min-height:245px;padding:34px;border:1px solid #173852;border-radius:22px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(100deg,#05111ffc,#071a2cdc);overflow:hidden}.hero h1{font-size:36px;margin:12px 0}.hero h1 span{display:block;font-size:18px;color:var(--orange);margin-top:5px}.hero p{max-width:650px;color:#91aabd;line-height:1.6}.hero img{width:210px;height:210px;object-fit:cover;border-radius:24px;box-shadow:0 15px 40px #0008}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:22px 0}.stats article{display:flex;align-items:center;gap:16px;padding:21px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}.stats article>span{width:48px;height:48px;display:grid;place-items:center;border-radius:13px;background:#00a8ff18;color:var(--blue);font-size:20px}.stats small{color:var(--muted)}.stats b{display:block;font-size:27px;margin-top:5px}.green{color:var(--green)!important}.red{color:var(--red)!important}.orange{color:var(--orange)!important}
.two-cols{display:grid;grid-template-columns:1.4fr .6fr;gap:20px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.panel-head{padding:19px 21px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #173048}.panel-head h3{margin:0}.panel-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.panel-body{padding:18px 21px}.service-list div,.rows div,.camera-summary{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #132b40}.service-list div:last-child,.rows div:last-child{border:0}.service-list b{color:var(--green)}.empty{color:#69859c;text-align:center;padding:42px 20px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.page-head h1{margin:0;font-size:26px}.page-head p{margin:7px 0 0;color:var(--muted)}.toolbar{padding:17px;display:flex;gap:15px;justify-content:space-between;border-bottom:1px solid #173048}.toolbar input{max-width:400px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:14px 17px;text-align:left;border-bottom:1px solid #132b40}th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#69869e}td{color:#c5d5e2}.cam-name b,.cam-name small{display:block}.cam-name small{color:var(--muted);margin-top:4px}.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:20px;font-size:11px;font-weight:900}.badge.online{color:var(--green);background:#00dc8217}.badge.offline{color:var(--red);background:#ff4d5e17}.badge.unknown{color:#ffc43d;background:#ffc43d17}.actions{display:flex;gap:6px}.icon-btn{border:1px solid var(--line);background:#0d1e30;color:#a9bfd0;border-radius:8px;padding:7px 9px;cursor:pointer}.icon-btn:hover{border-color:var(--blue);color:#fff}.icon-btn.danger:hover{border-color:var(--red);color:var(--red)}
.live-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.live-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#050b11}.live-screen{aspect-ratio:16/9;display:grid;place-items:center;text-align:center;color:#6d899f;background:radial-gradient(circle,#10283b,#04090e)}.live-foot{display:flex;justify-content:space-between;align-items:center;padding:13px 15px}.settings{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}.backdrop{position:absolute;inset:0;background:#000b;backdrop-filter:blur(6px)}.modal-card{position:relative;width:min(780px,100%);max-height:92vh;overflow:auto;background:#091625;border:1px solid #1a3d5a;border-radius:20px}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:21px 24px;border-bottom:1px solid #173048}.modal-head h2{margin:6px 0 0}.close{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:#0e2032;color:#fff;font-size:24px;cursor:pointer}#cameraForm{padding:20px 24px 24px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 18px}.form-grid label{font-size:13px;font-weight:800;color:#c7d7e5}.form-grid input{margin-top:7px}.form-grid .wide{grid-column:span 2}.form-grid .check{display:flex;align-items:center;gap:10px;margin-top:12px}.form-grid .check input{width:auto;margin:0}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.alert{padding:11px 13px;margin-top:15px;border-radius:9px;color:#ff9da7;background:#ff4d5e17;border:1px solid #ff4d5e44}.toasts{position:fixed;right:20px;bottom:20px;z-index:200}.toast{min-width:280px;padding:14px 17px;margin-top:10px;border-radius:11px;background:#102338;border:1px solid #285071;box-shadow:0 15px 40px #0007}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.two-cols,.settings{grid-template-columns:1fr}.hero img{width:170px;height:170px}}
@media(max-width:850px){.login{grid-template-columns:1fr}.login-art{display:none}.login-side{min-height:100vh;border:0;padding:25px}.mobile-brand{display:block;text-align:center;margin-bottom:22px}.mobile-brand img{width:145px;border-radius:18px}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.main{margin-left:0}.hamb{display:block;margin-right:10px}.topbar{padding:0 18px}.profile .online-dot{display:none}.hero img{display:none}.live-grid{grid-template-columns:1fr}}
@media(max-width:600px){.page{padding:18px}.stats{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column;gap:15px}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.profile>div:last-child{display:none}.hero h1{font-size:27px}}

/* ==========================================================
   J.M. LAMEIRA - DASHBOARD V2
   ========================================================== */

.dashboard-v2{
    max-width:1800px;
    margin:0 auto;
}

.dash-welcome{
    min-height:270px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    padding:38px 42px;
    border:1px solid #173852;
    border-radius:24px;
    background:
        radial-gradient(circle at 85% 20%,rgba(0,168,255,.18),transparent 30%),
        linear-gradient(110deg,#071523,#081c2e);
}

.dash-welcome:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(0,168,255,.05) 1px,transparent 1px),
        linear-gradient(rgba(0,168,255,.04) 1px,transparent 1px);
    background-size:35px 35px;
    mask-image:linear-gradient(90deg,#000,transparent 75%);
}

.dash-welcome-content{
    position:relative;
    z-index:2;
    max-width:760px;
}

.dash-welcome h1{
    margin:12px 0 12px;
    font-size:40px;
    line-height:1.08;
}

.dash-welcome h1 span{
    color:var(--blue);
}

.dash-welcome p{
    max-width:650px;
    margin:0;
    color:#91aabd;
    line-height:1.7;
}

.dash-actions{
    display:flex;
    gap:12px;
    margin-top:25px;
}

.dash-brand-visual{
    position:relative;
    z-index:2;
    width:230px;
    text-align:center;
}

.dash-brand-visual img{
    width:190px;
    height:190px;
    object-fit:contain;
    filter:drop-shadow(0 20px 35px rgba(0,0,0,.55));
}

.dash-brand-visual span{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:5px;
    color:#7f9eb4;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.6px;
}

.dash-brand-visual span i,
.health-status i,
.service-name > i{
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 12px rgba(0,220,130,.65);
}

.dash-stats{
    margin:20px 0;
}

.stats .stat-card{
    position:relative;
    overflow:hidden;
    min-height:125px;
    padding:22px;
    transition:.2s ease;
}

.stats .stat-card:hover{
    transform:translateY(-2px);
    border-color:#24577b;
}

.stat-icon{
    width:50px !important;
    height:50px !important;
    flex:0 0 50px;
    border-radius:14px !important;
    font-size:19px !important;
}

.stat-icon.blue{
    color:#24baff;
    background:rgba(0,168,255,.12) !important;
}

.stat-icon.green{
    color:var(--green) !important;
    background:rgba(0,220,130,.10) !important;
}

.stat-icon.red{
    color:var(--red) !important;
    background:rgba(255,77,94,.10) !important;
}

.stat-icon.orange{
    color:var(--orange) !important;
    background:rgba(255,138,0,.10) !important;
}

.stat-content{
    min-width:0;
}

.stat-content small{
    display:block;
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
}

.stat-content b{
    font-size:31px !important;
    line-height:1;
    margin:7px 0 !important;
}

.stat-content span{
    color:#68869d;
    font-size:10px;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(340px,.55fr);
    gap:20px;
}

.dashboard-grid .panel{
    min-height:330px;
}

.panel-kicker{
    margin-bottom:6px;
    color:var(--blue);
    font-size:8px;
    font-weight:900;
    letter-spacing:1.7px;
}

.health-status{
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    color:var(--green);
    border:1px solid rgba(0,220,130,.18);
    border-radius:20px;
    background:rgba(0,220,130,.06);
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
}

.dash-services > div{
    min-height:57px;
    align-items:center;
}

.service-name{
    display:flex;
    align-items:center;
    gap:12px;
}

.service-name span{
    display:flex;
    flex-direction:column;
}

.service-name strong{
    color:#dbe9f3;
    font-size:12px;
}

.service-name small{
    margin-top:4px;
    color:#607e95;
    font-size:9px;
}

.dash-bottom{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:20px;
}

.dash-info-card{
    min-height:105px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--panel);
    transition:.2s ease;
}

.dash-info-card:hover{
    border-color:#24577b;
    transform:translateY(-2px);
}

.dash-info-icon{
    width:45px;
    height:45px;
    flex:0 0 45px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:var(--blue);
    background:rgba(0,168,255,.10);
}

.dash-info-card > div:nth-child(2){
    min-width:0;
    flex:1;
}

.dash-info-card small,
.dash-info-card strong,
.dash-info-card span{
    display:block;
}

.dash-info-card small{
    color:#5d829b;
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
}

.dash-info-card strong{
    margin:4px 0;
    color:#e8f2f8;
    font-size:13px;
}

.dash-info-card span{
    color:#68869d;
    font-size:10px;
}

.dash-info-card button{
    width:36px;
    height:36px;
    flex:0 0 36px;
    border:1px solid #1d4563;
    border-radius:10px;
    color:#8bdcff;
    background:#0b2032;
    cursor:pointer;
}

.dash-info-card button:hover{
    color:white;
    border-color:var(--blue);
    background:#0d2a40;
}

/* ===== TABLET ===== */

@media(max-width:1100px){

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .dash-bottom{
        grid-template-columns:1fr 1fr;
    }

    .dash-brand-visual{
        width:190px;
    }

    .dash-brand-visual img{
        width:160px;
        height:160px;
    }
}

/* ===== MOBILE ===== */

@media(max-width:600px){

    .dashboard-v2{
        padding:15px;
    }

    .dash-welcome{
        min-height:auto;
        padding:25px 20px;
        border-radius:19px;
    }

    .dash-welcome h1{
        font-size:29px;
    }

    .dash-welcome p{
        font-size:13px;
    }

    .dash-brand-visual{
        display:none;
    }

    .dash-actions{
        flex-direction:column;
    }

    .dash-actions .btn{
        width:100%;
    }

    .dash-stats{
        grid-template-columns:1fr 1fr;
        gap:11px;
    }

    .stats .stat-card{
        min-height:115px;
        padding:15px;
        gap:11px;
    }

    .stat-icon{
        width:40px !important;
        height:40px !important;
        flex-basis:40px;
    }

    .stat-content b{
        font-size:25px !important;
    }

    .stat-content span{
        display:none;
    }

    .dashboard-grid{
        gap:14px;
    }

    .dashboard-grid .panel{
        min-height:auto;
    }

    .panel-head{
        padding:17px;
    }

    .health-status{
        display:none;
    }

    .dash-bottom{
        grid-template-columns:1fr;
        gap:11px;
    }

    .dash-info-card{
        min-height:90px;
    }
}

@media(max-width:390px){

    .dash-stats{
        grid-template-columns:1fr;
    }
}