.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 rgba(128, 128, 128, 0.2); border-radius: 10px; padding: 12px; background: rgba(255, 255, 255, 0.02); display: flex; flex-direction: column; gap: 8px; } .nodes-page.is-dark .node-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } .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 rgba(128, 128, 128, 0.15); } .card-empty { text-align: center; opacity: 0.4; padding: 20px 0; }