/* ==============================================
   华禹智控 - Mobile Web App
   工业科技风 · 深色主题 · v1.0
   ============================================== */

:root {
  --bg-primary: #0A1628;
  --bg-secondary: #0F1F36;
  --bg-card: #152238;
  --bg-card-hover: #1A2A4A;
  --accent-blue: #1E90FF;
  --accent-blue-dim: #1565C0;
  --accent-cyan: #00BCD4;
  --success: #00E676;
  --danger: #FF1744;
  --warning: #FF9100;
  --info: #448AFF;
  
  --text-primary: #E0E8F0;
  --text-secondary: #8AA0B8;
  --text-dim: #5A7A9A;
  --border: #1E3050;
  
  --gradient-bg: linear-gradient(180deg, #0A1628 0%, #0F1F36 50%, #0A1628 100%);
  --gradient-blue: linear-gradient(135deg, #1E90FF, #00BCD4);
  --gradient-card: linear-gradient(135deg, #152238, #1A2A4A);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
  
  --nav-height: 64px;
  --status-height: 24px;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
  --font-cn: -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  font-family: var(--font-cn);
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  background: var(--gradient-bg);
  overflow: hidden;
}

/* ========== PAGES ========== */
.page {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(var(--nav-height) + 12px);
  display: none;
  -webkit-overflow-scrolling: touch;
}
.page.active {
  display: block;
}
.page::-webkit-scrollbar {
  width: 2px;
}
.page::-webkit-scrollbar-track {
  background: transparent;
}
.page::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* ========== STATUS BAR ========== */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}
.status-icons {
  display: flex;
  gap: 6px;
  font-size: 11px;
}

/* ========== HEADER ========== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px 14px;
}
.back-header {
  padding: 8px 12px 14px;
}
.logo {
  flex: 1;
}
.logo-dot {
  display: none;
}
.env {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
  margin-right: 4px;
}
.page-header h1 {
  font-size: 18px;
  font-weight: 600;
}
.page-title-ellipsis {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
  font-size: 15px !important;
  color: var(--text-primary);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}
.icon-btn:active {
  color: var(--accent-blue);
}
.add-project-btn {
  background: var(--gradient-blue);
  border: none;
  border-radius: 16px;
  color: #fff;
  font-family: var(--font-cn);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.24);
  white-space: nowrap;
}
.add-project-btn:active {
  transform: scale(0.97);
}

/* ========== ADD PROJECT MODAL ========== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 10, 22, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-overlay.closing {
  opacity: 0;
  transition: opacity .18s ease;
}
.add-project-modal {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: modalPop .2s ease;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  font-size: 16px;
  font-weight: 600;
}
.modal-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(138, 160, 184, 0.12);
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 26px;
  cursor: pointer;
}
.modal-body {
  padding: 16px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form-field span {
  color: var(--text-secondary);
  font-size: 12px;
}
.form-field input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-cn);
  font-size: 14px;
  outline: none;
  padding: 11px 12px;
}
.form-field input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(30, 144, 255, 0.12);
}
.modal-actions {
  display: flex;
  gap: 10px;
  padding: 14px 18px 18px;
}
.modal-btn {
  flex: 1;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 12px;
  cursor: pointer;
}
.modal-btn.secondary {
  background: rgba(138, 160, 184, 0.12);
  color: var(--text-secondary);
}
.modal-btn.primary {
  background: var(--gradient-blue);
  color: #fff;
}
@keyframes modalPop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========== STATS GRID ========== */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 12px;
}
.stat-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 0 2px 2px 0;
}
.stat-project::before { background: var(--accent-blue); }
.stat-box::before { background: var(--success); }
.stat-alert::before { background: var(--danger); }

.stat-card:last-child {
  grid-column: 1 / -1;
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.stat-project .stat-icon { background: rgba(30, 144, 255, 0.15); color: var(--accent-blue); }
.stat-box .stat-icon { background: rgba(0, 230, 118, 0.15); color: var(--success); }
.stat-alert .stat-icon { background: rgba(255, 23, 68, 0.15); color: var(--danger); }

.stat-info {
  flex: 1;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}
.stat-project .stat-value { color: var(--accent-blue); }
.stat-box .stat-value { color: var(--success); }
.stat-alert .stat-value { color: var(--danger); }
.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.stat-percent {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--success);
  padding: 2px 8px;
  background: rgba(0, 230, 118, 0.1);
  border-radius: 20px;
  white-space: nowrap;
}
.stat-percent.small {
  color: var(--text-dim);
  background: rgba(90, 122, 154, 0.1);
}

/* ========== SECTIONS ========== */
.section {
  padding: 12px 16px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.section-header h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-header h2 i {
  color: var(--accent-blue);
  font-size: 14px;
}
.section-more {
  color: var(--text-dim);
  cursor: pointer;
}

/* ========== DEVICE PREVIEW ========== */
.device-preview-list {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.device-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.device-preview-item:active {
  background: var(--bg-card-hover);
}
.device-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.device-status-dot.online {
  background: var(--success);
  box-shadow: 0 0 6px rgba(0, 230, 118, 0.5);
}
.device-status-dot.warning {
  background: var(--warning);
  box-shadow: 0 0 6px rgba(255, 145, 0, 0.5);
}
.device-status-dot.offline {
  background: var(--text-dim);
}
.device-preview-info {
  flex: 1;
  min-width: 0;
}
.device-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-tag {
  font-size: 11px;
  color: var(--success);
  margin-top: 2px;
}
.device-id-tag {
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.empty-state {
  padding: 18px 14px;
  text-align: center;
  color: var(--text-dim);
  background: rgba(21, 34, 56, 0.72);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* ========== AI ASSISTANT ========== */
.ai-scope-card {
  margin: 0 16px 12px;
  padding: 0;
  background: transparent;
  border: none;
}
.ai-service-status {
  display: inline-flex;
  margin-top: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(138,160,184,0.12);
  color: var(--text-secondary);
  font-size: 11px;
}
.ai-service-status.ok {
  background: rgba(0,230,118,0.12);
  color: var(--success);
}
.ai-service-status.warn {
  background: rgba(255,145,0,0.12);
  color: var(--warning);
}
.ai-chat-list {
  height: calc(100vh - var(--nav-height) - 128px);
  min-height: 390px;
  overflow-y: auto;
  padding: 4px 16px 88px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}
.ai-msg-user {
  flex-direction: row-reverse;
}
.ai-avatar {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gradient-blue);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.ai-msg-user .ai-avatar {
  background: rgba(138,160,184,0.22);
  color: var(--text-primary);
}
.ai-bubble {
  max-width: 78%;
  position: relative;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}
.ai-msg-user .ai-bubble {
  background: #1E90FF;
  border-color: #1E90FF;
  color: #fff;
}
.ai-msg-assistant .ai-bubble::before,
.ai-msg-user .ai-bubble::before {
  content: '';
  position: absolute;
  top: 11px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}
.ai-msg-assistant .ai-bubble::before {
  left: -5px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ai-msg-user .ai-bubble::before {
  right: -5px;
  background: #1E90FF;
}
.ai-header-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(138,160,184,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.ai-info-text {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
}
.ai-info-text p + p {
  margin-top: 8px;
}
.ai-memory-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}
.ai-memory-item {
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
}
.ai-memory-item span {
  display: block;
  margin-top: 5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}
.ai-input-bar {
  position: fixed;
  left: 50%;
  bottom: var(--nav-height);
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(10, 22, 40, 0.96);
  border-top: 1px solid var(--border);
  z-index: 99;
}
.ai-input-bar input {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-primary);
  outline: none;
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--font-cn);
}
.ai-input-bar input:focus {
  border-color: var(--accent-blue);
}
.ai-input-bar button {
  border: none;
  border-radius: 18px;
  padding: 0 16px;
  background: var(--gradient-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-cn);
  cursor: pointer;
}
.device-preview-item i {
  color: var(--text-dim);
  font-size: 12px;
}

/* ========== MAP PLACEHOLDER ========== */
.map-placeholder {
  height: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.map-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(45deg, transparent 48%, var(--border) 48%, var(--border) 52%, transparent 52%),
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(30, 144, 255, 0.03) 30px, rgba(30, 144, 255, 0.03) 31px),
    repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(30, 144, 255, 0.03) 30px, rgba(30, 144, 255, 0.03) 31px);
}
.map-overlay {
  text-align: center;
  z-index: 1;
  color: var(--text-dim);
}
.map-overlay i {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.5;
}
.map-overlay p {
  font-size: 12px;
  margin-bottom: 8px;
}
.map-btn {
  background: rgba(30, 144, 255, 0.15);
  border: 1px solid rgba(30, 144, 255, 0.3);
  color: var(--accent-blue);
  padding: 6px 16px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}

/* ========== SEARCH BAR ========== */
.search-bar {
  margin: 4px 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 16px;
}
.search-bar i {
  color: var(--text-dim);
  font-size: 14px;
}
.search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-cn);
  font-size: 13px;
}
.search-bar input::placeholder {
  color: var(--text-dim);
}

/* ========== PROJECT LIST ========== */
.project-list {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 80px;
}
.project-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.project-card:active {
  background: var(--bg-card-hover);
  transform: scale(0.99);
}
.project-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.project-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(30, 144, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue);
  font-size: 18px;
  flex-shrink: 0;
}
.project-meta {
  flex: 1;
  min-width: 0;
}
.project-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.status-badge {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.status-badge.online { background: var(--success); }
.status-badge.warning { background: var(--warning); }
.status-badge.offline { background: var(--text-dim); }
.project-chevron {
  color: var(--text-dim);
  font-size: 12px;
}
.project-detail-tags {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 400;
}
.tag-online {
  background: rgba(0, 230, 118, 0.12);
  color: var(--success);
}
.tag-idle {
  background: rgba(138, 160, 184, 0.1);
  color: var(--text-secondary);
}
.tag-warning {
  background: rgba(255, 145, 0, 0.12);
  color: var(--warning);
}
.tag-offline {
  background: rgba(90, 122, 154, 0.1);
  color: var(--text-dim);
}

/* ========== DETAIL TABS ========== */
.detail-tabs {
  display: flex;
  padding: 0 12px;
  gap: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.detail-tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  flex-shrink: 0;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s;
}
.tab.active {
  color: var(--accent-blue);
}
.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--accent-blue);
  border-radius: 1px;
}
.tab-content {
  display: none;
  padding: 12px 16px;
  height: calc(100vh - 180px - var(--nav-height));
  overflow-y: auto;
}
.tab-content.active {
  display: block;
}

/* ========== MONITOR GRID ========== */
.monitor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.monitor-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.monitor-item.alert {
  border-color: rgba(255, 23, 68, 0.3);
  background: rgba(255, 23, 68, 0.05);
}
.monitor-label {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.monitor-label i {
  font-size: 11px;
  color: var(--text-dim);
}
.monitor-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.monitor-value[data-type="digital"] {
  min-width: 24px;
  text-align: center;
}

/* ========== CURVE TAB ========== */
.curve-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.curve-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.curve-select {
  display: flex;
  align-items: center;
  gap: 8px;
}
.curve-select label {
  font-size: 12px;
  color: var(--text-secondary);
}
.curve-select select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 6px 10px;
  font-family: var(--font-cn);
  font-size: 12px;
  outline: none;
}
.curve-time {
  display: flex;
  gap: 4px;
}
.time-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.time-btn.active {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}
.curve-chart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.curve-svg {
  width: 100%;
  height: 150px;
}
.chart-hint {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
}

/* ========== ALARM TAB ========== */
.alarm-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.alarm-filter-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 16px;
  border-radius: 20px;
  font-family: var(--font-cn);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.alarm-filter-btn.active {
  background: rgba(255, 23, 68, 0.12);
  border-color: rgba(255, 23, 68, 0.3);
  color: var(--danger);
}
.alarm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alarm-item {
  display: flex;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.alarm-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.alarm-danger { color: var(--danger); }
.alarm-warning { color: var(--warning); }
.alarm-info { color: var(--info); }
.alarm-content {
  flex: 1;
  min-width: 0;
}
.alarm-type {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.alarm-level {
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.level-generic {
  background: rgba(90, 122, 154, 0.15);
  color: var(--text-secondary);
}
.level-warning {
  background: rgba(255, 145, 0, 0.15);
  color: var(--warning);
}
.alarm-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}
.alarm-device {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.alarm-device i {
  margin-right: 4px;
}

/* ========== CONFIG TAB ========== */
.config-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.config-section h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-blue);
}
.config-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.config-field:last-of-type {
  border-bottom: none;
}
.config-field label {
  font-size: 13px;
  color: var(--text-secondary);
}
.config-val {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  background: rgba(30, 144, 255, 0.06);
  padding: 2px 10px;
  border-radius: 4px;
}
.config-actions {
  margin-top: 16px;
  text-align: center;
}
.config-btn {
  background: rgba(30, 144, 255, 0.12);
  border: 1px solid rgba(30, 144, 255, 0.3);
  color: var(--accent-blue);
  padding: 8px 24px;
  border-radius: 20px;
  font-family: var(--font-cn);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.config-btn:active {
  background: rgba(30, 144, 255, 0.25);
}

/* ========== VIDEO SECTION ========== */
.video-section {
  padding: 12px 16px;
}
.video-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(30, 144, 255, 0.12);
  color: var(--accent-blue);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  margin-bottom: 10px;
}
.video-player {
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}
.video-player::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4)),
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(255,255,255,0.02) 30px, rgba(255,255,255,0.02) 31px);
}
.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 1;
}
.video-overlay > i {
  font-size: 36px;
  color: rgba(255,255,255,0.2);
}
.video-datetime {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.video-label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.video-controls {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}
.video-control-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.video-control-btn:active {
  background: rgba(255,255,255,0.2);
}
.video-sdk-btn {
  margin-top: 4px;
  background: rgba(30, 144, 255, 0.15);
  border: 1px solid rgba(30, 144, 255, 0.3);
  color: var(--accent-blue);
  padding: 5px 14px;
  border-radius: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
}

/* ========== BOTTOM NAV ========== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: var(--nav-height);
  background: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-cn);
  font-size: 10px;
  cursor: pointer;
  padding: 6px 12px;
  transition: color 0.2s;
  min-width: 48px;
}
.nav-item i {
  font-size: 18px;
}
.nav-item.active {
  color: var(--accent-blue);
}
.nav-item.active i {
  text-shadow: 0 0 8px rgba(30, 144, 255, 0.4);
}

/* ========== RESPONSIVE ========== */
@media (min-width: 481px) {
  #app {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.page.active .stat-card {
  animation: fadeIn 0.3s ease both;
}
.page.active .stat-card:nth-child(2) { animation-delay: 0.05s; }
.page.active .stat-card:nth-child(3) { animation-delay: 0.1s; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.device-status-dot.online {
  animation: pulse 2s ease-in-out infinite;
}

/* ========== WEATHER CARD ========== */
.weather-card {
  margin: 6px 16px 4px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}
/* 左侧色条 */
.weather-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  border-radius: 0 2px 2px 0;
}
.weather-card[data-weather="sunny"]::before { background: var(--accent-blue); }
.weather-card[data-weather="rain"]::before { background: var(--info); }
.weather-card[data-weather="cloud"]::before { background: var(--text-secondary); }
.weather-card[data-weather="fog"]::before { background: var(--text-dim); }

/* 左侧图标 */
.wc-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.weather-card[data-weather="sunny"] .wc-icon { background: rgba(255,213,79,0.15); }
.weather-card[data-weather="rain"] .wc-icon { background: rgba(79,195,247,0.15); }
.weather-card[data-weather="cloud"] .wc-icon { background: rgba(144,164,174,0.15); }
.weather-card[data-weather="fog"] .wc-icon { background: rgba(120,144,156,0.15); }

/* 右侧三行 */
.wc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 第一行：温度 + 描述 + 更新时间 */
.wc-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wc-temp {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.wc-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: 4px;
}
.wc-update {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* 第二行：定位 */
.wc-row-mid {
  font-size: 11px;
  color: var(--text-dim);
}

/* 第三行：标签 */
.wc-row-bot {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wc-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 100px;
  white-space: nowrap;
  line-height: 1;
}
.wc-tag-hum {
  color: #E1F5FE;
  background: #0D47A1;
  border: 1px solid #1565C0;
}
.wc-tag-wind {
  color: #E0F7FA;
  background: #006064;
  border: 1px solid #00838F;
}
.wc-tag-rain {
  color: #E3F2FD;
  background: #01579B;
  border: 1px solid #0277BD;
}

/* ========== WEATHER SKELETON ========== */
.weather-card.loading .wc-temp,
.weather-card.loading .wc-desc,
.weather-card.loading .wc-row-mid,
.weather-card.loading .wc-tag {
  color: transparent !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  -webkit-background-clip: text;
  background-clip: text;
  border-radius: 4px;
}
.weather-card.loading .wc-icon {
  opacity: 0.3;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========== RAINFALL CHART ========== */
.rain-section {
  padding: 0 16px;
  margin-top: 4px;
}
.rain-section .section-header {
  margin-bottom: 8px;
}
.rain-chart-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 12px 8px;
  position: relative;
  overflow: hidden;
}
.rain-chart-wrap canvas {
  display: block;
  margin: 0 auto;
  min-width: 200px;
}
.rain-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: var(--text-dim);
  font-size: 13px;
}
.rain-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: var(--text-dim);
  font-size: 13px;
}

