:root{
    --bg:#040816;
    --bg2:#071020;
    --panel:#0a1324;
    --panel2:#0d172b;
    --line:#1d2942;

    --text:#f5f7ff;
    --muted:#8491aa;

    --purple:#7c4dff;
    --purple2:#a16fff;
    --purple-soft:rgba(124,77,255,.16);

    --blue:#2692ff;
    --cyan:#21d4d0;

    --green:#2be58c;
    --red:#ff5168;
    --orange:#ffaf38;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:var(--text);

    background:
        radial-gradient(circle at 75% -15%,rgba(86,44,255,.18),transparent 33%),
        radial-gradient(circle at 10% 20%,rgba(34,61,150,.08),transparent 28%),
        var(--bg);
}

a{
    color:inherit;
}

button,
input{
    font:inherit;
}

button{
    cursor:pointer;
}

.app-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:188px 1fr;
}

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:188px;

    display:flex;
    flex-direction:column;

    border-right:1px solid var(--line);

    background:
        linear-gradient(180deg,rgba(10,15,34,.97),rgba(5,9,20,.99));

    padding:24px 14px;
    z-index:30;
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;

    padding:5px 7px 25px;
}

.brand-dot,
.status-dot{
    width:10px;
    height:10px;
    flex:0 0 auto;

    border-radius:50%;
    background:var(--green);

    box-shadow:0 0 17px rgba(43,229,140,.85);
}

.brand-main{
    font-size:15px;
    font-weight:900;
    line-height:1.05;
}

.brand-main span{
    display:block;
    color:var(--purple2);
}

.brand-sub{
    margin-top:5px;
    font-size:10px;
    color:var(--muted);
}

.side-nav{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.side-nav a{
    display:flex;
    align-items:center;
    gap:11px;

    min-height:43px;
    padding:0 12px;

    border-radius:11px;

    color:#c0c7d7;
    text-decoration:none;

    font-size:13px;
    font-weight:650;
}

.side-nav a:hover{
    background:rgba(255,255,255,.035);
}

.side-nav a.active{
    color:white;
    background:
        linear-gradient(90deg,#6a3eea,#7c4dff);

    box-shadow:0 8px 22px rgba(85,49,214,.22);
}

.ico{
    width:22px;
    text-align:center;
    font-size:18px;
}

.sidebar-status{
    margin-top:auto;
    padding:14px 10px;

    border:1px solid var(--line);
    border-radius:12px;

    font-size:10px;
    color:var(--muted);

    display:flex;
    align-items:center;
    gap:8px;
}

.main{
    grid-column:2;
    min-width:0;
}

.topbar{
    height:72px;

    position:sticky;
    top:0;
    z-index:20;

    display:flex;
    align-items:center;
    gap:18px;

    padding:0 28px;

    border-bottom:1px solid rgba(29,41,66,.8);

    background:rgba(4,8,22,.83);
    backdrop-filter:blur(18px);
}

.search{
    width:min(440px,45vw);

    display:flex;
    align-items:center;
    gap:10px;

    height:42px;
    padding:0 14px;

    border:1px solid var(--line);
    border-radius:13px;

    background:rgba(9,16,32,.86);
    color:var(--muted);
}

.search input{
    width:100%;
    border:0;
    outline:0;
    color:white;
    background:transparent;
}

.periods{
    display:flex;
    gap:5px;
    margin-left:auto;
}

.periods button{
    height:35px;
    min-width:42px;

    border:1px solid transparent;
    border-radius:9px;

    color:var(--muted);
    background:transparent;
}

.periods button.active{
    color:white;
    border-color:var(--line);
    background:var(--panel2);
}

.bell{
    width:42px;
    height:42px;

    position:relative;

    border:1px solid var(--line);
    border-radius:12px;

    color:white;
    background:var(--panel);
}

.bell span{
    position:absolute;
    right:-5px;
    top:-6px;

    min-width:18px;
    height:18px;

    display:grid;
    place-items:center;

    padding:0 4px;

    border-radius:50%;

    background:var(--red);
    color:white;

    font-size:9px;
    font-weight:800;
}

.mobile-logo{
    display:none;
}

.content{
    width:min(1300px,100%);
    margin:auto;
    padding:28px;
}

.page-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:22px;
}

.page-head h1{
    margin:0;
    font-size:25px;
    letter-spacing:-.6px;
}

.page-head p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:13px;
}

.system-ok{
    min-width:260px;

    display:flex;
    align-items:center;
    gap:11px;

    padding:12px 16px;

    border:1px solid rgba(43,229,140,.15);
    border-radius:13px;

    background:
        linear-gradient(90deg,rgba(43,229,140,.06),rgba(11,20,36,.85));
}

.system-ok b{
    display:block;
    font-size:12px;
}

.system-ok small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:10px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;

    margin-bottom:14px;
}

.metric-card,
.panel,
.room-card,
.device-card{
    border:1px solid var(--line);
    background:
        linear-gradient(145deg,rgba(13,23,43,.96),rgba(7,14,28,.97));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.015);
}

.metric-card{
    min-height:125px;

    position:relative;
    overflow:hidden;

    padding:16px;
    border-radius:15px;
}

.metric-card::after{
    content:"";

    position:absolute;
    right:-35px;
    top:-35px;

    width:100px;
    height:100px;

    border-radius:50%;

    background:rgba(124,77,255,.05);
}

.metric-icon{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    margin-bottom:13px;

    border-radius:11px;

    font-size:19px;
    font-weight:900;
}

.metric-icon.purple{
    color:#a176ff;
    background:rgba(124,77,255,.16);
}

.metric-icon.blue{
    color:#36a0ff;
    background:rgba(38,146,255,.14);
}

.metric-icon.cyan{
    color:#31ded8;
    background:rgba(33,212,208,.12);
}

.metric-icon.green{
    color:var(--green);
    background:rgba(43,229,140,.12);
}

.metric-icon.red{
    color:var(--red);
    background:rgba(255,81,104,.12);
}

.metric-card small{
    display:block;
    color:var(--muted);
    font-size:12px;
}

.metric-card strong{
    display:block;
    margin-top:8px;

    font-size:29px;
    letter-spacing:-.7px;
}

.metric-card em{
    display:block;
    margin-top:4px;

    color:var(--green);
    font-size:9px;
    font-style:normal;
}

.green-text{
    color:var(--green);
}

.red-text{
    color:var(--red);
}

.dashboard-grid{
    display:grid;
    grid-template-columns:1.1fr 1.1fr .9fr;
    gap:14px;
}

.panel{
    border-radius:17px;
    padding:18px;
}

.panel-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.panel-title h2{
    margin:0;
    font-size:14px;
}

.panel-title a{
    color:var(--purple2);
    text-decoration:none;
    font-size:10px;
}

.availability-body{
    display:flex;
    align-items:center;
    gap:25px;

    padding:25px 0 14px;
}

.availability-ring,
.risk-circle{
    border-radius:50%;
    display:grid;
    place-items:center;
}

.availability-ring{
    width:145px;
    height:145px;

    flex:0 0 auto;

    background:
        radial-gradient(circle at center,var(--panel) 57%,transparent 59%),
        conic-gradient(var(--green) 0 var(--availability,0%),#1d2a3d var(--availability,0%) 100%);
}

.availability-ring div{
    text-align:center;
}

.availability-ring strong{
    display:block;
    font-size:25px;
}

.availability-ring small{
    color:var(--muted);
}

.availability-list{
    flex:1;
}

.availability-list p{
    display:flex;
    align-items:center;
    gap:8px;

    margin:11px 0;

    color:var(--muted);
    font-size:11px;
}

.availability-list b{
    margin-left:auto;
    color:white;
}

.dot,
.legend i,
.node small i{
    width:7px;
    height:7px;

    display:inline-block;
    border-radius:50%;
}

.green-bg{background:var(--green)}
.red-bg{background:var(--red)}
.orange-bg{background:var(--orange)}
.blue-bg{background:var(--blue)}
.muted-bg{background:#596276}

.fake-chart{
    height:45px;
}

.fake-chart svg{
    width:100%;
    height:100%;
}

.events-chart{
    height:205px;
    padding-top:20px;
}

.events-chart svg{
    width:100%;
    height:100%;
}

.legend{
    display:flex;
    gap:16px;
    flex-wrap:wrap;

    padding-top:10px;

    color:var(--muted);
    font-size:9px;
}

.legend span{
    display:flex;
    align-items:center;
    gap:5px;
}

.problem-row{
    display:flex;
    align-items:center;
    gap:9px;

    min-height:55px;

    border-bottom:1px solid rgba(29,41,66,.6);
}

.problem-row:last-child{
    border-bottom:0;
}

.problem-row div{
    min-width:0;
    flex:1;
}

.problem-row b,
.problem-row small{
    display:block;
}

.problem-row b{
    font-size:11px;
}

.problem-row small{
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
}

mark{
    border:0;
    border-radius:7px;

    padding:5px 7px;

    background:transparent;

    font-size:8px;
    font-weight:750;
}

mark.critical{
    color:var(--red);
    background:rgba(255,81,104,.1);
}

mark.warning{
    color:var(--orange);
    background:rgba(255,175,56,.1);
}

mark.info{
    color:var(--blue);
    background:rgba(38,146,255,.1);
}

.section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin:26px 0 10px;
}

.section-head h2{
    margin:0;
    font-size:17px;
}

.section-head a{
    color:var(--purple2);
    text-decoration:none;
    font-size:10px;
}

.room-mini-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.room-mini{
    min-height:95px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:15px;

    border:1px solid var(--line);
    border-radius:15px;

    color:white;
    background:var(--panel);

    text-decoration:none;
}

.room-status{
    width:10px;
    height:10px;
    border-radius:50%;
}

.room-status.online{background:var(--green)}
.room-status.warning{background:var(--orange)}
.room-status.offline{background:var(--red)}

.room-mini > div:nth-child(2){
    min-width:0;
    flex:1;
}

.room-mini b,
.room-mini small{
    display:block;
}

.room-mini b{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:12px;
}

.room-mini small{
    margin-top:4px;
    color:var(--muted);
    font-size:9px;
}

.room-count{
    text-align:right;
}

.room-count strong{
    font-size:13px;
}

.arrow{
    color:var(--muted);
    font-size:25px;
}

.event-table{
    padding:5px 16px;
}

.event-row{
    min-height:63px;

    display:grid;
    grid-template-columns:5px 75px minmax(200px,1fr) 100px 100px;
    align-items:center;
    gap:10px;

    border-bottom:1px solid rgba(29,41,66,.7);
}

.event-row:last-child{
    border-bottom:0;
}

.event-level{
    height:28px;
    width:3px;
    border-radius:5px;
}

.event-level.critical{background:var(--red)}
.event-level.warning{background:var(--orange)}
.event-level.info{background:var(--blue)}

.event-row time{
    color:var(--muted);
    font-size:10px;
}

.event-device b,
.event-device small{
    display:block;
}

.event-device b{
    font-size:11px;
}

.event-device small{
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
}

.duration{
    color:var(--muted);
    font-size:9px;
}

.primary-btn,
.outline-btn,
.filter{
    border-radius:10px;
    font-weight:700;
}

.primary-btn{
    min-height:42px;
    padding:0 18px;

    border:1px solid #8559ff;
    color:white;

    background:
        linear-gradient(135deg,#6d41ee,#8254ff);
}

.outline-btn{
    min-height:40px;
    display:grid;
    place-items:center;

    border:1px solid #6143c0;

    color:#c8baff;
    background:rgba(124,77,255,.06);

    text-decoration:none;
}

.filter-row{
    display:flex;
    gap:8px;

    margin-bottom:16px;
}

.filter{
    min-height:36px;
    padding:0 16px;

    border:1px solid var(--line);

    color:var(--muted);
    background:var(--panel);
}

.filter.active{
    color:white;
    border-color:#7047dd;
    background:var(--purple-soft);
}

.room-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.room-card{
    border-radius:17px;
    padding:18px;
}

.room-top{
    display:flex;
    align-items:flex-start;
    gap:13px;
}

.room-icon{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:13px;

    color:#9a74ff;
    background:rgba(124,77,255,.15);

    font-size:23px;
}

.room-main{
    flex:1;
    min-width:0;
}

.room-main small{
    color:var(--muted);
}

.room-main h2{
    margin:3px 0 5px;
    font-size:18px;
}

.room-main p{
    margin:0;
    color:var(--muted);
    font-size:11px;
}

.status-pill{
    border:1px solid currentColor;
    border-radius:8px;

    padding:5px 8px;

    font-size:9px;
    font-weight:800;
}

.status-pill.online{
    color:var(--green);
    background:rgba(43,229,140,.08);
}

.status-pill.warning{
    color:var(--orange);
    background:rgba(255,175,56,.08);
}

.status-pill.offline{
    color:var(--red);
    background:rgba(255,81,104,.08);
}

.room-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    margin:18px 0;
    padding:15px 0;

    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.room-stats div{
    padding:0 10px;
    border-right:1px solid var(--line);
}

.room-stats div:last-child{
    border-right:0;
}

.room-stats small,
.room-stats strong{
    display:block;
}

.room-stats small{
    color:var(--muted);
    font-size:9px;
}

.room-stats strong{
    margin-top:4px;
    font-size:18px;
}

.room-actions{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:8px;
}

.device-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.device-card{
    min-height:130px;

    position:relative;

    display:flex;
    align-items:stretch;

    border-radius:16px;

    overflow:hidden;
}

.device-state{
    width:4px;
}

.device-state.online{
    background:var(--green);
}

.device-state.offline{
    background:var(--red);
}

.device-info{
    flex:1;
    min-width:0;

    padding:15px 18px;
}

.device-title{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.device-title h2{
    margin:0;
    font-size:16px;
}

.device-meta,
.device-location{
    color:var(--muted);
}

.device-meta{
    margin-top:3px;
    font-size:9px;
}

.device-location{
    margin-top:8px;
    font-size:10px;
}

.device-metrics{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;

    margin-top:13px;
}

.device-metrics div{
    padding:9px 11px;

    border:1px solid rgba(29,41,66,.75);
    border-radius:9px;

    background:rgba(0,0,0,.12);
}

.device-metrics small,
.device-metrics strong{
    display:block;
}

.device-metrics small{
    color:var(--muted);
    font-size:8px;
}

.device-metrics strong{
    margin-top:3px;
    font-size:12px;
}

.device-card > .arrow{
    align-self:center;
    margin-right:15px;
}

.topology-legend{
    display:flex;
    gap:15px;

    margin-bottom:12px;
}

.topology-legend span{
    display:flex;
    align-items:center;
    gap:6px;

    color:var(--muted);
    font-size:10px;
}

.topology-legend i{
    width:17px;
    height:3px;
    border-radius:4px;
}

.topology-panel{
    min-height:590px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:auto;

    background:
        radial-gradient(circle at center,rgba(84,47,202,.1),transparent 45%),
        linear-gradient(145deg,rgba(8,15,31,.97),rgba(4,9,20,.98));
}

.topology-tree{
    min-width:720px;
    padding:25px;
}

.node{
    width:280px;
    min-height:78px;

    display:flex;
    align-items:center;
    gap:12px;

    margin:auto;

    padding:12px 15px;

    border:1px solid #7149df;
    border-radius:14px;

    background:
        linear-gradient(135deg,rgba(43,25,93,.82),rgba(10,18,36,.95));

    box-shadow:
        0 0 20px rgba(109,65,238,.08);
}

.node-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:10px;

    background:rgba(124,77,255,.16);
    color:#a879ff;

    font-size:21px;
}

.node b,
.node small{
    display:block;
}

.node b{
    font-size:13px;
}

.node small{
    margin-top:4px;
    color:var(--muted);
    font-size:9px;
}

.link-vertical{
    width:2px;
    height:70px;

    position:relative;

    margin:auto;

    background:
        linear-gradient(var(--purple),var(--blue));

    box-shadow:0 0 10px rgba(51,129,255,.55);
}

.link-vertical span{
    position:absolute;
    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    padding:4px 7px;

    border-radius:7px;

    background:#1c1943;
    color:#b9adff;

    font-size:9px;
}

.topology-branches{
    position:relative;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;

    margin-top:80px;
}

.topology-branches::before{
    content:"";

    position:absolute;
    left:16%;
    right:16%;
    top:-42px;

    height:2px;

    background:var(--purple);
}

.branch{
    position:relative;
}

.branch-line{
    position:absolute;

    width:2px;
    height:42px;

    left:50%;
    top:-42px;

    background:var(--green);
}

.branch-line.warning{
    background:var(--orange);
}

.branch-line.blue{
    background:var(--blue);
}

.branch .node{
    width:215px;
}

.timeline-item{
    min-height:66px;

    display:grid;
    grid-template-columns:55px 1fr;
    align-items:center;
    gap:12px;

    position:relative;

    padding-left:16px;

    border-bottom:1px solid rgba(29,41,66,.7);
}

.timeline-item:last-child{
    border-bottom:0;
}

.timeline-item::before{
    content:"";

    position:absolute;
    left:0;

    width:7px;
    height:7px;

    border-radius:50%;
}

.timeline-item.normal::before{
    background:var(--green);
    box-shadow:0 0 12px rgba(43,229,140,.6);
}

.timeline-item.warning::before{
    background:var(--orange);
}

.timeline-item.critical::before{
    background:var(--red);
    box-shadow:0 0 12px rgba(255,81,104,.5);
}

.timeline-item time{
    color:var(--muted);
    font-size:10px;
}

.timeline-item b,
.timeline-item small{
    display:block;
}

.timeline-item b{
    font-size:11px;
}

.timeline-item small{
    margin-top:4px;
    color:var(--muted);
    font-size:9px;
}

.incident-hero{
    min-height:180px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;

    margin-bottom:14px;
    padding:22px;

    border:1px solid rgba(255,81,104,.28);
    border-radius:17px;

    background:
        radial-gradient(circle at 85% 20%,rgba(255,81,104,.1),transparent 28%),
        var(--panel);
}

.incident-hero h2{
    margin:8px 0 4px;
}

.incident-hero p,
.incident-hero small{
    display:block;
    color:var(--muted);
}

.incident-hero p{
    margin:0 0 12px;
}

.incident-hero small{
    margin-top:4px;
}

.critical-badge{
    padding:5px 8px;
    border-radius:7px;

    color:var(--red);
    background:rgba(255,81,104,.1);

    font-size:9px;
    font-weight:900;
}

.risk-circle{
    width:120px;
    height:120px;

    flex:0 0 auto;

    background:
        radial-gradient(circle at center,var(--panel) 58%,transparent 60%),
        conic-gradient(var(--red) 0 76%,#1d2a3d 76% 100%);
}

.risk-circle strong,
.risk-circle small{
    display:block;
    text-align:center;
}

.risk-circle strong{
    font-size:25px;
}

.risk-circle small{
    width:75px;
    margin:auto;
    color:var(--muted);
    font-size:9px;
}

.incident-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:14px;
}

.analysis-row{
    min-height:54px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    border-bottom:1px solid rgba(29,41,66,.7);

    font-size:10px;
}

.analysis-row:last-child{
    border-bottom:0;
}

.analysis-row span{
    color:var(--muted);
}

.mobile-nav{
    display:none;
}

@media(max-width:1050px){

    .stats-grid{
        grid-template-columns:repeat(3,1fr);
    }

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

    .problems{
        grid-column:1/-1;
    }

}

@media(max-width:760px){

    body{
        padding-bottom:82px;
    }

    .app-shell{
        display:block;
    }

    .sidebar{
        display:none;
    }

    .main{
        display:block;
    }

    .topbar{
        height:68px;
        padding:0 15px;

        justify-content:space-between;
    }

    .mobile-logo{
        display:flex;
        align-items:center;
        gap:9px;

        font-size:16px;
        font-weight:900;
    }

    .mobile-logo b{
        color:var(--purple2);
    }

    .search,
    .periods{
        display:none;
    }

    .content{
        padding:18px 14px;
    }

    .page-head{
        align-items:flex-start;
    }

    .page-head h1{
        font-size:24px;
    }

    .page-head > .system-ok{
        display:none;
    }

    .page-head > .primary-btn{
        width:42px;
        min-width:42px;
        padding:0;

        overflow:hidden;
        color:transparent;

        position:relative;
    }

    .page-head > .primary-btn::after{
        content:"+";
        color:white;

        position:absolute;
        inset:0;

        display:grid;
        place-items:center;

        font-size:23px;
    }

    .stats-grid{
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .metric-card{
        min-height:112px;
        padding:12px;

        border-radius:14px;
    }

    .metric-icon{
        width:31px;
        height:31px;
        margin-bottom:9px;
        font-size:16px;
    }

    .metric-card small{
        font-size:10px;
    }

    .metric-card strong{
        margin-top:5px;
        font-size:25px;
    }

    .metric-card em{
        font-size:8px;
    }

    .dashboard-grid{
        display:flex;
        flex-direction:column;
    }

    .availability-body{
        gap:18px;
    }

    .availability-ring{
        width:125px;
        height:125px;
    }

    .availability-ring strong{
        font-size:22px;
    }

    .room-mini-grid{
        display:flex;
        flex-direction:column;
    }

    .event-row{
        grid-template-columns:4px 54px 1fr;
        gap:8px;

        padding:10px 0;
    }

    .event-row .duration,
    .event-row mark{
        display:none;
    }

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

    .room-actions{
        grid-template-columns:1fr 1fr;
    }

    .room-actions .outline-btn:last-child{
        grid-column:1/-1;
    }

    .device-card{
        min-height:155px;
    }

    .device-title h2{
        font-size:15px;
    }

    .device-metrics{
        grid-template-columns:repeat(2,1fr);
    }

    .topology-panel{
        min-height:520px;
        padding:10px;
    }

    .topology-tree{
        min-width:0;
        width:100%;
        padding:12px 0;
    }

    .node{
        width:min(330px,92%);
    }

    .topology-branches{
        display:flex;
        flex-direction:column;
        gap:25px;

        margin-top:55px;
    }

    .topology-branches::before{
        display:none;
    }

    .branch-line{
        left:50%;
        top:-25px;
        height:25px;
    }

    .branch .node{
        width:min(330px,92%);
    }

    .incident-hero{
        align-items:flex-start;
    }

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

    .mobile-nav{
        display:grid;
        grid-template-columns:repeat(5,1fr);

        position:fixed;
        z-index:50;

        left:12px;
        right:12px;
        bottom:10px;

        height:66px;

        padding:6px;

        border:1px solid var(--line);
        border-radius:18px;

        background:rgba(7,13,28,.94);
        backdrop-filter:blur(20px);

        box-shadow:0 12px 40px rgba(0,0,0,.35);
    }

    .mobile-nav a{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;

        border-radius:12px;

        color:var(--muted);
        text-decoration:none;
    }

    .mobile-nav a span{
        font-size:18px;
    }

    .mobile-nav small{
        font-size:8px;
    }

    .mobile-nav a.active{
        color:#a67dff;
        background:rgba(124,77,255,.16);
    }

}

@media(max-width:420px){

    .stats-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .metric-card{
        min-height:104px;
        padding:10px;
    }

    .metric-card strong{
        font-size:23px;
    }

    .availability-body{
        align-items:flex-start;
    }

    .availability-list p{
        font-size:9px;
    }

    .room-main h2{
        font-size:16px;
    }

    .room-stats{
        margin-bottom:13px;
    }

}

/* ===== SKYNET UI V3 START ===== */

/*
SKYNET TELECOM
Premium Server Monitoring UI V3

Desktop + Mobile
Only /opt/skynet-server-next
*/

:root{
    --v3-purple:#8157ff;
    --v3-purple2:#a477ff;
    --v3-purple3:#5726d9;

    --v3-green:#30e892;
    --v3-red:#ff5269;
    --v3-orange:#ffad38;
    --v3-blue:#2c96ff;

    --v3-bg:#030714;
    --v3-panel:#091326;
    --v3-panel2:#0c172d;
    --v3-line:#202d49;
}

/* ---------- GLOBAL ---------- */

body{
    background:
        radial-gradient(
            circle at 70% -15%,
            rgba(112,63,255,.20),
            transparent 31%
        ),
        radial-gradient(
            circle at -10% 35%,
            rgba(38,82,190,.07),
            transparent 29%
        ),
        var(--v3-bg);
}

.content{
    padding-bottom:120px;
}


/* ---------- SIDEBAR ---------- */

.sidebar{
    background:
        radial-gradient(
            circle at 40% 0%,
            rgba(104,55,255,.11),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            rgba(7,12,29,.99),
            rgba(3,7,18,.99)
        );
}

.brand{
    position:relative;
}

.brand::after{
    content:"";
    position:absolute;

    left:7px;
    right:7px;
    bottom:8px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(128,87,255,.38),
            transparent
        );
}

.side-nav a{
    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.side-nav a:hover{
    transform:translateX(2px);
}

.side-nav a.active{
    background:
        linear-gradient(
            110deg,
            rgba(102,54,231,.96),
            rgba(132,80,255,.96)
        );

    box-shadow:
        0 10px 35px rgba(96,50,220,.23),
        inset 0 1px rgba(255,255,255,.12);
}


/* ---------- TOPBAR ---------- */

.topbar{
    border-bottom:
        1px solid rgba(105,74,192,.21);

    background:
        linear-gradient(
            180deg,
            rgba(4,8,22,.96),
            rgba(4,8,22,.82)
        );
}

.search{
    border-color:
        rgba(112,84,186,.27);

    box-shadow:
        inset 0 1px rgba(255,255,255,.015);
}


/* ---------- CARDS ---------- */

.metric-card,
.panel,
.room-card,
.device-card,
.room-mini{
    border-color:
        rgba(89,106,148,.27);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(108,67,255,.08),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(12,23,45,.98),
            rgba(6,13,28,.99)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.025),
        0 18px 45px rgba(0,0,0,.08);
}

.metric-card{
    transition:
        transform .18s ease,
        border-color .18s ease;
}

.metric-card:hover{
    transform:translateY(-2px);

    border-color:
        rgba(129,87,255,.38);
}


/* ---------- SKYNET GLOW ---------- */

.metric-icon.purple,
.room-icon,
.node-icon{
    box-shadow:
        0 0 25px rgba(124,77,255,.12);
}

.green-text{
    text-shadow:
        0 0 22px rgba(48,232,146,.18);
}

.red-text{
    text-shadow:
        0 0 22px rgba(255,82,105,.18);
}


/* ---------- SYSTEM STATUS ---------- */

.system-ok{
    border-color:
        rgba(48,232,146,.25);

    box-shadow:
        inset 0 0 30px rgba(48,232,146,.025);
}


/* ---------- SECTION HEAD ---------- */

.section-head{
    padding-top:4px;
}

.section-head h2{
    font-size:19px;
    letter-spacing:-.25px;
}


/* ---------- ROOM MINI ---------- */

.room-mini{
    min-height:88px;
}

.room-mini:hover{
    border-color:
        rgba(129,87,255,.45);
}


/* ---------- SERVER ROOMS ---------- */

.room-card{
    position:relative;
    overflow:hidden;
}

.room-card::before{
    content:"";

    position:absolute;

    left:0;
    top:22px;
    bottom:22px;

    width:3px;

    border-radius:
        0 4px 4px 0;

    background:
        linear-gradient(
            var(--v3-purple),
            transparent
        );

    opacity:.6;
}

.room-top{
    position:relative;
}

.room-icon{
    background:
        linear-gradient(
            145deg,
            rgba(111,60,245,.22),
            rgba(67,38,164,.14)
        );

    border:
        1px solid rgba(133,92,255,.19);
}

.room-actions button,
.room-actions a{
    transition:
        transform .15s ease,
        border-color .15s ease;
}

.room-actions button:active,
.room-actions a:active{
    transform:scale(.98);
}


/* ---------- EQUIPMENT ---------- */

.device-card{
    transition:
        border-color .18s ease,
        transform .18s ease;
}

.device-card:hover{
    border-color:
        rgba(129,87,255,.40);

    transform:
        translateY(-1px);
}

.device-state.online{
    box-shadow:
        0 0 15px rgba(48,232,146,.4);
}

.device-state.offline{
    box-shadow:
        0 0 15px rgba(255,82,105,.4);
}


/* ---------- TOPOLOGY ---------- */

.topology-panel{
    border-color:
        rgba(118,75,221,.28);

    background:
        radial-gradient(
            circle at 50% 34%,
            rgba(104,53,245,.13),
            transparent 34%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(21,71,170,.08),
            transparent 40%
        ),
        rgba(4,9,21,.97);
}

.node{
    position:relative;

    border:
        1px solid rgba(127,81,241,.68);

    box-shadow:
        0 0 24px rgba(112,65,255,.07),
        inset 0 1px rgba(255,255,255,.03);
}

.node::after{
    content:"";

    position:absolute;

    inset:-1px;

    pointer-events:none;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(158,113,255,.10),
            transparent 45%
        );
}

.link-vertical{
    width:2px;

    background:
        linear-gradient(
            var(--v3-purple),
            var(--v3-blue)
        );

    box-shadow:
        0 0 13px rgba(59,120,255,.75);
}


/* ---------- BUTTONS ---------- */

.primary-btn{
    border-color:
        rgba(154,111,255,.65);

    background:
        linear-gradient(
            135deg,
            #6536df,
            #8659ff
        );

    box-shadow:
        0 10px 25px rgba(90,49,203,.19);
}

.outline-btn{
    border-color:
        rgba(124,82,226,.65);

    background:
        linear-gradient(
            135deg,
            rgba(106,61,213,.08),
            rgba(60,36,127,.04)
        );
}


/* ---------- MOBILE TOOLBAR ---------- */

.mobile-toolbar{
    display:none;
}


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

@media(max-width:760px){

    body{
        padding-bottom:
            calc(
                100px + env(safe-area-inset-bottom)
            );
    }

    .content{
        padding:
            16px 14px 125px;
    }


    /* HEADER */

    .topbar{
        height:67px;

        position:sticky;
        top:0;

        padding:
            0 15px;

        background:
            rgba(3,7,19,.94);

        backdrop-filter:
            blur(22px);
    }

    .mobile-logo{
        font-size:18px;
        letter-spacing:-.4px;
    }

    .mobile-logo b{
        color:var(--v3-purple2);
    }

    .bell{
        border-color:
            rgba(106,88,160,.31);

        background:
            rgba(10,18,37,.85);
    }


    /* MOBILE SEARCH + PERIOD */

    .mobile-toolbar{
        display:flex;

        position:sticky;
        top:67px;
        z-index:18;

        align-items:center;
        gap:9px;

        padding:
            9px 14px;

        border-bottom:
            1px solid rgba(72,90,130,.16);

        background:
            rgba(3,7,19,.92);

        backdrop-filter:
            blur(20px);
    }

    .mobile-search{
        min-width:0;
        flex:1;

        height:35px;

        display:flex;
        align-items:center;
        gap:7px;

        padding:
            0 11px;

        border:
            1px solid rgba(78,94,137,.27);

        border-radius:
            10px;

        color:
            #78849c;

        background:
            rgba(9,17,34,.86);

        font-size:
            10px;
    }

    .mobile-periods{
        display:flex;
        gap:3px;
    }

    .mobile-periods button{
        min-width:32px;
        height:33px;

        border:
            1px solid transparent;

        border-radius:
            8px;

        color:
            #7f8aa2;

        background:
            transparent;

        font-size:
            9px;

        font-weight:
            750;
    }

    .mobile-periods button.active{
        color:white;

        border-color:
            rgba(125,87,229,.38);

        background:
            rgba(124,77,255,.15);
    }


    /* PAGE TITLE */

    .page-head{
        margin-bottom:16px;
    }

    .page-head h1{
        font-size:23px;
    }

    .page-head p{
        font-size:11px;
    }


    /* STAT CARDS */

    .stats-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:8px;

        margin-bottom:12px;
    }

    .metric-card{
        min-width:0;
        min-height:105px;

        padding:11px;

        border-radius:14px;
    }

    .metric-card::after{
        width:70px;
        height:70px;

        right:-30px;
        top:-28px;
    }

    .metric-icon{
        width:29px;
        height:29px;

        margin-bottom:8px;

        border-radius:8px;

        font-size:14px;
    }

    .metric-card small{
        font-size:9px;
    }

    .metric-card strong{
        margin-top:5px;

        font-size:23px;
    }

    .metric-card em{
        max-width:100%;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;

        font-size:7px;
    }


    /* DASHBOARD PANELS */

    .dashboard-grid{
        gap:11px;
    }

    .panel{
        padding:15px;

        border-radius:16px;
    }

    .panel-title h2{
        font-size:14px;
    }

    .availability-body{
        padding:
            20px 0 10px;

        align-items:center;
    }

    .availability-ring{
        width:118px;
        height:118px;
    }

    .availability-ring strong{
        font-size:21px;
    }

    .availability-list{
        min-width:0;
    }

    .availability-list p{
        margin:9px 0;
        font-size:9px;
    }

    .events-chart{
        height:175px;
    }

    .legend{
        gap:12px;
        line-height:1.5;
    }


    /* PROBLEM DEVICES */

    .problem-row{
        min-height:61px;
    }

    .problem-row b{
        font-size:11px;
    }

    .problem-row mark{
        font-size:7px;
    }


    /* SERVER ROOM MINI */

    .room-mini{
        min-height:76px;

        padding:
            12px 13px;

        border-radius:14px;
    }

    .room-mini b{
        font-size:11px;
    }

    .room-mini small{
        font-size:8px;
    }

    .room-count strong{
        font-size:13px;
    }


    /* FULL SERVER ROOM CARDS */

    .room-card{
        padding:14px;

        border-radius:16px;
    }

    .room-card::before{
        top:16px;
        bottom:16px;
    }

    .room-icon{
        width:39px;
        height:39px;

        border-radius:11px;

        font-size:18px;
    }

    .room-main h2{
        font-size:16px;

        margin:
            2px 0 3px;
    }

    .room-main p{
        font-size:9px;
    }

    .status-pill{
        padding:
            4px 6px;

        font-size:
            7px;
    }

    .room-stats{
        margin:
            12px 0;

        padding:
            10px 0;
    }

    .room-stats small{
        font-size:8px;
    }

    .room-stats strong{
        font-size:15px;
    }

    .room-actions{
        grid-template-columns:
            1fr 1fr;

        gap:7px;
    }

    .room-actions button,
    .room-actions a{
        min-height:37px;

        font-size:10px;
    }

    .room-actions .outline-btn:last-child{
        grid-column:
            1/-1;
    }


    /* EQUIPMENT */

    .device-card{
        min-height:0;

        border-radius:15px;
    }

    .device-info{
        padding:
            13px 12px;
    }

    .device-title{
        gap:10px;
    }

    .device-title h2{
        font-size:14px;
    }

    .device-meta{
        font-size:8px;
    }

    .device-location{
        margin-top:6px;

        font-size:8px;
    }

    .device-metrics{
        grid-template-columns:
            repeat(4,minmax(0,1fr));

        gap:5px;

        margin-top:10px;
    }

    .device-metrics div{
        padding:
            7px 5px;

        text-align:center;
    }

    .device-metrics small{
        font-size:7px;
    }

    .device-metrics strong{
        font-size:10px;
    }


    /* TOPOLOGY MOBILE */

    .topology-panel{
        min-height:auto;

        padding:
            18px 7px 25px;
    }

    .topology-tree{
        padding:8px 0;
    }

    .node{
        width:
            min(330px,94%);

        min-height:69px;

        padding:
            10px 12px;
    }

    .node-icon{
        width:36px;
        height:36px;

        font-size:17px;
    }

    .node b{
        font-size:11px;
    }

    .node small{
        font-size:8px;
    }

    .link-vertical{
        height:48px;
    }

    .topology-branches{
        margin-top:44px;

        gap:17px;
    }

    .branch-line{
        height:18px;
        top:-18px;
    }


    /* EVENT HISTORY */

    .event-table{
        padding:
            4px 12px;

        margin-bottom:
            18px;
    }

    .event-row{
        min-height:70px;

        grid-template-columns:
            4px 55px minmax(0,1fr);
    }

    .event-row time{
        font-size:9px;
    }

    .event-device b{
        font-size:11px;
    }

    .event-device small{
        font-size:8px;

        line-height:1.35;
    }


    /* INCIDENT PAGE */

    .incident-hero{
        min-height:0;

        padding:16px;

        border-radius:15px;
    }

    .incident-hero h2{
        font-size:18px;
    }

    .incident-hero strong{
        font-size:11px;
    }

    .risk-circle{
        width:92px;
        height:92px;
    }

    .risk-circle strong{
        font-size:20px;
    }


    /* MOBILE NAV */

    .mobile-nav{
        left:11px;
        right:11px;

        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );

        height:67px;

        border-color:
            rgba(100,82,160,.33);

        background:
            linear-gradient(
                180deg,
                rgba(11,19,38,.96),
                rgba(6,12,27,.98)
            );

        box-shadow:
            0 15px 45px rgba(0,0,0,.47),
            inset 0 1px rgba(255,255,255,.025);
    }

    .mobile-nav a{
        min-width:0;
    }

    .mobile-nav a span{
        font-size:17px;
    }

    .mobile-nav small{
        max-width:100%;

        overflow:hidden;
        text-overflow:ellipsis;

        font-size:7px;
    }

    .mobile-nav a.active{
        color:#b090ff;

        background:
            linear-gradient(
                145deg,
                rgba(111,64,222,.28),
                rgba(77,45,163,.16)
            );

        box-shadow:
            inset 0 0 22px rgba(115,72,255,.09);
    }

}


