body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 姘村钩灞呬腑 */
  align-items: center;
  min-height: 100vh;
  padding-top: env(safe-area-inset-top, 20px);
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  overflow-y: auto;
  background: none;
  /* 绉婚櫎 body 鐨勮儗鏅浘 */
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/back.jpg') no-repeat center center;
  background-size: cover;
  z-index: -1;
  /* 宸茬粡璁剧疆锛屼絾纭鐢熸晥 */
}

/* 鏂版坊鍔狅細濯掍綋鏌ヨ閽堝鎵嬫満(绐勫睆鈮?68px)锛岃鐩栬儗鏅负鎵嬫満浼樺寲鍥撅紝闃叉鎷変几/妯＄硦 */
@media screen and (max-width: 768px) {

  /* 鏂版坊鍔狅細鏌ヨ璧风偣锛?68px涓哄父瑙佹墜鏈?PC鍒嗙晫锛屽彲璋冩暣 */
  body::before {
    /* 鏂版坊鍔狅細閽堝::before瑕嗙洊 */
    background: url('/mobileback.jpg') no-repeat center center;
    /* 鏂版坊鍔狅細鎵嬫満涓撶敤鑳屾櫙锛屽缓璁敤浣庡垎杈ㄧ巼/绔栫増鍥?*/
    background-size: cover;
    /* 鏂版坊鍔狅細淇濇寔cover锛屼絾鍙敼contain鑻ラ渶瀹屾暣鏄剧ず */
  }
}

/* 公共卡片样式：数据总览等盒子统一在这里调 */
.common-summary-box {
  width: 100%;
  box-sizing: border-box;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, #fcfdff 0%, #f7f9fc 100%);
  border: 1px solid #e3e8f1;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(34, 54, 84, 0.08);
  margin: 7px 0 0;
}

