:root{--bg:#020712;--panel:#061426;--panel2:#081a30;--line:rgba(67,139,229,.20);--text:#f4f8ff;--muted:#8ea3bd;--blue:#0a7cff;--cyan:#1bdcff;--green:#18df78;--yellow:#ffb020}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 48% 0,#0b203b 0,#020712 72%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
.app{height:100vh;display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:72px minmax(0,1fr)}
.top{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(2,7,18,.94)}


.brand{
    display:flex;
    align-items:center;
    height:100%;
}

.logo{
    width:286px;
    height:58px;
    padding-right:22px;
    border-right:1px solid var(--line);

    display:flex;
    align-items:center;

    text-decoration:none;
    cursor:pointer;

    transition:
        transform .2s ease,
        filter .2s ease,
        opacity .2s ease;
}

.logo:hover{
    transform:translateY(-2px);
    filter:brightness(1.18);
}

.logo:focus-visible{
    outline:2px solid #168fff;
    outline-offset:5px;
    border-radius:6px;
}

.logo img{
    display:block;
    max-width:260px;
    max-height:54px;
    object-fit:contain;
}


.product{padding-left:24px}.product h1{margin:0;color:#fff;font-size:23px;font-weight:900}
.product h1 span{color:var(--blue);font-weight:800}
.product p{margin:6px 0 0;color:var(--muted);font-size:11px}

.argos-emblem{margin-left:18px;display:flex;align-items:center;}
.argos-emblem img{height:82px;width:auto;object-fit:contain;filter:drop-shadow(0 0 12px rgba(0,170,255,.35));}

.summary{display:flex;align-items:center;gap:18px}.summary-box{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:rgba(6,20,38,.85)}.summary-box div{padding:8px 16px;min-width:90px;border-right:1px solid var(--line)}.summary-box div:last-child{border:0}.summary-box span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.summary-box b{display:block;margin-top:4px;font-size:14px}.top-icons{font-size:25px;letter-spacing:10px}
.side{grid-row:2;padding:14px 12px;border-right:1px solid var(--line);background:rgba(3,11,24,.9);display:flex;flex-direction:column;justify-content:space-between}.menu{display:flex;flex-direction:column;gap:6px}.mi{height:46px;border-radius:8px;display:flex;align-items:center;gap:13px;padding:0 14px;color:var(--muted);font-weight:600}.mi.active{background:linear-gradient(135deg,#075ee4,#0b7cff);color:#fff;box-shadow:0 6px 18px rgba(8,119,255,.25)}.ico{width:24px;text-align:center;font-size:21px}.admin{border-top:1px solid var(--line);padding-top:14px}.admin-row{display:flex;gap:10px;align-items:center}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#15223d;font-size:20px}.admin small,.clock{color:var(--muted);font-size:10px}.clock{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.04)}.online{margin-top:7px;color:var(--green);font-weight:800}.online:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 8px var(--green)}
.main{grid-column:2;grid-row:2;padding:10px;display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);grid-template-rows:238px minmax(0,1fr) 68px;gap:9px;overflow:hidden}.panel{min-width:0;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:linear-gradient(145deg,rgba(7,24,45,.92),rgba(3,12,25,.94))}
.bridges{grid-column:1/3;padding:11px 13px}.title{margin:0 0 8px;font-size:15px;font-weight:900}.bridge-grid{height:calc(100% - 25px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.bridge{display:grid;grid-template-rows:46px minmax(0,1fr) 38px;border:1px solid rgba(80,150,235,.30);border-radius:9px;overflow:hidden;background:#061222;cursor:pointer}.bridge.active{border:2px solid var(--blue);box-shadow:0 0 16px rgba(10,124,255,.30)}.bridge-head{display:flex;justify-content:space-between;align-items:center;padding:6px 10px 5px;min-height:46px}.bridge-head b{font-size:12px;line-height:1.1}.bridge-head span{display:block;color:#b7c8db;font-size:9px;line-height:1.1;margin-top:3px}.dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.bridge.active .dot{background:var(--blue);box-shadow:0 0 8px var(--blue)}.bridge-img{margin:0 8px 6px;border-radius:7px;overflow:hidden;background:#020812}.bridge-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.bridge-meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.bridge-meta div{display:flex;align-items:center;justify-content:center;gap:6px;border-right:1px solid var(--line);font-size:10px}.bridge-meta div:last-child{border:0}.bridge-meta .micon{font-size:16px}
.details{padding:12px;display:grid;grid-template-rows:auto auto 102px auto 66px;align-content:start;row-gap:8px}.details h2{margin:0 0 8px;font-size:18px}.info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-bottom:7px;border-bottom:1px solid var(--line)}.info-item{display:flex;align-items:center;gap:8px}.info-icon{font-size:22px;color:var(--muted)}.info span{display:block;color:var(--muted);font-size:8px;text-transform:uppercase}.info b{display:block;margin-top:3px;font-size:12px}.sensors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:0;height:102px}.sensor{height:102px;padding:8px;border:1px solid var(--line);border-radius:7px;background:rgba(7,25,48,.4)}.sensor label{font-size:8px;color:var(--muted);text-transform:uppercase}.sensor strong{display:block;font-size:18px;margin-top:5px;white-space:nowrap}.sensor small{font-size:9px;color:var(--muted)}.spark{width:100%;height:24px;margin-top:4px}.spark polyline{fill:none;stroke:var(--green);stroke-width:2}.spark.orange polyline{stroke:var(--yellow)}.trend{text-align:right;font-size:9px;font-weight:800;color:var(--green)}.trend.orange{color:var(--yellow)}.flow-block{margin-top:0;padding-top:7px;border-top:1px solid var(--line);min-height:0}.flow-title{margin:0 0 6px;color:var(--blue);font-size:11px;font-weight:900;line-height:1.2}.vehicles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;min-height:0}.vehicle{height:66px;padding:7px;border:1px solid var(--line);border-radius:7px;background:rgba(7,25,48,.34);display:grid;grid-template-rows:auto auto 1fr;align-content:start;overflow:hidden}.vehicle label{display:block;font-size:8px;line-height:1.1;text-transform:uppercase;color:var(--blue);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vehicle strong{display:block;font-size:18px;line-height:1;margin-top:5px}.bars{height:14px;display:flex;gap:2px;align-items:flex-end;margin-top:5px;overflow:hidden}.bars i{flex:1;background:var(--blue);border-radius:2px 2px 0 0}.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:55%}.bars i:nth-child(3){height:38%}.bars i:nth-child(4){height:80%}.bars i:nth-child(5){height:50%}.bars i:nth-child(6){height:95%}.cyan label{color:var(--cyan)}.cyan .bars i{background:var(--cyan)}.green label{color:var(--green)}.green .bars i{background:var(--green)}.yellow label{color:var(--yellow)}.yellow .bars i{background:var(--yellow)}.total label{color:#fff}.total .bars i{background:#dbe9f7}
.camera{padding:10px;display:grid;grid-template-columns:130px minmax(0,1fr);gap:9px}.cam-list{display:flex;flex-direction:column;gap:6px}.cam{height:48px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:space-between;background:rgba(5,18,35,.55)}.cam.active{background:linear-gradient(135deg,#075ee4,#0b7cff)}.cam b{font-size:10px}.cam small{display:block;margin-top:4px;color:var(--muted);font-size:8px}.cam.active small{color:#cfe0ff}.cam .dot{width:7px;height:7px}.video{position:relative;border-radius:8px;overflow:hidden;background:#000;border:1px solid var(--line)}.video img{width:100%;height:100%;object-fit:cover;display:block}.live{position:absolute;top:7px;right:7px;padding:3px 7px;border:1px solid var(--green);border-radius:4px;background:rgba(24,223,120,.16);color:var(--green);font-size:8px;font-weight:900}.controls{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:18px}
.env{grid-column:1/3;padding:8px 10px}.env-grid{height:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.env-card{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(7,25,48,.30)}.env-ico{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;background:rgba(10,124,255,.12);color:var(--blue);font-size:22px}.env-card label{display:block;color:var(--muted);font-size:8px;text-transform:uppercase}.env-card b{display:block;margin-top:3px;font-size:15px}
@media(max-height:800px){.app{grid-template-rows:64px minmax(0,1fr)}.main{grid-template-rows:205px minmax(0,1fr) 58px;padding:7px;gap:6px}.bridges{padding:8px 10px}.bridge{grid-template-rows:40px minmax(0,1fr) 32px}.sensors{height:84px}.sensor{height:84px}.sensor strong{font-size:16px}.spark{height:20px;margin-top:2px}.flow-block{margin-top:5px;padding-top:5px}.flow-title{margin-bottom:4px;font-size:10px}.vehicle{height:58px;padding:6px}.vehicle strong{font-size:16px;margin-top:3px}.bars{height:10px;margin-top:3px}.cam{height:40px}.env-card{padding:4px 8px}}

@media(max-width:1450px){.logo{width:235px}.logo img{max-width:215px}.product{padding-left:18px}.product h1{font-size:20px}}