/* SMALL PHONES */

@media(max-width:380px){

    .content{
        padding-left:11px;
        padding-right:11px;
    }

    .metric-card{
        padding:9px;
    }

    .metric-card strong{
        font-size:21px;
    }

    .mobile-toolbar{
        padding-left:11px;
        padding-right:11px;
    }

    .mobile-periods button{
        min-width:29px;
        padding:0;
    }

}


/* ===== SKYNET UI V3 END ===== */

/* ===== SKYNET MOBILE NAV FINAL FIX ===== */

@media(max-width:760px){

    /*
    More free space under content so bottom navigation
    never hides last parts of cards/charts.
    */
    body{
        padding-bottom:
            calc(145px + env(safe-area-inset-bottom)) !important;
    }

    .content{
        padding-bottom:
            calc(155px + env(safe-area-inset-bottom)) !important;
    }

    /*
    Smaller floating navigation.
    */
    .mobile-nav{
        left:14px !important;
        right:14px !important;

        height:62px !important;

        bottom:
            max(9px, env(safe-area-inset-bottom)) !important;

        border-radius:18px !important;

        background:
            rgba(8,15,31,.97) !important;

        box-shadow:
            0 14px 38px rgba(0,0,0,.50) !important;
    }

    .mobile-nav a{
        padding:5px 1px !important;
    }

    .mobile-nav a span{
        font-size:16px !important;
    }

    .mobile-nav small{
        font-size:7px !important;
    }

    /*
    Give panels a little breathing room.
    */
    .dashboard-grid,
    .room-grid,
    .device-list{
        padding-bottom:12px;
    }

    /*
    Availability chart should never be hidden
    by the bottom navigation.
    */
    .availability-panel{
        margin-bottom:10px;
    }

}


/* Very small phones */
@media(max-width:390px){

    .mobile-nav{
        left:9px !important;
        right:9px !important;
    }

}

/* ===== SKYNET INFRA DB UI ===== */

.city-strip{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.city-card{
    min-height:74px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(13,23,43,.96),rgba(7,14,28,.97));
}

.city-icon,
.infra-rack-icon{
    width:40px;
    height:40px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#a477ff;
    background:rgba(124,77,255,.14);
}

.city-card strong,
.city-card small{
    display:block;
}

.city-card strong{
    font-size:12px;
}

.city-card small{
    margin-top:4px;
    color:var(--muted);
    font-size:9px;
}

.infra-count{
    min-width:28px;
    height:25px;
    display:grid;
    place-items:center;
    border:1px solid rgba(124,77,255,.28);
    border-radius:8px;
    color:#bca7ff;
    background:rgba(124,77,255,.08);
    font-size:10px;
}

.infra-link{
    display:grid;
    place-items:center;
    text-decoration:none;
}

.infra-disabled{
    opacity:.45;
    cursor:not-allowed;
}

.infra-add-disabled{
    opacity:.55;
}

.empty-state{
    grid-column:1/-1;
    padding:30px 20px;
    text-align:center;
    border:1px dashed rgba(124,77,255,.25);
    border-radius:16px;
    color:var(--muted);
    background:rgba(9,18,35,.45);
}

.empty-state b,
.empty-state small{
    display:block;
}

.empty-state small{
    margin-top:6px;
}

.infra-back{
    display:inline-flex;
    margin-bottom:17px;
    color:#a98aff;
    text-decoration:none;
    font-size:11px;
    font-weight:750;
}

.infra-eyebrow{
    color:#a477ff;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
}

.infra-access-badge{
    display:inline-flex;
    align-items:center;
    padding:6px 9px;
    border:1px solid rgba(124,77,255,.25);
    border-radius:8px;
    color:#ae91ff;
    background:rgba(124,77,255,.08);
    font-size:8px;
    font-weight:800;
}

.infra-rack-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
}

.infra-rack-card{
    min-height:84px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:15px;
    color:white;
    background:linear-gradient(145deg,rgba(13,23,43,.96),rgba(7,14,28,.97));
    text-decoration:none;
}