.common-summary-box-content {
  padding: 8px 10px;
  margin: 0;
  background: transparent;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.common-section-title-box {
  border: 0;
  border-bottom: 2px solid #388e3c;
  border-radius: 0;
  margin: 7px 10px 0;
  padding: 0;
  box-sizing: border-box;
}

.common-section-title-box>legend {
  float: none;
  display: block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #2196f3;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  box-sizing: border-box;
}

/* 通用框体与标题：用于统一推送/高级功能/备份/Docker/日志等模块外观 */
.common-box-frame {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 15px 15px !important;
  margin-top: 5px !important;
  border: 1px solid #ccc !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}

.common-box-title {
  display: block !important;
  width: 100% !important;
  margin: 0 0 15px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #2196f3 !important;
  line-height: 2 !important;
  border-bottom: 2px solid #388e3c !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  box-sizing: border-box !important;
}

/* 寮€鍏冲拰浠ヤ笅鎵€鏈夊厓绱犲妗?*/
.container {
  display: none;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 600px;
  background: transparent;
  padding: 20px 10px;
  border-radius: 15px;
  box-shadow: none;
  margin: 0 0 10px 0;
  position: relative;
  padding-top: 0px;
  border: none;
  backdrop-filter: none;
}

.password-container {
  display: flex;
  /* 榛樿鏄剧ず */
  flex-direction: column;
  gap: 15px;
  width: 90%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.5);
  /* 鎻愰珮閫忔槑搴︿互纭繚鍙 */
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin: 0vh auto 10px;
  /* 浠庨《閮ㄧ暀鍑虹┖闂?*/
  align-items: center;
  text-align: center;
  z-index: 9999;
  position: relative;
}

.confirm-btn {
  padding: 8px 16px;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.confirm-btn:hover {
  opacity: 0.9;
}

.confirm-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 鍙寘鍚紑鍏崇殑澶栧眰鐩掑瓙 */
.switch-box {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 5px;
}

.switch-item {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.switch-item .label {
  font-size: 0.8rem;
  color: #333;
  margin-bottom: 5px;
  white-space: normal;
  /* 鍏佽鎹㈣ */
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.toggle-switch {
  position: relative;
  width: 44px;
  /* 55px * 0.8 */
  height: 25.6px;
  /* 32px * 0.8 */
  border-radius: 26.4px;
  /* 33px * 0.8 */
  background-color: #ccc;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-switch::before {
  content: '';
  position: absolute;
  top: 1.6px;
  /* 2px * 0.8 */
  left: 1.6px;
  /* 2px * 0.8 */
  width: 22.4px;
  /* 28px * 0.8 */
  height: 22.4px;
  /* 28px * 0.8 */
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.toggle-switch.on {
  background-color: #34c759;
}

.toggle-switch.on::before {
  transform: translateX(17.6px);
  /* 22px * 0.8 */
}

.material-checkbox {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  user-select: none;
}

.material-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark {
  position: relative;
  display: inline-block;
  width: 16px;
  /* 鍘?20px * 0.8 */
  height: 16px;
  /* 鍘?20px * 0.8 */
  margin-right: 5px;
  /* 鍘?1px锛屽彲鏀逛负 0.8px */
  border: 1.6px solid #454B00;
  /* 鍘?2px * 0.8 */
  border-radius: 4px;
  transition: all 0.3s;
}

.material-checkbox input[type="checkbox"]:checked~.checkmark {
  background-color: #2F3300;
}

.material-checkbox input[type="checkbox"]:checked~.checkmark:after {
  content: "";
  position: absolute;
  top: 1.6px;
  /* 鍘?2px * 0.8 */
  left: 4.8px;
  /* 鍘?6px * 0.8 */
  width: 3.2px;
  /* 鍘?4px * 0.8 */
  height: 8px;
  /* 鍘?10px * 0.8 */
  border: solid white;
  border-width: 0 1.6px 1.6px 0;
  /* 鍘?2px * 0.8 */
  transform: rotate(45deg);
}

.material-checkbox input[type="checkbox"]:focus~.checkmark {
  box-shadow: 0 0 0 2px #dfec5065;
}

.material-checkbox:hover input[type="checkbox"]:not(:checked)~.checkmark {
  border-color: #C3CF34;
}

.material-checkbox input[type="checkbox"]:disabled~.checkmark {
  opacity: 0.5;
  cursor: not-allowed;
}

.material-checkbox input[type="checkbox"]:disabled:hover~.checkmark {
  border-color: #4d4d4d;
}

/* ... 鍏朵粬鏍峰紡淇濇寔涓嶅彉 ... */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 5px;
  justify-content: center;
}

.action-buttons button {
  padding: 10px 20px;
  font-size: 0.8rem;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  flex: 0 0 calc(50% - 15px);
}

.action-buttons button:hover {
  background-color: #0056d2;
}

.valueDisplay {
  font-size: 0.8rem;
  margin-bottom: 0px;
}

#error-message {
  color: red;
  display: none;
}

#toast {
  position: fixed;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

#toast.show {
  bottom: 20px;
}

/* 鐘舵€佸拰鍦板浘涓诲妗?*/
.message-frame {
  width: 100%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  padding: 0px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  /* 姘村钩灞呬腑骞舵坊鍔犱笂涓嬮棿璺?*/
  overflow: visible;
  /* 纭繚瀛愬厓绱犲彲浠ユ孩鍑?*/
  background: transparent;
  /* 瀹屽叏閫忔槑鑳屾櫙 */
  backdrop-filter: none;
  /* 绉婚櫎妯＄硦鏁堟灉 */
  box-shadow: none;
  /* 绉婚櫎闃村奖锛堝鏋滈渶瑕佸畬鍏ㄩ€忔槑锛?*/
  border: none;
  /* 濡傛灉鏈夎竟妗嗕篃绉婚櫎 */
}

/* 鐢垫睜鍜岄┚椹舵暟鎹富澶栨 */
#message-frame-2 {
  width: 100%;
  max-width: 600px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 15px 0;
  /* Updated: Increased to match container gap */
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

.message-content {
  font-size: 0.9rem;
  color: #333;
  white-space: pre-wrap;
  line-height: 1;
  text-align: center;
}

#message-content-2 {
  font-size: 0.9rem;
  color: #333;
  white-space: pre-wrap;
  line-height: 2;
  text-align: center;
}

.gps-map-container {
  position: relative;
  width: 100%;
  padding: 0;
}

#map-container {
  width: 100%;
  height: 200px;
  /* 榛樿楂樺害鏀逛负 200px锛屼笌浣犵殑瀹為檯闇€姹備竴鑷?*/
  border: 1px solid #fff;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
}