/* ========== ALERT SECTION ========== */
.alert-section {
  padding: 0 16px;
  margin-top: 4px;
}
.alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.alert-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: #D32F2F;
  color: #fff;
}

/* ========== WORKBENCH: 快捷功能 ========== */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 4px 16px 16px;
}
.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.quick-item:active .quick-icon {
  transform: scale(0.92);
}
.quick-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.15s;
}
.quick-blue { background: rgba(30,144,255,0.15); color: #1E90FF; }
.quick-green { background: rgba(0,230,118,0.15); color: #00E676; }
.quick-cyan { background: rgba(0,188,212,0.15); color: #00BCD4; }
.quick-orange { background: rgba(255,145,0,0.15); color: #FF9100; }
.quick-red { background: rgba(255,23,68,0.15); color: #FF1744; }
.quick-purple { background: rgba(156,39,176,0.15); color: #CE93D8; }
.quick-teal { background: rgba(0,150,136,0.15); color: #4DB6AC; }
.quick-more { background: rgba(90,122,154,0.12); color: var(--text-dim); }
.quick-item span {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
}

/* ========== TODO LIST ========== */
.todo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.todo-priority {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
}
.todo-priority.high { background: var(--danger); }
.todo-priority.mid { background: var(--warning); }
.todo-priority.low { background: var(--accent-cyan); }
.todo-content {
  flex: 1;
  min-width: 0;
}
.todo-title {
  font-size: 13px;
  font-weight: 500;
}
.todo-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.todo-btn {
  background: rgba(30,144,255,0.12);
  border: 1px solid rgba(30,144,255,0.3);
  color: var(--accent-blue);
  padding: 5px 14px;
  border-radius: 14px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-cn);
  flex-shrink: 0;
}

/* ========== RECENT LIST ========== */
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.recent-item i {
  color: var(--text-dim);
  font-size: 12px;
}
.recent-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* ========== MESSAGES ========== */
.msg-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.msg-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-cn);
  font-size: 13px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.msg-tab.active {
  color: var(--accent-blue);
}
.msg-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--accent-blue);
  border-radius: 1px;
}
.msg-list {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg-item {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
}
.msg-item.unread {
  border-color: rgba(30,144,255,0.3);
}
.msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.msg-avatar-danger { background: rgba(255,23,68,0.15); color: #FF1744; }
.msg-avatar-warning { background: rgba(255,145,0,0.15); color: #FF9100; }
.msg-avatar-notice { background: rgba(30,144,255,0.15); color: #1E90FF; }
.msg-avatar-system { background: rgba(0,230,118,0.15); color: #00E676; }
.msg-body {
  flex: 1;
  min-width: 0;
}
.msg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.msg-sender {
  font-size: 13px;
  font-weight: 500;
}
.msg-time {
  font-size: 11px;
  color: var(--text-dim);
}
.msg-title {
  font-size: 12px;
  color: var(--text-primary);
  margin-top: 4px;
}
.msg-preview {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-blue);
  position: absolute;
  top: 12px;
  right: 12px;
  box-shadow: 0 0 6px rgba(30,144,255,0.5);
}

/* ========== PROFILE ========== */
.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 20px;
}
.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E90FF, #00BCD4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(30,144,255,0.3);
}
.profile-info {
  flex: 1;
}
.profile-name {
  font-size: 18px;
  font-weight: 600;
}
.profile-role {
  font-size: 12px;
  color: var(--accent-blue);
  margin-top: 2px;
}
.profile-org {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.profile-org i {
  margin-right: 4px;
  font-size: 11px;
}
.profile-edit-btn {
  background: rgba(30,144,255,0.12);
  border: 1px solid rgba(30,144,255,0.3);
  color: var(--accent-blue);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 16px 16px;
}
.profile-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
}
.profile-stat-num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-blue);
}
.profile-stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.profile-menu {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.menu-item:active {
  background: var(--bg-card-hover);
}

/* ========== 登录 ========== */
#app.auth-pending > *:not(#login-overlay) { visibility: hidden; }
#app.auth-pending { min-height: 100vh; }
.auth-locked { overflow: hidden; }
.login-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(3, 10, 22, .86); backdrop-filter: blur(10px); }
.login-overlay[hidden] { display: none; }
.login-card { width: 100%; max-width: 380px; padding: 30px 24px 24px; background: #101f35; border: 1px solid #29466b; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.login-brand { color: #4fc3f7; font-size: 13px; letter-spacing: 3px; text-align: center; }
.login-card h1 { margin: 12px 0 6px; color: #eaf6ff; font-size: 24px; text-align: center; }
.login-subtitle { margin: 0 0 24px; color: #8aa0b8; font-size: 13px; text-align: center; }
.login-field { display: block; margin: 14px 0; color: #b7cce0; font-size: 13px; }
.login-field span { display: block; margin-bottom: 7px; }
.login-field input { box-sizing: border-box; width: 100%; padding: 12px 13px; color: #e0e8f0; background: #0a1628; border: 1px solid #29466b; border-radius: 8px; outline: none; font-size: 15px; }
.login-field input:focus { border-color: #1e90ff; box-shadow: 0 0 0 3px rgba(30,144,255,.14); }
.login-error { min-height: 20px; color: #ff7184; font-size: 12px; line-height: 20px; }
.login-submit { width: 100%; margin-top: 8px; padding: 12px; color: #fff; background: linear-gradient(135deg,#1e90ff,#00a9c9); border: 0; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 600; }
.login-submit:disabled { opacity: .65; cursor: wait; }

/* ========== 页面内容容器（统一滚动区域） ========== */
.page-content {
  padding-bottom: 80px;
}
.menu-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(30,144,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue);
  font-size: 15px;
  flex-shrink: 0;
}
.menu-label {
  flex: 1;
  font-size: 14px;
}
.menu-badge {
  background: rgba(255,23,68,0.15);
  color: var(--danger);
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
  font-family: var(--font-mono);
}
.menu-arrow {
  color: var(--text-dim);
  font-size: 12px;
}

.profile-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px 16px 30px;
  padding: 12px;
  background: rgba(255,23,68,0.06);
  border: 1px solid rgba(255,23,68,0.2);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 14px;
  cursor: pointer;
}
.profile-logout:active {
  background: rgba(255,23,68,0.12);
}

/* ========== 2026 工业监控视觉升级（保留原有业务与底部导航） ========== */
:root {
  --bg-primary: #07111f;
  --bg-secondary: #0b1b2e;
  --bg-card: #0e2238;
  --bg-card-hover: #143451;
  --accent-blue: #36a8ff;
  --accent-cyan: #20e3d2;
  --success: #28e28b;
  --danger: #ff4d6d;
  --warning: #ffb547;
  --text-primary: #e9f4ff;
  --text-secondary: #91abc4;
  --text-dim: #5d7895;
  --border: rgba(93, 153, 202, .22);
  --gradient-bg: radial-gradient(circle at 15% 0%, rgba(26, 99, 156, .26), transparent 34%), linear-gradient(180deg, #07111f 0%, #091a2c 55%, #06101d 100%);
  --gradient-card: linear-gradient(135deg, rgba(17, 48, 76, .96), rgba(10, 29, 49, .96));
  --shadow-card: 0 10px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.035);
}

body { background: #07111f; }
#app { background: var(--gradient-bg); }
#app::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(73,149,203,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(73,149,203,.12) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
.page-header { padding: 18px 18px 16px; border-bottom: 1px solid rgba(93,153,202,.12); background: linear-gradient(180deg, rgba(9,28,47,.82), rgba(9,28,47,0)); }
.logo { position: relative; height: 25px; }
.logo::before { content: '华禹智控'; color: #eff8ff; font-size: 20px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 0 18px rgba(54,168,255,.35); }
.logo::after { content: '  SMART WATER CONTROL'; display: block; color: var(--accent-cyan); font: 8px var(--font-mono); letter-spacing: 1.4px; margin-top: 2px; opacity: .8; }
.env { color: var(--accent-cyan); background: rgba(32,227,210,.08); border: 1px solid rgba(32,227,210,.18); border-radius: 999px; padding: 4px 7px; }
.icon-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; background: rgba(20,57,87,.5); color: var(--accent-blue); }
#btn-refresh::before { content: '↻'; font-size: 21px; }
#btn-notify::before { content: '♢'; font-size: 21px; }
.stats-grid { gap: 12px; padding: 16px 16px 14px; }
.stat-card { min-height: 82px; border-radius: 14px; border-color: rgba(73,157,218,.28); box-shadow: var(--shadow-card); background: var(--gradient-card); }
.stat-card::after { content: ''; position: absolute; width: 100px; height: 100px; right: -42px; top: -48px; border-radius: 50%; border: 1px solid rgba(83,184,255,.16); box-shadow: 0 0 0 12px rgba(83,184,255,.035), 0 0 0 24px rgba(83,184,255,.025); }
.stat-value { font-size: 29px; letter-spacing: -.5px; }
.stat-label { text-transform: uppercase; letter-spacing: .5px; }
.alert-section, .rain-section { margin-top: 8px; }
.alert-header, .section-header { padding: 0 2px; }
.alert-title, .section-header h2 { font-weight: 750; letter-spacing: .2px; }
.alert-badge { min-width: 23px; padding: 2px 7px; text-align: center; border-radius: 999px; background: rgba(255,77,109,.16); border: 1px solid rgba(255,77,109,.3); color: #ff7890; font: 11px var(--font-mono); }
.device-preview-list { gap: 10px; }
.device-preview-item { min-height: 68px; border-radius: 12px; padding: 13px 14px; background: linear-gradient(100deg, rgba(17,48,76,.92), rgba(11,32,53,.9)); border-color: rgba(93,153,202,.2); box-shadow: 0 5px 16px rgba(0,0,0,.16); }
.device-preview-item:active { transform: scale(.99); background: var(--bg-card-hover); }
.device-name { font-weight: 650; }
.device-tag { color: var(--text-secondary); }
.device-tag + .device-tag { color: var(--accent-cyan); }
.device-status-dot.warning { background: var(--warning); box-shadow: 0 0 0 4px rgba(255,181,71,.1), 0 0 12px rgba(255,181,71,.7); }
.device-status-dot.offline { box-shadow: 0 0 0 4px rgba(93,120,149,.1); }
.weather-card, .rain-chart-wrap { border-radius: 14px; border-color: rgba(93,153,202,.25); box-shadow: var(--shadow-card); background: linear-gradient(135deg, rgba(16,48,76,.94), rgba(9,28,48,.94)); }
.weather-card { margin-top: 14px; padding: 14px 16px; }
.wc-temp { font-size: 20px; font-weight: 750; }
.wc-desc { font-size: 12px; }
.wc-location { color: var(--accent-cyan); }
.wc-tag { border-radius: 7px; }
.rain-section { padding-bottom: 8px; }
.rain-chart-wrap { min-height: 136px; }
.bottom-nav { height: 70px; background: rgba(5,17,30,.9); border-top-color: rgba(72,154,218,.3); box-shadow: 0 -8px 25px rgba(0,0,0,.2); }
.nav-item { position: relative; min-width: 64px; padding: 8px 10px; color: #6f8ca7; font-weight: 550; }
.nav-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; margin-bottom: 3px; }
.nav-item.active { color: var(--accent-cyan); }
.nav-item.active::before { opacity: 1; box-shadow: 0 0 10px currentColor; }
.nav-item.active span { color: #eafaff; }
.search-bar, .project-card, .detail-card, .msg-item { border-color: rgba(93,153,202,.22); box-shadow: var(--shadow-card); }
.search-bar { background: rgba(12,35,57,.85); border-radius: 12px; }
.project-card { background: linear-gradient(135deg, rgba(16,48,76,.94), rgba(9,28,48,.94)); border-radius: 14px; }
.ai-scope-card { margin: 0 16px 10px; border-radius: 12px; border-color: rgba(32,227,210,.2); background: rgba(10,46,60,.38); }
.ai-service-status.ok { color: var(--success); }
.ai-service-status.warn { color: var(--warning); }
@media (max-width: 360px) { .logo::after { display: none; } .stat-card { padding-left: 11px; padding-right: 11px; } .stat-value { font-size: 25px; } }

/* 永久绑定、设备级加载状态、动态监控及今日历史 */
.binding-account,.binding-warning,.binding-error,.history-summary{font-size:13px;line-height:1.65;color:var(--text-secondary)}
.binding-account strong{color:var(--accent-cyan);font-family:var(--font-mono)}
.binding-warning{padding:12px;border:1px solid rgba(255,145,0,.35);border-radius:8px;background:rgba(255,145,0,.08);color:#FFD180}
.binding-confirm{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text-primary);cursor:pointer}.binding-confirm input{margin-top:3px}
.binding-error{min-height:20px;color:var(--danger)}
.device-load-state{margin-top:5px;font-size:11px;color:var(--text-dim)}
.device-retry-btn,.inline-retry{border:1px solid var(--accent-blue);border-radius:6px;background:rgba(30,144,255,.12);color:#8CC8FF;padding:6px 10px;cursor:pointer}
.metric-monitor-item{width:100%;text-align:left;border:1px solid var(--border);color:inherit;cursor:pointer;position:relative;padding-bottom:34px}
.metric-monitor-item:active{transform:scale(.99);border-color:var(--accent-blue)}
.metric-meta{display:flex;justify-content:space-between;gap:8px;margin-top:8px;color:var(--text-dim);font-size:10px}
.metric-history-hint{position:absolute;left:14px;bottom:10px;color:#65B8FF;font-size:11px}
.history-modal{max-height:82vh;overflow:auto}.history-summary{padding:14px 18px;border-bottom:1px solid var(--border)}.history-body{padding:16px 18px 22px}.history-loading,.history-empty{text-align:center;padding:32px 10px;color:var(--text-secondary)}
.metric-history-canvas{display:block;width:100%;height:auto;background:rgba(10,22,40,.55);border:1px solid var(--border);border-radius:8px}
.bool-timeline{display:flex;flex-direction:column;gap:9px}.bool-event{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;font-size:12px}.bool-event span{color:var(--text-secondary)}.bool-event strong.on{color:var(--success)}.bool-event strong.off{color:var(--text-dim)}

/* ========== v2.3 智慧水务驾驶舱：层级、统一图标与响应式 ========== */
:root{
  --bg-page:#07111f;
  --bg-card:#0d2135;
  --bg-card-strong:#102a43;
  --border:rgba(122,183,225,.14);
  --text-primary:#f2f8fc;
  --text-secondary:#9cb2c7;
  --text-dim:#607c96;
  --accent-blue:#39b8ff;
  --success:#35d79a;
  --warning:#ffb84d;
  --danger:#ff647c;
  --radius-card:16px;
  --shadow-card:0 8px 24px rgba(0,0,0,.2);
  --nav-height:64px;
}
html,body{background:var(--bg-page)}
body{background-image:radial-gradient(circle at 12% 8%,rgba(57,184,255,.09),transparent 28%),radial-gradient(circle at 88% 85%,rgba(53,215,154,.05),transparent 25%)}
#app{width:min(100%,480px);min-height:100dvh;height:100dvh;background:linear-gradient(180deg,#07111f,#091827 55%,#07111f);box-shadow:0 0 60px rgba(0,0,0,.35)}
#app::before{display:none}
[hidden]{display:none!important}
.page{padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px) + 14px)}
.page-header{position:sticky;top:0;min-height:66px;padding:max(14px,env(safe-area-inset-top)) 16px 12px;background:rgba(7,17,31,.92);border-bottom:1px solid rgba(122,183,225,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.page-header::after{display:none}
.logo{height:34px}.logo::before{font-size:19px;font-weight:750;letter-spacing:.8px;text-shadow:none}.logo::after{content:'SMART WATER';margin-top:3px;color:var(--text-dim);font-size:8px;letter-spacing:1.6px}
.header-actions{gap:8px}.header-update{color:var(--text-dim);font-size:11px;white-space:nowrap}.env{display:none}
.icon-btn{position:relative;width:34px;height:34px;border-radius:10px;background:rgba(13,33,53,.78);border:1px solid var(--border);box-shadow:none;color:var(--text-secondary)}
.icon-btn svg,.section-icon svg,.stat-icon svg,.nav-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#btn-refresh::before,#btn-notify::before{display:none}#btn-notify::after{display:none}.icon-btn.has-notice::after{content:'';display:block;position:absolute;right:6px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--danger)}
#btn-refresh.is-refreshing svg{animation:refreshSpin .75s linear infinite}@keyframes refreshSpin{to{transform:rotate(360deg)}}
.stats-grid{display:block;padding:16px 16px 8px}.stat-card{min-height:128px;padding:20px;border:1px solid rgba(122,183,225,.18);border-radius:var(--radius-card);background:var(--bg-card-strong);box-shadow:var(--shadow-card);gap:14px}.stat-card::before{width:3px;background:var(--accent-blue)}.stat-card::after{display:none}.stat-icon{width:46px;height:46px;border-radius:13px;background:rgba(57,184,255,.09)!important;border:1px solid rgba(57,184,255,.16);color:var(--accent-blue)}.stat-icon::before{display:none}.stat-icon svg{width:23px;height:23px}.stat-value{font-size:36px;color:var(--text-primary)!important;text-shadow:none}.stat-label{margin-top:6px;color:var(--text-secondary);font-size:12px;letter-spacing:.5px}.stat-summary{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-left:auto}.stat-percent{padding:5px 9px;color:var(--success);border:1px solid rgba(53,215,154,.17);background:rgba(53,215,154,.07);font-size:11px}.stat-submetrics{display:flex;gap:12px;color:var(--text-dim);font-size:11px}.stat-submetrics strong{margin-left:3px;color:var(--text-secondary);font:600 12px var(--font-mono)}.stat-submetrics span:last-child strong{color:var(--danger)}
.alert-section,.rain-section{padding:0 16px;margin-top:16px}.alert-header,.section-header{margin-bottom:9px}.alert-title,.section-header h2{font-size:15px;font-weight:650}.section-icon,.alert-title>span:first-child,.section-header h2>span:first-child{display:inline-flex;width:25px;height:25px;align-items:center;justify-content:center;border-radius:8px;background:rgba(57,184,255,.08);color:var(--accent-blue)}.section-icon svg{width:15px;height:15px}.section-icon.danger{background:rgba(255,100,124,.08);color:var(--danger)}.alert-badge{height:auto;min-width:0;padding:3px 8px;color:var(--danger);background:rgba(255,100,124,.07);border:1px solid rgba(255,100,124,.15);font:500 11px var(--font-cn)}
#home-alert-list{border-radius:var(--radius-card)}.alert-section.has-alerts #home-alert-list{border-left:3px solid var(--danger)}.alert-section.has-alerts .device-preview-item{border-left-color:transparent;border-radius:0 var(--radius-card) var(--radius-card) 0}.alert-section:not(.has-alerts) .empty-state{color:var(--success);background:rgba(53,215,154,.04);border-style:solid;border-color:rgba(53,215,154,.12)}
.device-preview-item{min-height:76px;padding:13px 14px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-card)}.device-preview-item::after{color:var(--text-dim)}.device-status-dot{width:8px;height:8px}.device-status-dot.warning{background:var(--danger);box-shadow:0 0 0 4px rgba(255,100,124,.08)}.device-status-dot.online{box-shadow:0 0 0 4px rgba(53,215,154,.07);animation:none}.device-name{font-size:14px;font-weight:600}.device-tag{color:var(--text-secondary)}
.weather-card{margin:16px 16px 0;padding:18px;min-height:142px;align-items:center;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-card)}.weather-card::before,.weather-card::after{display:none}.wc-icon{width:48px;height:48px;border:0;background:rgba(57,184,255,.07)!important}.wc-body{gap:8px}.wc-temp{font-size:30px;font-weight:700;letter-spacing:-1px}.wc-desc{font-size:12px;font-weight:400;color:var(--text-secondary)}.wc-update,.wc-row-mid{color:var(--text-dim);font-size:11px}.wc-location{color:var(--text-secondary)}.wc-row-bot{gap:6px}.wc-tag{padding:5px 8px;border:1px solid rgba(122,183,225,.1);border-radius:8px;background:rgba(3,13,24,.24);color:var(--text-secondary);font-size:10px}.wc-tag-wind.is-warning{color:var(--warning);border-color:rgba(255,184,77,.18);background:rgba(255,184,77,.06)}
.rain-section{padding-bottom:10px}.rain-chart-wrap{height:190px;min-height:190px;padding:14px 12px 9px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-card)}.rain-chart-wrap canvas{width:100%;height:150px}.rain-empty{position:absolute;inset:40px 0 20px;height:auto;color:var(--text-dim);pointer-events:none;background:linear-gradient(180deg,rgba(13,33,53,.18),rgba(13,33,53,.55))}#rain-debug{display:none!important}
.bottom-nav{width:min(100%,480px);height:calc(var(--nav-height) + env(safe-area-inset-bottom,0px));padding:4px 10px env(safe-area-inset-bottom,0px);background:rgba(7,17,31,.94);border-top:1px solid var(--border);box-shadow:none}.nav-item{min-width:58px;gap:3px;padding:6px 10px;border-radius:0;background:none!important;color:var(--text-dim);font-size:10px}.nav-item::before,.nav-item::after{display:none!important}.nav-item svg{width:21px;height:21px}.nav-item.active{color:var(--accent-blue)}.nav-item.active span{color:var(--text-primary);font-weight:500}
.search-bar,.project-card,.monitor-item,.alarm-item,.config-section,.todo-item,.recent-item,.msg-item{background:var(--bg-card);border-color:var(--border);box-shadow:var(--shadow-card)}
@media(max-width:360px){.header-update{display:none}.stat-card{min-height:116px;padding:16px}.stat-icon{width:42px;height:42px}.stat-value{font-size:32px}.stat-submetrics{gap:7px}.weather-card{padding:15px}.wc-temp{font-size:27px}.nav-item{min-width:52px;padding-inline:7px}}
@media(min-width:1024px){
  body{overflow:hidden;background-image:radial-gradient(circle at 15% 20%,rgba(57,184,255,.1),transparent 28%),radial-gradient(circle at 85% 76%,rgba(53,215,154,.06),transparent 25%),linear-gradient(135deg,#050d18,#081522)}
  #app{width:min(calc(100% - 64px),1200px);max-width:1200px;height:calc(100dvh - 40px);min-height:0;margin:20px auto;border:1px solid rgba(122,183,225,.1);border-radius:22px;overflow:hidden}
  #page-home.active{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:18px;align-content:start;padding:0 24px calc(var(--nav-height) + 24px)}
  #page-home .page-header{grid-column:1/-1;margin:0 -24px;padding-left:24px;padding-right:24px}
  #page-home .stats-grid{grid-column:1/6;padding:22px 0 0}
  #page-home .alert-section{grid-column:6/13;margin:22px 0 0;padding:0}
  #page-home .weather-card{grid-column:1/6;margin:18px 0 0;align-self:start}
  #page-home .rain-section{grid-column:6/13;margin:18px 0 0;padding:0 0 12px}
  #page-home .stat-card{min-height:154px}.weather-card{min-height:190px}.rain-chart-wrap{height:190px}
  .bottom-nav{width:min(calc(100% - 64px),1200px);max-width:1200px;bottom:20px;border-radius:0 0 22px 22px}
  .ai-input-bar{max-width:1200px;bottom:calc(var(--nav-height) + 20px)}
  #project-list,.msg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-left:24px;padding-right:24px}.search-bar{margin-left:24px;margin-right:24px}.monitor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tab-content{padding-left:24px;padding-right:24px}
}

/* ========== 数据监控文字防叠加与自适应布局 ========== */
#tab-monitor{width:100%;height:calc(100dvh - 132px - var(--nav-height) - env(safe-area-inset-bottom,0px));padding:14px 16px 24px;overflow-x:hidden}
.monitor-grid{width:100%;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:stretch;gap:12px}
.metric-monitor-item{min-width:0;min-height:0;height:auto;padding:15px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;align-content:start;align-items:start;justify-content:stretch;gap:9px;overflow:hidden;white-space:normal}
.metric-monitor-item .monitor-label{display:block;min-width:0;width:100%;font-size:12px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}
.metric-monitor-item .monitor-value{min-width:0;width:100%;margin:0;font-size:clamp(18px,5vw,23px);line-height:1.35;overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.metric-monitor-item .metric-meta{min-width:0;width:100%;margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:5px 10px;font-size:10px;line-height:1.45}
.metric-monitor-item .metric-meta span{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.metric-monitor-item .metric-meta span:last-child{text-align:right;white-space:normal}
.metric-monitor-item .metric-history-hint{position:static;display:block;min-width:0;margin-top:1px;color:#65b8ff;font-size:11px;line-height:1.45;overflow-wrap:anywhere}
@media(max-width:600px){.monitor-grid{grid-template-columns:minmax(0,1fr)}.metric-monitor-item .metric-meta{grid-template-columns:1fr}.metric-monitor-item .metric-meta span:last-child{text-align:left}.metric-monitor-item .monitor-value{font-size:21px}}
@media(min-width:601px) and (max-width:1023px){.monitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){#tab-monitor{height:calc(100dvh - 172px - var(--nav-height));padding:18px 24px 28px}.monitor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-monitor-item .monitor-value{font-size:23px}}

/* ========== 设备详情：无返回按钮 + 手机边缘右滑返回 ========== */
#page-detail{overscroll-behavior-x:none;touch-action:pan-y}
#page-detail .detail-header{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;padding-left:16px;padding-right:16px}
#page-detail .detail-header .page-title-ellipsis{width:100%;max-width:100%;padding:0 12px;text-align:center}
#page-detail .detail-header .header-actions{display:none}
html.swipe-back-active,html.swipe-back-active body{overscroll-behavior:none}
html.swipe-back-active #page-detail{user-select:none;-webkit-user-select:none}
@media(pointer:fine){#page-detail{touch-action:auto}}

/* ========== v2.2 页面表现升级：清晰、轻盈、可信赖的工业控制台 ========== */
:root{--bg-primary:#06101c;--bg-secondary:#0b1b2b;--bg-card:#10263a;--bg-card-hover:#16354e;--accent-blue:#47b5ff;--accent-cyan:#2ce6d0;--success:#38dfa0;--danger:#ff637d;--warning:#ffbd5c;--text-primary:#f0f7ff;--text-secondary:#9cb3c8;--text-dim:#66839d;--border:rgba(118,172,213,.2);--gradient-bg:radial-gradient(circle at 18% -8%,rgba(36,136,204,.26),transparent 34%),radial-gradient(circle at 100% 22%,rgba(18,192,178,.09),transparent 27%),linear-gradient(180deg,#071421 0%,#081827 52%,#06101c 100%);--gradient-blue:linear-gradient(135deg,#318dff,#20c9d6);--gradient-card:linear-gradient(145deg,rgba(18,48,73,.96),rgba(10,30,48,.96));--shadow-card:0 14px 34px rgba(0,6,15,.3),inset 0 1px 0 rgba(255,255,255,.04);--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--nav-height:72px}
html,body{background:#06101c}body{letter-spacing:.01em}#app{background:var(--gradient-bg);box-shadow:0 0 80px rgba(0,0,0,.5)}#app::before{opacity:.1;background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.45) 42%,transparent 82%);-webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.45) 42%,transparent 82%)}.page{scroll-behavior:smooth;padding-bottom:calc(var(--nav-height) + 18px)}
.page-header{min-height:64px;padding:max(18px,env(safe-area-inset-top)) 18px 14px;background:linear-gradient(180deg,rgba(5,18,31,.96),rgba(7,22,37,.7) 72%,transparent);border-bottom:0;position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.page-header::after{content:'';position:absolute;left:18px;right:18px;bottom:0;height:1px;background:linear-gradient(90deg,rgba(71,181,255,.35),rgba(44,230,208,.1),transparent)}.page-header h1:not(.logo){font-size:20px;font-weight:750;letter-spacing:.5px}.logo{height:34px}.logo::before{font-size:21px;letter-spacing:1.5px}.logo::after{content:'SMART WATER CONTROL';margin-top:4px;font-size:8px;letter-spacing:2px}.header-actions{gap:9px}.env{margin:0 2px 0 0;padding:5px 9px;font-size:10px;background:rgba(44,230,208,.08);border-color:rgba(44,230,208,.24)}.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:12px;background:rgba(22,54,79,.72);border:1px solid rgba(107,166,209,.22);color:var(--accent-blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.icon-btn:active{transform:scale(.94)}#btn-refresh::before{content:'↻';font-size:22px}#btn-notify::before{content:'◇';font-size:20px}#btn-notify::after{content:'';position:absolute;width:5px;height:5px;right:6px;top:6px;border-radius:50%;background:var(--danger);box-shadow:0 0 8px var(--danger)}.back-header>.icon-btn:first-child::before{content:'‹';font-size:29px}.back-header>.icon-btn:first-child{font-size:0}#btn-search::before{content:'⌕';font-size:24px;transform:rotate(-15deg)}
.stats-grid{display:block;padding:18px 16px 10px}.stat-card{min-height:112px;padding:18px;border-radius:18px;background:linear-gradient(125deg,rgba(20,64,95,.98),rgba(9,31,50,.97));border:1px solid rgba(86,174,232,.3);box-shadow:0 18px 38px rgba(0,7,17,.34),inset 0 1px 0 rgba(255,255,255,.05)}.stat-card::before{width:4px;background:linear-gradient(180deg,var(--accent-blue),var(--accent-cyan))}.stat-card::after{width:150px;height:150px;right:-56px;top:-78px;border-color:rgba(92,190,255,.18);box-shadow:0 0 0 18px rgba(83,184,255,.035),0 0 0 38px rgba(83,184,255,.02)}.stat-icon{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,rgba(65,176,255,.23),rgba(44,230,208,.08))!important;border:1px solid rgba(83,184,255,.25)}.stat-icon::before{content:'⌁';color:var(--accent-cyan);font-size:28px;transform:rotate(90deg)}.stat-value{font-size:34px;color:#f4fbff!important;line-height:1;text-shadow:0 0 22px rgba(71,181,255,.25)}.stat-label{margin-top:8px;font-size:12px;color:#a8bfd3;letter-spacing:1.2px}.stat-percent{color:var(--success);padding:5px 9px;border:1px solid rgba(56,223,160,.2);background:rgba(56,223,160,.08)}
.alert-section,.rain-section{margin-top:12px;padding-left:16px;padding-right:16px}.alert-header,.section-header{min-height:30px;margin-bottom:10px}.alert-title,.section-header h2{font-size:15px;font-weight:720}.alert-title>span:first-child,.section-header h2>span:first-child{display:inline-flex;width:25px;height:25px;align-items:center;justify-content:center;border-radius:8px;background:rgba(71,181,255,.1);font-size:13px}.alert-title>span:first-child{background:rgba(255,99,125,.1)}.alert-badge{height:21px;min-width:23px;color:#ff8ca0;background:rgba(255,99,125,.11);border-color:rgba(255,99,125,.25)}
.device-preview-list{padding:0;gap:10px}#project-list{padding:0 16px 24px}.device-preview-item{min-height:82px;padding:14px 15px;gap:13px;border-radius:15px;background:linear-gradient(110deg,rgba(17,46,70,.95),rgba(9,29,47,.95));border:1px solid rgba(105,164,207,.18);box-shadow:0 9px 24px rgba(0,6,14,.2),inset 0 1px 0 rgba(255,255,255,.025);position:relative;overflow:hidden}.device-preview-item::after{content:'›';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#55738e;font-size:22px}.device-preview-item:active{transform:translateY(1px) scale(.994)}.device-status-dot{width:10px;height:10px}.device-status-dot.online{color:var(--success);background:currentColor;box-shadow:0 0 0 5px rgba(56,223,160,.08),0 0 13px currentColor}.device-status-dot.warning{color:var(--warning);background:currentColor;box-shadow:0 0 0 5px rgba(255,189,92,.08),0 0 13px currentColor}.device-status-dot.offline{color:var(--text-dim);background:currentColor;box-shadow:0 0 0 5px rgba(102,131,157,.08)}.device-preview-info{padding-right:24px}.device-name{color:#edf7ff;font-size:14px;font-weight:650}.device-tag{display:inline-flex;margin:7px 10px 0 0;color:var(--text-secondary);font-size:11px}.device-tag+.device-tag{color:var(--accent-cyan)}.device-id-tag{display:block;margin-top:5px;color:#607d96!important;font-size:10px}.empty-state{padding:24px 16px;border-radius:14px;background:rgba(11,31,49,.62);border-color:rgba(111,169,211,.2)}
.weather-card{margin:15px 16px 5px;padding:17px;align-items:center;gap:14px;border-radius:17px;background:linear-gradient(125deg,rgba(18,56,83,.96),rgba(9,31,50,.95));border-color:rgba(93,170,222,.25);box-shadow:var(--shadow-card);overflow:hidden}.weather-card::before{width:4px;background:linear-gradient(180deg,var(--accent-blue),var(--accent-cyan))!important}.weather-card::after{content:'';position:absolute;width:120px;height:120px;right:-62px;top:-68px;border-radius:50%;background:rgba(71,181,255,.06);border:1px solid rgba(71,181,255,.12)}.wc-icon{width:50px;height:50px;border-radius:15px;font-size:23px;background:rgba(71,181,255,.1)!important;border:1px solid rgba(99,181,237,.17)}.wc-body{gap:7px}.wc-temp{font-size:22px;font-weight:760}.wc-desc{font-size:12px}.wc-location{color:#8ce7df}.wc-tag{padding:5px 8px;font-size:10px;border-radius:8px;background:rgba(7,23,38,.42);border-color:rgba(104,166,210,.18);color:#c8dfef}.rain-chart-wrap{padding:15px 14px 10px;min-height:145px;border-radius:16px;background:linear-gradient(145deg,rgba(15,44,68,.92),rgba(8,27,44,.92))}#rain-debug{display:none}
.search-bar{margin:14px 16px 15px;min-height:48px;padding:0 15px;border-radius:15px;background:rgba(12,36,56,.85);border-color:rgba(103,168,214,.22)}.search-bar::before{content:'⌕';color:#7898b2;font-size:23px;transform:rotate(-15deg)}.search-bar input{font-size:14px}.add-project-btn{min-height:36px;padding:0 14px;border-radius:11px}.add-project-modal{border-radius:20px;background:linear-gradient(145deg,#122c43,#091b2d);border-color:rgba(105,172,219,.28)}.form-field input,.login-field input{min-height:48px;border-radius:12px;background:rgba(5,19,33,.66);border-color:rgba(105,166,209,.25)}.modal-btn,.login-submit{min-height:46px;border-radius:12px}
.detail-tabs{padding:8px 12px 0;gap:5px;border-bottom:0;background:rgba(6,18,31,.5)}.tab{flex:1;min-width:max-content;padding:10px 12px;border-radius:10px 10px 0 0}.tab.active{color:#dffaff;background:rgba(71,181,255,.09)}.tab.active::after{left:18px;right:18px;height:3px;background:linear-gradient(90deg,var(--accent-blue),var(--accent-cyan));box-shadow:0 0 10px rgba(44,230,208,.35)}.tab-content{padding:15px 16px}.monitor-grid{gap:11px}.monitor-item{min-height:96px;padding:15px;border-radius:15px;background:linear-gradient(145deg,rgba(16,44,68,.96),rgba(9,28,46,.96));border-color:rgba(104,166,210,.21);box-shadow:0 9px 22px rgba(0,7,16,.2);align-items:flex-start;flex-direction:column}.monitor-value{margin-top:8px;font-size:23px}.alarm-item,.config-section,.todo-item,.recent-item,.msg-item{border-radius:14px;background:linear-gradient(120deg,rgba(16,43,66,.94),rgba(9,28,45,.94));border-color:rgba(105,164,207,.18);box-shadow:0 8px 21px rgba(0,7,16,.16)}
.quick-grid{gap:14px 8px;padding:15px 16px 20px}.quick-icon{width:52px;height:52px;border-radius:16px;border:1px solid rgba(130,183,220,.15)}.quick-icon::before{font-size:21px}.quick-blue::before{content:'✓'}.quick-green::before{content:'▣'}.quick-cyan::before{content:'▥'}.quick-orange::before{content:'◉'}.quick-red::before{content:'!'}.quick-purple::before{content:'≡'}.quick-teal::before{content:'↻'}.quick-more::before{content:'•••';font-size:14px}.msg-tabs{margin:8px 16px 14px;padding:4px;border-radius:13px;background:rgba(8,27,44,.72);border:1px solid rgba(99,159,201,.15)}.msg-tab{border-radius:9px}.msg-tab.active{background:rgba(71,181,255,.13);color:#dff6ff}.msg-list{gap:10px;padding:0 16px 22px}.msg-item{padding:14px}
.ai-scope-card{margin:8px 16px 12px;padding:11px 13px;border:1px solid rgba(44,230,208,.18);background:rgba(10,45,57,.35)}.ai-service-status{padding:0;background:none!important}.ai-chat-list{padding:5px 16px 100px;gap:14px}.ai-avatar{border-radius:12px!important}.ai-bubble{padding:12px 14px!important;border-radius:14px!important;line-height:1.65!important;box-shadow:0 8px 20px rgba(0,7,16,.16)}.ai-msg-assistant .ai-bubble{background:linear-gradient(145deg,#112d45,#0a2034)!important;border-color:rgba(105,164,207,.2)!important}.ai-msg-user .ai-bubble{background:linear-gradient(135deg,#287ff0,#1aa9c3)!important;border:0!important}.ai-input-bar{bottom:var(--nav-height);padding:11px 16px;background:rgba(5,18,31,.88);backdrop-filter:blur(16px)}.ai-input-bar input{min-height:44px;border-radius:14px;background:rgba(14,42,64,.95)}.ai-input-bar button{min-width:64px;border-radius:13px}
.login-overlay{background:radial-gradient(circle at 50% 16%,rgba(33,139,207,.25),transparent 31%),rgba(3,12,21,.93);backdrop-filter:blur(18px)}.login-card{position:relative;padding:34px 26px 27px;border-radius:24px;background:linear-gradient(150deg,rgba(19,50,75,.98),rgba(7,25,41,.98));border-color:rgba(104,176,224,.28);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}.login-card::before{content:'';position:absolute;width:190px;height:190px;right:-90px;top:-110px;border-radius:50%;border:1px solid rgba(71,181,255,.16);box-shadow:0 0 0 20px rgba(71,181,255,.025),0 0 0 42px rgba(71,181,255,.016)}.login-brand{color:var(--accent-cyan);font-size:11px;font-weight:700;letter-spacing:4px}.login-brand::before{content:'◇';display:block;margin:0 auto 14px;width:50px;height:50px;line-height:48px;border-radius:16px;color:#dffcff;font-size:25px;letter-spacing:0;background:linear-gradient(145deg,rgba(71,181,255,.25),rgba(44,230,208,.1));border:1px solid rgba(91,185,242,.3)}.login-card h1{margin-top:15px;font-size:25px}
.bottom-nav{height:var(--nav-height);padding:5px 12px max(5px,env(safe-area-inset-bottom));background:rgba(4,16,28,.9);border-top-color:rgba(100,165,210,.2);box-shadow:0 -12px 32px rgba(0,4,10,.26);backdrop-filter:blur(18px)}.nav-item{position:relative;min-width:62px;gap:4px;padding:6px 10px;border-radius:13px;font-size:10px;color:#66849e}.nav-item::before{width:auto;height:22px;margin:0;border-radius:0;background:none;font-size:20px;line-height:22px;opacity:.9}.nav-item:nth-child(1)::before{content:'⌂'}.nav-item:nth-child(2)::before{content:'▦'}.nav-item:nth-child(3)::before{content:'✦'}.nav-item:nth-child(4)::before{content:'○'}.nav-item.active{color:var(--accent-cyan);background:linear-gradient(180deg,rgba(44,230,208,.1),rgba(44,230,208,.025))}.nav-item.active::after{content:'';position:absolute;top:0;width:22px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 0 10px currentColor}.nav-item.active span{color:#ecffff;font-weight:650}
#page-profile>div:first-child{padding-top:34px!important}#page-profile>div:first-child>div:first-child{width:78px!important;height:78px!important;border-radius:24px!important;background:linear-gradient(145deg,#2f8cff,#20cabb)!important;border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 34px rgba(26,141,208,.25)!important}#page-profile>div:nth-child(2)>div{border-radius:14px!important;background:linear-gradient(145deg,rgba(16,45,68,.95),rgba(9,28,46,.95))!important;border-color:rgba(103,165,208,.2)!important}#page-profile>div:nth-child(3)>div{min-height:52px;border-radius:14px!important;background:linear-gradient(110deg,rgba(16,43,66,.94),rgba(9,28,45,.94))!important;border-color:rgba(105,164,207,.18)!important}
@media(max-width:380px){.page-header{padding-left:15px;padding-right:15px}.logo::after{display:block;font-size:7px}.stat-card{min-height:102px;padding:15px}.stat-icon{width:44px;height:44px}.weather-card{padding:14px}.wc-icon{width:44px;height:44px}.monitor-grid{grid-template-columns:1fr}.nav-item{min-width:55px;padding-left:7px;padding-right:7px}}

/* ========== “我的”页移除统计模块后的布局 ========== */
#page-profile{overflow-x:hidden;overflow-y:auto}
#page-profile .profile-summary{padding:clamp(28px,7vh,54px) 20px 26px!important}
#page-profile .profile-actions{width:auto;max-width:680px;margin:0 16px!important;padding-bottom:calc(var(--nav-height) + 32px)!important;gap:8px!important}
#page-profile .profile-actions>div{min-width:0;min-height:52px;border-radius:14px!important;background:linear-gradient(110deg,rgba(16,43,66,.94),rgba(9,28,45,.94))!important;border-color:rgba(105,164,207,.18)!important}
#page-profile .profile-actions>div span{min-width:0;overflow-wrap:anywhere}
@media(max-width:360px){#page-profile .profile-summary{padding:24px 16px 22px!important}#page-profile .profile-actions{margin:0 12px!important}}
@media(min-width:768px){#page-profile .profile-summary{padding-top:48px!important}#page-profile .profile-actions{margin-left:auto!important;margin-right:auto!important;width:calc(100% - 48px)}}

/* ========== 个人资料与密码表单 ========== */
#profile-display-name,#profile-job-title,#profile-company{max-width:min(100%,560px);padding:0 8px;text-align:center;overflow-wrap:anywhere;word-break:break-word}
.account-modal form{display:contents}
.account-modal .modal-body{display:grid;gap:14px}
.account-modal .form-field{display:grid;gap:7px}
.account-modal .form-field span{font-size:12px;color:var(--text-secondary)}
.account-modal .form-field input{width:100%;min-width:0;color:var(--text-primary)}
.account-modal .binding-error{min-height:18px;margin-top:0;color:#ff8a9c;font-size:12px;line-height:1.5}
.password-hint{margin-top:-5px;color:var(--text-dim);font-size:11px}
@media(max-width:480px){.account-modal{width:calc(100% - 24px);max-height:calc(100dvh - 32px);overflow-y:auto}.account-modal .modal-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(10,29,46,.7),#0a1d2e 25%)}}

/* ========== 设备配置保存状态 ========== */
.config-actions{flex-wrap:wrap}
.config-save-status{flex:1 1 100%;min-height:18px;margin-top:7px;color:var(--text-secondary);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.config-save-status.success{color:var(--success)}
.config-save-status.error{color:#ff8a9c}
#save-config-btn:disabled{opacity:.6;cursor:wait}
@media(max-width:480px){.config-field{align-items:flex-start;gap:10px}.config-input{width:min(100%,190px)!important;max-width:100%!important;text-align:left}.config-actions .config-btn{min-height:42px}}