.infra-rack-main{
    min-width:0;
    flex:1;
}

.infra-rack-main strong,
.infra-rack-main small{
    display:block;
}

.infra-rack-main strong{
    font-size:13px;
}

.infra-rack-main small{
    margin-top:4px;
    color:var(--muted);
    font-size:9px;
}

.infra-rack-online{
    color:var(--green);
    font-size:12px;
    font-weight:850;
}

.infra-device-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
    color:var(--muted);
    font-size:9px;
}

.infra-device-bottom b{
    color:#c6ccda;
}


@media(max-width:760px){

    .city-strip{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .city-card{
        min-height:66px;
        padding:10px;
    }

    .city-icon{
        width:34px;
        height:34px;
    }

    .infra-rack-grid{
        grid-template-columns:1fr;
    }

    .infra-rack-card{
        min-height:72px;
        padding:11px;
    }

    .infra-detail-head{
        margin-bottom:12px;
    }

    .infra-access-badge{
        font-size:7px;
    }

    .infra-device-bottom{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* ===== SKYNET WEB ADMIN LOGIN ===== */

.login-body{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:22px;
}

.login-shell{
    width:min(420px,100%);
}

.login-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:26px;
}

.login-brand strong{
    display:block;
    font-size:21px;
    font-weight:900;
}

.login-brand strong b{
    color:var(--purple2);
}

.login-brand small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
}

.login-card{
    padding:30px;
    border:1px solid var(--line);
    border-radius:22px;
    background:
        radial-gradient(circle at 100% 0,
            rgba(124,77,255,.14),
            transparent 35%),
        linear-gradient(
            145deg,
            rgba(13,23,43,.98),
            rgba(6,12,25,.99)
        );
    box-shadow:0 25px 80px rgba(0,0,0,.28);
}

.login-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#b493ff;
    background:rgba(124,77,255,.15);
    font-size:25px;
}

.login-card h1{
    margin:20px 0 5px;
    font-size:27px;
}

.login-card > p{
    margin:0 0 24px;
    color:var(--muted);
    font-size:13px;
}

.login-card label{
    display:block;
    margin-top:15px;
    color:#c9cfdd;
    font-size:11px;
    font-weight:700;
}

.login-card input{
    width:100%;
    height:48px;
    margin-top:7px;
    padding:0 14px;
    outline:0;
    border:1px solid var(--line);
    border-radius:12px;
    color:white;
    background:#071020;
}

.login-card input:focus{
    border-color:#7950e9;
    box-shadow:0 0 0 3px rgba(124,77,255,.08);
}

.login-button{
    width:100%;
    margin-top:22px;
}

.login-error{
    padding:10px 12px;
    margin-bottom:14px;
    border:1px solid rgba(255,81,104,.25);
    border-radius:10px;
    color:#ff8191;
    background:rgba(255,81,104,.07);
    font-size:11px;
}

.login-footer{
    display:block;
    margin-top:18px;
    text-align:center;
    color:#59657c;
}

@media(max-width:500px){
    .login-card{
        padding:24px 20px;
        border-radius:19px;
    }
}

/* ===== SKYNET MORE PAGE ===== */

.more-page{
    max-width:900px;
    margin:0 auto;
    padding-bottom:40px;
}

.more-head{
    margin-bottom:24px;
}

.more-head h1{
    margin:5px 0 5px;
    font-size:34px;
    line-height:1.1;
}

.more-head p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.more-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.more-card{
    min-height:92px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:18px;
    color:inherit;
    text-decoration:none;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(124,77,255,.11),
            transparent 40%
        ),
        rgba(8,16,32,.82);
    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}

a.more-card:hover{
    transform:translateY(-2px);
    border-color:rgba(124,77,255,.55);
}

.more-icon{
    flex:0 0 52px;
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:15px;
    color:#b89cff;
    background:rgba(124,77,255,.15);
    font-size:23px;
}

.more-text{
    min-width:0;
    flex:1;
}

.more-text strong{
    display:block;
    color:#f5f7ff;
    font-size:16px;
    font-weight:800;
}

.more-text small{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
}

.more-arrow{
    color:#9270ed;
    font-size:27px;
}

.more-soon{
    padding:6px 9px;
    border:1px solid rgba(124,77,255,.28);
    border-radius:9px;
    color:#967fe0;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}

.more-disabled{
    opacity:.72;
}

.more-logout .more-icon{
    color:#ff788c;
    background:rgba(255,81,104,.10);
}

.more-logout:hover{
    border-color:rgba(255,81,104,.35) !important;
}

@media(max-width:700px){

    .more-page{
        padding-bottom:105px;
    }

    .more-head{
        margin-bottom:18px;
    }

    .more-head h1{
        font-size:30px;
    }

    .more-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .more-card{
        min-height:80px;
        padding:14px;
        border-radius:16px;
    }

    .more-icon{
        flex-basis:48px;
        width:48px;
        height:48px;
        border-radius:14px;
        font-size:21px;
    }
}


/* ===== SKYNET SETTINGS PAGE ===== */

.settings-page{
    max-width:900px;
    margin:0 auto;
    padding-bottom:60px;
}

.settings-head{
    margin:18px 0 24px;
}

.settings-head h1{
    margin:5px 0 5px;
    font-size:34px;
}

.settings-head p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.settings-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.settings-card{
    padding:20px;
    border:1px solid var(--line);
    border-radius:18px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(124,77,255,.11),
            transparent 38%
        ),
        rgba(8,16,32,.82);
}

.settings-card-head{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:20px;
}

.settings-icon{
    width:50px;
    height:50px;
    flex:0 0 50px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#b493ff;
    background:rgba(124,77,255,.15);
    font-size:21px;
}

.settings-card-head strong{
    display:block;
    font-size:16px;
}

.settings-card-head small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
}

.settings-row{
    min-height:47px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    border-top:1px solid rgba(120,140,180,.12);
    color:var(--muted);
    font-size:11px;
}

.settings-row b{
    color:#e9edfa;
    font-size:11px;
}

.settings-row .settings-ok{
    color:#31db8b;
}

.settings-action-disabled{
    margin-top:15px;
    padding:12px;
    border:1px solid rgba(124,77,255,.22);
    border-radius:11px;
    text-align:center;
    color:#8d82ad;
    background:rgba(124,77,255,.06);
    font-size:10px;
}

.settings-logout{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px;
    border:1px solid rgba(255,81,104,.20);
    border-radius:18px;
    color:inherit;
    text-decoration:none;
    background:rgba(255,81,104,.045);
}

.settings-logout > span{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#ff7e90;
    background:rgba(255,81,104,.10);
    font-size:20px;
}

.settings-logout div{
    flex:1;
}

.settings-logout strong{
    display:block;
    color:#f5f7ff;
    font-size:15px;
}

.settings-logout small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
}

.settings-logout > b{
    color:#ff7186;
    font-size:25px;
}


/* keep last MORE card above fixed mobile nav */
@media(max-width:700px){

    .more-page{
        padding-bottom:190px;
    }

    .settings-page{
        padding-bottom:180px;
    }

    .settings-head h1{
        font-size:30px;
    }

    .settings-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .settings-card{
        padding:16px;
        border-radius:16px;
    }

    .settings-logout{
        grid-column:auto;
    }
}

/* ===== SKYNET DEVICE ACCESS PAGE ===== */

.device-detail-page{
    max-width:1100px;
    margin:0 auto;
    padding:8px 4px 120px;
}

.device-back{
    display:inline-block;
    margin-bottom:24px;
    text-decoration:none;
    font-weight:700;
    color:#a879ff;
}

.device-detail-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
    margin-bottom:28px;
}

.device-detail-head h1{
    margin:6px 0 8px;
    font-size:34px;
}

.device-detail-path{
    color:#a879ff;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
}

.device-detail-meta,
.device-detail-ip,
.device-section-sub{
    color:#8490a8;
}

.device-detail-ip{
    margin-top:10px;
}

.device-detail-status{
    padding:12px 15px;
    border-radius:14px;
    font-size:12px;
    font-weight:900;
    border:1px solid #48516b;
}

.device-detail-status.online{
    color:#35e39a;
    border-color:#35e39a;
}

.device-detail-status.offline{
    color:#ff6178;
    border-color:#ff6178;
}

.device-section{
    border:1px solid #242e4a;
    background:rgba(10,18,38,.72);
    border-radius:22px;
    padding:22px;
    margin-bottom:22px;
}

.device-section-title{
    font-size:19px;
    font-weight:900;
    margin-bottom:4px;
}

.device-live-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}

.device-live-item{
    padding:16px;
    border:1px solid #252f4c;
    background:#0b1428;
    border-radius:16px;
}

.device-live-item small{
    display:block;
    color:#7f8ba4;
    margin-bottom:7px;
}

.device-live-item strong{
    font-size:18px;
}

.access-profile-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:22px;
}

.access-profile-card{
    border:1px solid #313b5d;
    border-radius:20px;
    padding:20px;
    background:#0b1428;
}

.access-profile-card.readonly{
    border-color:#315d57;
}

.access-profile-card.admin{
    border-color:#513982;
}

.access-profile-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    margin-bottom:18px;
}

.access-profile-top h3{
    margin:6px 0 0;
    font-size:20px;
}

.access-type{
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    color:#36df9a;
}

.access-type.admin-only{
    color:#a879ff;
}

.access-ready,
.access-empty{
    font-size:10px;
    font-weight:900;
    padding:7px 9px;
    border-radius:10px;
}

.access-ready{
    color:#36df9a;
    border:1px solid #36df9a;
}

.access-empty{
    color:#8994aa;
    border:1px solid #3a435b;
}

.access-row{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:12px 0;
    border-bottom:1px solid #1f2943;
}

.access-row span{
    color:#8490a8;
}

.access-row strong{
    text-align:right;
}

.access-test-btn,
.device-access-open{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border:1px solid #6740ba;
    background:rgba(98,54,180,.17);
    color:#b992ff;
    border-radius:13px;
    padding:11px 14px;
    font-weight:800;
}

.access-test-btn{
    width:100%;
    box-sizing:border-box;
    margin-top:18px;
}

.device-access-open{
    margin-top:6px;
    font-size:12px;
}

.access-placeholder{
    color:#8994aa;
    line-height:1.55;
    padding:16px 0;
}

.admin-warning{
    color:#b992ff;
    font-size:12px;
    font-weight:800;
    margin-bottom:10px;
}

.access-config-btn{
    width:100%;
    margin-top:12px;
    padding:12px;
    border-radius:13px;
    border:1px solid #303950;
    background:#111a2d;
    color:#657089;
}

.access-test-result{
    margin-top:16px;
    padding:12px 14px;
    border-radius:13px;
    font-weight:800;
}

.access-test-result.ok{
    color:#35e39a;
    border:1px solid #35e39a;
    background:rgba(53,227,154,.07);
}

.access-test-result.bad{
    color:#ff6178;
    border:1px solid #ff6178;
    background:rgba(255,97,120,.07);
}

@media(max-width:800px){

    .device-detail-page{
        padding-bottom:170px;
    }

    .device-detail-head{
        align-items:center;
    }

    .device-detail-head h1{
        font-size:27px;
    }

    .device-live-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .access-profile-grid{
        grid-template-columns:1fr;
    }

    .device-section{
        padding:17px;
    }
}

/* ===== END SKYNET DEVICE ACCESS PAGE ===== */


/* ===== SKYNET DEVICE FULL INFO ===== */

.device-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.device-info-grid,
.summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}

.device-info-card,
.summary-card{
    min-width:0;
    padding:16px;
    border-radius:16px;
    border:1px solid #26314f;
    background:#0b1428;
}

.device-info-card small,
.summary-card small{
    display:block;
    color:#7f8ca5;
    margin-bottom:8px;
}

.device-info-card strong,
.summary-card strong{
    display:block;
    font-size:16px;
    overflow-wrap:anywhere;
}

.lan-status{
    padding:8px 11px;
    border-radius:11px;
    font-size:11px;
    font-weight:900;
}

.lan-status.up{
    color:#36df9a;
    border:1px solid #36df9a;
}

.lan-status.down{
    color:#ff6178;
    border:1px solid #ff6178;
}

.hardware-note{
    margin-top:15px;
    padding:13px 14px;
    border-radius:13px;
    color:#d0b8ff;
    background:rgba(112,66,190,.10);
    border:1px solid #513982;
    line-height:1.45;
}

.history-table-wrap{
    overflow-x:auto;
    margin-top:17px;
    border-radius:15px;
    border:1px solid #25304d;
}

.device-history-table{
    width:100%;
    border-collapse:collapse;
    min-width:650px;
    background:#091225;
}

.device-history-table th{
    text-align:left;
    padding:12px 13px;
    color:#7f8ca5;
    font-size:12px;
    font-weight:800;
    border-bottom:1px solid #25304d;
}

.device-history-table td{
    padding:12px 13px;
    border-bottom:1px solid #1c2640;
    white-space:nowrap;
}

.device-history-table tbody tr:last-child td{
    border-bottom:0;
}

.history-up{
    color:#36df9a;
    font-weight:900;
}

.history-down{
    color:#ff6178;
    font-weight:900;
}


@media(max-width:900px){

    .device-info-grid,
    .summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


@media(max-width:500px){

    .device-info-card,
    .summary-card{
        padding:14px;
    }

    .device-info-card strong,
    .summary-card strong{
        font-size:15px;
    }
}

/* ===== END SKYNET DEVICE FULL INFO ===== */


/* ===== SKYNET REAL INCIDENT HISTORY ===== */

.real-inc-page{
    max-width:1150px;
    margin:0 auto;
    padding-bottom:150px;
}

.real-inc-head h1,
.incident-detail-hero h1{
    margin:5px 0 6px;
}

.real-inc-head p,
.incident-detail-hero p{
    color:#8490a8;
    margin:0;
}

.real-inc-kicker{
    color:#a879ff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
}

.real-inc-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin:25px 0;
}