#map-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh !important;
  /* 鎻愰珮浼樺厛绾?*/
  z-index: 1000;
  border-radius: 0;
}

/* --- 鍦板浘鎸夐挳鏍峰紡 (甯︽枃瀛楃増) --- */

/* 1. 鍩虹瀹瑰櫒璁剧疆 (鍙栨秷鍥哄畾瀹介珮锛屾敼涓鸿嚜閫傚簲) */
.btn,
.fullscreen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  /* 瀹藉害鑷€傚簲鍐呭 */
  height: auto;
  /* 楂樺害鑷€傚簲鍐呭 */
  min-width: 44px;
  /* 璁剧疆鏈€灏忓搴︼紝淇濊瘉鐐瑰嚮鍖哄煙 */
  padding: 4px 6px;
  /* 鍐呰竟璺?*/
  background: #ffffff;
  color: #333333;
  border: none;
  border-radius: 8px;
  /* 鍦嗚绋嶅井鍔犲ぇ涓€鐐?*/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1001;
}

/* 2. 涓婃柟涓変釜鎸夐挳锛氬瀭鐩存帓鍒?(鍥炬爣鍦ㄤ笂锛屾枃瀛楀湪涓? */
.btn-vertical {
  flex-direction: column;
  /* 鍏抽敭锛氬瀭鐩村竷灞€ */
  gap: 1px;
  /* 鍥炬爣鍜屾枃瀛楃殑闂磋窛 */
}

/* 3. 鍏ㄥ睆鎸夐挳锛氭按骞虫帓鍒?(鍥炬爣鍦ㄥ乏锛屾枃瀛楀湪鍙? */
.btn-horizontal {
  flex-direction: row;
  /* 鍏抽敭锛氭按骞冲竷灞€ */
  gap: 6px;
  /* 闂磋窛绋嶅ぇ */
  padding: 6px 12px;
  /* 鏁翠綋澶т竴鐐?*/
}

/* 4. SVG 鍥炬爣灏哄 */
.btn svg,
.fullscreen-btn svg {
  width: 24px;
  /* 鍥炬爣绋嶅井璋冨ぇ锛屾洿娓呮櫚 */
  height: 24px;
  display: block;
  /* 娑堥櫎搴曢儴鐣欑櫧 */
}

/* 5. 鏂囧瓧鏍峰紡 */
.btn-text {
  font-size: 10px;
  /* 灏忓瓧 */
  font-weight: 600;
  /* 绋嶅井鍔犵矖 */
  color: #555;
  /* 娣辩伆鑹诧紝姣旂函榛戞煍鍜?*/
  line-height: 1;
  white-space: nowrap;
  /* 闃叉鏂囧瓧鎹㈣ */
}

/* 6. 鎮仠鍜屾縺娲荤姸鎬?*/
.btn:hover,
.fullscreen-btn:hover {
  background-color: #f7f7f7;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn.active-btn {
  background: #f0f8ff;
  /* 婵€娲绘椂鑳屾櫙寰摑 */
}

.btn.active-btn .btn-text {
  color: #007aff;
  /* 婵€娲绘椂鏂囧瓧鍙樿摑 */
}

/* 7. 瀹氫綅淇濇寔 */
.btn {
  position: absolute;
  top: 10px;
  left: 10px;
}

.fullscreen-btn {
  position: absolute;
  bottom: 10%;
  left: auto;
  right: 10px;
  transform: none;
}

#fullscreen-btn {
  min-width: 40px;
  padding: 5px 10px;
}

#fullscreen-btn svg {
  width: 22px;
  height: 22px;
}


.battery-bar {
  position: relative;
  width: 100%;
  height: 20px;
  background: #e0e0e0;
  border-radius: 20px;
  overflow: hidden;
  margin: 0px 0;
}

.battery-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* 妯℃嫙浠庡悗绔紶鏉ョ殑鍐呰仈鏍峰紡锛氳儗鏅拰瀹藉害 */
  transition: width 0.4s ease;
  z-index: 1;
}

.battery-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: white;
  z-index: 2;
}

.btn-left.active-btn {
  background: #ff4444;
  /* 鐐瑰嚮鍚庡彉涓虹孩鑹?*/
}


/* 涓婁紶妗?*/
#upload-frame {
  width: 100%;
  /* 涓庡叾浠?.message-frame 涓€鑷?*/
  max-width: 600px;
  /* 涓庡叾浠?.message-frame 涓€鑷?*/
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 0px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
}

#upload-content {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 姘村钩灞呬腑 */
  gap: 10px;
  width: 100%;
  /* 鎾戞弧鐖跺鍣?*/
}

#upload-btn {
  padding: 7px 20px;
  background: #007aff;
  font-size: 0.8rem;
  color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.3s;
}

#upload-btn:hover {
  opacity: 0.9;
}

#upload-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

#preview {
  margin-top: 10px;
  max-width: 300px;
}


/* 鐢垫睜鍜岄┚椹舵暟鎹?*/
.section {
  margin-bottom: 10px;
}

.card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 10px;
  margin: 10px auto;
  border: 1px solid #e0e0e0;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.data-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  border-bottom: 1px solid #e5e7eb;
  line-height: 1.5;
  /* 鍑忓皬琛岄珮 */
}

.data-item:last-child {
  border-bottom: none;
}

.data-label {
  font-weight: 600;
  color: #1f2937;
}

.data-value {
  color: #4b5563;
}

.sub-item {
  padding: 2px 0 2px 10px;
  color: #6b7280;
  font-size: 0.95em;
  line-height: 1.2;
  /* 鍑忓皬琛岄珮 */
  text-align: left;
}

@media (max-width: 600px) {
  .card {
    padding: 5px;
  }

  .data-item {
    flex-direction: row;
    /* 淇濇寔妯悜鎺掑垪锛堥粯璁ゅ€硷級 */
    align-items: left;
    /* 鍨傜洿灞呬腑 */
    gap: 5px;
    /* 璋冩暣闂磋窛 */
    overflow: hidden;
    /* 闃叉鍐呭婧㈠嚭 */
    padding: 5px 10px;
  }

  .data-value {
    white-space: nowrap;
    /* 绂佹鏂囨湰鎹㈣ */
    text-overflow: ellipsis;
    /* 瓒呭嚭鏄剧ず鐪佺暐鍙?*/
    overflow: hidden;
    /* 闅愯棌婧㈠嚭鍐呭 */
  }

  .data-label {
    padding-left: 0px;
  }

  .data-value {
    flex: 1;
    /* 鍊奸儴鍒嗚嚜鍔ㄥ～鍏呭墿浣欑┖闂?*/
    text-align: right;
    /* 鏁板€煎彸瀵归綈 */
  }
}

/* 绠€鍖栫増鍗曢€夋寜閽?- 鍙繚鐣欏熀鏈牱寮?*/
.radio-inputs {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: 5px;
  background: #f0f0f0;
  padding: 0.5rem;
  width: 90%;
  font-size: 0.8rem;
  gap: 0.5rem;
}

.radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 6px;
  color: #2d3748;
  font-weight: 500;
  font-family: inherit;
  background: #ffffff;
  transition: background 0.2s ease;
}

.radio-inputs .radio input:checked+.name {
  background: #ff8c00;
  /* 绾壊鑳屾櫙鏇夸唬娓愬彉 */
  color: white;
  font-weight: 600;
}

/* 鍙繚鐣欏熀鏈殑鎮仠鏁堟灉 */
.radio-inputs .radio:hover .name {
  background: #f0f0f0;
}

/* 寰俊4涓唴妗嗘爣棰?*/
.custom-title {
  text-align: center;
  font-size: 1rem;
  padding: 0px;
}

/* From Uiverse.io by Nawsome */
.pl {
  width: 6em;
  height: 6em;
}

.pl__ring {
  animation: ringA 2s linear infinite;
}

.pl__ring--a {
  stroke: #f42f25;
}

.pl__ring--b {
  animation-name: ringB;
  stroke: #f49725;
}

.pl__ring--c {
  animation-name: ringC;
  stroke: #255ff4;
}

.pl__ring--d {
  animation-name: ringD;
  stroke: #f42582;
}

/* Animations */
@keyframes ringA {

  from,
  4% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }

  12% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -335;
  }

  32% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -595;
  }

  40%,
  54% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -660;
  }

  62% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -665;
  }

  82% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -925;
  }

  90%,
  to {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -990;
  }
}

@keyframes ringB {

  from,
  12% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -110;
  }

  20% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -115;
  }

  40% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -195;
  }

  48%,
  62% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  70% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  90% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -305;
  }

  98%,
  to {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
}

@keyframes ringC {
  from {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  8% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  28% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  36%,
  58% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  66% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  86% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  94%,
  to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

@keyframes ringD {

  from,
  8% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  16% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  36% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  44%,
  50% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  58% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  78% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  86%,
  to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

/* 灞呬腑鍔犺浇鍔ㄧ敾瀹瑰櫒锛屼粎鏄剧ず鍔ㄧ敾鍜?body::before 鑳屾櫙鍥?*/
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  /* 閫忔槑鑳屾櫙锛屼緷璧?body::before 鐨勮儗鏅浘 */
  z-index: 10001;
  /* 楂?z-index锛岃鐩栨墍鏈夊厓绱?*/
  visibility: hidden;
  /* 榛樿闅愯棌 */
}

.loading-overlay.show {
  visibility: visible;
  /* 鏄剧ず鍔犺浇鍔ㄧ敾 */
}

/* 褰撳姞杞藉姩鐢绘樉绀烘椂锛屾彁楂?body::before 鐨?z-index */
.loading-overlay.show~body::before {
  z-index: 10000;
  /* 鎻愰珮鍒颁粎娆′簬鍔犺浇鍔ㄧ敾锛岀‘淇濊鐩栧叾浠栧厓绱?*/
}

/* =========================================
   绉戞妧鎰熻溅杈嗙姸鎬侀潰鏉?(Final Consolidated)
   ========================================= */

/* --- 1. 鍩虹瀹瑰櫒 --- */
#tech-status-container {
  padding: 5px 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
  border-bottom: 1px solid #eee;
  margin-bottom: 0px;
  background: transparent;
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --- 2. 澶撮儴鍖哄煙 (鍚嶇О/鐘舵€? --- */
.tech-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.tech-car-info {
  display: flex;
  flex-direction: column;
}

.tech-car-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1d1d1f;
}

.tech-car-detail {
  font-size: 0.75rem;
  margin-top: 4px;
  font-weight: 500;
  border-radius: 4px;
  align-self: flex-start;
}

/* 鐘舵€佸窘绔?*/
.tech-state-badge {
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 20px;
  background: #f5f5f7;
  color: #86868b;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* 鐘舵€侀鑹?*/
.tech-state-badge.online {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.tech-state-badge.sleeping {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #bbdefb;
}

.tech-state-badge.driving {
  background: #fff3e0;
  color: #ef6c00;
  border: 1px solid #ffe0b2;
}

/* 鍛煎惛鐏姩鐢?*/
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.animate-pulse {
  animation: tech-pulse 1.5s infinite;
}

@keyframes tech-pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- 3. 鏍稿績鏁版嵁鍖?(宸﹀彸鍒嗘爮甯冨眬) --- */
.tech-main-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 宸﹀彸鍚?0% */
  gap: 0;
  align-items: center;
  padding: 0px 10px;
  /* 绱у噾鍐呰竟璺?*/
  margin-bottom: 0px;
  min-height: 80px;
}

/* 宸︿晶锛氬渾鐜?+ 閲岀▼ */
.tech-stats-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* SVG 鍦嗙幆瀹瑰櫒 (60px) */
.battery-ring-container {
  position: relative;
  width: 60px;
  height: 60px;
}

.battery-ring-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.battery-circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 4;
}

.battery-circle-progress {
  fill: none;
  stroke: #4CAF50;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  transition: stroke-dashoffset 1s ease-in-out, stroke 0.3s;
}

.battery-text-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  font-weight: 800;
  color: #1d1d1f;
}

.battery-sub-text {
  font-size: 0.6rem;
  font-weight: normal;
  color: #86868b;
  margin-left: 1px;
}

/* 閲岀▼鏂囧瓧缁?(闈犲彸瀵归綈) */
.tech-range-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  /* 寮哄埗闈犲彸 */
  text-align: right;
}

