* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
        body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: #f0f2f5; }
        ul { list-style: none; }
        /* 顶部导航 */
        .header {
            height: 60px;
            background: linear-gradient(90deg, #1890ff, #0050b3);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
            z-index: 10;
        }
        .header-left { display: flex; align-items: center; gap: 40px; }
        .logo { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
        .logo i { font-size: 24px; }
        .nav-menu { display: flex; gap: 6px; }
        .nav-menu li {
            cursor: pointer;
            padding: 6px 18px;
            border-radius: 20px;
            font-size: 14px;
            transition: 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .nav-menu li:hover { background: rgba(255,255,255,0.18); }
        .nav-menu li.active { background: rgba(255,255,255,0.25); font-weight: 500; }
        .header-right { font-size: 14px; display: flex; align-items: center; gap: 20px; }
        /* 主体 */
        .main-wrapper { display: flex; flex: 1; height: calc(100vh - 60px); }
        /* ========== 【优化后的侧边栏】 ========== */
        .sidebar {
            width: 300px;
            background: #ffffff;
            box-shadow: 2px 0 12px rgba(0,0,0,0.04);
            border-right: 1px solid #e5e7eb;
            padding: 20px 18px;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }
        .search-area {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .search-area input {
            flex: 1;
            border: 1px solid #d1d5db;
            padding: 9px 16px;
            border-radius: 10px;
            outline: none;
            font-size: 14px;
            background-color: #f9fafb;
            transition: all 0.2s ease;
        }
        .search-area input:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 3px rgba(24,144,255,0.15);
            background-color: #fff;
        }
        .search-area button {
            background: #1890ff;
            color: #fff;
            border: none;
            padding: 0 16px;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .search-area button:hover { background: #40a9ff; }
        .search-area button:active { background: #096dd9; }

        .device-list-title {
            font-size: 14px;
            color: #444654;
            margin-bottom:14px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .device-list-title span:last-child{
            font-weight: 500;
        }
        .device-list {
            flex: 1;
            overflow-y: auto;
            padding-right: 6px;
        }
        /* 美化滚动条 */
        .device-list::-webkit-scrollbar { width: 6px; }
        .device-list::-webkit-scrollbar-track { background: #f7f8fa; border-radius: 3px; }
        .device-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius:3px; }
        .device-list::-webkit-scrollbar-thumb:hover { background:#94a3b8; }

        .device-node {
            display: flex;
            align-items: center;
            padding:14px 14px;
            cursor: pointer;
            border-radius:12px;
            margin-bottom: 8px;
            transition: all 0.2s ease;
            font-size:14px;
            color: #1f2937;
            border:1px solid transparent;
        }
        .device-node:hover {
            background: #f3f7ff;
            border-color: #e1ecff;
        }
        .device-node.active {
            background: #e6f4ff;
            border-color: #91caff;
            color: #0050b3;
            font-weight: 500;
            box-shadow: 0 1px 4px rgba(24,144,255,0.12);
        }
        .device-node .status-dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            flex-shrink:0;
            margin-right:12px;
        }
        .device-node .status-dot.online {
            background: #52c41a;
            box-shadow: 0 0 0 3px rgba(82,196,26,0.22);
        }
        .device-node .status-dot.offline {
            background: #bfbfbf;
        }
        .device-node .device-info { flex:1; min-width:0; }
        .device-node .device-name {
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom:4px;
        }
        .device-node .device-meta {
            font-size:12px;
            color:#6b7280;
            display:flex;
            align-items:center;
            gap:14px;
            flex-wrap:wrap;
        }
        .device-node .device-meta .battery {
            display:flex;
            align-items:center;
            gap:5px;
        }
        .device-node .device-meta .battery .bar {
            width:34px;
            height:5px;
            background:#e5e7eb;
            border-radius:3px;
            overflow:hidden;
        }
        .device-node .device-meta .battery .bar .fill {
            height:100%;
            border-radius:3px;
            transition: width 0.3s ease;
        }
        .device-node .device-meta .battery .bar .fill.high { background:#52c41a; }
        .device-node .device-meta .battery .bar .fill.medium { background:#fa8c16; }
        .device-node .device-meta .battery .bar .fill.low { background:#f5222d; }

        .device-node .badge-imei {
            font-size:13px;
            color:#6b7280;
            font-family: monospace;
            background: #f3f4f6;
            padding:2px 8px;
            border-radius:12px;
            flex-shrink:0;
        }
        .device-node.active .badge-imei {
            background: #bae7ff;
            color:#0050b3;
        }
        /*侧边栏底部状态*/
        .sidebar-footer {
            border-top:1px solid #e5e7eb;
            padding-top:14px;
            margin-top:12px;
            font-size:12px;
            color:#6b7280;
            display:flex;
            justify-content:space-between;
            align-items:center;
        }
        /* 内容区 */
        .content-area {
            flex:1;
            padding:16px 20px 20px 20px;
            background:#f0f2f5;
            min-width:0;
        }
        .content-area iframe {
            width:100%;
            height:100%;
            border:none;
            background:#fff;
            border-radius:12px;
            box-shadow:0 2px 12px rgba(0,0,0,0.06);
        }
        /*加载状态*/
        .sidebar-loading {
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            padding:40px 0;
            color:#9ca3af;
        }
        .sidebar-loading .spinner {
            width:32px;
            height:32px;
            border:3px solid #f0f2f5;
            border-top:3px solid #1890ff;
            border-radius:50%;
            animation: spin 0.8s linear infinite;
            margin-bottom:12px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        @media (max-width:768px) {
            .sidebar {
                width:240px;
                padding:14px 12px;
            }
            .header-left { gap:16px; }
            .nav-menu li { padding:4px 12px; font-size:13px; }
            .device-node { padding:10px 10px; margin-bottom:6px; }
            .device-node .device-meta { font-size:11px; gap:8px; }
            .device-node .device-meta .battery .bar { width:22px; }
            .search-area { gap:6px; }
            .search-area input { padding:7px 10px; font-size:13px; }
            .search-area button { padding:0 10px; }
        }