/* ===== S200 OBD v0.1.1 样式表 ===== */

:root {
  --c-green: #22c55e;
  --c-green-bg: #dcfce7;
  --c-red: #ef4444;
  --c-red-bg: #fef2f2;
  --c-yellow: #eab308;
  --c-yellow-bg: #fefce8;
  --c-gray: #9ca3af;
  --c-gray-bg: #f3f4f6;
  --c-border: #e5e7eb;
  --c-text: #1f2937;
  --c-text-secondary: #6b7280;
  --c-sidebar-bg: #f9fafb;
  --c-sidebar-active: #eff6ff;
  --c-sidebar-border: #2563eb;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--c-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow: hidden;
}

/* ===== 顶栏 ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--c-border);
  background: #fff;
  flex-shrink: 0;
}
.logo { font-weight: 700; font-size: 16px; }
.version { font-size: 11px; color: var(--c-gray); font-weight: 400; margin-left: 4px; }
.status { display: flex; gap: 16px; font-size: 13px; color: var(--c-text-secondary); }
.online { color: var(--c-green); font-weight: 600; }

.btn-confirm {
  background: var(--c-green); color: #fff; border: none;
  padding: 6px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-confirm:hover { background: #16a34a; }
.user-menu {
  position: relative;
  margin-left: 16px;
}
.user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
}
.user-btn:hover { background: var(--c-gray-bg); }
.user-btn .arrow { font-size: 10px; color: var(--c-gray); }
.user-dropdown {
  position: absolute;
  right: 0;
  top: 110%;
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 100;
  padding: 4px 0;
}
.user-dropdown-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--c-text);
}
.user-dropdown-item:hover { background: var(--c-gray-bg); }

/* ===== 主布局 ===== */
.main-layout {
  display: flex;
  height: calc(100vh - 48px);
  overflow: hidden;
}

/* ===== 左侧导航 ===== */
.sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--c-sidebar-bg);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.nav-item, .nav-group-header, .nav-subitem {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 4px solid transparent;
  transition: background 0.15s;
}
.nav-item:hover, .nav-group-header:hover, .nav-subitem:hover {
  background: var(--c-gray-bg);
}
.nav-item.active {
  background: var(--c-sidebar-active);
  border-left-color: var(--c-sidebar-border);
  font-weight: 600;
}

.nav-group-header {
  justify-content: flex-start !important;
  border-left: none !important;
  font-weight: 600;
}
.nav-group-header .arrow {
  font-size: 10px;
  width: 14px;
  display: inline-block;
  transition: transform 0.2s;
}
.nav-group-header.open .arrow {
  transform: rotate(90deg);
}

.nav-group-items {
  background: #f0f0f0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.nav-group-items.collapsed {
  max-height: 0;
}
.nav-group-items:not(.collapsed) {
  max-height: 200px;
}

.nav-subitem {
  padding-left: 32px;
  font-size: 13px;
  color: var(--c-text-secondary);
}
.nav-subitem:hover {
  color: var(--c-text);
}

.stat-link {
  font-size: 12px;
  text-decoration: none;
  color: var(--c-green);
  font-weight: 600;
  margin-left: auto;
}
.stat-link.fail { color: var(--c-red); }

.nav-divider {
  height: 1px;
  background: var(--c-border);
  margin: 8px 12px;
}

.nav-bottom {
  margin-top: auto;
  padding: 12px;
}

.btn-reload {
  width: 100%;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
}
.btn-reload:hover { background: var(--c-gray-bg); }

/* ===== 右侧内容区 ===== */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.view { display: none; }
.view.active { display: block; }

/* ===== 四仪表盘（汽车风格） ===== */
.dash-header-four {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  margin-bottom: 6px;
  padding: 6px 0;
}
.gauge-unit {
  flex: 1;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s;
  min-width: 0; /* allow shrink */
}
.gauge-unit:hover {
  transform: scale(1.03);
}
.gauge-car {
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
}
.gauge-huge .gauge-car { max-width: 280px; }
.gauge-tiny .gauge-car { max-width: 140px; }
.gauge-car svg {
  width: 100%;
  height: auto;
}
.gauge-stat {
  font-size: 13px;
  color: var(--c-text-secondary);
  margin-top: 2px;
}
.gauge-stat .g-ok {
  color: var(--c-green);
  font-weight: 700;
  font-size: 16px;
}
.gauge-stat .g-total {
  color: var(--c-text-secondary);
  font-size: 13px;
}
.dash-time {
  text-align: center;
  font-size: 12px;
  color: var(--c-text-secondary);
  margin-bottom: 14px;
}

/* ===== 旧仪表盘样式删除 ===== */
.dash-header-three { display: none; }

/* ===== 区域通用 ===== */
.dash-section {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title.toggle { cursor: pointer; }
.refreshable-title {
  cursor: pointer;
  user-select: none;
}
.refreshable-title:hover {
  opacity: 0.8;
}
.refreshable-title .spinner {
  margin-left: 6px;
  width: 12px;
  height: 12px;
  border-width: 2px;
}
.section-title .tag {
  font-size: 12px;
  color: var(--c-green);
  font-weight: 400;
}

/* ===== P0指示灯 ===== */
.p0-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.p0-cell {
  width: 80px; height: 80px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start !important;
  gap: 4px;
  font-size: 11px;
  border: 2px solid;
  cursor: pointer;
  transition: transform 0.1s;
}
.p0-cell:hover { transform: scale(1.05); }
.p0-cell .p0-icon { font-size: 22px; }
.p0-cell .p0-name { font-weight: 600; }
.p0-cell .p0-status { font-size: 10px; }
.p0-cell.online {
  background: var(--c-green-bg);
  border-color: var(--c-green);
  color: var(--c-green);
}
.p0-cell.offline {
  background: var(--c-red-bg);
  border-color: var(--c-red);
  color: var(--c-red);
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ===== 网络/定位/资源/统计行 ===== */
.net-row, .loc-row, .res-row, .safe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
}
.net-item, .loc-item, .safe-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.net-item .net-bar {
  width: 60px; height: 6px;
  background: var(--c-border);
  border-radius: 3px;
  overflow: hidden;
}
.net-item .net-bar-fill {
  height: 100%;
  background: var(--c-green);
  border-radius: 3px;
}

/* ===== 进度条 ===== */
.res-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}
.res-item .res-label {
  font-size: 12px; font-weight: 600;
  width: 40px;
}
.res-item .res-bar {
  width: 80px; height: 10px;
  background: var(--c-border);
  border-radius: 5px;
  overflow: hidden;
}
.res-item .res-bar-fill {
  height: 100%;
  border-radius: 5px;
}
.res-item .res-val {
  font-size: 12px; font-weight: 600;
  min-width: 36px;
}

/* ===== 关键参数摘要 ===== */
.param-summary {
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.param-summary.collapsed {
  max-height: 0;
}
.param-summary:not(.collapsed) {
  max-height: 300px;
}
.param-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
}
.param-item:last-child { border-bottom: none; }
.param-name { color: var(--c-text-secondary); }
.param-val { font-weight: 600; }
.param-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 8px;
}
.param-dot.ok { background: var(--c-green); }
.param-dot.warn { background: var(--c-yellow); }
.param-dot.err { background: var(--c-red); }

/* ===== TF树状态 ===== */
.tf-row {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tf-row.ok { color: var(--c-green); }
.tf-row.err { color: var(--c-red); }

/* ===== 异常卡片 ===== */
.alert-card {
  border-left: 4px solid var(--c-red);
  background: var(--c-red-bg);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
}
.alert-card:last-child { margin-bottom: 0; }
.alert-title {
  font-weight: 700; font-size: 14px;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.alert-meta {
  font-size: 12px;
  color: var(--c-text-secondary);
  margin-bottom: 4px;
}
.alert-reason {
  font-size: 13px;
  margin-bottom: 10px;
}
.alert-actions {
  display: flex;
  gap: 8px;
}
.alert-actions button {
  padding: 5px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.alert-actions button:hover { background: var(--c-gray-bg); }
.alert-actions button.primary {
  background: var(--c-red); color: #fff; border-color: var(--c-red);
}
.alert-actions button.primary:hover { background: #dc2626; }

/* ===== 全通过状态 ===== */
.all-pass {
  text-align: center;
  padding: 30px;
}
.all-pass-icon { font-size: 48px; }
.all-pass-text { font-size: 18px; font-weight: 600; color: var(--c-green); margin: 12px 0; }

/* ===== 深度诊断页通用 ===== */
.page-header {
  margin-bottom: 16px;
}
.breadcrumb {
  font-size: 12px;
  color: var(--c-text-secondary);
  margin-bottom: 8px;
}
.page-header h2 {
  font-size: 18px;
}

.sub-tabs {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.sub-tab {
  padding: 6px 14px;
  border: 1px solid var(--c-border);
  background: #fff;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
}
.sub-tab.active {
  background: var(--c-sidebar-active);
  border-color: var(--c-sidebar-border);
  color: var(--c-sidebar-border);
  font-weight: 600;
}

/* ===== 表格 ===== */
.detail-table-wrap {
  overflow-x: auto;
}
.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.detail-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--c-gray-bg);
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
  white-space: nowrap;
}
.detail-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.detail-table tr:hover { background: #fafafa; }
.detail-table tr.fail td { background: var(--c-red-bg); }

/* ===== 批量操作栏 ===== */
.batch-bar {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 16px;
}
.btn-batch {
  padding: 8px 16px;
  border: 1px solid var(--c-border);
  background: #fff;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
}
.btn-batch:hover { background: var(--c-gray-bg); }

/* ===== 地图结论 ===== */
.map-conclusion {
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
}
.map-conclusion.ok { background: var(--c-green-bg); color: var(--c-green); }
.map-conclusion.err { background: var(--c-red-bg); color: var(--c-red); }

/* ===== placeholder ===== */
.placeholder {
  color: var(--c-text-secondary);
  font-size: 14px;
  padding: 40px;
  text-align: center;
}

/* ===== 登录弹窗 ===== */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: flex-start !important;
}
.modal-content {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  width: 320px;
  max-width: 90vw;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.modal-content h3 {
  margin-bottom: 8px;
  font-size: 18px;
}
.login-hint {
  font-size: 13px;
  color: var(--c-text-secondary);
  margin-bottom: 16px;
}
.modal-content input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 14px;
}
.login-roles {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.role-tag {
  font-size: 11px;
  padding: 4px 8px;
  background: var(--c-gray-bg);
  border-radius: 4px;
  color: var(--c-text-secondary);
}
.login-error {
  color: var(--c-red);
  font-size: 12px;
  margin-top: 8px;
  min-height: 16px;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .dash-header { flex-direction: column; align-items: flex-start; }
  .dash-stats { width: 100%; }
  .p0-grid { justify-content: flex-start !important; }
  .net-row, .loc-row, .res-row, .safe-row { flex-direction: column; gap: 8px; }
}

/* 检测中旋转动画 */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ===== 驾驶舱风格 v0.2.0 ===== */

/* 仪表盘区域 */
.dash-header-four {
  display: flex;
  justify-content: flex-start !important;
  gap: 24px;
  padding: 16px 0 8px;
}
.gauge-unit {
  text-align: center;
}
.gauge-car svg { width: 140px; height: 100px; }
.gauge-stat { font-size: 13px; margin-top: -8px; }

/* P0传感器 — 大圆指示灯面板 */
.p0-panel {
  display: flex;
  justify-content: flex-start !important;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.p0-indicator {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start !important;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.3s;
}
.p0-indicator.online {
  background: #dcfce7;
  border: 2px solid #22c55e;
  color: #166534;
}
.p0-indicator.offline {
  background: #fef2f2;
  border: 2px solid #ef4444;
  color: #991b1b;
  animation: pulse 1.5s infinite;
}
.p0-indicator .p0-dot {
  font-size: 20px;
  line-height: 1;
}

/* 信息卡片 2列布局 */
.info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 0;
}
.info-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
}
.info-card .card-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.info-card .card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.info-card .card-row:last-child { margin-bottom: 0; }
.info-card .card-label { color: #64748b; min-width: 36px; }
.info-card .card-bar {
  flex: 1; height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}
.info-card .card-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s;
}
.info-card .card-val {
  font-weight: 700;
  min-width: 36px;
  text-align: right;
}

/* 电池 — 独立大卡片 */
.battery-card {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 2px solid #22c55e;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.battery-icon {
  font-size: 36px;
}
.battery-info { flex: 1; }
.battery-pct {
  font-size: 28px;
  font-weight: 800;
  color: #166534;
}
.battery-volt {
  font-size: 12px;
  color: #64748b;
}
.battery-bar-wrap {
  flex: 1; height: 14px;
  background: #e2e8f0;
  border-radius: 7px;
  overflow: hidden;
}
.battery-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 7px;
  transition: width 0.5s;
}

/* 安全统计 + TF — 单行紧凑 */
.status-strip {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-size: 12px;
  color: #64748b;
}
.status-strip .strip-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-strip b { color: #1e293b; }

/* 异常卡片 */
.alert-area {
  margin-top: 8px;
}
.all-pass-box {
  background: #f0fdf4;
  border: 2px solid #22c55e;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.all-pass-box .pass-icon { font-size: 28px; }
.all-pass-box .pass-text { font-size: 15px; font-weight: 700; color: #166534; margin: 6px 0; }

/* 覆盖旧样式 */
.p0-grid { display: block; }  /* 旧P0网格隐藏 */
.dash-section {
  padding: 6px 0;
  margin: 0;
  border: none;
}
.section-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  padding-left: 2px;
}

.nav-group-header {
  justify-content: flex-start !important;
  border-left: none !important;
  padding-left: 4px !important;
  font-weight: 700;
  font-size: 13px;
  color: #374151;
  text-transform: none;
}
/* 驾驶舱新布局 */
.dash-cockpit {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.dash-main-gauges {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
}
.gauge-large .gauge-car svg { width: 220px; height: 150px; }
.gauge-large .gauge-stat { font-size: 14px; margin-top: -6px; }

.dash-middle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 180px;
}
.params-table {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
}
.params-table .card-title {
  font-size: 10px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.dash-small-gauges {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
}
.gauge-small .gauge-car svg { width: 120px; height: 85px; }
.gauge-small .gauge-stat { font-size: 11px; margin-top: -4px; }

.dash-info-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.dash-info-row .info-card {
  flex: 1;
  min-width: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
}
.info-card .card-title {
  font-size: 10px; font-weight: 700; color: #64748b;
  margin-bottom: 4px;
}
.info-card .card-row {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 2px; font-size: 11px;
}
.info-card .card-label { color: #64748b; }
.info-card .card-bar { flex:1; height:5px; background:#e2e8f0; border-radius:3px; overflow:hidden; }
.info-card .card-bar-fill { height:100%; border-radius:3px; }
.info-card .card-val { font-weight:700; }

.battery-card {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 2px solid #22c55e;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
}
.battery-pct { font-size: 20px; font-weight:800; color:#166534; }
.battery-volt { font-size: 11px; color:#64748b; }
.battery-bar-wrap { flex:1; height:10px; background:#e2e8f0; border-radius:5px; overflow:hidden; }
.battery-bar-fill { height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); border-radius:5px; }
/* 驾驶舱 v3 — 两大仪表并排 */
.dash-cockpit {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}
.gauge-huge .gauge-car svg { width: 260px; height: 176px; }
.gauge-huge .gauge-stat { font-size: 15px; margin-top: -8px; }

.dash-center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 140px;
  max-width: 200px;
  gap: 8px;
}
.params-compact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
}
.params-compact .card-title {
  font-size: 10px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.params-compact .card-row {
  display: flex; justify-content: space-between;
  margin-bottom: 1px; font-size: 11px;
}
.params-compact .card-label { color: #64748b; }
.params-compact .card-val { font-weight: 400; }

.dash-right { flex: 0 0 auto; }

.dash-mini-gauges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gauge-tiny .gauge-car svg { width: 100px; height: 68px; }
.gauge-tiny .gauge-stat { font-size: 10px; margin-top: -3px; }

/* 电池简洁版 */
.battery-simple {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  color: #166534;
  padding: 4px 0;
}
.battery-simple .batt-icon { font-size: 28px; }
/* 三列布局 + 分隔线 */
.dash-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dash-col-mid {
  justify-content: space-between;
  min-width: 140px;
  max-width: 180px;
}
.dash-sep {
  width: 1px;
  background: linear-gradient(180deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
  margin: 0 8px;
  align-self: stretch;
}
.dash-sep-h {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 0;
}
.dash-mini-gauges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
/* 四列驾驶舱 — 防止重叠 */
.dash-cockpit {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start !important;
  min-width: 900px;
}
.dash-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}
.dash-col-mid {
  flex: 1;
  min-width: 120px;
  max-width: 200px;
  justify-content: space-between;
  padding-top: 10px;
}
.gauge-huge .gauge-car svg { width: 240px; height: 163px; }
.gauge-huge .gauge-stat { font-size: 14px; margin-top: -6px; }

.params-compact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px;
  width: 100%;
}
.params-compact .card-title {
  font-size: 9px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.params-compact .card-row {
  display: flex; justify-content: space-between;
  margin-bottom: 1px; font-size: 10px;
}
.params-compact .card-label { color: #64748b; }
.params-compact .card-val { font-weight: 400; }

.battery-simple {
  display: flex; align-items: center; gap: 6px;
  font-size: 22px; font-weight: 800;
  padding: 4px 0;
}
.battery-simple .batt-icon { font-size: 26px; }

.dash-mini-gauges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}
.gauge-tiny .gauge-car svg { width: 110px; height: 75px; }
.gauge-tiny .gauge-stat { font-size: 10px; margin-top: -3px; }

/* 内容区减少左边距 */
.content { padding: 12px 16px; }
/* 四列驾驶舱 — 左对齐 + 居中内容 */
.dash-cockpit {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start !important;
}
.dash-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}
.dash-col-mid {
  flex: 0 0 auto;
  min-width: 150px;
  max-width: 220px;
  justify-content: space-between;
  padding-top: 12px;
}
.gauge-huge .gauge-car svg { width: 260px; height: 176px; }
.gauge-huge .gauge-stat { font-size: 14px; margin-top: -6px; }

.params-compact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 10px;
  width: 100%;
}
.params-compact .card-title {
  font-size: 9px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.params-compact .card-row {
  display: flex; justify-content: space-between;
  margin-bottom: 2px; font-size: 10px;
}
.params-compact .card-label { color: #64748b; min-width: 80px; }
.params-compact .card-val { font-weight: 400; text-align: right; }

.battery-simple {
  display: flex; align-items: center; gap: 6px;
  font-size: 22px; font-weight: 800;
  padding: 4px 0; justify-content: flex-start !important;
}
.battery-simple .batt-icon { font-size: 26px; }

.dash-mini-gauges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  align-items: center;
}
.gauge-tiny .gauge-car svg { width: 120px; height: 82px; }
.gauge-tiny .gauge-stat { font-size: 10px; margin-top: -3px; }

.content { padding: 10px 14px; }
.sidebar { width: 200px; }
/* 四列微调 */
.gauge-huge .gauge-car svg { width: 250px; height: 170px; }
.dash-col-mid {
  margin-left: 12px;
  padding-top: 20px;
  gap: 20px;
}
.params-compact {
  margin-bottom: 4px;
}
.battery-simple {
  margin-top: auto;
  padding-top: 20px;
}
.dash-col { padding: 0 6px; }
.dash-info-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  max-width: 1100px;
}
.dash-info-row .info-card {
  flex: 1;
  min-width: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
}
.dash-info-row .status-strip {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #64748b;
}
.status-strip .strip-item {
  display: flex; align-items: center; gap: 4px;
}
.status-strip b { color: #1e293b; }

/* 整体页框居中 */
body {
  background: #f1f5f9;
  display: flex;
  justify-content: center;
  padding: 12px;
}
.page-frame {
  max-width: 1200px;
  width: 100%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  overflow: hidden;
}
/* 四列整齐排列 */
.dash-cockpit {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
}
.dash-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 18px;
}
.dash-col:first-child { padding-left: 0; }
.dash-col:last-child { padding-right: 0; }
.dash-col-mid {
  justify-content: center;
  gap: 24px;
  min-width: 160px;
  max-width: 200px;
}
.gauge-huge .gauge-car svg { width: 240px; height: 163px; }
.gauge-huge .gauge-stat { font-size: 13px; margin-top: -4px; }
.gauge-tiny .gauge-car svg { width: 110px; height: 75px; }
.gauge-tiny .gauge-stat { font-size: 10px; }
.dash-mini-gauges { gap: 14px; padding-top: 4px; }
.params-compact { width: 100%; }
.battery-simple { justify-content: center; padding-top: 0; }
/* 仪表盘精确网格对齐 */
.dash-cockpit {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 20px;
  align-items: center;
  justify-items: center;
  padding: 8px 0;
}
.dash-cockpit > * { min-width: 0; }

/* 仪表统一容器 */
.gauge-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gauge-car { position: relative; }
.gauge-huge .gauge-car svg { width: 240px; height: 170px; }
.gauge-tiny .gauge-car svg { width: 110px; height: 78px; }
.gauge-stat {
  font-size: 13px;
  margin-top: -10px;
  z-index: 2;
}
.gauge-tiny .gauge-stat { font-size: 10px; margin-top: -6px; }

/* 中间列 */
.dash-center-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  min-width: 150px;
}
.params-compact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px;
  width: 100%;
}
.params-compact .card-title {
  font-size: 9px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;
}
.params-compact .card-row {
  display: flex; justify-content: space-between;
  margin-bottom: 2px; font-size: 10px;
}
.params-compact .card-label { color: #64748b; min-width: 75px; }
.params-compact .card-val { font-weight: 400; text-align: right; }

/* 小仪表列 */
.dash-mini-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
/* 仪表盘精确网格对齐 */
.dash-cockpit {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 20px;
  align-items: center;
  justify-items: center;
  padding: 8px 0;
}
.dash-cockpit > * { min-width: 0; }

/* 仪表统一容器 */
.gauge-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gauge-car { position: relative; }
.gauge-huge .gauge-car svg { width: 270px; height: 190px; }
.gauge-tiny .gauge-car svg { width: 130px; height: 90px; }
.gauge-stat {
  font-size: 13px;
  margin-top: -10px;
  z-index: 2;
}
.gauge-tiny .gauge-stat { font-size: 10px; margin-top: -6px; }

/* 中间列 */
.dash-center-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  min-width: 150px;
}
.params-compact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px;
  width: 100%;
}
.params-compact .card-title {
  font-size: 9px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;
}
.params-compact .card-row {
  display: flex; justify-content: space-between;
  margin-bottom: 2px; font-size: 10px;
}
.params-compact .card-label { color: #64748b; min-width: 75px; }
.params-compact .card-val { font-weight: 400; text-align: right; }

/* 小仪表列 */
.dash-mini-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
/* 仪表盘精确网格对齐 */
.dash-cockpit {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 0;
  padding: 8px 0;
}
.dash-cockpit > * { min-width: 0; }

/* 仪表统一容器 */
.gauge-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gauge-car { position: relative; }
.gauge-huge .gauge-car svg { width: 270px; height: 190px; }
.gauge-tiny .gauge-car svg { width: 130px; height: 90px; }
.gauge-stat {
  font-size: 13px;
  margin-top: -10px;
  z-index: 2;
}
.gauge-tiny .gauge-stat { font-size: 10px; margin-top: -6px; }

/* 中间列 */
.dash-center-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  min-width: 150px;
}
.params-compact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px;
  width: 100%;
}
.params-compact .card-title {
  font-size: 9px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;
}
.params-compact .card-row {
  display: flex; justify-content: space-between;
  margin-bottom: 2px; font-size: 10px;
}
.params-compact .card-label { color: #64748b; min-width: 75px; }
.params-compact .card-val { font-weight: 400; text-align: right; }

/* 小仪表列 */
.dash-mini-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.btn-recheck {
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  margin-right: 8px;
}
.btn-recheck:hover { background: var(--c-gray-bg); }