.noc-server-inventory {
    display: grid;
    gap: 11px;
}

.noc-server-row {
    display: grid;
    grid-template-columns: 112px minmax(190px, 1.25fr) minmax(390px, 2fr) 112px 126px;
    align-items: center;
    gap: 20px;
    min-height: 116px;
    padding: 14px 16px 14px 12px;
    border: 1px solid rgba(46, 105, 193, .27);
    border-radius: 13px;
    background: linear-gradient(110deg, rgba(9, 32, 82, .76), rgba(4, 17, 52, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.noc-server-row:hover {
    transform: translateY(-1px);
    border-color: rgba(53, 139, 255, .46);
    background: linear-gradient(110deg, rgba(10, 39, 98, .82), rgba(5, 20, 59, .78));
}

.noc-server-row__media {
    display: grid;
    place-items: center;
    align-self: stretch;
    overflow: hidden;
    border-right: 1px solid rgba(61, 115, 191, .16);
}

.noc-server-row__media img {
    width: 106px;
    max-height: 78px;
    object-fit: contain;
    filter: saturate(.9) drop-shadow(0 8px 16px rgba(0, 32, 98, .55));
}

.noc-server-row__identity { min-width: 0; }
.noc-server-row__ref {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
    color: #7085aa;
    font-size: 10px;
    letter-spacing: .055em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.noc-server-row__identity h4 {
    overflow: hidden;
    margin: 0 0 5px;
    color: #edf4ff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.noc-server-row__identity p { margin: 0; color: #7f93b7; font-size: 12px; }

.noc-server-row__facts {
    display: grid;
    grid-template-columns: 1.2fr 1.25fr .75fr 1fr;
    gap: 10px 18px;
}
.noc-server-row__facts div { min-width: 0; }
.noc-server-row__facts span {
    display: block;
    margin-bottom: 5px;
    color: #667da3;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.noc-server-row__facts strong {
    display: block;
    overflow: hidden;
    color: #b8c7df;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.noc-server-row__state { text-align: left; }
.noc-server-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #83e8b8;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.noc-server-status i { width: 6px; height: 6px; border-radius: 50%; background: #42dc8b; box-shadow: 0 0 8px rgba(66, 220, 139, .48); }
.noc-server-status[data-tone="busy"] { color: #7dc9ff; }
.noc-server-status[data-tone="busy"] i { background: #3ca2ff; }
.noc-server-status[data-tone="attention"] { color: #ff8799; }
.noc-server-status[data-tone="attention"] i { background: #ff4664; }
.noc-server-row__state small { display: block; margin-top: 6px; color: #61789e; font-size: 10px; }

.noc-server-row__action { text-align: right; }
.noc-server-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(48, 126, 244, .42);
    border-radius: 9px;
    color: #dceaff;
    background: rgba(24, 91, 199, .22);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.noc-server-open:hover { color: #fff; background: rgba(28, 105, 229, .36); }
.noc-server-open svg { width: 14px; height: 14px; }
button.noc-server-open { cursor: pointer; }

.noc-server-upsell { margin-top: 26px; }
.noc-server-upsell__intro { margin: -2px 0 14px; color: #7890b7; font-size: 13px; }
.noc-server-stock-skeleton {
    height: 64px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(24, 63, 126, .16), rgba(46, 105, 193, .27), rgba(24, 63, 126, .16));
    background-size: 220% 100%;
    animation: noc-server-stock-pulse 1.4s linear infinite;
}
.noc-server-stock-empty { margin: 4px 0; color: #7c91b3; font-size: 13px; }
@keyframes noc-server-stock-pulse { to { background-position: -220% 0; } }

@media (max-width: 1260px) {
    .noc-server-row { grid-template-columns: 94px minmax(180px, 1fr) minmax(330px, 1.6fr) 105px; }
    .noc-server-row__action { grid-column: 2 / -1; margin-top: -4px; text-align: left; }
}
@media (max-width: 900px) {
    .noc-server-row { grid-template-columns: 84px 1fr auto; gap: 14px; }
    .noc-server-row__facts { grid-column: 2 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .noc-server-row__state { grid-column: 3; grid-row: 1; }
    .noc-server-row__action { grid-column: 2 / -1; }
}
@media (max-width: 600px) {
    .noc-server-row { grid-template-columns: 72px 1fr; padding: 13px; }
    .noc-server-row__media { grid-row: 1 / 3; }
    .noc-server-row__media img { width: 72px; }
    .noc-server-row__state { grid-column: 2; grid-row: auto; }
    .noc-server-row__facts { grid-column: 1 / -1; }
    .noc-server-row__action { grid-column: 1 / -1; }
}