.system-summary{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-top:20px
}

.system-summary article{
min-height:92px;
padding:14px;
border:1px solid var(--src-border);
border-radius:12px;
background:var(--src-card)
}

.system-summary span{
display:block;
color:#627b92;
font-size:8px
}

.system-summary strong{
display:block;
margin-top:7px;
color:white;
font-size:18px
}

.system-summary small{
display:block;
margin-top:4px;
color:#4e677e;
font-size:7px
}


.system-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:13px;
margin-top:13px
}

.system-grid.single{
grid-template-columns:1fr
}


.system-body{
padding:15px
}


.system-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:11px
}

.system-field{
display:block
}

.system-field.full{
grid-column:1/-1
}

.system-field span{
display:block;
margin:0 0 5px 2px;
color:#71869b;
font-size:8px;
font-weight:700
}

.system-field input,
.system-field select,
.system-field textarea{
width:100%;
border:1px solid var(--src-border);
outline:0;
border-radius:8px;
background:rgba(255,255,255,.025);
color:#b7c6d5;
font-family:inherit;
font-size:9px
}

.system-field input,
.system-field select{
height:38px;
padding:0 9px
}

.system-field textarea{
padding:9px;
resize:vertical
}

.system-field input:focus,
.system-field select:focus,
.system-field textarea:focus{
border-color:rgba(31,210,197,.32);
box-shadow:0 0 0 3px rgba(31,210,197,.04)
}


.system-actions{
display:flex;
justify-content:flex-end;
gap:8px;
margin-top:14px
}


.metric-row{
min-height:45px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
border-bottom:1px solid rgba(255,255,255,.045)
}

.metric-row:last-child{
border-bottom:0
}

.metric-row span{
color:#637b91;
font-size:8px
}

.metric-row strong{
color:#b6c7d6;
font-size:9px
}


.progress-track{
height:7px;
margin-top:7px;
border-radius:10px;
background:rgba(255,255,255,.055);
overflow:hidden
}

.progress-bar{
height:100%;
width:0;
border-radius:10px;
background:#1fd2c5
}


.ipam-network{
padding:14px
}

.ipam-network-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px
}

.ipam-network-head span{
display:block;
color:#617b92;
font-size:8px
}

.ipam-network-head strong{
display:block;
margin-top:4px;
font-size:13px
}

.candidate-box{
margin-top:12px;
padding:11px;
border:1px solid rgba(31,210,197,.14);
border-radius:9px;
background:rgba(31,210,197,.035)
}

.candidate-box span{
display:block;
color:#617b91;
font-size:7px
}

.candidate-box strong{
display:block;
margin-top:4px;
color:#1fd2c5;
font-size:13px
}


.diag-status{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
padding:15px
}

.diag-item{
padding:13px;
border:1px solid var(--src-border);
border-radius:9px;
background:rgba(255,255,255,.015)
}

.diag-item span{
display:block;
color:#61798f;
font-size:8px
}

.diag-item strong{
display:block;
margin-top:5px;
font-size:12px
}

.diag-good{
color:#35d07f
}

.diag-warn{
color:#ffb84d
}


.setting-section{
padding:15px;
border-bottom:1px solid var(--src-border)
}

.setting-section:last-child{
border-bottom:0
}

.setting-section h3{
margin:0 0 4px;
font-size:11px
}

.setting-section p{
margin:0 0 13px;
color:#61798f;
font-size:8px
}


@media(max-width:900px){

.system-summary{
grid-template-columns:1fr 1fr
}

.system-grid{
grid-template-columns:1fr
}

}

@media(max-width:560px){

.system-summary,
.system-form,
.diag-status{
grid-template-columns:1fr
}

.system-field.full{
grid-column:auto
}

}