.real-inc-stat{
    padding:20px;
    border-radius:18px;
    border:1px solid #28324e;
    background:#0b1428;
}

.real-inc-stat small{
    display:block;
    color:#8490a8;
    margin-bottom:8px;
}

.real-inc-stat strong{
    font-size:30px;
}

.real-inc-stat.danger strong,
.problem-now{
    color:#ff6178;
}

.real-inc-stat.good strong,
.problem-ok{
    color:#35e39a;
}

.real-inc-stat.critical strong{
    color:#ff9a5c;
}

.real-inc-periods{
    display:flex;
    gap:8px;
    margin-bottom:22px;
    overflow:auto;
}

.real-inc-periods a{
    text-decoration:none;
    color:#8c97ad;
    border:1px solid #29334e;
    padding:10px 15px;
    border-radius:12px;
    font-weight:800;
}

.real-inc-periods a.active{
    color:#fff;
    border-color:#6840bc;
    background:rgba(105,64,188,.25);
}

.incident-empty-state{
    min-height:320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid #26314e;
    border-radius:24px;
    background:#0a1325;
    padding:30px;
}

.incident-empty-icon{
    width:68px;
    height:68px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    border:2px solid #35e39a;
    color:#35e39a;
}

.incident-empty-state h2{
    margin:18px 0 5px;
}

.incident-empty-state p{
    color:#8490a8;
}

.incident-health-badge{
    margin-top:15px;
    color:#35e39a;
    font-weight:900;
    font-size:12px;
    border:1px solid #35e39a;
    border-radius:12px;
    padding:9px 13px;
}

.real-inc-list{
    display:grid;
    gap:14px;
}

.real-inc-card{
    display:block;
    text-decoration:none;
    color:inherit;
    padding:20px;
    border-radius:20px;
    border:1px solid #28334f;
    background:#0a1325;
}

.real-inc-card.active-problem{
    border-color:#713c59;
}

.real-inc-card:hover{
    border-color:#6840bc;
}

.real-inc-card-top{
    display:flex;
    justify-content:space-between;
    gap:15px;
}

.real-inc-device{
    color:#8e99ae;
    font-size:13px;
}

.real-inc-title{
    font-size:20px;
    font-weight:900;
    margin-top:4px;
}

.real-inc-severity{
    height:max-content;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid #46516d;
    font-size:10px;
    font-weight:900;
}

.real-inc-severity.critical{
    color:#ff6178;
    border-color:#ff6178;
}

.real-inc-severity.warning{
    color:#ffb55e;
    border-color:#ffb55e;
}

.real-inc-severity.info{
    color:#61b5ff;
    border-color:#61b5ff;
}

.real-inc-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 15px;
    color:#7e8aa2;
    font-size:12px;
    margin:14px 0;
}

.real-inc-data{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.real-inc-data > div,
.incident-detail-item{
    border:1px solid #242e49;
    border-radius:14px;
    padding:13px;
    background:#0d172c;
}

.real-inc-data small,
.incident-detail-item small{
    display:block;
    color:#7d89a1;
    margin-bottom:5px;
}

.real-inc-cause{
    margin-top:13px;
    border-left:3px solid #8050dd;
    padding:10px 13px;
    background:rgba(118,65,205,.08);
}

.real-inc-cause small{
    display:block;
    color:#8490a8;
    margin-bottom:5px;
}

.real-inc-open{
    margin-top:15px;
    color:#b48bff;
    font-weight:800;
    font-size:13px;
}

.incident-detail-hero{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin:20px 0 25px;
}

.incident-detail-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.incident-detail-section{
    margin-top:22px;
    border:1px solid #27314c;
    border-radius:20px;
    padding:20px;
    background:#0a1325;
}

.incident-detail-section h2{
    margin-top:0;
}

.incident-cause-box{
    padding:15px;
    border-radius:14px;
    background:#0d172c;
    color:#c5cce0;
}

.incident-snapshot-table-wrap{
    width:100%;
    overflow:auto;
}

.incident-snapshot-table{
    width:100%;
    border-collapse:collapse;
    min-width:950px;
}

.incident-snapshot-table th,
.incident-snapshot-table td{
    padding:12px;
    border-bottom:1px solid #222d47;
    text-align:left;
    white-space:nowrap;
}

.incident-snapshot-table th{
    color:#8490a8;
}

.incident-empty-small{
    color:#8490a8;
    padding:15px 0;
}

@media(max-width:800px){

    .real-inc-page{
        padding-bottom:180px;
    }

    .real-inc-summary{
        grid-template-columns:repeat(2,1fr);
    }

    .real-inc-stat strong{
        font-size:25px;
    }

    .real-inc-data{
        grid-template-columns:repeat(2,1fr);
    }

    .incident-detail-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .incident-detail-hero{
        align-items:flex-start;
    }
}

/* ===== END SKYNET REAL INCIDENT HISTORY ===== */



/* ===== SKYNET DASHBOARD HISTORY EMPTY ===== */

.dashboard-history-empty{
    min-height:105px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:22px;
}

.dashboard-history-check{
    width:46px;
    height:46px;
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#35e39a;
    border:1px solid #35e39a;
    background:rgba(53,227,154,.06);

    font-size:23px;
    font-weight:900;
}

.dashboard-history-empty b{
    display:block;
    margin-bottom:5px;
}

.dashboard-history-empty small{
    display:block;
    color:var(--muted);
    line-height:1.45;
}

@media(max-width:700px){

    .dashboard-history-empty{
        justify-content:flex-start;
        padding:18px 8px;
    }

}

/* ===== END SKYNET DASHBOARD HISTORY EMPTY ===== */


/* ===== SKYNET DASHBOARD EVENTS EMPTY ===== */

.dashboard-events-empty{
    min-height:250px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;

    text-align:left;
}

.dashboard-events-empty-icon{
    width:54px;
    height:54px;

    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:1px solid #35e39a;
    background:rgba(53,227,154,.06);

    color:#35e39a;

    font-size:27px;
    font-weight:900;
}

.dashboard-events-empty strong{
    display:block;
    font-size:17px;
    margin-bottom:6px;
}

.dashboard-events-empty small{
    display:block;
    max-width:330px;

    color:var(--muted);

    line-height:1.5;
}

@media(max-width:700px){

    .dashboard-events-empty{
        min-height:270px;
        padding:15px;
    }

}

/* ===== END SKYNET DASHBOARD EVENTS EMPTY ===== */


/* ===== SKYNET GLOBAL SEARCH PAGE ===== */

.search,
.mobile-search{
    margin:0;
}

.search input,
.mobile-search input{
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:inherit;
    font:inherit;
}

.search input{
    width:100%;
}

.mobile-search input{
    width:100%;
    color:#d9deeb;
}

.mobile-search input::placeholder,
.search input::placeholder{
    color:#7f899f;
    opacity:1;
}


.global-search-page{
    max-width:1100px;
    margin:0 auto;
    padding-bottom:160px;
}

.global-search-head{
    margin-bottom:22px;
}

.global-search-head h1{
    margin:5px 0;
}

.global-search-head p{
    margin:0;
    color:#8490a8;
}

.global-search-kicker{
    color:#a879ff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
}


.global-search-form{
    display:flex;
    align-items:center;
    gap:12px;

    border:1px solid #29334e;
    border-radius:18px;

    padding:11px 12px 11px 17px;

    background:#091326;

    margin-bottom:18px;
}

.global-search-form > span{
    color:#8994aa;
    font-size:20px;
}

.global-search-form input{
    flex:1;
    min-width:0;

    border:0;
    outline:0;

    background:transparent;
    color:#fff;

    font-size:16px;
}

.global-search-form input::placeholder{
    color:#758199;
}

.global-search-form button{
    border:1px solid #6840bc;
    background:rgba(105,64,188,.24);
    color:#d8c2ff;

    border-radius:13px;

    padding:11px 18px;

    font-weight:900;
    cursor:pointer;
}


.global-search-summary{
    color:#8792a9;
    margin-bottom:22px;
}

.global-search-summary strong,
.global-search-summary b{
    color:#fff;
}


.global-search-section{
    margin-top:25px;
}

.global-search-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:10px;
}

.global-search-section-head h2{
    margin:0;
}

.global-search-section-head span{
    min-width:29px;
    height:29px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:rgba(111,65,195,.18);
    color:#b893ff;

    font-weight:900;
    font-size:12px;
}


.global-search-results{
    display:grid;
    gap:9px;
}


.global-search-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    padding:15px 17px;

    border:1px solid #26314d;
    border-radius:16px;

    background:#0a1428;

    text-decoration:none;
    color:inherit;
}

.global-search-card:hover{
    border-color:#6840bc;
}

.global-search-card strong{
    display:block;
}

.global-search-card small{
    display:block;
    margin-top:4px;
    color:#8490a8;
}


.global-search-card-main{
    display:flex;
    align-items:center;
    gap:11px;
}


.global-search-status{
    width:10px;
    height:10px;
    flex:0 0 auto;
    border-radius:50%;
    background:#7d879b;
}

.global-search-status.online{
    background:#35e39a;
    box-shadow:0 0 9px rgba(53,227,154,.45);
}

.global-search-status.offline{
    background:#ff6178;
}

.global-search-status.warning,
.global-search-status.degraded{
    background:#ffad55;
}


.global-search-path{
    color:#818ca3;
    font-size:12px;
    text-align:right;
}

.global-search-path b{
    color:#ad83ff;
    font-size:22px;
    margin-left:8px;
}


.global-search-empty{
    min-height:280px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-align:center;

    border:1px solid #27314c;
    border-radius:22px;

    background:#091326;

    padding:30px;
}

.global-search-empty > div{
    width:64px;
    height:64px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:1px solid #6840bc;

    color:#ae84ff;

    font-size:28px;
}

.global-search-empty h2{
    margin:18px 0 5px;
}

.global-search-empty p{
    max-width:480px;
    margin:0;
    color:#8490a8;
    line-height:1.55;
}


@media(max-width:700px){

    .global-search-page{
        padding-bottom:190px;
    }

    .global-search-form{
        padding:9px 9px 9px 14px;
    }

    .global-search-form button{
        padding:10px 13px;
    }

    .global-search-card{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .global-search-path{
        width:100%;
        text-align:left;
    }
}

/* ===== END SKYNET GLOBAL SEARCH PAGE ===== */



/* ===== SKYNET SAFE MOBILE SEARCH INPUT ===== */

@media(max-width:760px){

    .mobile-search{
        margin:0 !important;
    }

    .mobile-search input{
        flex:1 1 auto;
        width:100%;
        min-width:0;

        height:auto !important;
        min-height:0 !important;

        margin:0;
        padding:0 6px;

        border:0;
        outline:0;

        background:transparent;
        color:#d9deeb;

        font:inherit;
        font-size:16px;

        opacity:1;
        visibility:visible;

        pointer-events:auto;
    }

    .mobile-search input::placeholder{
        color:#7f899f;
        opacity:1;
    }

    /* Не даём поиску перекрывать заголовок главной */
    .mobile-toolbar{
        z-index:auto !important;
    }

    .page-head{
        position:relative;
        z-index:1;

        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
    }

    .page-head h1,
    .page-head p{
        visibility:visible !important;
        opacity:1 !important;
    }
}

/* ===== END SKYNET SAFE MOBILE SEARCH INPUT ===== */


/* ===== SKYNET REAL JOURNALS PAGE ===== */

.journals-page{
    max-width:1150px;
    margin:0 auto;
    padding-bottom:150px;
}

.journals-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:22px;
}

.journals-head h1{
    margin:5px 0 6px;
}

.journals-head p{
    margin:0;
    color:#8490a8;
}

.journals-live{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 13px;
    border:1px solid rgba(48,219,139,.20);
    border-radius:12px;
    background:rgba(48,219,139,.055);
    color:#83e7b7;
    font-size:10px;
    font-weight:800;
}


.journals-services{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}

.journal-service-card{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
    padding:14px;
    border:1px solid #202c49;
    border-radius:15px;
    background:#0b1428;
    color:inherit;
    text-decoration:none;
    transition:.18s ease;
}

.journal-service-card:hover,
.journal-service-card.active{
    border-color:#6840bc;
    background:rgba(104,64,188,.10);
}

.journal-service-icon{
    width:39px;
    height:39px;
    flex:0 0 39px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(124,77,255,.12);
    color:#b493ff;
    font-size:17px;
}

.journal-service-text{
    flex:1;
    min-width:0;
}

.journal-service-text strong{
    display:block;
    font-size:12px;
}

.journal-service-text small{
    display:block;
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#71809d;
    font-size:8px;
}

.journal-state{
    padding:5px 7px;
    border-radius:8px;
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.journal-state.up{
    color:#3fe09a;
    background:rgba(48,219,139,.09);
}

.journal-state.idle{
    color:#e7b65e;
    background:rgba(231,182,94,.09);
}

.journal-state.down{
    color:#ff7186;
    background:rgba(255,81,104,.09);
}


.journal-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:16px;
    padding:13px 15px;
    border:1px solid #202c49;
    border-bottom:0;
    border-radius:15px 15px 0 0;
    background:#0b1428;
}

.journal-toolbar strong{
    display:block;
    font-size:12px;
}

.journal-toolbar small{
    display:block;
    margin-top:3px;
    color:#74819c;
    font-size:9px;
}

.journal-line-buttons{
    display:flex;
    gap:6px;
}

.journal-line-buttons a{
    min-width:39px;
    padding:7px 8px;
    border:1px solid #293653;
    border-radius:9px;
    text-align:center;
    color:#8794ad;
    text-decoration:none;
    font-size:9px;
    font-weight:900;
}

.journal-line-buttons a.active{
    border-color:#7047c7;
    color:#d9c7ff;
    background:rgba(112,71,199,.13);
}


.journal-terminal{
    overflow:hidden;
    border:1px solid #202c49;
    border-radius:0 0 15px 15px;
    background:#070d19;
}

.journal-terminal-head{
    min-height:42px;
    display:flex;
    align-items:center;
    padding:0 14px;
    border-bottom:1px solid #18233b;
    background:#091225;
}

.journal-terminal-head b{
    flex:1;
    text-align:center;
    color:#929db2;
    font-size:9px;
}

.journal-terminal-head a{
    color:#a879ff;
    text-decoration:none;
    font-size:9px;
    font-weight:800;
}

.journal-terminal-dots{
    display:flex;
    gap:5px;
}

.journal-terminal-dots span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#36425d;
}

.journal-terminal pre{
    min-height:430px;
    max-height:650px;
    margin:0;
    padding:16px;
    overflow:auto;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    color:#aab5c9;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:10px;
    line-height:1.55;
}


@media(max-width:900px){

    .journals-services{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


@media(max-width:600px){

    .journals-page{
        padding-bottom:180px;
    }

    .journals-head{
        display:block;
    }

    .journals-live{
        width:max-content;
        margin-top:13px;
    }

    .journals-services{
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .journal-service-card{
        padding:10px;
    }

    .journal-service-icon{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .journal-state{
        display:none;
    }

    .journal-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .journal-line-buttons{
        width:100%;
    }

    .journal-line-buttons a{
        flex:1;
    }

    .journal-terminal pre{
        min-height:380px;
        max-height:540px;
        padding:12px;
        font-size:9px;
    }
}

/* ===== END SKYNET REAL JOURNALS PAGE ===== */


/* ===== SKYNET USER ACCESS PAGE ===== */

.user-access-page{
    max-width:1150px;
    margin:0 auto;
    padding-bottom:160px;
}

.user-access-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.user-access-head h1{
    margin:5px 0 6px;
}

.user-access-head p{
    margin:0;
    color:#8490a8;
}

.user-access-count{
    padding:9px 12px;
    border:1px solid #293653;
    border-radius:11px;
    color:#ae91ed;
    background:rgba(104,64,188,.08);
    font-size:10px;
    font-weight:900;
}

.ua-message{
    margin-bottom:12px;
    padding:12px 14px;
    border-radius:12px;
    font-size:11px;
    font-weight:800;
}

.ua-message.success{
    color:#55dfa0;
    border:1px solid rgba(48,219,139,.22);
    background:rgba(48,219,139,.06);
}

.ua-message.error{
    color:#ff8292;
    border:1px solid rgba(255,81,104,.22);
    background:rgba(255,81,104,.06);
}

.ua-create-card,
.ua-user-card{
    border:1px solid #202c49;
    border-radius:17px;
    background:#0b1428;
}

.ua-create-card{
    padding:17px;
    margin-bottom:14px;
}

.ua-card-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}

.ua-card-title > span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#b493ff;
    background:rgba(124,77,255,.12);
    font-size:18px;
}

.ua-card-title strong{
    display:block;
}

.ua-card-title small{
    display:block;
    margin-top:3px;
    color:#75819a;
    font-size:9px;
}

.ua-create-form{
    display:grid;
    grid-template-columns:1.2fr 1.2fr .8fr auto;
    gap:9px;
    align-items:end;
}

.ua-create-form label{
    color:#8490a8;
    font-size:9px;
    font-weight:800;
}

.ua-create-form input,
.ua-create-form select,
.ua-inline-form select,
.ua-password input{
    width:100%;
    min-height:41px;
    margin-top:5px;
    padding:0 11px;
    border:1px solid #293653;
    border-radius:10px;
    outline:0;
    background:#081123;
    color:#e8ecf8;
}

.ua-create-form input:focus,
.ua-create-form select:focus,
.ua-inline-form select:focus,
.ua-password input:focus{
    border-color:#7047c7;
}

.ua-create-button{
    min-height:41px;
}

.ua-users-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
}

.ua-user-card{
    min-width:0;
    padding:16px;
}

.ua-user-top{
    display:flex;
    align-items:center;
    gap:11px;
}

.ua-user-avatar{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:#c7afff;
    background:
        linear-gradient(
            145deg,
            rgba(124,77,255,.23),
            rgba(74,43,145,.12)
        );
    font-weight:900;
}

.ua-user-name{
    flex:1;
    min-width:0;
}

.ua-user-name strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
}

.ua-user-name small{
    display:block;
    margin-top:3px;
    color:#6f7c96;
    font-size:8px;
}

.ua-user-badges{
    display:flex;
    gap:5px;
}

.ua-role,
.ua-status{
    padding:5px 7px;
    border-radius:8px;
    font-size:7px;
    font-weight:900;
    text-transform:uppercase;
}

.ua-role.admin{
    color:#c5a8ff;
    background:rgba(124,77,255,.12);
}

.ua-role.readonly{
    color:#8ca3c8;
    background:rgba(100,123,165,.10);
}

.ua-status.enabled{
    color:#45df9a;
    background:rgba(48,219,139,.08);
}

.ua-status.disabled{
    color:#ff7689;
    background:rgba(255,81,104,.08);
}

.ua-user-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin:14px 0;
    padding:12px 0;
    border-top:1px solid rgba(120,140,180,.10);
    border-bottom:1px solid rgba(120,140,180,.10);
}

.ua-user-info span{
    display:block;
    color:#707d96;
    font-size:8px;
}

.ua-user-info b{
    display:block;
    margin-top:4px;
    font-size:9px;
}

.ua-actions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    align-items:center;
}

.ua-actions form{
    margin:0;
}

.ua-inline-form select{
    width:auto;
    min-height:34px;
    margin:0;
    font-size:9px;
}

.ua-btn,
.ua-password summary,
.ua-password button{
    min-height:34px;
    padding:0 10px;
    border:1px solid #293653;
    border-radius:9px;
    background:#091226;
    color:#9eabc1;
    cursor:pointer;
    font-size:9px;
    font-weight:800;
}

.ua-btn.warning{
    color:#e6b65e;
}

.ua-btn.success{
    color:#49dc98;
}

.ua-btn.danger{
    color:#ff7186;
}

.ua-btn:disabled,
.ua-inline-form select:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.ua-password{
    position:relative;
}

.ua-password summary{
    display:flex;
    align-items:center;
    list-style:none;
}

.ua-password summary::-webkit-details-marker{
    display:none;
}

.ua-password form{
    position:absolute;
    z-index:20;
    right:0;
    top:39px;
    width:220px;
    padding:10px;
    border:1px solid #293653;
    border-radius:11px;
    background:#081123;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
}

.ua-password input{
    min-height:37px;
    margin:0 0 7px;
}

.ua-password button{
    width:100%;
    color:#c9b2ff;
}

@media(max-width:900px){

    .ua-create-form{
        grid-template-columns:1fr 1fr;
    }

    .ua-users-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){

    .user-access-page{
        padding-bottom:190px;
    }

    .user-access-head{
        align-items:flex-start;
    }

    .user-access-head h1{
        font-size:29px;
    }

    .ua-create-form{
        grid-template-columns:1fr;
    }

    .ua-create-button{
        width:100%;
    }

    .ua-user-card{
        padding:14px;
    }

    .ua-user-top{
        align-items:flex-start;
    }

    .ua-user-badges{
        flex-direction:column;
        align-items:flex-end;
    }

    .ua-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .ua-actions > form,
    .ua-actions > details{
        width:100%;
    }

    .ua-btn,
    .ua-password summary,
    .ua-inline-form select{
        width:100%;
    }

    .ua-password form{
        left:0;
        right:auto;
        width:100%;
        min-width:220px;
    }
}

/* ===== END SKYNET USER ACCESS PAGE ===== */


/* ===== SKYNET SETTINGS USER ACCESS ===== */

.settings-user-access{
    grid-column:1/-1;

    display:flex;
    align-items:center;
    gap:14px;

    padding:17px 18px;

    border:1px solid rgba(124,77,255,.28);
    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(124,77,255,.11),
            rgba(11,20,40,.96)
        );

    color:inherit;
    text-decoration:none;

    transition:.18s ease;
}

.settings-user-access:hover{
    border-color:#7047c7;
    transform:translateY(-1px);
}

.settings-user-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;

    display:grid;
    place-items:center;

    border-radius:14px;

    color:#c5adff;
    background:rgba(124,77,255,.16);

    font-size:22px;
}

.settings-user-text{
    flex:1;
    min-width:0;
}

.settings-user-text strong{
    display:block;

    color:#f4f6ff;
    font-size:15px;
}

.settings-user-text small{
    display:block;

    margin-top:4px;

    color:#8792aa;
    font-size:10px;
}

.settings-user-status{
    padding:6px 9px;

    border-radius:9px;

    color:#bfa3ff;
    background:rgba(124,77,255,.11);

    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.settings-user-arrow{
    color:#a77cff;
    font-size:25px;
    font-weight:800;
}

@media(max-width:700px){

    .settings-user-access{
        grid-column:auto;

        padding:16px;
        border-radius:16px;
    }

    .settings-user-icon{
        width:46px;
        height:46px;
        flex-basis:46px;
    }

    .settings-user-status{
        display:none;
    }

}

/* ===== END SKYNET SETTINGS USER ACCESS ===== */


/* ===== SKYNET INFRASTRUCTURE WEB ADMIN ===== */

.infra-main-add{
    width:58px;
    height:58px;
    padding:0;
    display:grid;
    place-items:center;
    border-radius:16px;
    font-size:28px;
}

.infra-message{
    margin:0 0 14px;
    padding:12px 14px;
    border-radius:12px;
    font-size:11px;
    font-weight:800;
}

.infra-message.success{
    color:#53e5a2;
    border:1px solid rgba(58,224,147,.25);
    background:rgba(58,224,147,.07);
}

.infra-message.error{
    color:#ff8392;
    border:1px solid rgba(255,91,112,.25);
    background:rgba(255,91,112,.07);
}

.infra-modal{
    position:fixed;
    inset:0;
    z-index:5000;

    display:none;
    align-items:center;
    justify-content:center;

    padding:22px;

    background:rgba(2,5,16,.82);
    backdrop-filter:blur(9px);
}

.infra-modal.open{
    display:flex;
}

.infra-modal-card{
    width:min(760px,100%);
    max-height:calc(100vh - 44px);
    overflow:auto;

    padding:20px;

    border:1px solid rgba(122,77,255,.30);
    border-radius:22px;

    background:
        linear-gradient(
            155deg,
            rgba(17,25,51,.98),
            rgba(7,13,29,.99)
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,.60);
}

.infra-modal-small{
    width:min(520px,100%);
}

.infra-modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;

    margin-bottom:18px;
}

.infra-modal-head small{
    color:#8c78c8;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.infra-modal-head h2{
    margin:4px 0 0;
    font-size:25px;
}

.infra-modal-close{
    width:40px;
    height:40px;
    flex:0 0 40px;

    display:grid;
    place-items:center;

    border:1px solid #293653;
    border-radius:12px;

    background:#091226;
    color:#9ba6bf;

    font-size:23px;
    cursor:pointer;
}

.infra-form-section{
    margin-top:12px;
    padding:16px;

    border:1px solid #202c49;
    border-radius:17px;

    background:rgba(8,17,35,.72);
}

.infra-form-title{
    display:flex;
    align-items:center;
    gap:11px;

    margin-bottom:14px;
}

.infra-form-title > span{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#b99cff;
    background:rgba(124,77,255,.14);
}

.infra-form-title strong{
    display:block;
}

.infra-form-title small{
    display:block;
    margin-top:3px;
    color:#77839d;
    font-size:9px;
}

.infra-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
}

.infra-form label{
    color:#8995ac;
    font-size:9px;
    font-weight:800;
}

.infra-form input,
.infra-form select,
.infra-form textarea{
    width:100%;
    margin-top:6px;

    border:1px solid #293653;
    border-radius:11px;

    outline:none;

    background:#071022;
    color:#eef1fb;

    font:inherit;
}

.infra-form input,
.infra-form select{
    min-height:43px;
    padding:0 12px;
}

.infra-form textarea{
    padding:11px 12px;
    resize:vertical;
}

.infra-form input:focus,
.infra-form select:focus,
.infra-form textarea:focus{
    border-color:#7447dd;
}

.infra-wide{
    grid-column:1/-1;
}

.infra-method-box{
    grid-column:1/-1;

    display:grid;
    grid-template-columns:1fr 130px;
    gap:10px;

    padding:14px;

    border:1px solid rgba(124,77,255,.20);
    border-radius:14px;

    background:rgba(124,77,255,.05);
}

.infra-method-title{
    grid-column:1/-1;

    color:#bba1f7;
    font-size:10px;
    font-weight:900;
}

.infra-method-box > small{
    grid-column:1/-1;

    color:#77839b;
    font-size:8px;
    line-height:1.5;
}

.infra-snmp-box{
    display:none;
}

.infra-device-form.network-device
.infra-snmp-box{
    display:grid;
}

.infra-device-form.network-device
.infra-ssh-box{
    display:none;
}

.infra-device-form.server-device
.infra-ssh-box{
    display:grid;
}

.infra-device-form:not(.server-device)
.infra-ssh-box{
    display:none;
}

body.infra-modal-open{
    overflow:hidden;
}

@media(max-width:650px){

    .infra-modal{
        align-items:flex-end;
        padding:0;
    }

    .infra-modal-card{
        width:100%;
        max-height:92vh;

        padding:18px 16px 28px;

        border-radius:24px 24px 0 0;
    }

    .infra-form{
        grid-template-columns:1fr;
    }

    .infra-wide{
        grid-column:auto;
    }

    .infra-method-box{
        grid-template-columns:1fr;
    }

    .infra-method-title,
    .infra-method-box > small{
        grid-column:auto;
    }

    .infra-main-add{
        width:54px;
        height:54px;
    }
}

/* ===== END SKYNET INFRASTRUCTURE WEB ADMIN ===== */


/* ===== SKYNET DASHBOARD ACTIVE CRUD ===== */

.infra-dashboard-card,
.infra-card-link{
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}

.infra-dashboard-card{
    display:block;
}

