/* ============ 小空调样式 ============ */
#ac-page {
  --ac-bg: #f5f7fa;
  --ac-text: #333;
  --ac-sub: #999;
  --ac-border: #e0e0e0;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--ac-bg);
  padding: 50px 16px 40px;
  transition: background .3s;
}
[data-theme="dark"] #ac-page {
  --ac-bg: #0d1117;
  --ac-text: #e6edf3;
  --ac-sub: #7d8590;
  --ac-border: #30363d;
}
.ac-top { margin-bottom: 10px; }
.ac-title {
  font-size: 30px;
  line-height: 36px;
  text-align: center;
  color: var(--ac-text);
  margin: 0;
}
.ac-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
  color: var(--ac-text);
  font-size: 14px;
  gap: 4px;
}
.ac-tip-icon {
  width: 20px; height: 20px;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M12 3c-.46 0-.93.04-1.4.14c-2.76.53-4.96 2.76-5.48 5.52c-.48 2.61.48 5.01 2.22 6.56c.43.38.66.91.66 1.47V19c0 1.1.9 2 2 2h.28a1.98 1.98 0 0 0 3.44 0H14c1.1 0 2-.9 2-2v-2.31c0-.55.22-1.09.64-1.46A6.956 6.956 0 0 0 19 10c0-3.87-3.13-7-7-7zm2 14h-4v-1h4v1zm-4 2v-1h4v1h-4zm5.31-5.26c-.09.08-.16.18-.24.26H8.92c-.08-.09-.15-.19-.24-.27c-1.32-1.18-1.91-2.94-1.59-4.7c.36-1.94 1.96-3.55 3.89-3.93c.34-.07.68-.1 1.02-.1c2.76 0 5 2.24 5 5c0 1.43-.61 2.79-1.69 3.74z'/%3E%3Cpath fill='currentColor' d='M11.5 11h1v3h-1z'/%3E%3Cpath fill='currentColor' d='m9.672 9.58l.707-.706l2.122 2.121l-.707.707z'/%3E%3Cpath fill='currentColor' d='m12.208 11.712l-.707-.707l2.121-2.121l.707.707z'/%3E%3C/svg%3E") no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  background-color: #f3a83b;
}
.ac-tip-highlight { color: #63a5ef; cursor: pointer; }
.ac-body { width: 100%; max-width: 420px; }
.ac-panel {
  border: 1px solid var(--ac-border);
  border-radius: 12px 12px 24px 24px;
  box-shadow: 0 11px 16px -2px rgba(7,17,27,.09);
  padding: 16px 20px 14px;
  overflow: hidden;
  background: var(--ac-bg);
}
[data-theme="dark"] .ac-panel { box-shadow: 0 11px 16px -2px rgba(0,0,0,.3); }
.ac-panel-top { display: flex; align-items: center; justify-content: center; }

.ac-energy { background: #4ea5f5; border-radius: 2px; width: 50px; height: 70px; padding: 4px; flex-shrink: 0; }
.ac-energy-row { display: flex; justify-content: center; }
.ac-energy-dot { width: 4px; height: 4px; margin: 0 2px; background: #fff; border-radius: 50%; }
.ac-energy-bar-wrap { padding: 2px 8px; background: #fff; margin: 2px 0; }
.ac-energy-bar { height: 3px; margin: 1px 0; }
.ac-energy-bar.e1 { background: green; width: 50%; }
.ac-energy-bar.e2 { background: lightgreen; width: 55%; }
.ac-energy-bar.e3 { background: #ffc107; width: 65%; }
.ac-energy-bar.e4 { background: orange; width: 75%; }
.ac-energy-bar.e5 { background: red; width: 85%; }
.ac-energy-row2 { display: flex; justify-content: center; background: #fff; padding-top: 1px; }
.ac-energy-dot2 { width: 2px; height: 2px; margin: 2px .8px; background: #000; }
.ac-energy-line { border-top: 1px solid #000; margin: 1px 0; }
.ac-energy-row3 { display: flex; justify-content: center; background: #fff; }
.ac-energy-dot3 { width: 1.5px; height: 1.5px; margin: 2px .8px; background: #000; border-radius: 50%; }
.ac-energy-row4 { display: flex; justify-content: center; background: #fff; }
.ac-energy-dot4 { width: 1.2px; height: 1.2px; margin: 0 .8px; background: #000; border-radius: 50%; }
.ac-energy-row5 { display: flex; justify-content: center; }
.ac-energy-dot5 { width: 2px; height: 2px; margin: 0 .8px; background: #fff; }

.ac-temp-area { width: 50%; display: flex; flex-direction: column; align-items: flex-end; margin-right: 30px; }
.ac-mode-icon { font-size: 14px; }
.ac-temp-box { font-size: 36px; line-height: 40px; color: #ccc; font-family: 'Courier New', monospace; text-shadow: 0 0 2px rgba(0,0,0,.1); }
.ac-temp-box small { font-size: 18px; }

.ac-panel-bottom { margin-top: 24px; }
.ac-logo { width: 12px; margin: auto; display: block; }
.ac-divider { border: 1px solid var(--ac-border); margin: 4px -20px 0; }
.ac-status-dot { width: 4px; height: 4px; border-radius: 50%; background: #e0e0e0; float: right; margin-top: 10px; transition: background .3s, box-shadow .3s; }
.ac-status-dot.on { background: #38f709; box-shadow: 0 0 6px rgba(56,247,9,.5); }

.ac-wind { display: flex; justify-content: center; margin: 20px 0; opacity: .3; transition: opacity 1.5s ease; }
.ac-wind.running { opacity: .8; animation: acWindAnim 8s ease-out 3s infinite alternate; }
.ac-wind-line { width: 4px; height: 40px; background: #bbb; }
.ac-wl1 { transform: rotate(10deg); }
.ac-wl2 { margin: 0 80px; }
.ac-wl3 { transform: rotate(-10deg); }
@keyframes acWindAnim {
  0% { transform: scale(1); opacity: .3; }
  30% { opacity: .8; transform: scale(1.02); }
  50% { transform: scale(1); opacity: .5; }
  70% { transform: scale(1.01); opacity: .5; }
  100% { transform: scale(1); opacity: .3; }
}

.ac-ctrl-row { display: flex; justify-content: center; gap: 0; }
.ac-btn-round {
  width: 56px; height: 56px; margin: 8px; border-radius: 50%;
  border: 1px solid var(--ac-border); background: var(--ac-bg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.ac-btn-round:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.ac-btn-round:active { transform: scale(.95); }
.ac-btn-round svg { width: 22px; height: 22px; color: var(--ac-text); }
.ac-btn-up svg, .ac-btn-down svg { width: 36px; height: 36px; }

.ac-btn-cold.active { background: #4ea5f5; border-color: #4ea5f5; }
.ac-btn-cold.active svg { color: #fff; }
.ac-btn-power { background: #4ade80; border-color: #4ade80; }
.ac-btn-power svg { color: #fff; }
.ac-btn-power.on { background: #ef4444; border-color: #ef4444; }
.ac-btn-hot.active { background: #f39c12; border-color: #f39c12; }
.ac-btn-hot.active svg { color: #fff; }

.ac-footer { color: var(--ac-sub); font-size: 12px; text-align: center; line-height: 1.8; margin-top: 24px; }
.ac-footer p { margin: 0; }