* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
        body {
            padding: 20px;
            background: #f5f7fa;
            height: 100vh;
            overflow: auto;
            display: flex;
            flex-direction: column;
        }
        .header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            flex-shrink: 0;
        }
        .title {
            font-weight: 600;
            font-size: 20px;
            color: #1a1a1a;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .title i { color: #1890ff; }
        .title .sub {
            font-weight: 400;
            font-size: 14px;
            color: #8c8c8c;
            margin-left: 8px;
        }
        .toolbar {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        .toolbar .refresh-btn {
            background: #1890ff;
            color: #fff;
            border: none;
            padding: 8px 20px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
        }
        .toolbar .refresh-btn:hover { background: #40a9ff; transform: translateY(-1px); }
        .toolbar .refresh-btn:active { transform: scale(0.97); }
        .toolbar .refresh-btn .fa-spin { display: none; }
        .toolbar .refresh-btn.loading .fa-spin { display: inline; }
        .toolbar .refresh-btn.loading .fa-sync { display: none; }
        .toolbar .status-tag {
            font-size: 13px;
            color: #595959;
            padding: 7px 14px;
            background: #ffffff;
            border:1px solid #e5e7eb;
            border-radius: 10px;
        }
        .toolbar .status-tag .dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
        }
        .toolbar .status-tag .dot.online { background: #52c41a; box-shadow:0 0 0 2px rgba(82,196,26,0.2); }
        .toolbar .status-tag .dot.offline { background: #f5222d; }

        /* 统计卡片 */
        .stats-cards {
            display: flex;
            gap: 20px;
            margin-bottom: 18px;
            flex-shrink: 0;
        }
        .stat-card {
            background: #fff;
            border-radius: 12px;
            padding: 16px 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 14px;
            border: 1px solid #f0f0f0;
            transition: 0.2s ease;
        }
        .stat-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }
        .stat-card .icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .stat-card .icon.blue { background: #e6f7ff; color: #1890ff; }
        .stat-card .icon.green { background: #f6ffed; color: #52c41a; }
        .stat-card .icon.red { background: #fff1f0; color: #f5222d; }
        .stat-card .info .num { font-size: 24px; font-weight: 600; color: #1f2937; line-height: 1.2; }
        .stat-card .info .label { font-size: 13px; color: #6b7280; margin-top:2px; }

        /* 表格 */
        .table-wrap {
            flex: 1;
            background: #fff;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            overflow: auto;
            min-height: 200px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }
        thead {
            position: sticky;
            top: 0;
            z-index: 5;
        }
        th {
            background: #f7f8fa;
            color: #444654;
            font-weight: 600;
            padding: 13px 14px;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
            font-size: 12px;
        }
        td {
            padding: 12px 14px;
            border-bottom: 1px solid #f0f0f0;
            color: #262626;
            vertical-align: middle;
        }
        tbody tr:hover td { background: #f7faff; }
        tr:last-child td { border-bottom: none; }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-badge.online { background: #f0f9ff; color: #10b981; }
        .status-badge.offline { background: #fef2f2; color: #ef4444; }
        .status-badge .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
        }
        .status-badge.online .dot { background: #10b981; }
        .status-badge.offline .dot { background: #ef4444; }

        .quality-tag {
            padding: 3px 10px;
            border-radius: 8px;
            font-size: 12px;
        }
        .quality-tag.high { background: #f0fdf4; color: #16a34a; }
        .quality-tag.medium { background: #fffbeb; color: #d97706; }
        .quality-tag.low { background: #fef2f2; color: #dc2626; }

        .battery-bar {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .battery-bar .bar {
            width: 54px;
            height: 6px;
            background: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
        }
        .battery-bar .bar .fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s;
        }
        .battery-bar .bar .fill.high { background: #52c41a; }
        .battery-bar .bar .fill.medium { background: #fa8c16; }
        .battery-bar .bar .fill.low { background: #f5222d; }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #9ca3af;
        }
        .empty-state i { font-size: 42px; margin-bottom: 14px; display: block; color:#d1d5db; }
        .empty-state .desc { font-size: 15px; }

        /* 加载动画 */
        .loading-overlay {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 50px 0;
            color: #6b7280;
        }
        .loading-overlay .spinner {
            width: 38px;
            height: 38px;
            border: 3px solid #f0f2f5;
            border-top: 3px solid #1890ff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-bottom: 14px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* 响应式 */
        @media (max-width: 768px) {
            body { padding: 12px; }
            .stats-cards { flex-wrap: wrap; gap: 12px; }
            .stat-card { padding: 12px 16px; flex:1; min-width:130px; }
            .stat-card .icon { width:36px;height:36px;font-size:17px; }
            .stat-card .info .num { font-size: 20px; }
            .header-bar { flex-wrap: wrap; gap: 12px; }
            td, th { padding: 9px 10px; font-size: 12px; }
            .battery-bar .bar { width: 34px; }
        }