.infra-dashboard-card:active,
.infra-card-link:active{
    transform:scale(.985);
}

.infra-dashboard-card:hover{
    border-color:
        rgba(132,91,255,.60);
}

.filter-row .filter{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    color:var(--muted);
    text-decoration:none;
}

.filter-row .filter.active{
    color:white;
}

#cities,
#server-rooms{
    scroll-margin-top:100px;
}

.city-card.infra-card-link{
    transition:
        border-color .18s ease,
        transform .18s ease;
}

.city-card.infra-card-link:hover{
    border-color:
        rgba(129,87,255,.45);

    transform:translateY(-1px);
}

.room-actions{
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.infra-manage-open{
    text-decoration:none;
}

.infra-manage-panel{
    max-width:850px;
}

.infra-manage-readonly{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;

    padding:13px;

    border:1px solid #263552;
    border-radius:13px;

    background:
        rgba(4,10,23,.45);
}

.infra-manage-readonly span{
    color:var(--muted);
    font-size:9px;
}

.infra-manage-readonly b{
    display:block;
    margin-top:4px;
    color:white;
    font-size:11px;
}

.infra-danger-zone{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:22px;
    padding:16px;

    border:1px solid
        rgba(255,82,105,.25);

    border-radius:14px;

    background:
        rgba(255,82,105,.045);
}

.infra-danger-zone strong,
.infra-danger-zone small{
    display:block;
}

.infra-danger-zone strong{
    color:#ff7486;
    font-size:12px;
}

.infra-danger-zone small{
    max-width:520px;
    margin-top:5px;

    color:var(--muted);
    font-size:9px;
    line-height:1.5;
}

.infra-delete-btn{
    min-height:40px;

    padding:0 17px;

    border:1px solid
        rgba(255,82,105,.45);

    border-radius:10px;

    background:
        rgba(255,82,105,.10);

    color:#ff6f82;

    font-weight:900;

    cursor:pointer;
}

.infra-delete-btn:hover{
    background:
        rgba(255,82,105,.17);
}

@media(max-width:650px){

    .infra-manage-readonly{
        grid-template-columns:1fr;
    }

    .infra-danger-zone{
        align-items:stretch;
        flex-direction:column;
    }

    .infra-delete-btn{
        width:100%;
    }

}

/* ===== END SKYNET DASHBOARD ACTIVE CRUD ===== */


/* ===== SKYNET NETWORK ACCESS UI ===== */

.infra-network-access-box{
    display:none;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}

.infra-device-form.network-device
.infra-network-access-box{
    display:grid;
}

.infra-snmp-test-row{
    grid-column:1/-1;

    display:flex;
    align-items:center;
    gap:12px;

    margin-top:4px;
}

.infra-snmp-test{
    min-width:125px;

    color:#b69aff;
    border-color:
        rgba(132,83,255,.55);

    background:
        rgba(120,72,255,.08);
}

.infra-snmp-test:disabled{
    opacity:.45;
    cursor:wait;
}

.infra-snmp-result{
    flex:1;

    font-size:9px;
    line-height:1.4;

    color:var(--muted);
}

.infra-snmp-result.ok{
    color:#34e89a;
}

.infra-snmp-result.error{
    color:#ff697d;
}

@media(max-width:650px){

    .infra-network-access-box{
        grid-template-columns:1fr;
    }

    .infra-snmp-test-row{
        flex-direction:column;
        align-items:stretch;
    }

    .infra-snmp-test{
        width:100%;
    }

}

/* ===== END SKYNET NETWORK ACCESS UI ===== */


.infra-snmp-fixed-port{
    display:flex;
    align-items:center;
    min-height:43px;
    padding:0 12px;
    border:1px solid #293653;
    border-radius:11px;
    background:#071022;
    color:#8995ac;
    font-size:10px;
}

.infra-snmp-fixed-port b{
    margin-left:5px;
    color:#fff;
}


/* ===== SKYNET DEVICE QUICK ACTIONS ===== */

.infra-device-quick-actions{
    grid-column:1/-1;

    position:sticky;
    top:0;
    z-index:20;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;

    margin:2px 0 5px;
    padding:9px;

    border:1px solid rgba(126,78,255,.24);
    border-radius:14px;

    background:rgba(7,13,29,.94);
    backdrop-filter:blur(14px);
}

.infra-device-quick-actions
.infra-snmp-result{
    grid-column:1/-1;

    min-height:14px;

    padding:0 3px;
}

.infra-device-quick-actions
button{
    min-height:44px;
}

.infra-device-form:not(.network-device)
.infra-device-quick-actions
.infra-snmp-test{
    display:none;
}

.infra-device-form:not(.network-device)
.infra-device-quick-actions{
    grid-template-columns:1fr;
}

.infra-device-form:not(.network-device)
.infra-device-quick-actions
.infra-snmp-result{
    display:none;
}

@media(max-width:650px){

    .infra-device-quick-actions{
        top:0;
        grid-template-columns:1fr 1fr;
    }

    .infra-device-quick-actions
    button{
        font-size:10px;
    }

}

/* ===== END SKYNET DEVICE QUICK ACTIONS ===== */


/* ===== RACK DEVICE NETWORK MODE HARD FIX ===== */

#infra-device-add-rack
.infra-network-access-box,

#infra-device-add-rack
.infra-snmp-box,

#infra-device-add-rack
.infra-ssh-box{
    display:none;
}


#infra-device-add-rack
.infra-device-form.network-device
.infra-network-access-box,

#infra-device-add-rack
.infra-device-form.network-device
.infra-snmp-box{
    display:grid !important;
}


#infra-device-add-rack
.infra-device-form.server-device
.infra-ssh-box{
    display:grid !important;
}

/* ===== END RACK DEVICE NETWORK MODE HARD FIX ===== */


/* ===== SKYNET DEVICE SNMP CARD ===== */

.access-profile-card.snmp-device{
    grid-column:1/-1;

    border-color:
        rgba(52,232,154,.35);

    background:
        linear-gradient(
            145deg,
            rgba(52,232,154,.035),
            rgba(126,78,255,.05)
        );
}

.snmp-device
.access-type{
    color:#34e89a;
}

.snmp-test-device-btn{
    margin-top:18px;
}

.snmp-device-note{
    margin-top:14px;

    font-size:10px;
    line-height:1.55;

    color:var(--muted);
}

@media(max-width:650px){

    .access-profile-card.snmp-device{
        grid-column:1;
    }

}

/* ===== END SKYNET DEVICE SNMP CARD ===== */


/* ===== SKYNET REAL SNMP PORTS ===== */

.snmp-device-summary{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:10px;
    margin:18px 0;
}

.snmp-device-summary > div{
    padding:13px 15px;
    border:1px solid #26334f;
    border-radius:14px;
    background:#091226;
}

.snmp-device-summary span{
    display:block;
    margin-bottom:5px;
    font-size:10px;
    color:#818da5;
}

.snmp-device-summary strong{
    font-size:16px;
}

.snmp-port-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:12px;
}

.snmp-port-card{
    position:relative;
    overflow:hidden;

    padding:16px;

    border:1px solid #293653;
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #0c1730,
            #081123
        );
}

.snmp-port-card.port-up{
    border-color:
        rgba(48,220,150,.40);
}

.snmp-port-card.port-down{
    border-color:
        rgba(255,83,110,.48);
}

.snmp-port-card.port-up:before,
.snmp-port-card.port-down:before{
    content:"";
    position:absolute;

    top:0;
    bottom:0;
    left:0;

    width:4px;
}

.snmp-port-card.port-up:before{
    background:#31df98;
}

.snmp-port-card.port-down:before{
    background:#ff536e;
}

.snmp-port-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;

    margin-bottom:14px;
}

.snmp-port-name{
    font-size:15px;
    font-weight:800;
    color:#fff;
    word-break:break-word;
}

.snmp-port-state{
    flex:0 0 auto;

    padding:5px 8px;
    border-radius:8px;

    font-size:9px;
    font-weight:800;
}

.snmp-port-state.up{
    color:#39e6a1;
    background:
        rgba(48,220,150,.12);
}

.snmp-port-state.down{
    color:#ff6b81;
    background:
        rgba(255,83,110,.12);
}

.snmp-port-info{
    display:grid;
    gap:7px;
}

.snmp-port-info > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    min-height:25px;

    border-bottom:
        1px solid rgba(80,96,130,.18);
}

.snmp-port-info span{
    color:#7f8ba3;
    font-size:10px;
}

.snmp-port-info strong{
    color:#f5f7ff;
    font-size:10px;
    text-align:right;
}

.snmp-port-mac{
    font-family:monospace;
}

@media(max-width:650px){

    .snmp-port-grid{
        grid-template-columns:1fr;
    }

    .snmp-device-summary{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}

/* ===== END SKYNET REAL SNMP PORTS ===== */



/* ===== SKYNET NETWORK DETAIL PREMIUM V2 ===== */


/* Hide server-only blocks on network equipment */

body:has(#device-network-mode)
.server-only-section{
    display:none !important;
}


/* Hide older duplicated port block */

body:has(#device-network-mode)
#device-snmp-ports{
    display:none !important;
}


.network-premium-section{
    margin:18px 0 24px;
    padding:22px;

    border:
        1px solid rgba(105,84,190,.34);

    border-radius:26px;

    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(113,62,255,.15),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #0b1530,
            #071022
        );

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.20);
}


.network-premium-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;

    margin-bottom:20px;
}


.network-kicker{
    margin-bottom:5px;

    color:#a989ff;

    font-size:10px;
    font-weight:900;

    letter-spacing:.08em;
}


.network-premium-head h2{
    margin:0;

    color:#fff;

    font-size:24px;
    line-height:1.1;
}


.network-premium-head p{
    margin:7px 0 0;

    color:#818ca5;

    font-size:12px;
}


.network-main-status{
    flex:0 0 auto;

    padding:9px 12px;

    border-radius:13px;

    font-size:10px;
    font-weight:900;
}


.network-main-status.online{
    color:#38e7a0;

    border:
        1px solid
        rgba(53,229,158,.70);

    background:
        rgba(41,209,143,.09);
}


.network-main-status.offline{
    color:#ff647b;

    border:
        1px solid
        rgba(255,81,110,.65);

    background:
        rgba(255,81,110,.08);
}


.network-alert{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:16px;
    padding:13px 14px;

    border:
        1px solid
        rgba(255,81,110,.43);

    border-radius:16px;

    background:
        rgba(255,67,95,.07);
}


.network-alert-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    border-radius:11px;

    color:#ff657c;

    background:
        rgba(255,81,110,.13);

    font-weight:900;
}


.network-alert strong{
    display:block;

    color:#ff7388;

    font-size:12px;
}


.network-alert span{
    display:block;

    margin-top:2px;

    color:#8d96aa;

    font-size:9px;
}


.network-stat-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:12px;
}


.network-stat-card{
    min-height:112px;

    padding:16px;

    border:
        1px solid #283550;

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            #0d1830,
            #091225
        );
}


.network-stat-card.stat-up{
    border-color:
        rgba(49,222,151,.32);
}


.network-stat-card.stat-down{
    border-color:
        rgba(255,81,110,.38);
}


.network-stat-label{
    display:block;

    margin-bottom:8px;

    color:#818da5;

    font-size:12px;
}


.network-stat-card strong{
    display:block;

    color:#f5f7ff;

    font-size:24px;
    line-height:1;
}


.network-stat-card.stat-up strong{
    color:#31df99;
}


.network-stat-card.stat-down strong{
    color:#ff5f79;
}


.network-stat-card small{
    display:block;

    margin-top:9px;

    color:#65718a;

    font-size:9px;
}


.snmp-ok-text{
    color:#31df99 !important;
}


.network-link-types{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:9px;

    margin-top:12px;
}


.network-link-types > div{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:11px 12px;

    border:
        1px solid #26334d;

    border-radius:13px;

    background:#091225;
}


.network-link-types span{
    color:#79859d;

    font-size:10px;
}


.network-link-types strong{
    color:#fff;

    font-size:13px;
}


.network-ports-title{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin:
        25px 0 13px;
}


.network-ports-title h3{
    margin:0;

    color:#fff;

    font-size:21px;
}


.network-ports-title p{
    margin:4px 0 0;

    color:#768299;

    font-size:10px;
}


.network-port-count{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:38px;
    height:38px;

    padding:0 10px;

    border:
        1px solid
        rgba(132,83,255,.48);

    border-radius:12px;

    color:#b293ff;

    background:
        rgba(120,72,255,.09);

    font-size:13px;
    font-weight:900;
}


.network-port-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:10px;
}


.network-port-card{
    position:relative;

    min-width:0;

    padding:13px;

    overflow:hidden;

    border:
        1px solid #29364f;

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            #0d1830,
            #091225
        );
}


.network-port-card.is-up{
    border-color:
        rgba(43,215,145,.32);
}


.network-port-card.is-down{
    border-color:
        rgba(255,78,107,.52);

    background:
        linear-gradient(
            145deg,
            rgba(48,17,31,.75),
            #091225
        );
}


.network-port-card:before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;
}


.network-port-card.is-up:before{
    background:#2ee09a;
}


.network-port-card.is-down:before{
    background:#ff536f;
}


.network-port-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:10px;
}


.network-port-number{
    display:flex;
    align-items:center;
    justify-content:center;

    width:27px;
    height:27px;

    border-radius:8px;

    background:
        rgba(126,78,255,.12);

    color:#a98cff;

    font-size:9px;
    font-weight:900;
}


.network-port-badge{
    padding:4px 7px;

    border-radius:7px;

    font-size:8px;
    font-weight:900;
}


.network-port-badge.up{
    color:#33e39c;

    background:
        rgba(43,215,145,.11);
}


.network-port-badge.down{
    color:#ff6179;

    background:
        rgba(255,78,107,.12);
}


.network-port-name{
    min-height:32px;

    color:#fff;

    font-size:11px;
    font-weight:800;

    line-height:1.25;

    overflow-wrap:anywhere;
}


