/* 设备管理页（dv- 前缀）。配色用 --uc-* 令牌，窄屏把每台设备排成一张卡片。 */
.dv-card { padding: 8px 24px; }
.dv-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dv-icon { width: 22px; height: 22px; flex: none; color: var(--uc-muted); }
.dv-name-text { min-width: 0; }
.dv-name-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-name-main { font-weight: 500; overflow-wrap: anywhere; }
.dv-sub { font-size: 12px; color: var(--uc-muted); margin-top: 2px; }
.dv-foot { display: flex; justify-content: flex-end; }
.dv-state { display: flex; align-items: center; gap: 12px; }
.dv-state .uc-msg { margin: 0; }

@media (max-width: 640px) {
    .dv-card { padding: 4px 16px; }
    .dv-table thead { display: none; }
    .dv-table, .dv-table tbody, .dv-table tr, .dv-table td { display: block; width: 100%; }
    .dv-table tr { padding: 14px 0; border-bottom: 1px solid var(--uc-divider); }
    .dv-table tr:last-child { border-bottom: 0; }
    .dv-table td { padding: 2px 0; border: 0; text-align: left; }
    .dv-table td[data-label]:not(.dv-name-cell)::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 72px;
        color: var(--uc-muted);
    }
    .dv-table td.dv-op { margin-top: 8px; text-align: left; }
    .dv-foot { justify-content: stretch; }
    .dv-foot .uc-btn { width: 100%; }
}
.dv-list > div > * + * { margin-top: 16px; }