.tech-range-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1d1d1f;
  line-height: 1;
  letter-spacing: -0.5px;
}

.tech-odometer {
  font-size: 0.8rem;
  color: #888;
  margin-top: 3px;
  font-family: Courier New;
}

/* 鍙充晶锛氫俊鎭垪琛?*/
.tech-stats-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 56px;
  /* 鍖归厤宸︿晶瑙嗚楂樺害 */
  padding-left: 20px;
  border-left: 1px solid #e0e0e0;
  /* 鍒嗗壊绾?*/
  font-size: 0.7rem;
  color: #666;
  line-height: 1.2;
}

.tech-info-row {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 4. 缃戞牸鍗＄墖鍖?(寮哄埗绛夊) --- */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 寮哄埗涓ゅ垪绛夊 */
  gap: 12px;
}

/* 閫氱敤鍗＄墖瀹瑰櫒 */
.tech-card-item {
  background: #fbfbfd;
  padding: 12px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  min-height: 72px;
  /* 淇濊瘉涓€鑷撮珮搴?*/
  height: 100%;
}

/* 鍥炬爣 */
.tech-icon {
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  border: 1px solid #f0f0f0;
}

/* 鍙充晶鏁版嵁鍒?(鍨傜洿灞呬腑) */
.tech-data-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  overflow: hidden;
}

/* 鍙充晶鏁版嵁瀹瑰櫒 (鐢ㄤ簬澶嶆潅甯冨眬) */
.tech-data-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 4px;
  /* 琛岄棿璺?*/
}