.network-port-speed{
    margin-top:6px;

    color:#a88cff;

    font-size:12px;
    font-weight:800;
}


.network-port-mac{
    margin-top:7px;

    color:#69758d;

    font-family:monospace;

    font-size:8px;

    overflow-wrap:anywhere;
}


body:has(#device-network-mode){
    padding-bottom:115px;
}


@media(max-width:650px){

    .network-premium-section{
        margin:
            12px 14px 22px;

        padding:
            18px 16px;

        border-radius:24px;
    }


    .network-premium-head h2{
        font-size:22px;
    }


    .network-stat-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }


    .network-stat-card{
        min-height:104px;

        padding:14px;
    }


    .network-stat-card strong{
        font-size:22px;
    }


    .network-port-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:9px;
    }


    .network-port-card{
        padding:12px 10px 12px 12px;
    }

}


/* ===== END SKYNET NETWORK DETAIL PREMIUM V2 ===== */






/* ===== SKYNET LIVE PORT TRAFFIC ===== */

.port-live-traffic{
    margin-top:12px;
    padding-top:10px;

    border-top:
        1px solid rgba(112,127,158,.16);
}

.port-live-state{
    display:flex;
    align-items:center;
    gap:6px;

    margin-bottom:8px;

    font-size:8px;
    font-weight:900;
}

.port-live-dot{
    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:#66738d;
}

.port-live-status{
    color:#8290aa;

    font-size:8px;
    letter-spacing:.04em;
}

.port-live-rates{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:5px;
}

.port-live-rates span{
    display:flex;
    flex-direction:column;
    gap:3px;

    min-width:0;

    color:#727e96;

    font-size:7px;
}

.port-live-rates strong{
    color:#fff;

    font-size:9px;
    font-weight:800;

    white-space:nowrap;
}

.port-live-traffic.live-up
.port-live-dot{
    background:#2be39a;

    box-shadow:
        0 0 10px
        rgba(43,227,154,.65);
}

.port-live-traffic.live-up
.port-live-status{
    color:#2be39a;
}

.port-live-traffic.live-up
.port-live-rx{
    color:#6be3ff;
}

.port-live-traffic.live-up
.port-live-tx{
    color:#b598ff;
}

.port-live-traffic.live-down
.port-live-dot{
    background:#ff5873;

    box-shadow:
        0 0 9px
        rgba(255,88,115,.5);
}

.port-live-traffic.live-down
.port-live-status{
    color:#ff657d;
}

.port-live-traffic.live-down
.port-live-rx,
.port-live-traffic.live-down
.port-live-tx{
    color:#ff7b8e;
}

.port-live-traffic.live-error
.port-live-dot{
    background:#ffb84d;
}

.port-live-traffic.live-error
.port-live-status{
    color:#ffb84d;
}

/* ===== END SKYNET LIVE PORT TRAFFIC ===== */


/* ===== EQUIPMENT NETWORK MINI STATS ===== */

.device-mini-stat.network-up strong{
    color:#2de29a;
}

.device-mini-stat.network-down{
    border-color:rgba(255,83,111,.45);
}

.device-mini-stat.network-down strong{
    color:#ff6079;
}

/* ===== END EQUIPMENT NETWORK MINI STATS ===== */


/* ===== SKYNET FINAL NETWORK EQUIPMENT CARD ===== */

.network-equipment-metrics
.network-card-up strong{
    color:#2de29a;
}

.network-equipment-metrics
.network-card-down{
    border-color:
        rgba(255,83,111,.48);
}

.network-equipment-metrics
.network-card-down strong{
    color:#ff6079;
}

.network-equipment-metrics
.network-card-max strong{
    color:#a98cff;
}

/* ===== END FINAL NETWORK EQUIPMENT CARD ===== */


/* 27.08.2026 v1.1: stroki optiki SFP v karte porta */
.snmp-port-optic span { opacity: .75; }
.snmp-port-optic strong { font-variant-numeric: tabular-nums; }

/* 27.08.2026 v1.2: optika SFP v karte porta */
.port-optic-rates { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11px; letter-spacing: .04em; opacity: .8; }
.port-optic-val { display: block; margin-top: 2px; font-size: 13px; letter-spacing: 0; opacity: 1; font-variant-numeric: tabular-nums; }

/* web-access card v1.0 2026-08-28 */
.access-profile-card.web{border-color:#6740ba;}
.web-input{background:transparent;border:none;outline:none;color:#fff;text-align:right;font-weight:700;font-size:15px;width:60%;font-family:inherit;}
.web-input::placeholder{color:#8490a8;font-weight:400;}
.web-btn{width:100%;margin-top:12px;cursor:pointer;}

/* device-info fix v1.1 2026-08-28 — rovnye kartochki svyazey */
.device-info-grid{grid-template-columns:1fr 1fr;align-items:stretch;grid-auto-rows:1fr;}
.device-info-card{display:flex;flex-direction:column;height:100%;}
.device-info-card small{display:block;min-height:2.6em;overflow-wrap:anywhere;}
.device-info-card strong{margin-top:auto;}

/* port-live-optic v1.0 2026-08-28 - urovni SFP na kartochke porta */
.port-live-optic{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);}
.port-live-optic span{display:flex;flex-direction:column;font-size:.78em;opacity:.65;}
.port-live-optic strong{font-size:1.05em;opacity:1;margin-top:2px;}

/* optic-chart v1.0 2026-08-28 - grafik urovnya SFP */
.optic-chart{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);}
.optic-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.optic-chart-title{font-size:.72em;letter-spacing:.04em;text-transform:uppercase;opacity:.5;}
.optic-chart-badge{font-size:.7em;font-weight:600;padding:2px 7px;border-radius:6px;opacity:0;transition:opacity .2s;}
.optic-chart-badge.on{opacity:1;}
.optic-chart-badge.ok{color:#34e39b;background:rgba(52,227,155,.12);}
.optic-chart-badge.warn{color:#f5a524;background:rgba(245,165,36,.14);}
.optic-chart-badge.crit{color:#f5316b;background:rgba(245,49,107,.16);}
.optic-chart-body{position:relative;height:72px;}
.optic-chart-body svg{display:block;width:100%;height:72px;overflow:visible;}
.optic-chart-empty{display:flex;align-items:center;justify-content:center;height:72px;font-size:.75em;opacity:.35;}
.optic-chart-periods{display:flex;gap:6px;margin-top:8px;}
.optic-chart-periods button{flex:1;padding:4px 0;font-size:.7em;font-weight:600;color:inherit;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:7px;opacity:.5;cursor:pointer;transition:all .15s;}
.optic-chart-periods button.active{opacity:1;background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.5);}


/* optics v1.0 2026-08-28 - razdel SFP/Optika, mobile-first + desktop */
.op-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.op-head h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0;}
.op-head p{color:rgba(255,255,255,.45);font-size:14px;margin:4px 0 0;}
.op-th{color:rgba(255,255,255,.4);font-size:12px;padding:7px 12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;white-space:nowrap;}

.op-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px;}
.op-st{position:relative;overflow:hidden;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:5px;}
.op-st::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(255,255,255,.15);}
.op-st.ok::before{background:#34e39b;}
.op-st.warn::before{background:#f5a524;}
.op-st.crit::before{background:#f5316b;}
.op-st-l{color:rgba(255,255,255,.45);font-size:12px;}
.op-st-n{font-size:28px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.op-st.ok .op-st-n{color:#34e39b;}
.op-st.warn .op-st-n{color:#f5a524;}
.op-st.crit .op-st-n{color:#f5316b;}
.op-st-x{color:rgba(255,255,255,.32);font-size:11px;}

.op-log{border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:16px;margin-bottom:22px;background:rgba(255,255,255,.02);}
.op-log-h{margin-bottom:12px;}
.op-log-h b{font-size:16px;font-weight:700;}
.op-log-h span{color:rgba(255,255,255,.4);font-size:12.5px;margin-left:8px;}
.op-ev{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07);flex-wrap:wrap;}
.op-ev-b{width:3px;align-self:stretch;border-radius:2px;flex:none;min-height:34px;}
.op-ev-b.warn{background:#f5a524;}
.op-ev-b.crit{background:#f5316b;}
.op-ev-m{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;}
.op-ev-m b{font-size:13.5px;font-weight:600;}
.op-ev-m i{color:rgba(255,255,255,.42);font-size:12px;font-style:normal;}
.op-ev-t{color:rgba(255,255,255,.42);font-size:12px;font-variant-numeric:tabular-nums;}
.op-ev-v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;min-width:88px;}
.op-ev-v.warn{color:#f5a524;}
.op-ev-v.crit{color:#f5316b;}
.op-ev-v i{display:block;color:rgba(255,255,255,.4);font-size:11px;font-weight:500;font-style:normal;margin-top:2px;}

.op-dev{margin-bottom:24px;}
.op-dev-h{display:flex;align-items:baseline;gap:9px;margin:0 2px 10px;flex-wrap:wrap;}
.op-dev-h b{font-size:15px;font-weight:700;}
.op-dev-h code{color:rgba(255,255,255,.42);font-size:12.5px;}
.op-dev-h span{margin-left:auto;color:rgba(255,255,255,.35);font-size:12px;}

.op-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch;}
.op-port{position:relative;overflow:hidden;padding:15px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;}
.op-port::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#34e39b;}
.op-port.warn::before{background:#f5a524;}
.op-port.crit::before{background:#f5316b;}
.op-port.off::before{background:rgba(255,255,255,.12);}

.op-p-top{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.op-p-idx{background:rgba(139,92,246,.16);color:#a78bfa;font-size:12px;font-weight:700;padding:3px 8px;border-radius:7px;}
.op-p-name{font-size:15px;font-weight:700;}
.op-p-pill{margin-left:auto;font-size:11px;font-weight:700;padding:4px 9px;border-radius:8px;white-space:nowrap;}
.op-p-pill.ok{color:#34e39b;background:rgba(52,227,155,.13);}
.op-p-pill.warn{color:#f5a524;background:rgba(245,165,36,.15);}
.op-p-pill.crit{color:#f5316b;background:rgba(245,49,107,.16);}
.op-p-pill.off{color:rgba(255,255,255,.45);background:rgba(255,255,255,.05);}

.op-p-vals{display:flex;gap:18px;margin-bottom:6px;flex-wrap:wrap;}
.op-p-vals>div{display:flex;flex-direction:column;gap:3px;}
.op-v-l{color:rgba(255,255,255,.4);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;}
.op-v-n{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;}
.op-v-n.sm{font-size:17px;opacity:.85;}
.op-v-n small{font-size:11px;font-weight:600;opacity:.5;margin-left:3px;}
.op-v-n.rx-ok{color:#34e39b;}
.op-v-n.rx-warn{color:#f5a524;}
.op-v-n.rx-crit{color:#f5316b;}

.op-p-foot{margin-top:auto;padding-top:9px;color:rgba(255,255,255,.38);font-size:11.5px;line-height:1.5;}
.op-p-foot b{font-weight:600;}
.op-p-foot b.warn{color:#f5a524;}
.op-p-foot b.crit{color:#f5316b;}
.op-p-empty{color:rgba(255,255,255,.38);font-size:13px;line-height:1.45;padding:4px 0 2px;}
.op-none{color:rgba(255,255,255,.4);font-size:14px;text-align:center;padding:40px 0;}

@media (min-width:900px){
  .op-head h1{font-size:32px;}
  .op-stats{grid-template-columns:repeat(4,1fr);gap:14px;}
  .op-st{padding:18px;}
  .op-st-n{font-size:34px;}
  .op-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
  .op-ev{flex-wrap:nowrap;}
  .op-ev-t{min-width:150px;text-align:right;}
}

@media (min-width:1400px){
  .op-grid{grid-template-columns:repeat(4,1fr);}
}

/* mobile-nav fix v1.1 2026-08-28 - v6 + neprozrachnaya shapka poiska */
.mobile-nav{grid-template-columns:repeat(6,1fr)!important;}
.mobile-nav a{min-width:0!important;padding-left:2px!important;padding-right:2px!important;}
.mobile-nav small{font-size:12.5px!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%;}
.mobile-nav a span{font-size:23px!important;}
.mobile-nav{align-items:center!important;height:auto!important;min-height:62px!important;padding-top:9px!important;padding-bottom:9px!important;}
.mobile-nav a{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding-top:5px!important;padding-bottom:5px!important;}
.mobile-nav a span{margin:0!important;line-height:1!important;}
.mobile-nav small{margin:0!important;}
@media(max-width:1050px){
  .content{padding-bottom:132px!important;}
  body{padding-bottom:0!important;}
}
.availability-ring small{display:block;margin-top:1px;line-height:1.2;}
@media(max-width:1050px){
  .mobile-toolbar{z-index:30!important;background:var(--bg)!important;
    box-shadow:0 6px 14px -8px rgba(0,0,0,.9);}
}


/* 28.08.2026 v1.1: beydzh statusa = knopka opornogo urovnya */
.op-p-pillf{margin-left:auto;display:flex;}
button.op-p-pill{cursor:pointer;font:inherit;font-size:11px;font-weight:700;line-height:1.15;border:1px solid transparent;}
button.op-p-pill:hover{border-color:currentColor;}



/* 28.08.2026 v1.1: perenos teksta v knopke Otkryt ustroystvo */
.page-head .infra-manage-open{display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.2;height:auto;min-height:44px;padding:10px 14px;max-width:100%;}

/* SKYNET SITES V1.0 - 14.09.2026 */
/* Mobilnaya navigaciya: 7 punktov vmesto 6 (dobavlen razdel Adresa). */

.mobile-nav{grid-template-columns:repeat(7,1fr)!important;}
.mobile-nav small{font-size:11px!important;}
.mobile-nav a span{font-size:19px!important;}

@media(max-width:400px){
    .mobile-nav small{font-size:9.5px!important;}
    .mobile-nav a span{font-size:17px!important;}
}