/* ═══════════ 全局 ═══════════ */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background:#f0f2f5; color:#333; min-height:100vh; }
.page { width:100%; }

/* ═══════════ 登录页 ═══════════ */
#loginPage {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.login-box {
  background:#fff; border-radius:12px; padding:48px 40px;
  width:400px; max-width:90vw; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.login-logo { font-size:56px; margin-bottom:8px; }
.login-box h1 { font-size:22px; color:#1a1a2e; margin-bottom:4px; }
.login-sub { color:#999; font-size:13px; margin-bottom:32px; }
.login-box input {
  display:block; width:100%; padding:12px 16px; margin-bottom:14px;
  border:1px solid #ddd; border-radius:8px; font-size:15px; outline:none; transition:border .2s;
}
.login-box input:focus { border-color:#0f3460; }
.login-box button {
  width:100%; padding:12px; background:#0f3460; color:#fff;
  border:none; border-radius:8px; font-size:16px; cursor:pointer; margin-top:4px; transition:background .2s;
}
.login-box button:hover { background:#1a4a8a; }
.login-hint { color:#e74c3c; font-size:13px; margin-top:10px; min-height:20px; }
.login-switch { margin-top:24px; font-size:13px; }
.login-switch span { color:#0f3460; cursor:pointer; text-decoration:underline; }

/* ═══════════ 布局 ═══════════ */
#mainPage { display:flex; min-height:100vh; }
#sidebar {
  width:220px; background:#1a1a2e; color:#fff; display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:100;
}
.sidebar-logo { font-size:40px; text-align:center; padding:24px 0 8px; }
.sidebar-nav { flex:1; padding:16px 0; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:12px 24px;
  color:#8892a4; text-decoration:none; font-size:15px; cursor:pointer; transition:all .2s;
  border-left:3px solid transparent;
}
.nav-item:hover { color:#fff; background:rgba(255,255,255,.05); }
.nav-item.active { color:#fff; background:rgba(255,255,255,.1); border-left-color:#4fc3f7; }
.nav-icon { font-size:18px; }
.sidebar-footer {
  padding:16px 20px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between; font-size:14px;
}

/* ═══════════ 主内容 ═══════════ */
#mainContent { margin-left:220px; flex:1; padding:32px; }

h2 { font-size:22px; margin-bottom:24px; color:#1a1a2e; }

/* 统计卡片 */
.stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:28px; }
.stat-card {
  background:#fff; border-radius:10px; padding:24px; text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.08); transition:transform .2s;
}
.stat-card:hover { transform:translateY(-2px); }
.stat-value { font-size:36px; font-weight:700; color:#1a1a2e; }
.stat-label { font-size:13px; color:#999; margin-top:4px; }
.stat-card.online .stat-value { color:#27ae60; }
.stat-card.open .stat-value { color:#e67e22; }

/* 双列卡片 */
.dash-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dash-card {
  background:#fff; border-radius:10px; padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.dash-card h3 { font-size:16px; margin-bottom:16px; color:#333; }

/* 在线设备列表 */
.online-list { max-height:240px; overflow-y:auto; }
.online-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid #f0f0f0; font-size:14px;
}
.online-item:last-child { border-bottom:none; }
.online-dot { width:8px; height:8px; background:#27ae60; border-radius:50%; display:inline-block; margin-right:8px; }
.online-dot.off { background:#bbb; }

/* 事件列表 */
.event-list { max-height:240px; overflow-y:auto; }
.event-item { padding:8px 0; border-bottom:1px solid #f0f0f0; font-size:13px; display:flex; gap:12px; }
.event-item:last-child { border-bottom:none; }
.event-time { color:#999; white-space:nowrap; }
.event-type { font-weight:600; }

/* ═══════════ 数据表 ═══════════ */
.data-table { width:100%; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.data-table thead { background:#f8f9fa; }
.data-table th { padding:14px 16px; text-align:left; font-size:13px; color:#666; font-weight:600; }
.data-table td { padding:12px 16px; font-size:14px; border-top:1px solid #f0f0f0; }
.data-table tr:hover { background:#fafbfc; }

/* 状态标签 */
.badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:12px; font-weight:600; }
.badge-online { background:#e8f5e9; color:#27ae60; }
.badge-offline { background:#f5f5f5; color:#999; }
.badge-open { background:#fff3e0; color:#e67e22; }
.badge-locked { background:#e8f5e9; color:#27ae60; }
.badge-bound { background:#e3f2fd; color:#1565c0; }
.badge-unbound { background:#f5f5f5; color:#999; }
.badge-success { background:#e8f5e9; color:#27ae60; }
.badge-fail { background:#ffebee; color:#e74c3c; }

/* 按钮 */
.btn { padding:6px 14px; border:none; border-radius:6px; font-size:13px; cursor:pointer; transition:all .2s; }
.btn-primary { background:#0f3460; color:#fff; }
.btn-primary:hover { background:#1a4a8a; }
.btn-success { background:#27ae60; color:#fff; }
.btn-success:hover { background:#219a52; }
.btn-danger { background:#e74c3c; color:#fff; }
.btn-danger:hover { background:#c0392b; }
.btn-warn { background:#e67e22; color:#fff; }
.btn-outline { background:transparent; border:1px solid #ddd; color:#666; }
.btn-outline:hover { border-color:#999; color:#333; }
.btn-sm { padding:4px 10px; font-size:12px; }
.device-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* Tab 切换 */
.tab-bar { display:flex; gap:0; margin-bottom:20px; }
.tab {
  padding:10px 24px; background:#f0f2f5; border:none; cursor:pointer;
  font-size:14px; color:#666; border-radius:8px 8px 0 0; transition:all .2s;
}
.tab.active { background:#fff; color:#0f3460; font-weight:600; box-shadow:0 -2px 6px rgba(0,0,0,.04); }

/* 弹窗 */
.modal { position:fixed; top:0; left:0; z-index:200; width:100%; height:100%; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; }
.modal-content { background:#fff; border-radius:12px; padding:32px; width:560px; max-width:90vw; max-height:80vh; overflow-y:auto; position:relative; }
.modal-close { position:absolute; top:16px; right:20px; font-size:24px; cursor:pointer; color:#999; }
.modal-close:hover { color:#333; }
#modalTitle { margin-bottom:20px; }

.modal-info-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #f0f0f0; font-size:14px; }
.modal-info-row:last-child { border-bottom:none; }
.modal-info-label { color:#999; }
.modal-info-value { font-weight:600; }
.modal-actions { margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }

/* 响应式 */
@media(max-width:768px) {
  #sidebar { width:60px; }
  .sidebar-nav .nav-item { padding:12px 10px; justify-content:center; }
  .nav-item span:not(.nav-icon) { display:none; }
  #mainContent { margin-left:60px; padding:20px; }
  .stats-grid { grid-template-columns:repeat(2, 1fr); }
  .dash-row { grid-template-columns:1fr; }
}

/* Toast */
.toast {
  position:fixed; top:20px; right:20px; z-index:300;
  padding:12px 24px; border-radius:8px; color:#fff; font-size:14px;
  animation:toastIn .3s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.toast-success { background:#27ae60; }
.toast-error { background:#e74c3c; }
@keyframes toastIn { from{ opacity:0; transform:translateY(-20px); } to{ opacity:1; transform:translateY(0); } }