/* 途强控制面板 - 左侧 */
.tq-panel {
  position: fixed; top: 60px; left: 10px; z-index: 1000;
  background: rgba(26,26,46,.94); color: #e0e0e0;
  border-radius: 8px; width: 340px; max-height: calc(100vh - 80px);
  box-shadow: 0 4px 20px rgba(0,0,0,.5); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; font-size: 13px;
  overflow: hidden;
}
.tq-panel.collapsed .tq-body { display: none; }
.tq-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: rgba(83,52,131,.5);
  cursor: pointer; user-select: none;
}
.tq-header h3 { margin: 0; font-size: 14px; }
.tq-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e57373; display: inline-block; margin-right: 6px;
}
.tq-body { padding: 0; overflow-y: auto; max-height: calc(100vh - 120px); }

/* 连接控制 */
.tq-connect {
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.tq-connect .row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.tq-connect label { font-size: 12px; color: #aaa; }
.tq-connect input[type="number"] {
  width: 60px; padding: 4px 6px;
  background: #16213e; border: 1px solid #1a3a5c; border-radius: 4px;
  color: #e0e0e0; font-size: 12px; outline: none; text-align: center;
}
.tq-btn {
  padding: 5px 14px; border: none; border-radius: 4px;
  cursor: pointer; font-size: 12px; font-weight: 600; color: #fff;
  transition: .15s;
}
.tq-btn-start { background: #533483; }
.tq-btn-start:hover { background: #6b44a0; }
.tq-btn-start.active { background: #c62828; }
.tq-btn-refresh { background: #0f3460; }
.tq-btn-refresh:hover { background: #1a4a7a; }

/* 标签页 */
.tq-tabs {
  display: flex; border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(15,52,96,.3);
}
.tq-tab {
  flex: 1; padding: 8px 0; text-align: center; cursor: pointer;
  font-size: 12px; color: #aaa; transition: .15s; border-bottom: 2px solid transparent;
}
.tq-tab:hover { color: #e0e0e0; background: rgba(79,195,247,.05); }
.tq-tab.active { color: #ce93d8; border-bottom-color: #ce93d8; }
.tq-tab-content { display: none; padding: 10px 14px; }
.tq-tab-content.active { display: block; }

/* 设备列表 */
.tq-device-list { max-height: 200px; overflow-y: auto; }
.tq-device-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px; cursor: pointer; transition: .15s;
}
.tq-device-item:hover { background: rgba(206,147,216,.1); }
.tq-device-dot {
  width: 10px; height: 10px; flex-shrink: 0;
  transform: rotate(45deg);
}
.tq-device-dot-inner {
  width: 100%; height: 100%;
}
.tq-device-imei { font-family: monospace; font-weight: 600; font-size: 12px; }
.tq-device-info { color: #aaa; font-size: 11px; margin-left: auto; }

/* 轨迹面板 */
.tq-track-form label { display: block; margin-top: 8px; font-size: 12px; color: #aaa; }
.tq-track-form input[type="text"],
.tq-track-form input[type="datetime-local"] {
  width: 100%; padding: 5px 8px; margin-top: 2px;
  background: #16213e; border: 1px solid #1a3a5c; border-radius: 4px;
  color: #e0e0e0; font-size: 12px; outline: none;
}
.tq-track-form input:focus { border-color: #ce93d8; }
.tq-track-btns { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tq-track-info { margin-top: 8px; font-size: 11px; color: #aaa; }

/* 播放控制 */
.tq-playback { margin-top: 8px; display: none; }
.tq-playback.visible { display: block; }
.tq-playback .row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tq-playback label { font-size: 11px; color: #aaa; }
.tq-speed-slider {
  flex: 1; accent-color: #ce93d8;
}
.tq-playback-progress {
  width: 100%; height: 4px; background: #1a3a5c; border-radius: 2px;
  margin-top: 6px; overflow: hidden;
}
.tq-playback-bar {
  height: 100%; background: #ce93d8; width: 0%; transition: width .3s;
}

/* 告警列表 */
.tq-alarm-list { max-height: 250px; overflow-y: auto; margin-top: 8px; }
.tq-alarm-item {
  padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 12px; line-height: 1.5;
}
.tq-alarm-type { color: #e57373; font-weight: 600; }
.tq-alarm-time { color: #888; font-size: 11px; }

/* 围栏面板 */
.tq-fence-list { max-height: 150px; overflow-y: auto; margin-top: 8px; }
.tq-fence-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 12px;
}
.tq-fence-name { font-weight: 600; }
.tq-fence-del {
  background: none; border: 1px solid #e57373; color: #e57373;
  border-radius: 3px; padding: 2px 8px; cursor: pointer; font-size: 11px;
}
.tq-fence-del:hover { background: #e57373; color: #fff; }

.tq-fence-form { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }
.tq-fence-form label { display: block; margin-top: 6px; font-size: 12px; color: #aaa; }
.tq-fence-form input[type="text"],
.tq-fence-form input[type="number"] {
  width: 100%; padding: 4px 8px; margin-top: 2px;
  background: #16213e; border: 1px solid #1a3a5c; border-radius: 4px;
  color: #e0e0e0; font-size: 12px; outline: none;
}
.tq-fence-form input:focus { border-color: #ce93d8; }
.tq-fence-hint { font-size: 11px; color: #666; margin-top: 4px; }

/* 空状态 */
.tq-empty { color: #666; font-size: 12px; padding: 8px 0; text-align: center; }

/* 控制面板按钮网格 */
.tq-ctrl-grid {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.tq-ctrl-btn {
  padding: 5px 10px; border: 1px solid #1a3a5c; border-radius: 4px;
  background: #16213e; color: #e0e0e0; font-size: 11px;
  cursor: pointer; transition: .15s;
}
.tq-ctrl-btn:hover { background: #1a4a7a; border-color: #4fc3f7; }
.tq-ctrl-btn.tq-ctrl-on { border-color: #2e7d32; color: #81c784; }
.tq-ctrl-btn.tq-ctrl-on:hover { background: #1b5e20; }
.tq-ctrl-btn.tq-ctrl-off { border-color: #c62828; color: #e57373; }
.tq-ctrl-btn.tq-ctrl-off:hover { background: #b71c1c; }

/* 途强 TTS */
.tq-tts-section {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* 菱形标记 */
.tq-marker { background: none !important; border: none !important; }