/* --- 5. 鏂囨湰涓庣姸鎬佹牱寮?--- */
.tech-label {
  font-size: 0.65rem;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.tech-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1d1d1f;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 鐘舵€侀鑹?*/
.tech-value.alert {
  color: #F44336;
}

/* 绾?*/
.tech-value.safe {
  color: #4CAF50;
}

/* 缁?*/
.tech-value.warn {
  color: #FF9800;
}

/* 姗?*/

.tech-value-mono {
  font-family: monospace;
  font-size: 0.8rem;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

/* 鑳庡帇鏁板€间笓鐢?*/
.tech-tpms-val {
  font-size: 0.9rem !important;
  font-weight: bold;
}

.tech-unit-text {
  font-size: 0.6rem;
  color: #999;
  font-weight: normal;
  margin-left: 2px;
}

/* --- 6. 绱у噾琛屽竷灞€ (杞﹂棬/澶栭儴鎺ュ彛/鑳庡帇) --- */
.tech-compact-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding: 1px 0;
}

/* 灏忔暟鎹潡 (鏍囩+鏁板€?妯悜鎺掑垪) */
.tech-mini-block {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.tech-mini-block .tech-label {
  margin-bottom: 0;
  opacity: 0.8;
  font-size: 0.65rem;
}

.tech-mini-block .tech-value {
  font-size: 0.8rem;
}

/* 瀵归綈淇锛氬彸渚у垪闈犲彸瀵归綈 */
.tech-compact-row .tech-mini-block:last-child {
  justify-content: flex-end;
}

/* --- 7. 寮€鍏虫牱寮?(浠呯敤浜庝繚鐣欎唬鐮佸吋瀹规€э紝鑻ヤ笉浣跨敤鍙拷鐣? --- */
.tech-switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.tech-switch-track {
  width: 32px;
  height: 18px;
  background: #e0e0e0;
  border-radius: 9px;
  position: relative;
  transition: background 0.3s ease;
}

.tech-switch-track.active {
  background: #4CAF50;
}

.tech-switch-knob {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.tech-switch-track.active .tech-switch-knob {
  transform: translateX(14px);
}

/* --- 甯冨眬鏈€缁堜慨姝ｏ細闂磋窛瀵归綈 & 寮哄埗鍙抽潬 --- */

/* 1. 涓诲鍣細闂磋窛涓庝笅鏂?Grid gap (12px) 淇濇寔涓€鑷?*/
.tech-main-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  padding: 0px 10px !important;
  margin-bottom: 0px !important;
  /* 鍏抽敭锛氫粠 15px 鏀逛负 12px */
  min-height: 80px;
}

/* 2. 宸︿晶鍖哄煙锛氬脊鎬у竷灞€ */
.tech-stats-left {
  display: flex;
  align-items: center;
  /* 绉婚櫎 gap锛屾敼鐢?justify-content 鎴?margin 鎺у埗 */
  gap: 0;
  height: 100%;
}

/* 3. 鍦嗙幆锛氫繚鎸?60px */
.battery-ring-container {
  width: 60px !important;
  height: 60px !important;
  flex-shrink: 0;
  /* 闃叉琚帇缂?*/
}

/* 4. 閲岀▼鏂囧瓧缁勶細鍙樻垚鈥滈殣褰㈡鈥濊嚜鍔ㄦ拺婊″墿浣欑┖闂?*/
.tech-range-group {
  flex: 1;
  /* 鍏抽敭锛氬崰鎹乏渚у墿浣欐墍鏈夊搴?*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  /* 鍐呭闈犲彸瀵归綈 */
  text-align: right;
  /* 鏂囧瓧闈犲彸瀵归綈 */
  padding-right: 20px;
  /* 鍏抽敭锛氬鍔犲彸渚у懠鍚哥┖闂达紝涓庡彸鍗婇儴鍒嗙殑 padding-left 瀵瑰簲 */
}

/* 瀛椾綋淇濇寔 */
.tech-range-val {
  font-size: 1.4rem !important;
  line-height: 1;
  letter-spacing: -0.5px;
}

.tech-odometer {
  font-size: 0.7rem;
  color: #999;
  margin-top: 3px;
  font-family: monospace;
}

/* 5. 鍙充晶淇℃伅妗嗭細淇濇寔涓嶅彉锛岀‘淇濊瑙夊绉?*/
.tech-stats-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 56px;
  padding-left: 20px;
  /* 涓庡乏渚х殑 padding-right 瀵圭О */
  border-left: 1px solid #e0e0e0;
  font-size: 0.7rem;
  color: #666;
  line-height: 1.2;
}