.toolbar { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; } .name-cell { display: flex; flex-direction: column; } .name-cell .name { font-weight: 500; } .name-cell .remark { font-size: 12px; opacity: 0.65; } .address-header { display: inline-flex; align-items: center; gap: 6px; } .ip-toggle-icon { cursor: pointer; font-size: 14px; opacity: 0.7; } .ip-toggle-icon:hover { opacity: 1; } .address-hidden { filter: blur(5px); transition: filter 0.2s ease; } .address-visible { filter: none; } .node-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .node-card { border: 1px solid var(--ant-color-border-secondary); border-radius: 10px; padding: 12px; background: var(--ant-color-fill-quaternary); display: flex; flex-direction: column; gap: 8px; } .card-head { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .card-expand { font-size: 12px; opacity: 0.6; transition: transform 150ms ease; flex-shrink: 0; } .card-expand.is-expanded { transform: rotate(90deg); } .node-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .row-action-trigger { font-size: 20px; cursor: pointer; } .card-stats { display: flex; flex-direction: column; gap: 6px; } .stat-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; min-width: 96px; flex-shrink: 0; } .card-stats .ant-tag { margin: 0; } .card-history { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--ant-color-border-secondary); } .card-empty { text-align: center; color: var(--ant-color-text-secondary); padding: 24px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }