/**
 * AI智诊云 - 样式文件 (Stylesheet)
 * 分区: [A]基础布局 [B]面板组件 [C]表单按钮 [D]分区面板 [E]进度条 [F]日志 [G]地图 [H]弹窗 [I]浅色主题
 */

/* ===== [A] 基础布局 (Base Layout) ===== */
/* AI智诊云 - 样式文件 (从 dashboard.html 提取) */

/* === Style Block 1 === */
/* Mobile optimizations */
@media (max-width: 768px) {
  body { padding: 0; font-size: 15px; }
  h1 { font-size: 16px !important; padding: 10px 12px; margin: 0; background: #16213e; }
  h1 img { height: 28px !important; }
  .panel { padding: 10px 8px; margin-bottom: 8px; border-radius: 0; }
  /* Top bar compact */
  .row { gap: 6px; padding: 8px; }
  /* D1-D7: vertical accordion list */
  .zone-panel { display: block !important; overflow-y: auto; max-height: 45vh; }
  .zone-group { flex: unset !important; width: 100% !important; border-right: none !important; border-bottom: 1px solid #0f3460; height: auto !important; }
  .zone-group-hdr { font-size: 14px !important; padding: 10px 8px !important; }
  .zone-items label { font-size: 13px !important; padding: 8px !important; white-space: normal !important; }
  /* Bigger touch targets */
  button { padding: 10px 16px !important; font-size: 15px !important; min-height: 40px; }
  input, select { font-size: 16px !important; padding: 10px 12px !important; min-height: 40px; }
  /* Single column layout for form */
  .form-grid { flex-direction: column !important; }
  .form-field { width: 100% !important; }
  #btnExport { width: 100%; }
  /* Login */
  #loginOverlay { padding: 0 !important; }
  #loginBox { width: 100vw !important; height: 100svh !important; grid-template-columns: 1fr !important; border-radius: 0 !important; }
  .login-art-panel { display: none !important; }
  .login-form-panel { padding: 26px 22px !important; }
  .login-form-inner { width: 100% !important; max-width: 360px !important; }
  /* User mgmt */
  #userMgrOverlay > div { min-width: unset !important; width: 96vw !important; padding: 14px !important; }
  /* Progress */
  .progress-bar { height: 22px !important; }
  .progress-text { font-size: 13px !important; }
  /* Log */
  #log { height: 200px; font-size: 12px; }
  /* Map */
  #mapOverlay > div { width: 100vw !important; height: 100vh !important; }
  /* Top icons */
  .row > span[style*="margin-left"] { display: none; }
  /* Hide toolbar text, keep icons */
  .zone-toolbar { flex-wrap: wrap; gap: 4px; font-size: 13px !important; }
  .zone-toolbar a, .scene-chip { font-size: 13px !important; padding: 5px 10px !important; }
  /* Info panel */
  #mapInfoPanel { top: 60px !important; left: 8px !important; min-width: 180px !important; font-size: 12px !important; }
  /* Version info popup */
  #versionInfo { right: 4px !important; min-width: 300px !important; max-width: 95vw !important; }
  .top-header { align-items: flex-start; margin: 0 0 12px; padding: 8px; }
  .top-left { flex-direction: column; align-items: flex-start; gap: 8px; }
  .main-tabs { position: static; background: transparent; padding: 0; margin: 0; width: 100%; }
  .main-tab { flex: 1; padding: 8px 6px !important; font-size: 14px !important; min-height: 36px !important; }
  .overview-head { flex-direction: column; padding: 12px; }
  .product-summary { display: block; }
  .product-summary .overview-head, .product-summary .product-main-grid, .product-summary .overview-map-block { grid-column: auto; grid-row: auto; }
  .product-main-grid { grid-template-columns: 1fr; }
  .product-main-grid { padding-top: 0; }
  .overview-map-card { width: 100%; height: 300px; }
  .overview-lower-grid { grid-template-columns: 1fr; }
  .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-metrics { padding-top: 0; }
  .overview-grid, .tool-grid-page, .device-overview-grid { grid-template-columns: 1fr; }
  .overview-controls { width: 100%; align-items: stretch; }
  .overview-map-card { min-height: 280px; }
  .mini-section { border-radius: 16px; padding: 18px 16px; }
  .mini-overview .module-title { font-size: 28px; }
  .metric-number { font-size: 38px; }
  #overviewAmap { min-height: 300px; }
  .detail-command-row { grid-template-columns: 1fr 1fr; }
  .detail-command-row input { grid-column: 1 / -1; width: 100%; }
  .detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-info-grid, .sim-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-sim-layout { grid-template-columns: 1fr; }
  .traffic-ring-card { min-height: 180px; }
  .tool-inline { flex-direction: column; align-items: stretch; }
  .tool-input { width: 100%; min-width: 0; }
  .tool-section, .tool-card-sm, .tool-card-md, .tool-card-wide { width: 100%; }
  .content-fit-section { width: 100%; }
}

/* === Style Block 2 === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Consolas, monospace; background: #1a1a2e; color: #e0e0e0; padding: 20px; font-size: 17px; }
h1 { color: #00d4aa; font-size: 25px; margin-bottom: 12px; }
.top-header { position: sticky; top: 0; z-index: 80; display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: -20px -20px 12px; border-bottom: 1px solid #0f3460; padding: 20px 20px 10px; background: #1a1a2e; }
.top-left { display: flex; align-items: center; gap: 28px; min-width: 0; flex-wrap: wrap; }
.panel { background: #16213e; border: 1px solid #0f3460; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.main-tabs { display: flex; gap: 6px; align-items: center; border-bottom: 0; margin: 0; padding-bottom: 0; }
.main-tab { background: transparent; color: #9aa7b5; border: 1px solid transparent; border-radius: 4px; padding: 8px 14px; min-height: 36px; font-size: 15px; }
.main-tab:hover { transform: none; background: #0f3460; color: #fff; }
.main-tab.active { background: #00d4aa; color: #102027; border-color: #00d4aa; }
.main-page { display: none !important; }
.main-page.active { display: block !important; animation: pageFade 0.16s ease-out; }
.main-page.active.mini-overview { display: flex !important; }
@keyframes pageFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.mini-overview { display: flex; flex-direction: column; gap: 14px; background: #111827; border: 1px solid #0f3460; border-radius: 10px; padding: 14px; }
.mini-section { border: 1px solid rgba(15,52,96,.28); border-radius: 22px; padding: 22px 26px; overflow: hidden; }
.product-summary { background: #dff3f8; color: #142033; }
.device-summary { background: #edf7e1; color: #142033; }
.device-detail { background: #fff1d6; color: #142033; }
.product-summary { display: grid; grid-template-columns: 128px 1100px; gap: 18px; align-items: start; width: fit-content; max-width: 100%; overflow-x: auto; }
.product-summary .overview-head { grid-column: 1; grid-row: 1; }
.product-summary .product-main-grid { grid-column: 1 / -1; grid-row: 1; }
.product-summary .overview-map-block { grid-column: 2; grid-row: 1; }
.overview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 18px; }
.product-summary .overview-head { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; margin-bottom: 0; pointer-events: auto; }
.module-title { color: #00d4aa; font-size: 20px; font-weight: bold; margin-bottom: 4px; }
.mini-overview .module-title { color: #111827; font-size: 30px; line-height: 1.1; letter-spacing: 0; }
.module-subtitle, .section-note { color: #8b98a8; font-size: 13px; line-height: 1.5; }
.mini-overview .module-subtitle { color: #65758a; margin-top: 6px; }
.overview-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.overview-controls label { font-size: 13px; margin-bottom: 2px; color: #65758a; }
.overview-controls select { min-width: 118px; background: rgba(255,255,255,.74); color: #0f766e; border-color: rgba(255,255,255,.92); font-weight: bold; }
#overviewProductType { position: relative; z-index: 4; min-width: 120px; width: 120px; font-size: 13px; padding-left: 8px; padding-right: 24px; cursor: pointer; }
#overviewProductType option { font-size: 13px; }
.product-main-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 128px 1100px; gap: 18px; align-items: start; padding-top: 0; pointer-events: none; }
.product-main-grid .overview-metrics, .product-main-grid .overview-map-block { pointer-events: auto; }
.overview-metrics { display: grid; grid-template-columns: 128px; gap: 8px; margin: 0; padding-top: 228px; justify-content: start; }
.metric-box { border: 0; border-radius: 14px; padding: 10px 12px; min-height: 78px; scroll-margin-top: 96px; scroll-margin-bottom: 18px; background: rgba(255,255,255,.7); }
.metric-number { color: #07111f; font-family: Arial, "Microsoft YaHei", sans-serif; font-size: 34px; font-weight: 900; line-height: 1; }
.metric-produced { background: #eaf1ff; }
.metric-installed { background: #fff1c9; }
.metric-online { background: #ddf8e8; }
.metric-offline { background: #f6f9fb; }
.metric-fault { background: #ffe6e4; }
.metric-label { color: #64748b; font-size: 15px; margin-top: 6px; }
.overview-grid, .tool-grid-page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 14px; align-items: start; }
.tool-grid-page { grid-template-columns: repeat(5, 230px); justify-content: start; align-items: start; gap: 18px; overflow-x: auto; overflow-y: visible; padding: 14px 0 12px; }
.overview-section, .tool-section { background: #16213e; border: 1px solid #0f3460; border-radius: 6px; padding: 16px; }
.device-summary-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.current-product-note { font-size: 12px; color: #64748b; }
.tool-section { width: fit-content; max-width: 100%; }
.tool-pastel { position: relative; border: 0; border-radius: 28px; color: #172033; cursor: pointer; min-height: 150px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(15,52,96,.08), 0 6px 16px rgba(15,23,42,.10); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.tool-pastel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 18% 14%, rgba(255,255,255,.72), transparent 34%); opacity: .65; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.tool-pastel::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 14px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.56); opacity: .45; pointer-events: none; transform: scaleX(.42); transform-origin: left; transition: transform .2s ease, opacity .2s ease; }
.tool-pastel:hover { transform: translateY(-8px) scale(1.025); filter: saturate(1.08); box-shadow: inset 0 0 0 1px rgba(15,52,96,.18), 0 18px 34px rgba(15,23,42,.20); }
.tool-pastel:hover::before { opacity: .95; transform: translate(8px, -8px) scale(1.06); }
.tool-pastel:hover::after { opacity: .9; transform: scaleX(1); }
.tool-pastel:active { transform: translateY(-3px) scale(1.01); }
.tool-pastel > * { position: relative; z-index: 1; }
.tool-pastel .section-title2 { color: #111827; font-size: 20px; line-height: 1.25; }
.tool-pastel .section-note { color: #526174; font-size: 14px; line-height: 1.55; }
.tool-pastel .section-row { min-height: 108px; flex-direction: column; justify-content: space-between; }
.tool-pastel .section-row::after { content: '\70b9\51fb\5c55\5f00'; align-self: flex-end; color: #64748b; font-size: 12px; white-space: nowrap; margin-left: 0; margin-top: 12px; transition: transform .18s ease, color .18s ease; }
.tool-pastel:hover .section-row::after { color: #0f766e; transform: translateX(3px); }
.tool-pastel.open .section-row::after { content: '\6536\8d77'; }
.tool-pastel.tool-direct .section-row::after { content: '\70b9\51fb\6253\5f00'; }
.tool-card-body { display: none; margin-top: 12px; cursor: default; }
.tool-modal-open .tool-pastel:not(.open) { filter: brightness(.45) saturate(.65); opacity: .72; }
#toolModalOverlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.78); align-items: center; justify-content: center; padding: 28px; }
.tool-modal-panel { width: fit-content; min-width: min(520px, 88vw); max-width: 92vw; max-height: 82vh; overflow-y: auto; overflow-x: hidden; background: #16213e; border: 1px solid #0f3460; border-radius: 12px; padding: 28px 36px; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.tool-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 20px; border-bottom: 1px solid #0f3460; padding-bottom: 12px; }
.tool-modal-head h3 { color: #00d4aa; margin: 0; font-size: 20px; }
.tool-modal-head span { color: #888; font-size: 13px; }
.tool-modal-close { background: transparent !important; border: 0 !important; color: #e94560 !important; font-size: 28px; line-height: 1; padding: 0 6px !important; min-height: 0; cursor: pointer; }
#toolModalBody .tool-card-body { display: block; margin-top: 0; }
#toolModalBody .tool-inline { margin-top: 12px; }
#toolModalBody .overview-table-wrap { max-height: 430px; width: 100%; overflow-x: hidden; background: rgba(255,255,255,.06); }
#toolModalBody .overview-table { width: 100%; min-width: 0; table-layout: fixed; }
#toolModalBody .overview-table th, #toolModalBody .overview-table td { padding: 7px 8px; }
#toolModalBody .overview-table th { background: #e8eef7; color: #172033; }
#toolModalBody .overview-table td { background: rgba(255,255,255,.035); color: #e8eef7; border-bottom-color: rgba(255,255,255,.08); }
#toolModalBody .overview-table tr:hover td { background: rgba(0,212,170,.08); }
#toolModalBody .overview-table th:nth-child(1), #toolModalBody .overview-table td:nth-child(1) { width: 52px; }
#toolModalBody .overview-table th:nth-child(2), #toolModalBody .overview-table td:nth-child(2) { width: 130px; }
#toolModalBody .overview-table th:nth-child(3), #toolModalBody .overview-table td:nth-child(3) { width: 84px; }
#toolModalBody .overview-table th:nth-child(4), #toolModalBody .overview-table td:nth-child(4) { width: 76px; }
#toolModalBody .overview-table th:nth-child(5), #toolModalBody .overview-table td:nth-child(5) { width: 96px; }
#toolModalBody .overview-table th:nth-child(6), #toolModalBody .overview-table td:nth-child(6) { width: 80px; }
#toolModalBody .overview-table th:nth-child(7), #toolModalBody .overview-table td:nth-child(7) { width: 88px; }
#toolModalBody .overview-table th:nth-child(8), #toolModalBody .overview-table td:nth-child(8) { width: 132px; }
.pastel-blue { background: #dff3ff; }
.pastel-green { background: #e1f7e8; }
.pastel-yellow { background: #fff2c9; }
.pastel-peach { background: #ffe6dc; }
.pastel-lavender { background: #eee7ff; }
.tool-card-sm, .tool-card-md, .tool-card-wide { width: 230px; }
.tool-card-sm.open, .tool-card-md.open, .tool-card-wide.open { width: 230px; min-height: 150px; }
.overview-section { margin-bottom: 14px; }
.overview-map-block { margin-top: 0; }
.device-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
.overview-map-card { position: relative; width: 1100px; height: 650px; background: linear-gradient(145deg, #050c22 0%, #0a183b 100%); border: 1px solid rgba(52,200,232,.6); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(52,200,232,.14), 0 0 28px rgba(52,200,232,.24), 0 18px 42px rgba(0,0,0,.38), inset 0 0 34px rgba(52,200,232,.08); }
.overview-map-card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(52,200,232,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(52,200,232,.055) 1px, transparent 1px), radial-gradient(circle at 50% 48%, rgba(52,200,232,.12), transparent 58%); background-size: 26px 26px, 26px 26px, 100% 100%; opacity: .42; mix-blend-mode: screen; }
.overview-map-card::after { content: ''; position: absolute; inset: 8px; z-index: 2; pointer-events: none; border-radius: 14px; border: 1px solid rgba(52,200,232,.22); box-shadow: inset 0 0 24px rgba(52,200,232,.12), 0 0 18px rgba(52,200,232,.16); }
#overviewAmap { width: 100%; height: 100%; min-height: 0; display: block; background: #0b2450; filter: saturate(1.18) brightness(.9) contrast(1.08) drop-shadow(0 0 5px rgba(52,200,232,.34)); }
.overview-amap-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; }
.overview-device-marker { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.28)); }
.overview-device-marker::before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--marker-color, #00d4aa); opacity: .18; transform: translateY(4px); }
.overview-device-marker img { position: relative; width: 28px; height: 28px; object-fit: contain; display: block; }
.map-empty { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #8b98a8; font-size: 14px; background: rgba(13,17,23,.72); }
.map-scale-badge, .map-center-badge, .map-size-badge { position: absolute; left: 14px; z-index: 5; color: #fff; padding: 0; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.75); pointer-events: none; }
.map-scale-badge { top: 12px; }
.map-center-badge { top: 44px; }
.map-size-badge { top: 76px; }
.map-china-btn { position: absolute; right: 14px; top: 12px; z-index: 6; width: 38px; min-height: 38px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: #0f766e; font-size: 22px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.map-china-btn:hover { background: #e7f8ef; transform: translateY(-1px); }
.map-china-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.province-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; color: #0f766e; font-size: 14px; font-weight: 800; }
.province-stat-item { background: rgba(255,255,255,.56); color: #64748b; border: 1px solid rgba(100,116,139,.12); border-radius: 999px; padding: 6px 12px; min-height: 32px; font-weight: 700; cursor: pointer; }
.province-stat-item:hover { background: rgba(255,255,255,.82); color: #0f766e; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,.08); }
.province-count-marker { color: #0f766e; background: rgba(255,255,255,.9); border: 1px solid rgba(15,118,110,.22); border-radius: 6px; padding: 1px 5px; font-size: 12px; font-weight: 900; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.overview-locate-marker { width: 28px; height: 28px; border-radius: 50%; background: rgba(0,212,170,.18); border: 2px solid #00d4aa; box-shadow: 0 0 0 8px rgba(0,212,170,.16), 0 8px 18px rgba(0,0,0,.24); display: flex; align-items: center; justify-content: center; animation: locatePulse 1.2s ease-out infinite; }
.overview-locate-marker span { width: 10px; height: 10px; border-radius: 50%; background: #00d4aa; border: 2px solid #fff; }
.overview-self-marker { width: 16px; height: 16px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(37,99,235,.2), 0 4px 12px rgba(0,0,0,.22); }
@keyframes locatePulse { 0% { box-shadow: 0 0 0 0 rgba(0,212,170,.34), 0 8px 18px rgba(0,0,0,.24); } 100% { box-shadow: 0 0 0 14px rgba(0,212,170,0), 0 8px 18px rgba(0,0,0,.24); } }
.overview-map-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; color: #64748b; font-size: 13px; }
.overview-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #9aa7b5; }
.dot.online { background: #3fb950; }
.dot.fault { background: #f0883e; }
.dot.offline { background: #8b98a8; }
.section-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.content-fit-section { width: min(100%, 1298px); max-width: 100%; }
.overview-lower-grid { display: grid; grid-template-columns: min(100%, 1298px); gap: 14px; align-items: start; }
.section-title2 { color: #111827; font-size: 26px; font-weight: 900; margin-bottom: 3px; }
.tool-section .section-title2 { color: #d8e2ef; font-size: 16px; }
.tool-section.tool-pastel .section-title2 { color: #111827; font-size: 20px; }
.overview-table-wrap { overflow: auto; border: 1px solid rgba(15,52,96,.12); border-radius: 14px; max-height: 360px; background: rgba(255,255,255,.74); }
.overview-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1250px; table-layout: fixed; }
.overview-table th, .overview-table td { padding: 8px 10px; border-bottom: 1px solid rgba(15,52,96,.1); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overview-table th { color: #334155; background: rgba(255,255,255,.86); position: sticky; top: 0; z-index: 1; font-size: 15px; }
.overview-table td { color: #111827; font-size: 14px; }
.overview-table tbody tr { cursor: pointer; }
.overview-table tbody tr.selected td,
body.light .overview-table tbody tr.selected td { background: #dff8f3 !important; box-shadow: inset 0 1px 0 rgba(20,184,166,.22), inset 0 -1px 0 rgba(20,184,166,.22); }
.overview-table tbody tr.selected td:first-child,
body.light .overview-table tbody tr.selected td:first-child { box-shadow: inset 4px 0 0 #00a887, inset 0 1px 0 rgba(20,184,166,.22), inset 0 -1px 0 rgba(20,184,166,.22); color: #006b5b; }
.overview-table tbody tr.selected .status-pill { box-shadow: 0 0 0 1px rgba(0,168,135,.24); }
.th-filter { display: flex; flex-direction: column; gap: 5px; }
.th-filter span { font-size: 15px; font-weight: 900; color: #334155; line-height: 1.1; }
.th-filter input, .th-filter select { width: 100%; min-height: 28px; height: 28px; padding: 3px 22px 3px 8px; border-radius: 4px; border: 1px solid rgba(15,52,96,.14); background-color: rgba(255,255,255,.82); color: #64748b; font-size: 12px; }
.th-filter select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%); background-position: calc(100% - 12px) 11px, calc(100% - 7px) 11px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.overview-table th:nth-child(1), .overview-table td:nth-child(1) { width: 180px; }
.overview-table th:nth-child(2), .overview-table td:nth-child(2) { width: 180px; }
.overview-table th:nth-child(3), .overview-table td:nth-child(3) { width: 70px; }
.overview-table th:nth-child(4), .overview-table td:nth-child(4) { width: 132px; }
.overview-table th:nth-child(5), .overview-table td:nth-child(5) { width: 120px; }
.overview-table th:nth-child(6), .overview-table td:nth-child(6) { width: 170px; }
.overview-table th:nth-child(7), .overview-table td:nth-child(7) { width: 170px; }
.overview-table th:nth-child(8), .overview-table td:nth-child(8) { width: 170px; }
.overview-table td.clickable-sn { cursor: pointer; color: #0f766e; font-weight: 800; border-radius: 8px; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.overview-table td.clickable-sn:hover { background: rgba(0,212,170,.16); color: #00d4aa; box-shadow: inset 0 0 0 1px rgba(0,212,170,.28); }
.status-pill { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 12px; background: #263142; color: #aeb9c8; }
.status-pill.online { background: rgba(63,185,80,.15); color: #3fb950; }
.status-pill.fault { background: rgba(240,136,62,.15); color: #f0883e; }
.esc-status { font-weight: 800; white-space: nowrap; }
.esc-status.open { color: #111827; }
.esc-status.closed, .detail-esc-closed { color: #d92d20 !important; font-weight: 800; white-space: nowrap; }
.esc-status.unknown { color: #6b7280; }
.overview-table td.esc-cell { display: flex; align-items: center; gap: 8px; overflow: visible; text-overflow: clip; }
.esc-action-btn { flex: 0 0 auto; margin-left: 0; min-height: 24px; padding: 2px 9px; border-radius: 5px; border: 1px solid rgba(15,118,110,.22); background: #eef8f7; color: #0f766e; font-size: 12px; font-weight: 900; cursor: pointer; vertical-align: middle; }
.esc-action-btn:hover { background: #dff8f3; color: #0a8d6d; }
.status-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.status-bars span { display: block; color: #9aa7b5; font-size: 13px; margin-bottom: 4px; }
.bar { height: 10px; background: #0d1117; border-radius: 999px; overflow: hidden; border: 1px solid #30363d; }
.bar i { display: block; height: 100%; width: 0%; background: #00d4aa; transition: width .25s ease; }
#barOffline { background: #8b98a8; }
#barFault { background: #f0883e; }
.overview-actions, .tool-inline { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.tool-divider { height: 1px; background: #0f3460; margin: 16px 0 2px; }
.tool-textarea { width: 100%; min-height: 110px; margin-top: 12px; padding: 10px 12px; border: 1px solid #0f3460; border-radius: 8px; background: #0d1117; color: #e0e0e0; resize: vertical; }
.tool-wide-table { margin-top: 12px; max-height: 360px; }
.tool-wide-table .overview-table { width: 100%; min-width: 620px; }
.tool-alert-row td { background: rgba(233,69,96,.16); color: #ffd6df; }
#toolModalBody .tool-wide-table { width: min(860px, 86vw); overflow-x: auto; }
#toolModalBody .short-log-table { table-layout: fixed; min-width: 760px; }
#toolModalBody .short-log-table th:nth-child(1), #toolModalBody .short-log-table td:nth-child(1) { width: 54px; }
#toolModalBody .short-log-table th:nth-child(2), #toolModalBody .short-log-table td:nth-child(2) { width: 70px; }
#toolModalBody .short-log-table th:nth-child(3), #toolModalBody .short-log-table td:nth-child(3) { width: 210px; }
#toolModalBody .short-log-table th:nth-child(4), #toolModalBody .short-log-table td:nth-child(4) { width: 140px; }
#toolModalBody .short-log-table th:nth-child(5), #toolModalBody .short-log-table td:nth-child(5) { width: auto; }
#toolModalBody #snHexScript { white-space: pre-wrap; max-height: 220px; overflow: auto; }
#toolModalBody #snHexBytes { word-break: break-all; }
.filter-btn { background: rgba(255,255,255,.72); color: #334155; }
.filter-btn.active { background: #e9f7ff; color: #0f766e; }
.overview-refresh-btn { background: #f3fbf8; color: #0f766e; border-color: rgba(15,118,110,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.72); }
.overview-refresh-btn:hover { background: #ffffff; color: #0a8d6d; }
.detail-title-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.detail-query-inline { display: flex; align-items: center; gap: 8px; }
.detail-query-inline input { width: 28ch; background: rgba(255,255,255,.8); border-color: rgba(15,52,96,.16); color: #334155; font-size: 17px; padding: 10px 16px; border-radius: 12px; }
.detail-query-inline button { min-height: 42px; border-radius: 12px; background: #eef8f7; color: #0f766e; }
.detail-command-row { display: block; margin: 0 0 12px; }
.detail-location-info { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-height: 44px; padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.52); color: #64748b; font-size: 12px; overflow: hidden; }
.detail-location-info b { color: #111827; font-size: 13px; font-weight: 900; }
.detail-location-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.detail-location-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.68); border: 1px solid rgba(148,163,184,.14); white-space: nowrap; }
.detail-location-chip span { color: #64748b; font-size: 12px; }
.detail-location-chip b { margin-left: 3px; }
.detail-location-info .detail-address { flex: 1 1 auto; min-width: 220px; }
.detail-location-info .detail-address > span { flex: 0 0 auto; }
.detail-location-info .detail-address b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-location-info button { min-height: 30px; padding: 4px 12px; border-radius: 10px; }
.detail-location-info button:disabled { opacity: .45; cursor: not-allowed; }
.detail-locate-status { color: #0f766e; font-weight: 900; font-size: 13px; white-space: nowrap; }
.detail-locate-icon-btn { display: inline-flex; align-items: center; gap: 6px; background: #00d4aa !important; color: #102027 !important; font-weight: 900; }
.detail-locate-icon-btn img { width: 17px; height: 17px; object-fit: contain; }
.detail-relocate-btn { background: #e5e7eb !important; color: #64748b !important; border-color: #cbd5e1 !important; }
.detail-groups { display: grid; gap: 10px; }
.detail-group { background: rgba(255,255,255,.38); border: 1px solid rgba(15,52,96,.08); border-radius: 14px; padding: 10px 14px 12px; }
.detail-group-title { color: #111827; font-size: 16px; font-weight: 900; margin-bottom: 8px; }
.detail-metrics { display: grid; grid-template-columns: repeat(4, 138px); gap: 10px; justify-content: start; }
.device-info-grid { grid-template-columns: repeat(5, 138px) 190px; }
.sim-info-grid { grid-template-columns: max-content; gap: 10px; align-content: stretch; width: max-content; max-width: 300px; }
.sim-info-grid .detail-card { min-height: 46px; padding: 7px 10px; border-radius: 10px; }
.sim-info-grid .detail-card span { font-size: 12px; margin-bottom: 3px; }
.sim-info-grid .detail-card b { font-size: 16px; line-height: 1.08; }
.sim-id-card { display: grid; gap: 6px; align-content: center; min-height: 132px !important; width: max-content; max-width: 300px; }
.sim-id-card div { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.sim-id-card span { flex: 0 0 auto; display: inline !important; margin: 0 !important; font-size: 11px !important; white-space: nowrap; }
.sim-id-card b { flex: 1 1 auto; display: inline !important; margin-top: 0; font-size: 12px !important; line-height: 1.25 !important; letter-spacing: 0; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
.sim-date-summary { display: grid; gap: 5px; align-content: center; min-height: 112px !important; width: max-content; max-width: 210px; background: #eefaf9 !important; }
.sim-date-summary div { display: flex; align-items: baseline; justify-content: flex-start; gap: 4px; min-width: 0; text-align: left; }
.sim-date-summary span { margin-bottom: 0 !important; white-space: nowrap; }
.sim-date-summary b { white-space: normal; overflow: visible; text-overflow: clip; font-size: 14px !important; overflow-wrap: anywhere; }
.sim-status-row { flex-wrap: nowrap !important; align-items: baseline; }
.sim-status-row span { flex: 0 0 auto; }
#detailSimStatus { flex: 0 0 auto; white-space: nowrap !important; overflow-wrap: normal !important; word-break: keep-all; font-size: 13px !important; }
.detail-sim-layout { display: grid; grid-template-columns: 220px max-content minmax(720px, 1fr); gap: 12px; align-items: stretch; }
.detail-card { background: #f8fbff; border: 1px solid rgba(148,163,184,.14); border-radius: 12px; padding: 10px 12px; min-height: 58px; }
.detail-card:nth-child(6n+1) { background: #f0f7ff; }
.detail-card:nth-child(6n+2) { background: #f5f1ff; }
.detail-card:nth-child(6n+3) { background: #f1fbf5; }
.detail-card:nth-child(6n+4) { background: #fff8e6; }
.detail-card:nth-child(6n+5) { background: #fff1f5; }
.detail-card:nth-child(6n) { background: #eefaf9; }
.detail-card span { display: block; color: #64748b; font-size: 14px; margin-bottom: 5px; }
.detail-card b { color: #111827; font-size: 18px; overflow-wrap: anywhere; line-height: 1.12; }
.device-info-grid .detail-card b { font-size: 17px; }
.detail-ecs-diag-card { width: 190px; min-width: 0; }
.detail-ecs-diag-card b { display: block; font-size: 12px !important; line-height: 1.35 !important; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; }
.detail-card .health-score { color: #16a34a; font-family: Arial, "Microsoft YaHei", sans-serif; font-size: 28px; }
.detail-card b.detail-status-online { color: #16a34a !important; }
.detail-card b.detail-status-offline { color: #94a3b8 !important; }
.detail-card b.detail-status-fault { color: #e94560 !important; }
.detail-esc-open { color: #111827; font-weight: 800; white-space: nowrap; }
.detail-esc-card small { display: block; margin-top: 5px; color: #64748b; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.sim-gprs-closed { color: #ef4444 !important; font-weight: 900; }
.sim-gprs-open { color: inherit; }
.traffic-ring-card { background: #f0f7ff; border: 1px solid rgba(148,163,184,.14); border-radius: 12px; padding: 10px 12px; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.traffic-ring-card span { align-self: flex-start; color: #64748b; font-size: 14px; font-weight: 700; }
.traffic-ring-card strong { color: #111827; font-size: 15px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.traffic-ring-summary { width: 100%; display: grid; gap: 4px; margin-top: 2px; }
.traffic-ring-summary div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.2; }
.traffic-ring-summary span { align-self: auto; color: #64748b; font-size: 12px; font-weight: 700; }
.traffic-ring-summary b { color: #111827; font-size: 14px; line-height: 1.2; text-align: right; overflow-wrap: anywhere; }
.traffic-ring { --traffic-percent: 0; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(#1f9ec9 calc(var(--traffic-percent) * 1%), #d4d6db 0); display: grid; place-items: center; }
.traffic-ring-inner { width: 82px; height: 82px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; }
.traffic-ring-inner b { color: #111827; font-size: 26px; line-height: 1; }
.traffic-ring-inner b.traffic-over-limit { background: #ef4444; color: #fff; border-radius: 10px; padding: 6px 10px; box-shadow: 0 6px 14px rgba(239,68,68,.24); }
.traffic-daily-card { position: relative; background: #fff; border: 1px solid rgba(148,163,184,.18); border-radius: 8px; padding: 12px 14px 10px; min-width: 0; box-shadow: 0 8px 22px rgba(15,23,42,.06); }
.traffic-daily-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.traffic-daily-title { color: #111827; font-size: 16px; font-weight: 900; }
.traffic-daily-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.traffic-month-picker { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #64748b; font-size: 12px; font-weight: 800; }
.traffic-month-picker input { width: 150px; height: 24px; min-height: 24px; padding: 1px 8px; border-radius: 4px; border-color: #cfd8e3; background: #fff; color: #334155; font-size: 12px; }
.traffic-daily-subhead { height: 18px; display: flex; align-items: center; justify-content: flex-end; color: #64748b; font-size: 12px; font-weight: 800; }
.traffic-daily-chart { position: relative; height: 200px; min-width: 0; overflow: hidden; border-radius: 4px; background: #fff; }
.traffic-daily-chart svg { display: block; width: 100%; height: 100%; }
.traffic-daily-empty { height: 100%; display: grid; place-items: center; color: #94a3b8; font-size: 13px; font-weight: 800; }
.traffic-daily-axis { stroke: rgba(100,116,139,.36); stroke-width: 1; }
.traffic-daily-grid { stroke: rgba(148,163,184,.24); stroke-width: 1; stroke-dasharray: 4 4; }
.traffic-daily-hit { fill: transparent; cursor: crosshair; }
.traffic-daily-label { fill: #64748b; font-size: 12px; font-weight: 800; }
.traffic-daily-value-label { fill: #1677ff; font-size: 12px; font-weight: 900; }
.traffic-daily-axis-title { fill: #334155; font-size: 12px; font-weight: 900; }
.traffic-daily-value-over { fill: #ef4444; }
.traffic-daily-bar-limit { fill: rgba(100, 116, 139, .22); }
.traffic-daily-bar { fill: #22c3e8; }
.traffic-daily-bar-red { fill: #ef4444; }
.traffic-daily-tooltip { position: absolute; z-index: 5; min-width: 150px; padding: 9px 12px; border-radius: 3px; background: #fff; color: #111827; box-shadow: 0 8px 24px rgba(15,23,42,.16); border: 1px solid rgba(148,163,184,.18); font-size: 12px; line-height: 1.6; pointer-events: none; }
.traffic-daily-tooltip b { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1677ff; margin-right: 8px; vertical-align: middle; }
.overview-table td.traffic-over-limit, body.light .overview-table td.traffic-over-limit { background: #fee2e2 !important; color: #991b1b !important; font-weight: 900; box-shadow: inset 4px 0 0 #ef4444; }
.tool-input { min-width: 220px; width: min(100%, 340px); }
.tool-input-short { min-width: 110px; width: 120px; }
.tool-conn-info { color: #9aa7b5; font-size: 14px; line-height: 1.8; }
.tool-conn-info b { color: #00d4aa; }
.tool-result { color: #f8fafc; background: rgba(15,23,42,.32); border: 1px solid rgba(148,163,184,.28); border-radius: 8px; padding: 8px 10px; font-size: 14px; font-weight: 800; margin-top: 10px; min-height: 18px; line-height: 1.45; }
.mono { font-family: Consolas, monospace; }
label { color: #888; font-size: 16px; display: block; margin-bottom: 4px; }
input, button, select { font-family: inherit; font-size: 17px; padding: 7px 12px; border-radius: 4px; border: 1px solid #0f3460; background: #0f3460; color: #e0e0e0; outline: none; }
input:focus { border-color: #00d4aa; }
input[type=password] { font-family: system-ui, sans-serif; -webkit-text-security: disc; }
button { cursor: pointer; background: #00d4aa; color: #1a1a2e; border: none; font-weight: bold; transition: transform 0.1s, background 0.15s; }
button:hover { background: #00e4ba; transform: scale(1.10); }
button:active { transform: scale(0.90); }
button.danger { background: #e94560; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row label { display: inline; margin-right: 4px; }
#log { background: #0d1117; border: 1px solid #30363d; border-radius: 4px; padding: 10px; height: 260px; overflow-y: auto; font-size: 16px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
#log .info { color: #58a6ff; }
#log .send { color: #d2a8ff; }
#log .recv { color: #3fb950; }
#log .error { color: #e94560; }
#log .data { color: #f0883e; }
#status { font-size: 16px; color: #888; }
#status .ok { color: #3fb950; }
#status .fail { color: #e94560; }
.file-list { display: flex; gap: 10px; flex-wrap: wrap; }
.file-card { background: #0f3460; border-radius: 4px; padding: 8px 12px; font-size: 16px; min-width: 200px; }
.file-card a { color: #00d4aa; text-decoration: none; }
.file-card a:hover { text-decoration: underline; }
.cmd-section { margin-bottom: 14px; }
.cmd-section-title { font-size: 17px; font-weight: bold; color: #aaa; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #0f3460; }
.form-grid { display: flex; gap: 8px 16px; margin-bottom: 8px; flex-wrap: wrap; align-items: flex-start; }
.form-grid.col1 .form-field { flex: 1; }
.form-field { display: flex; flex-direction: column; }
.form-field label { margin-bottom: 2px; }
.form-field input, .form-field select { width: auto; min-width: 120px; }
.form-field input.narrow { width: 100px; }
.form-field input.wide { width: 200px; }
.form-field select.wide { width: 100%; }
.form-hint { font-size: 15px; color: #888; margin-top: 2px; }
.progress-wrap { margin-top: 10px; display: none; flex-direction: column; gap: 4px; }
.progress-wrap.show { display: flex; }
.progress-caption { color: #9aa7b5; font-size: 14px; font-weight: bold; margin-top: 2px; }
.progress-bar { width: 100%; height: 30px; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; overflow: hidden; position: relative; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #0a8d6d, #00d4aa, #00f5c0); border-radius: 5px; transition: width 0.3s ease-out; position: relative; display: flex; align-items: center; justify-content: flex-end; }
.total-progress-bar { height: 26px; }
.total-progress-fill { background: linear-gradient(90deg, #2563eb, #00d4aa, #3fb950); }
.progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%); border-radius: 5px; }
.progress-text { font-size: 17px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); white-space: nowrap; padding-right: 8px; z-index: 1; }
.progress-info { display: flex; justify-content: space-between; font-size: 15px; color: #888; }
.zone-panel { display: flex; gap: 0; overflow-x: auto; border: 1px solid #0f3460; border-radius: 4px; background: #0d1117; }
.zone-group { flex: 1 1 0; min-width: 160px; border-right: 1px solid #0f3460; display: flex; flex-direction: column; }
.zone-group:nth-child(odd) { background: #0f1a2e; }
.zone-group:nth-child(even) { background: #162140; }
.zone-group:last-child { border-right: none; }
.zone-group-hdr { display: flex; align-items: center; gap: 4px; padding: 5px 6px; background: #16213e; cursor: pointer; user-select: none; font-size: 15px; font-weight: bold; color: #aaa; flex-shrink: 0; }
.zone-group-hdr:hover { background: #1a2d50; }
.zone-group-info { font-size: 12px; font-weight: normal; color: #666; }
.zone-group-hdr input[type=checkbox] { margin: 0; transform: scale(0.85); }
.zone-items { overflow-y: auto; flex: 1; padding: 2px 0; }
.zone-items label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 6px; cursor: pointer; font-size: 15px; color: #ccc; }
.zone-items label:hover { background: #0f3460; color: #fff; }
.zone-items label input[type=checkbox]:checked { accent-color: #00d4aa; }
.zone-items label:has(input[type=checkbox]:checked) { background: #0a5a3a; border-left: 3px solid #00d4aa; color: #fff; }
.zone-addr { font-size: 12px; color: #00d4aa; padding-left: 20px; display: none; }
.zone-items label:hover .zone-addr { display: block; }
.hide-addr .zone-addr, .hide-addr .zone-group-info { display: none !important; }
.hide-fc .fc-code { display: none; }
/* Map pulse animations */
@keyframes mapPulse { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(2.5);opacity:0} }
@keyframes mapPulse2 { 0%{transform:scale(1);opacity:0.4} 100%{transform:scale(3);opacity:0} }
/* Map edge glow */
/* Map font */
#mapOverlay *,#mapInfoPanel *{font-family:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
/* Light theme map */
body.light #mapOverlay > div{background:#fff!important;border-color:#d0d5dd!important}
body.light #mapInfoPanel{background:rgba(255,255,255,0.92)!important;border-color:#d0d5dd!important;color:#333!important}
body.light #mapInfoPanel div{color:#333!important}
body.light #mapSn,body.light #mapLngVal,body.light #mapLatVal{color:#1a2a50!important}
body.light #mapAccVal{color:#c06020!important}
body.light #mapTime{color:#555!important}
body.light #mapAddr{color:#333!important}
body.light #mapEta{color:#0a8d6d!important}
body.light #mapWeather{color:#555!important}
/* Map edge glow */
#mapOverlay > div::before { content:''; position:absolute; top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:14px;background:linear-gradient(135deg,#00d4aa33,#0088cc33,#00d4aa33,#0088cc33);z-index:-1;filter:blur(8px);animation:edgeGlow 3s ease-in-out infinite; }
@keyframes edgeGlow { 0%,100%{opacity:0.5} 50%{opacity:1} }
/* Popup font size bump */
#versionInfo, #versionInfo table, #versionInfo td, #versionInfo th, #versionInfo input, #versionInfo button { font-size: 15px !important; }
#versionAddForm input, #versionAddForm button { font-size: 14px !important; }
#userMgrOverlay, #userMgrOverlay table, #userMgrOverlay td, #userMgrOverlay th { font-size: 15px !important; }
#userMgrOverlay input, #userMgrOverlay select, #userMgrOverlay button, #userMgrOverlay label { font-size: 14px !important; }
#permEditor, #permEditor label, #permEditor button { font-size: 14px !important; }
.zone-denied { opacity: 0.4; pointer-events: none; }
.zone-denied input { pointer-events: none; }
.zone-items label input[type=checkbox] { margin: 0; flex-shrink: 0; transform: scale(0.8); accent-color: #00d4aa; }
.zone-items label input[type=checkbox]:checked { filter: drop-shadow(0 0 2px #00d4aa); }
input[type=checkbox]:hover, .zone-group-hdr input[type=checkbox]:hover { filter: drop-shadow(0 0 3px #00d4aa); cursor: pointer; }
select option { background: #0f3460; color: #e0e0e0; padding: 4px 8px; }
select option:checked { background: #00d4aa; color: #1a1a2e; font-weight: bold; }
select option:hover { background: #1a4080; }
body.light select option { background: #fff; color: #222; }
body.light select option:checked { background: #0a8d6d; color: #fff; }
body.light select option:hover { background: #e8f4f0; }
.zone-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 15px; color: #888; }
.zone-toolbar a { color: #00d4aa; cursor: pointer; text-decoration: none; }
.zone-toolbar a:hover { text-decoration: underline; }
.scene-chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 13px; cursor: pointer; background: #0f3460; color: #ccc; border: 1px solid #1a4080; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.scene-chip:hover { background: #1a4080; border-color: #00d4aa; color: #fff; }
.scene-chip-save { border-style: dashed; color: #888; }
.scene-chip-save:hover { color: #00d4aa; }
body.light .scene-chip { background: #e8eaed; color: #555; border-color: #d0d5dd; }
body.light .scene-chip:hover { background: #d0ddf0; border-color: #0a8d6d; color: #222; }
body.light .scene-chip-save { color: #888; }
body.light .scene-chip-save:hover { color: #0a8d6d; }
.timer-text { color: #f0883e; font-weight: bold; font-size: 18px; min-width: 70px; }

/* 登录遮罩 */
#loginOverlay { position: fixed; inset: 0; background: #f8fafc; z-index:9999; display: flex; align-items: stretch; justify-content: center; }
#loginBox { width: 100%; min-height: 100svh; display: grid; grid-template-columns: minmax(460px, 1fr) minmax(380px, 1fr); color: #111827; overflow: hidden; text-align: left; background: radial-gradient(circle at 20% 20%, rgba(108,63,245,.14), transparent 32%), radial-gradient(circle at 80% 80%, rgba(45,45,45,.08), transparent 30%), linear-gradient(135deg, #f8fafc, #f1f5f9); }
.login-art-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: 48px; color: #fff; overflow: hidden; background: linear-gradient(135deg, #8b949f, #68727e 54%, #565f6b); }
.login-art-panel::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; }
.login-art-panel::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 35%), radial-gradient(circle at bottom left, rgba(255,255,255,.16), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%); pointer-events: none; }
.login-brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 18px; color: #fff; font-size: 34px; font-weight: 900; letter-spacing: 0; }
.login-brand img { width: 66px; height: 66px; border-radius: 16px; object-fit: cover; background: rgba(255,255,255,.12); padding: 5px; box-shadow: 0 14px 38px rgba(0,0,0,.18); }
.login-art-copy { position: relative; z-index: 2; color: rgba(255,255,255,.78); font-size: 19px; font-weight: 700; line-height: 1.65; }
.cc-characters { position: relative; z-index: 2; width: 550px; height: 400px; max-width: 100%; align-self: center; margin: auto 0; }
.cc-character { position: absolute; bottom: 0; transform-origin: bottom center; transition: height .7s ease, transform .7s ease; box-shadow: 0 18px 34px rgba(31,41,55,.16); }
.cc-purple { left: 70px; width: 180px; height: 400px; background: #6c3ff5; border-radius: 10px 10px 0 0; z-index: 1; transform: skewX(var(--cc-skew, 0deg)) translateX(var(--cc-tx, 0)); }
.cc-black { left: 240px; width: 120px; height: 310px; background: #2d2d2d; border-radius: 8px 8px 0 0; z-index: 2; transform: skewX(var(--cc-skew, 0deg)) translateX(var(--cc-tx, 0)); }
.cc-orange { left: 0; width: 240px; height: 200px; background: #ff9b6b; border-radius: 120px 120px 0 0; z-index: 3; transform: skewX(var(--cc-skew, 0deg)); }
.cc-yellow { left: 310px; width: 140px; height: 230px; background: #e8d754; border-radius: 70px 70px 0 0; z-index: 4; transform: skewX(var(--cc-skew, 0deg)); }
.cc-face { position: absolute; left: var(--cc-face-left, 45px); top: var(--cc-face-top, 40px); display: flex; gap: var(--cc-eye-gap, 32px); transition: left .2s ease-out, top .2s ease-out; }
.cc-purple .cc-face { --cc-eye-gap: 32px; }
.cc-black .cc-face { --cc-face-left: 26px; --cc-face-top: 32px; --cc-eye-gap: 24px; }
.cc-orange .cc-face { --cc-face-left: 82px; --cc-face-top: 90px; --cc-eye-gap: 32px; }
.cc-yellow .cc-face { --cc-face-left: 52px; --cc-face-top: 40px; --cc-eye-gap: 24px; }
.cc-eye { width: var(--cc-eye-size, 18px); height: var(--cc-eye-size, 18px); border-radius: 50%; background: #fff; overflow: hidden; display: grid; place-items: center; transition: height .15s ease; }
.cc-black .cc-eye { --cc-eye-size: 16px; }
.cc-eye i { width: var(--cc-pupil-size, 7px); height: var(--cc-pupil-size, 7px); border-radius: 50%; background: #2d2d2d; transform: translate(var(--cc-pupil-x, 0), var(--cc-pupil-y, 0)); transition: transform .1s ease-out; }
.cc-black .cc-eye i { --cc-pupil-size: 6px; }
.cc-dot-eye { width: 12px; height: 12px; border-radius: 50%; background: #2d2d2d; transform: translate(var(--cc-pupil-x, 0), var(--cc-pupil-y, 0)); transition: transform .1s ease-out; }
.cc-mouth { position: absolute; left: var(--cc-mouth-left, 40px); top: var(--cc-mouth-top, 88px); width: 80px; height: 4px; border-radius: 999px; background: #2d2d2d; transition: left .2s ease-out, top .2s ease-out; }
.cc-login-typing .cc-purple { height: 440px; --cc-tx: 40px; }
.cc-login-hide-password .cc-purple { height: 440px; --cc-tx: 40px; }
.login-form-panel { display: flex; align-items: center; justify-content: center; padding: 48px; background: hsl(0 0% 100%); }
.login-form-inner { position: relative; isolation: isolate; width: min(420px, 100%); padding: 32px; border-radius: 32px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.72); backdrop-filter: blur(22px); box-shadow: 0 40px 90px rgba(15,23,42,.12); }
.login-form-inner::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: 32px; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.18)); filter: blur(.5px); }
#loginBox h2 { color: #0f172a; margin: 0 0 8px; font-size: 30px; line-height: 1.15; font-weight: 900; letter-spacing: 0; text-align: center; }
.login-form-inner p { margin: 0 0 34px; color: #64748b; font-size: 14px; text-align: center; }
.login-form-inner label:not(.login-check) { display: block; color: #111827; font-size: 14px; font-weight: 700; margin: 20px 0 9px; }
#loginBox input[type="text"], #loginBox input[type="password"] { width: 100%; height: 48px; border: 1px solid rgba(203,213,225,.9); border-radius: 999px; background: #fff; color: #111827; font-size: 15px; padding: 0 16px; text-align: left; transition: border-color .18s ease, box-shadow .18s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.65); }
#loginBox input[type="text"]:focus, #loginBox input[type="password"]:focus { border-color: #6c3ff5; box-shadow: 0 0 0 3px rgba(108,63,245,.12), inset 0 1px 0 rgba(255,255,255,.7); }
.login-password-wrap { position: relative; }
.login-password-wrap input { padding-right: 58px !important; }
.login-pwd-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 38px; min-height: 0 !important; padding: 4px 0 !important; border: 0 !important; background: transparent !important; color: #6c3ff5 !important; font-size: 13px !important; font-weight: 800; text-align: center; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 22px 0 24px; color: #64748b; font-size: 14px; }
.login-check { display: inline-flex; align-items: center; gap: 8px; color: #64748b; font-size: 14px; cursor: pointer; }
.login-check input { width: 16px !important; height: 16px; min-height: 0; accent-color: #6c3ff5; }
.login-link { min-height: 0; padding: 0 !important; border: 0 !important; background: transparent !important; color: #4f46b5 !important; font-size: 14px; font-weight: 700; }
#loginBox .login-submit { width: 100%; min-height: 48px; margin: 0; border: 0; border-radius: 999px; background: #111827; color: #fff; font-size: 16px; font-weight: 900; box-shadow: 0 12px 24px rgba(17,24,39,.14); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
#loginBox .login-submit:hover { background: #6c3ff5; transform: translateY(-1px); box-shadow: 0 16px 30px rgba(108,63,245,.22); }
.login-version { margin-top: 28px; color: #94a3b8; font-size: 13px; text-align: center; }
#loginErr { color:#e94560; font-size:13px; margin-top:10px; display:none; text-align:center; }
@keyframes ccFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-18px,0); } }

/* 浅色主题 */
body.light { background: #f0f2f5; color: #222; }
body.light .panel { background: #fff; border-color: #c0c4cc; }
body.light h1 { color: #0a8d6d; }
body.light label { color: #444; font-weight: bold; }
body.light input, body.light button, body.light select { background: #fff; border-color: #c0c4cc; color: #222; }
body.light input:focus { border-color: #0a8d6d; }
body.light button { background: #0a8d6d; color: #fff; }
body.light #overviewProductType,
body.light .overview-refresh-btn,
body.light .detail-command-row > button,
body.light #detailNavigateBtn,
body.light .filter-btn { background: #f4f8fb !important; color: #0f766e !important; border: 1px solid #d9e5ec !important; box-shadow: none; }
body.light #overviewProductType:hover,
body.light .overview-refresh-btn:hover,
body.light .detail-command-row > button:hover,
body.light #detailNavigateBtn:hover,
body.light .filter-btn:hover { background: #ffffff !important; color: #0a8d6d !important; border-color: #c8d8e0 !important; box-shadow: 0 3px 8px rgba(15,23,42,.06); }
body.light .filter-btn.active { background: #dff8f3 !important; color: #087967 !important; border-color: #ace7db !important; }
body.light #detailNavigateBtn:disabled { background: #eef2f6 !important; color: #94a3b8 !important; border-color: #dde5ec !important; box-shadow: none; }
body.light .main-tab { background: #eef3f7; color: #5b6675; border-color: #d6dee6; box-shadow: none; }
body.light .main-tab:hover { background: #dfeaf0; color: #0f766e; border-color: #b8cbd4; }
body.light .main-tab.active { background: #00d4aa; color: #08251f; border-color: #00d4aa; box-shadow: 0 2px 8px rgba(0, 168, 132, .18); }
body.light button.danger { background: #e94560; }
body.light #log { background: #f8f9fa; border-color: #c0c4cc; color: #222; }
body.light #log .info { color: #0a6dd4; }
body.light #log .send { color: #7c3aed; }
body.light #log .recv { color: #0a8d6d; }
body.light #log .error { color: #e94560; }
body.light #log .data { color: #d97706; }
body.light .zone-panel { background: #f8f9fa; border-color: #b0b4bc; }
body.light .zone-group { border-color: #c0c4cc; }
body.light .zone-group-hdr { background: #e8eaed; color: #333; }
body.light .zone-group-hdr:hover { background: #dde0e4; }
body.light .zone-group:nth-child(odd) { background: #f8f9fa; }
body.light .zone-group:nth-child(even) { background: #f0f2f5; }
body.light .zone-items label { color: #333; }
body.light .zone-items label:hover { background: #d0d5dd; color: #111; }
body.light .zone-items label:has(input[type=checkbox]:checked) { background: #d0f0e4; border-left: 3px solid #0a8d6d; color: #111; }
body.light .zone-items label:hover .zone-addr { color: #0a8d6d; }
body.light .zone-addr { color: #666; }
body.light .zone-toolbar { color: #555; }
body.light .zone-toolbar a { color: #0a8d6d; }
body.light .zone-group-info { color: #555; }
body.light .form-hint { color: #555; }
body.light .progress-bar { background: #e8eaed; border-color: #c0c4cc; }
body.light .progress-info { color: #555; }
body.light .file-card { background: #e8eaed; border: 1px solid #c0c4cc; }
body.light #versionInfo { background: #fff; border-color: #c0c4cc; color: #444; }
body.light #status { color: #444; }
body.light #status .fail { color: #c00; }
body.light #snModel { color: #0a8d6d; }
body.light .overview-head,
body.light .overview-section,
body.light .metric-box,
body.light .tool-section { background: #fff; border-color: #c0c4cc; }
body.light .product-summary .overview-head { background: transparent; border-color: transparent; }
body.light .pastel-blue { background: #dff3ff; }
body.light .pastel-green { background: #e1f7e8; }
body.light .pastel-yellow { background: #fff2c9; }
body.light .pastel-peach { background: #ffe6dc; }
body.light .pastel-lavender { background: #eee7ff; }
body.light .module-title { color: #0a8d6d; }
body.light .module-subtitle,
body.light .section-note,
body.light .metric-label,
body.light .status-bars span,
body.light .overview-map-legend,
body.light .tool-result { color: #1f2937; background: rgba(255,255,255,.76); border-color: #cfd8e3; }
body.light .tool-divider { background: #d0d5dd; }
body.light .section-title2,
body.light .overview-table td { color: #333; }
body.light .tool-section .section-title2 { color: #333; }
body.light .overview-table-wrap,
body.light .overview-table th,
body.light .overview-table td { border-color: #d0d5dd; }
body.light .overview-table th { background: #e8eaed; color: #555; }
body.light .overview-table td.clickable-sn { color: #0f766e; }
body.light .overview-table td.clickable-sn:hover { background: #dff8f3; color: #087967; box-shadow: inset 0 0 0 1px #ace7db; }
body.light .metric-number { color: #111; }
body.light .overview-map-card { background: #f8f9fa; border-color: #c0c4cc; box-shadow: inset 0 0 0 1px rgba(15,52,96,.08); }
body.light .overview-map-card::before,
body.light .overview-map-card::after { display: none; }
body.light #overviewAmap { background: #f8f9fa; filter: none; }
body.light .province-stat-item { background: #f4f8fb !important; color: #64748b !important; border-color: #d9e5ec !important; box-shadow: none; }
body.light .province-stat-item:hover { background: #ffffff !important; color: #0f766e !important; border-color: #c8d8e0 !important; box-shadow: 0 3px 8px rgba(15,23,42,.06); }
body.light .mini-overview { background: #f0f2f5; border-color: #c0c4cc; }
body.light .metric-produced, body.light .metric-box.metric-produced { background: #eaf1ff; }
body.light .metric-installed, body.light .metric-box.metric-installed { background: #fff1c9; }
body.light .metric-online, body.light .metric-box.metric-online { background: #ddf8e8; }
body.light .metric-offline, body.light .metric-box.metric-offline { background: #f6f9fb; }
body.light .metric-fault, body.light .metric-box.metric-fault { background: #ffe6e4; }
/* Light theme popups */
body.light #versionInfo { background: #fff !important; border-color: #c0c4cc !important; color: #333 !important; }
body.light #versionInfo table { color: #333 !important; }
body.light #versionInfo td { border-color: #d0d5dd !important; }
body.light #versionInfo hr { border-color: #d0d5dd !important; }
body.light #versionInfo .about-us-line { border-top-color: #d0d5dd !important; color: #555 !important; }
body.light #versionInfo input { background: #f0f2f5 !important; border-color: #c0c4cc !important; color: #333 !important; }
body.light #versionAddForm { background: #f0f2f5 !important; border-color: #c0c4cc !important; }
body.light #userMgrOverlay > div { background: #fff !important; border-color: #c0c4cc !important; }
body.light #userMgrOverlay table { color: #333 !important; }
body.light #userMgrOverlay td { border-color: #d0d5dd !important; }
body.light #userMgrOverlay input, body.light #userMgrOverlay select { background: #fff !important; border-color: #c0c4cc !important; color: #333 !important; }
body.light #userMgrOverlay > div > div:first-of-type { border-color: #c0c4cc !important; }
body.light #userMgrOverlay > div > div:nth-of-type(2) { background: #f8f9fa !important; border-color: #d0d5dd !important; }
body.light #userMgrOverlay thead tr { background: #e8eaed !important; }
body.light #permEditor > div { background: #fff !important; border-color: #c0c4cc !important; color: #333 !important; }
body.light #permEditor label { color: #333 !important; }
body.light #mapOverlay > div { background: #fff !important; border-color: #c0c4cc !important; }
body.light #loginOverlay, body.light #loginBox, body.light .login-form-panel { background: #fff !important; }
body.light #sn { color: #111 !important; }
body.light b, body.light strong { color: #111; }
body.light .cmd-section-title { color: #444; border-bottom-color: #c0c4cc; }


/* ===== AI智诊云 v2.0 - 侧栏模块系统 ===== */
#appShell{display:flex;min-height:100vh;width:100%;overflow:hidden}
#sidebar{width:220px;min-width:220px;background:#0f1a2e;border-right:1px solid #0f3460;display:flex;flex-direction:column;transition:width .25s,min-width .25s;overflow:hidden;z-index:100;flex-shrink:0}
#sidebar.collapsed{width:60px;min-width:60px}
body.light #sidebar{background:#e8eaed;border-right-color:#c0c4cc}
.sidebar-header{display:flex;align-items:center;gap:10px;padding:14px 12px;border-bottom:1px solid #0f3460;min-height:56px}
.sidebar-header img{height:30px;width:30px;border-radius:6px;flex-shrink:0}
.sidebar-header .sidebar-title{color:#00d4aa;font-size:14px;font-weight:bold;white-space:nowrap;overflow:hidden}
#sidebar.collapsed .sidebar-title,#sidebar.collapsed .sidebar-item-label{display:none}
body.light .sidebar-header{border-bottom-color:#c0c4cc}
body.light .sidebar-header .sidebar-title{color:#0a8d6d}
.sidebar-menu{flex:1;overflow-y:auto;padding:6px 0}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;color:#888;text-decoration:none;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;border-left:3px solid transparent;font-size:14px;user-select:none}
.sidebar-item:hover{background:rgba(0,212,170,0.08);color:#ccc}
.sidebar-item.active{background:rgba(0,212,170,0.12);color:#00d4aa;border-left-color:#00d4aa}
body.light .sidebar-item{color:#555}
body.light .sidebar-item:hover{background:#d0d5dd;color:#333}
body.light .sidebar-item.active{background:rgba(10,141,109,0.1);color:#0a8d6d;border-left-color:#0a8d6d}
.sidebar-item-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.sidebar-footer{padding:8px;border-top:1px solid #0f3460;display:flex;justify-content:center}
body.light .sidebar-footer{border-top-color:#c0c4cc}
.sidebar-toggle-btn{cursor:pointer;color:#888;font-size:16px;padding:6px;transition:color .15s;user-select:none}
.sidebar-toggle-btn:hover{color:#00d4aa}
body.light .sidebar-toggle-btn:hover{color:#0a8d6d}
#mainArea{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#topBar{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;background:#16213e;border-bottom:1px solid #0f3460;min-height:48px;flex-shrink:0}
body.light #topBar{background:#fff;border-bottom-color:#c0c4cc}
body.light .top-header{background:#f0f2f5;border-bottom-color:#c0c4cc}
.topbar-left{display:flex;align-items:center;gap:8px}
.topbar-left .topbar-title{font-size:16px;font-weight:bold;color:#00d4aa;margin:0;display:flex;align-items:center}
.topbar-left .topbar-title img{height:26px;margin-right:6px}
body.light .topbar-left .topbar-title{color:#0a8d6d}
.hamburger-btn{cursor:pointer;color:#888;font-size:20px;padding:0 4px;transition:color .15s;user-select:none}
.hamburger-btn:hover{color:#00d4aa}
.topbar-right{display:flex;align-items:center;gap:8px}
#moduleContent{flex:1;overflow-y:auto;padding:12px;position:relative}
.module-page{display:none}
.module-page.active{display:block}
.module-page-header{font-size:18px;font-weight:bold;color:#00d4aa;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #0f3460}
body.light .module-page-header{border-bottom-color:#c0c4cc;color:#0a8d6d}
.module-subnav{display:flex;gap:0;margin-bottom:10px;border-bottom:1px solid #0f3460;overflow-x:auto}
body.light .module-subnav{border-bottom-color:#c0c4cc}
.module-subnav-item{padding:7px 14px;font-size:13px;color:#888;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;user-select:none}
.module-subnav-item:hover{color:#ccc}
.module-subnav-item.active{color:#00d4aa;border-bottom-color:#00d4aa}
body.light .module-subnav-item{color:#555}
body.light .module-subnav-item:hover{color:#333}
body.light .module-subnav-item.active{color:#0a8d6d;border-bottom-color:#0a8d6d}
.module-subpage{display:none}
.module-subpage.active{display:block}
.dev-placeholder{text-align:center;padding:40px 20px;color:#888}
.dev-placeholder .dev-icon{font-size:44px;margin-bottom:12px}
.dev-placeholder .dev-title{font-size:15px;margin-bottom:4px}
.dev-placeholder .dev-hint{font-size:12px;color:#666}
#logPanel{border-top:1px solid #0f3460;background:#16213e;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;max-height:260px}
body.light #logPanel{background:#fff;border-top-color:#c0c4cc}
#logPanel.collapsed{max-height:34px}
.log-panel-header{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;cursor:pointer;user-select:none;background:rgba(0,0,0,0.15);flex-shrink:0}
.log-panel-header span:first-child{font-size:12px;font-weight:bold;color:#888}
.log-panel-toggle{font-size:11px;color:#666}
.log-panel-body{flex:1;overflow:hidden;padding:6px 12px;display:flex;flex-direction:column}
#logPanel.collapsed .log-panel-body{display:none}
#logPanel #log{height:130px;font-size:13px}
#logPanel .log-actions{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;align-items:center}
.conn-badge{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:bold}
.conn-badge.ok{background:rgba(63,185,80,0.15);color:#3fb950}
.conn-badge.fail{background:rgba(233,69,96,0.15);color:#e94560}
body.light .conn-badge.ok{background:#d0f0d4}
body.light .conn-badge.fail{background:#fdd}
/* ---- Topology Management ---- */
.topo-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.topo-sn-input{flex:1;min-width:180px}
.topo-btn{padding:8px 16px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;transition:opacity 0.2s}
.topo-btn:disabled{opacity:0.4;cursor:not-allowed}
.topo-btn-primary{background:#0f3460;color:#00d4aa;border-color:#00d4aa}
.topo-btn-primary:hover{background:#1a4a7a}
.topo-btn-add{background:#0d3320;color:#3fb950;border-color:#3fb950}
.topo-btn-add:hover{background:#164a30}
.topo-btn-del{background:#3a1a1a;color:#ff6b6b;border-color:#ff6b6b}
.topo-btn-del:hover{background:#552525}
.topo-btn-danger{background:#4a1a1a;color:#ff4444;border-color:#ff4444}
.topo-btn-danger:hover{background:#662525}
.topo-summary{padding:10px 16px;border-radius:8px;background:rgba(15,52,96,0.3);margin-bottom:12px}
.topo-table{min-width:1080px;table-layout:fixed;width:100%}
.topo-table th,.topo-table td{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 10px}
.topo-table th:nth-child(1),.topo-table td:nth-child(1){width:40px}
.topo-table th:nth-child(2),.topo-table td:nth-child(2){width:80px}
.topo-table th:nth-child(3),.topo-table td:nth-child(3){width:120px;white-space:normal;overflow:visible;text-overflow:clip}
.topo-table th:nth-child(4),.topo-table td:nth-child(4){width:140px;white-space:normal;overflow:visible;text-overflow:clip}
.topo-table th:nth-child(5),.topo-table td:nth-child(5){width:100px}
.topo-table th:nth-child(6),.topo-table td:nth-child(6){width:80px}
.topo-table th:nth-child(7),.topo-table td:nth-child(7){width:90px}
.topo-table th:nth-child(8),.topo-table td:nth-child(8){width:220px;white-space:normal;overflow:visible;text-overflow:clip}
.topo-table th:nth-child(9),.topo-table td:nth-child(9){width:130px}
.topo-table th:nth-child(10),.topo-table td:nth-child(10){width:80px}
.topo-chk-col{width:44px;text-align:center}
.topo-chk{width:16px;height:16px;cursor:pointer;accent-color:#00d4aa}
.topo-status{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.topo-online{background:rgba(63,185,80,0.2);color:#3fb950}
.topo-offline{background:rgba(225,228,232,0.15);color:#8b949e}
.topo-row-del-btn{background:transparent;color:#ff6b6b;border:1px solid #ff6b6b;border-radius:4px;padding:2px 10px;cursor:pointer;font-size:12px}
.topo-row-del-btn:hover{background:rgba(255,107,107,0.15)}
.topo-tabs{display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid #0f3460}
.topo-tab{padding:10px 24px;background:transparent;color:#888;border:0;cursor:pointer;font-size:14px;border-bottom:2px solid transparent;transition:all 0.2s}
.topo-tab.active{color:#00d4aa;border-bottom-color:#00d4aa}
.topo-tab:hover{color:#ccc}
.topo-add-panel{padding:4px 0}
.topo-select{width:100%;padding:8px 12px;border-radius:6px;background:#0d1117;color:#ccc;border:1px solid #30363d;font-size:14px}
.topo-input{width:100%;padding:8px 12px;border-radius:6px;background:#0d1117;color:#ccc;border:1px solid #30363d;font-size:14px;box-sizing:border-box}
.topo-submit-btn{width:100%;padding:10px;margin-top:16px;border-radius:6px;background:#0f3460;color:#00d4aa;border:1px solid #00d4aa;cursor:pointer;font-size:14px;font-weight:600}
.topo-submit-btn:hover{background:#1a4a7a}
.topo-add-status{margin-top:12px;padding:10px;border-radius:6px;background:rgba(15,52,96,0.2);font-size:13px}

/* ---- Debug 0x18/0x19 ---- */
.pastel-purple{background:rgba(139,92,246,0.06);border-color:rgba(139,92,246,0.2)}
.debug-sn-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.debug-sn-input{flex:1;min-width:160px}
.debug-row{display:flex;gap:16px;flex-wrap:wrap}
.debug-field{display:flex;flex-direction:column;gap:4px;min-width:160px}
.debug-val-field{flex:1}
.debug-field label{color:#8b949e;font-size:12px}
.debug-val-row{display:flex;gap:8px}
.debug-val-row .tool-input{flex:1}
.debug-select{padding:8px 12px;border-radius:6px;background:#0d1117;color:#ccc;border:1px solid #30363d;font-size:13px}
.debug-result{margin-top:16px;padding:16px;border-radius:8px;background:#0d1117;border:1px solid #30363d;max-height:400px;overflow-y:auto}
.debug-result pre{color:#00d4aa;font-family:Consolas,monospace;font-size:12px;line-height:1.5}

@media(max-width:900px){
#sidebar:not(.force-open){width:60px;min-width:60px}
#sidebar:not(.force-open) .sidebar-title,#sidebar:not(.force-open) .sidebar-item-label{display:none}
#moduleContent{padding:8px}
}