:root {
  --bg-deep: #0a140a;
  --bg-mid: #0f1f0e;
  --bg-card: #122012;
  --bg-card2: #162816;
  --green-1: #1a3a1a;
  --green-2: #2d5a2d;
  --green-3: #3d7a3d;
  --accent: #5cdb5c;
  --accent-bright: #7fff7f;
  --accent-glow: #4ade80;
  --leaf-dark: #1e4620;
  --leaf-mid: #2d6b30;
  --leaf-light: #4a9b4e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;
  --text-primary: #e8f5e9;
  --text-secondary: #a5d6a7;
  --text-muted: #4a7a4a;
  --border: rgba(93,219,93,0.15);
  --border-bright: rgba(93,219,93,0.4);
  --glow: 0 0 20px rgba(92,219,92,0.3);
  --glow-strong: 0 0 40px rgba(92,219,92,0.5);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Noto Sans TC', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Animated background */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(29,80,29,0.4) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 80%, rgba(20,60,20,0.3) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(15,40,15,0.2) 0%, transparent 70%);
  pointer-events:none;
}

/* Leaf texture overlay */
body::after {
  content:'';
  position:fixed; inset:0; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M10,50 Q30,10 50,50 Q70,90 90,50' stroke='rgba(92,219,92,0.03)' stroke-width='1' fill='none'/%3E%3Cpath d='M0,30 Q20,60 40,30 Q60,0 80,30' stroke='rgba(92,219,92,0.02)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  pointer-events:none;
}

/* ============= HEADER ============= */
.header {
  position: sticky; top:0; z-index:100;
  background: rgba(10,20,10,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-bright);
  padding: 0 24px;
  height: 64px;
  display: flex; align-items:center; justify-content:space-between;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 1px 0 var(--border-bright);
}

.logo {
  display:flex; align-items:center; gap:12px;
}

.logo-icon {
  width:40px; height:40px;
  background: linear-gradient(135deg, var(--leaf-dark), var(--leaf-light));
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  box-shadow: var(--glow);
  animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
  0%,100% { box-shadow: 0 0 15px rgba(92,219,92,0.4); }
  50% { box-shadow: 0 0 30px rgba(92,219,92,0.8), 0 0 60px rgba(92,219,92,0.3); }
}

.logo-text {
  font-family:'Rajdhani',sans-serif;
  font-weight:700; font-size:22px;
  color: var(--accent-bright);
  letter-spacing:2px;
}

.logo-sub {
  font-size:11px; color:var(--text-muted); letter-spacing:1px;
  font-family:'Space Mono',monospace;
}

.header-status {
  display:flex; align-items:center; gap:20px;
}

.status-pill {
  display:flex; align-items:center; gap:6px;
  background: rgba(92,219,92,0.1);
  border: 1px solid var(--border-bright);
  border-radius:20px; padding:4px 12px;
  font-size:12px; font-family:'Space Mono',monospace;
}

.status-dot {
  width:8px; height:8px; border-radius:50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--accent);
}

@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.6; transform:scale(0.8); }
}

.status-dot.offline { background:#ef4444; box-shadow:0 0 8px #ef4444; }
.status-dot.warning { background:#f59e0b; box-shadow:0 0 8px #f59e0b; }

.header-time {
  font-family:'Space Mono',monospace;
  font-size:13px; color:var(--text-secondary);
  text-align:right;
}

.alarm-btn {
  position:relative;
  background:none; border:1px solid var(--border);
  border-radius:8px; padding:6px 10px;
  color:var(--text-secondary); cursor:pointer;
  font-size:18px; transition:all 0.2s;
}

.alarm-btn:hover { border-color:var(--accent); color:var(--accent); }

.alarm-badge {
  position:absolute; top:-4px; right:-4px;
  width:16px; height:16px; border-radius:50%;
  background:#ef4444; font-size:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; color:#fff;
  animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.2); }
}

/* ============= NAV TABS ============= */
.nav-tabs {
  position: sticky; top:64px; z-index:99;
  background: rgba(10,20,10,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display:flex; gap:0; padding:0 24px;
  overflow-x:auto;
}

.nav-tab {
  padding:12px 20px;
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--text-muted); cursor:pointer;
  font-family:'Noto Sans TC',sans-serif; font-size:13px;
  white-space:nowrap; transition:all 0.2s;
  display:flex; align-items:center; gap:8px;
}

.nav-tab:hover { color:var(--text-secondary); }
.nav-tab.active {
  color:var(--accent); border-bottom-color:var(--accent);
  text-shadow: 0 0 10px rgba(92,219,92,0.5);
}
/* ============= zone ============= */
.zone-selector {
  position: sticky;
  background: rgba(10,20,10,0.9);
  backdrop-filter: blur(12px);
  display:flex;;
  overflow-x:auto;
}
.zone-btn {
  padding:8px 16px;
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--text-muted); cursor:pointer;
  font-family:'Noto Sans TC',sans-serif; font-size:13px;
  white-space:nowrap; transition:all 0.2s;
}
.zone-btn:hover { color:var(--text-secondary); }
.zone-btn.active {
  color:var(--accent); border-bottom-color:var(--accent);
  text-shadow: 0 0 10px rgba(92,219,92,0.5);
}
/* ============= zone status =============*/
/* 區域基本樣式 */
.map-zone {
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

/* 正常：綠色系 */
.zone-ok {
    background: rgba(74, 222, 128, 0.15);
    border-color: #4ade80;
    color: #4ade80;
}

/* 偏乾：橘黃色系 */
.zone-dry {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fbbf24;
    animation: flash-dry 2s infinite;
}

/* 需施肥/灌溉中：紫色系 */
.zone-fertilize {
    background: rgba(168, 85, 247, 0.15);
    border-color: #a855f7;
    color: #d8b4fe;
}
/* 需通風：藍色系 */
.zone-air {
    background: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid #0ea5e9 !important;
    color: #7dd3fc;
}

/* 警示動畫 */
@keyframes flash-dry {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}
/* ============= MAIN LAYOUT ============= */
.main {
  position:relative; z-index:1;
  padding:20px 24px;
  max-width:1600px; margin:0 auto;
}

/* ============= ALERT BANNER ============= */
.alert-banner {
  background: linear-gradient(90deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05));
  border: 1px solid rgba(239,68,68,0.4);
  border-left: 3px solid #ef4444;
  border-radius:8px; padding:10px 16px;
  margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
  animation: alertSlide 0.4s ease-out;
}

@keyframes alertSlide {
  from { transform:translateY(-10px); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}

.alert-banner .alert-icon { font-size:18px; }
.alert-banner .alert-msg { font-size:13px; flex:1; }
.alert-banner .alert-time { font-size:11px; color:var(--text-muted); font-family:'Space Mono',monospace; }
.alert-close { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; }

/* ============= STAT CARDS ROW ============= */
.stat-row {
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:12px; margin-bottom:20px;
}

@media(max-width:1200px) { .stat-row { grid-template-columns: repeat(3,1fr); } }
@media(max-width:768px) { .stat-row { grid-template-columns: repeat(2,1fr); } }

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:12px; padding:16px;
  position:relative; overflow:hidden;
  transition: all 0.3s;
  cursor:default;
}

.stat-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition:opacity 0.3s;
}

.stat-card:hover { border-color:var(--border-bright); box-shadow:var(--glow); }
.stat-card:hover::before { opacity:1; }

.stat-card.warning { border-color:rgba(245,158,11,0.4); }
.stat-card.warning::before { background:linear-gradient(90deg,transparent,#f59e0b,transparent); opacity:0.7; }
.stat-card.danger { border-color:rgba(239,68,68,0.4); }
.stat-card.danger::before { background:linear-gradient(90deg,transparent,#ef4444,transparent); opacity:0.7; }

.stat-label {
  font-size:11px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:1px;
  margin-bottom:8px; display:flex; align-items:center; gap:6px;
}

.stat-value {
  font-family:'Rajdhani',sans-serif;
  font-size:28px; font-weight:700;
  color:var(--accent-bright); line-height:1;
  margin-bottom:4px;
}

.stat-unit { font-size:13px; color:var(--text-muted); }
.stat-trend { font-size:11px; color:var(--text-muted); margin-top:4px; }
.stat-trend.up { color:#4ade80; }
.stat-trend.down { color:#ef4444; }

/* ============= GRID LAYOUT ============= */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:16px; }
.grid-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:16px; margin-bottom:16px; }
.grid-2-1 { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:16px; }

@media(max-width:1024px) {
  .grid-2,.grid-3,.grid-1-2,.grid-2-1 { grid-template-columns:1fr; }
}

/* ============= CARD ============= */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:14px; overflow:hidden;
}

.card-header {
  padding:14px 18px;
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(255,255,255,0.02);
}

.card-title {
  font-size:14px; font-weight:500;
  display:flex; align-items:center; gap:8px;
  color:var(--text-secondary);
}

.card-title .icon { font-size:16px; }

.card-actions { display:flex; gap:8px; }

.card-body { padding:18px; }

/* ============= CAMERA / AI SECTION ============= */
.camera-feed {
  background: #050f05;
  border-radius:10px; overflow:hidden;
  aspect-ratio:16/9;
  position:relative;
  border: 1px solid var(--border);
}

.camera-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:12px; color:var(--text-muted);
}

.camera-placeholder .big-icon { font-size:48px; opacity:0.5; }

.camera-overlay {
  position:absolute; top:0; left:0; right:0; bottom:0;
  pointer-events:none;
}

/* Scan lines effect */
.camera-overlay::before {
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.1) 2px,
    rgba(0,0,0,0.1) 4px
  );
}

.cam-badge {
  position:absolute; top:10px; left:10px;
  background:rgba(0,0,0,0.7);
  border:1px solid var(--border);
  border-radius:4px; padding:3px 8px;
  font-size:11px; font-family:'Space Mono',monospace;
  display:flex; align-items:center; gap:6px;
}

.cam-badge.live { border-color:rgba(239,68,68,0.5); }
.cam-badge.live .dot { background:#ef4444; animation:pulse 1s infinite; width:6px; height:6px; border-radius:50%; }

.cam-info {
  position:absolute; bottom:10px; left:10px; right:10px;
  display:flex; justify-content:space-between;
  font-size:11px; font-family:'Space Mono',monospace; color:rgba(255,255,255,0.5);
}

/* AI detection box */
.detection-box {
  position:absolute;
  border:2px solid;
  border-radius:4px;
  pointer-events:none;
}

.detection-box.healthy { border-color:#4ade80; }
.detection-box.disease { border-color:#ef4444; animation:scanPulse 1s ease-in-out infinite; }
.detection-box.warning { border-color:#f59e0b; }

.detection-label {
  position:absolute; top:-20px; left:0;
  font-size:10px; padding:1px 6px;
  border-radius:3px; white-space:nowrap;
  font-family:'Space Mono',monospace;
}

.detection-box.healthy .detection-label { background:#4ade80; color:#000; }
.detection-box.disease .detection-label { background:#ef4444; color:#fff; }
.detection-box.warning .detection-label { background:#f59e0b; color:#000; }

@keyframes scanPulse {
  0%,100% { opacity:1; }
  50% { opacity:0.5; }
}

/* Camera controls */
.cam-controls {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;
}

/* ============= AI ANALYSIS PANEL ============= */
.ai-result {
  background: rgba(92,219,92,0.05);
  border: 1px solid var(--border);
  border-radius:10px; padding:14px;
  margin-top:12px;
}

.ai-result-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}

.ai-badge {
  background: linear-gradient(90deg, rgba(92,219,92,0.2), rgba(92,219,92,0.05));
  border: 1px solid var(--border-bright);
  border-radius:6px; padding:3px 10px;
  font-size:11px; font-family:'Space Mono',monospace;
  color:var(--accent);
}

.disease-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px;
  background: rgba(255,255,255,0.03);
  margin-bottom:6px;
  transition:background 0.2s;
}

.disease-item:hover { background:rgba(255,255,255,0.06); }

.disease-dot {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
}

.disease-name { font-size:13px; flex:1; }
.disease-confidence { font-size:12px; font-family:'Space Mono',monospace; }
.disease-action { font-size:11px; color:var(--text-muted); }

.confidence-bar {
  height:4px; border-radius:2px;
  background:rgba(255,255,255,0.1); overflow:hidden;
  margin-top:4px;
}

.confidence-fill {
  height:100%; border-radius:2px;
  transition:width 1s ease;
}

/* ============= WATER CONTROL ============= */
.zone-grid {
  display:grid; grid-template-columns: repeat(3,1fr); gap:10px;
}

.zone-card {
  background: var(--bg-card2);
  border:1px solid var(--border); border-radius:10px;
  padding:14px; text-align:center;
  cursor:pointer; transition:all 0.3s;
  position:relative; overflow:hidden;
}

.zone-card::before {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:0;
  background:linear-gradient(0deg,rgba(92,219,92,0.1),transparent);
  transition:height 0.3s;
}

.zone-card.active { border-color:var(--accent); box-shadow:var(--glow); }
.zone-card.active::before { height:100%; }
/* 待機文字顏色 */
.zone-status.off {
  color: var(--text-muted) !important;
}

/* 警告狀態樣式 (例如濕度太低時) */
.zone-card.warning {
  border: 1px solid #f59e0b !important;
  background: rgba(245, 158, 11, 0.05);
}
.zone-card.watering {
  border-color:var(--info);
  animation:wateringAnim 2s ease-in-out infinite;
}

@keyframes wateringAnim {
  0%,100% { box-shadow:0 0 10px rgba(56,189,248,0.3); }
  50% { box-shadow:0 0 25px rgba(56,189,248,0.6); }
}

.zone-icon { font-size:28px; margin-bottom:6px; }
.zone-name { font-size:12px; color:var(--text-secondary); margin-bottom:4px; }
.zone-status { font-size:11px; font-family:'Space Mono',monospace; }
.zone-status.on { color:var(--info); }
.zone-status.off { color:var(--text-muted); }

/* Irrigation schedule */
.schedule-item {
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:8px;
  background:rgba(255,255,255,0.03);
  margin-bottom:6px;
  border:1px solid var(--border);
}

.schedule-time {
  font-family:'Space Mono',monospace; font-size:13px;
  color:var(--accent); width:50px; flex-shrink:0;
}

.schedule-info { flex:1; font-size:12px; }
.schedule-days { font-size:11px; color:var(--text-muted); }

/* Toggle switch */
.toggle {
  position:relative; width:40px; height:22px; flex-shrink:0;
}

.toggle input { display:none; }

.toggle-track {
  position:absolute; inset:0;
  background:rgba(255,255,255,0.1);
  border-radius:11px;
  border:1px solid var(--border);
  cursor:pointer; transition:all 0.3s;
}

.toggle input:checked + .toggle-track {
  background:rgba(92,219,92,0.3);
  border-color:var(--accent);
}

.toggle-thumb {
  position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:var(--text-muted);
  transition:all 0.3s; pointer-events:none;
}

.toggle input:checked ~ .toggle-thumb {
  transform:translateX(18px);
  background:var(--accent);
  box-shadow:0 0 6px var(--accent);
}

/* Slider */
.slider-wrap { padding:4px 0; }
.slider-label { display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); margin-bottom:6px; }

input[type=range] {
  width:100%; height:6px; border-radius:3px;
  -webkit-appearance:none;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--pct,50%), rgba(255,255,255,0.1) var(--pct,100%));
  cursor:pointer; outline:none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
  border:2px solid var(--bg-deep); cursor:pointer;
}

/* ============= SOIL DATA ============= */
.soil-sensor {
  background:var(--bg-card2);
  border:1px solid var(--border); border-radius:10px;
  padding:14px; margin-bottom:10px;
}

.soil-sensor-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}

.sensor-title {
  font-size:13px; font-weight:500;
  color:var(--text-secondary);
  display:flex; align-items:center; gap:8px;
}

.sensor-badge {
  font-size:10px; padding:2px 7px; border-radius:3px;
  font-family:'Space Mono',monospace;
}

.sensor-badge.good { background:rgba(74,222,128,0.15); color:#4ade80; border:1px solid rgba(74,222,128,0.3); }
.sensor-badge.warning { background:rgba(245,158,11,0.15); color:#f59e0b; border:1px solid rgba(245,158,11,0.3); }

.soil-metrics {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}

.soil-metric {
  text-align:center; padding:8px;
  background:rgba(255,255,255,0.02); border-radius:6px;
}

.soil-metric-val {
  font-family:'Rajdhani',sans-serif;
  font-size:20px; font-weight:600;
  color:var(--accent-bright);
}

.soil-metric-lbl { font-size:10px; color:var(--text-muted); }

/* NPK Bar */
.npk-row { display:flex; gap:10px; margin-top:10px; }
.npk-item { flex:1; }
.npk-label { font-size:11px; color:var(--text-muted); margin-bottom:4px; display:flex; justify-content:space-between; }
.npk-bar { height:8px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; }
.npk-fill { height:100%; border-radius:4px; transition:width 1s ease; }
.npk-n { background:linear-gradient(90deg,#4ade80,#22c55e); }
.npk-p { background:linear-gradient(90deg,#38bdf8,#0ea5e9); }
.npk-k { background:linear-gradient(90deg,#a78bfa,#7c3aed); }

/* ============= CHARTS ============= */
.chart-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 25 / 9;
}

.chart-wrap canvas {
  width: 100%;
  height: 100%;
}
/* ============= ENVIRONMENT GRID ============= */
.env-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin-bottom:10px;
}

@media(max-width:900px) { .env-grid { grid-template-columns:repeat(2,1fr); } }

.env-item {
  background:var(--bg-card2);
  border:1px solid var(--border); border-radius:8px;
  padding:12px; display:flex; align-items:center; gap:10px;
}

.env-icon { font-size:22px; width:36px; text-align:center; flex-shrink:0; }
.env-info { flex:1; min-width:0; }
.env-val { font-family:'Rajdhani',sans-serif; font-size:18px; font-weight:600; color:var(--text-primary); }
.env-lbl { font-size:11px; color:var(--text-muted); }

/* ============= HISTORY PAGE ============= */
.history-filters {
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;
}

.filter-btn {
  padding:6px 14px; border-radius:6px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border); color:var(--text-muted);
  cursor:pointer; font-size:12px; font-family:'Space Mono',monospace;
  transition:all 0.2s;
}

.filter-btn:hover, .filter-btn.active {
  background:rgba(92,219,92,0.1); border-color:var(--accent); color:var(--accent);
}

.history-table {
  width:100%; border-collapse:collapse; font-size:12px;
}

.history-table th {
  text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--border);
  color:var(--text-muted); font-weight:500;
  font-family:'Space Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:0.5px;
}

.history-table td {
  padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.04);
  color:var(--text-secondary); vertical-align:middle;
}

.history-table tr:hover td { background:rgba(255,255,255,0.02); }

.event-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:3px; font-size:11px;
  font-family:'Space Mono',monospace;
}

.event-badge.water { background:rgba(56,189,248,0.15); color:#38bdf8; }
.event-badge.fertilize { background:rgba(167,139,250,0.15); color:#a78bfa; }
.event-badge.disease { background:rgba(239,68,68,0.15); color:#ef4444; }
.event-badge.system { background:rgba(92,219,92,0.15); color:#4ade80; }
.event-badge.alert { background:rgba(245,158,11,0.15); color:#f59e0b; }

/* ============= BUTTONS ============= */
.btn {
  padding:8px 16px; border-radius:8px;
  border:1px solid; cursor:pointer;
  font-size:13px; font-family:'Noto Sans TC',sans-serif;
  transition:all 0.2s; display:inline-flex;
  align-items:center; gap:6px; font-weight:500;
}

.btn-primary {
  background:rgba(92,219,92,0.15); border-color:var(--accent);
  color:var(--accent);
}

.btn-primary:hover {
  background:rgba(92,219,92,0.25);
  box-shadow:var(--glow);
}

.btn-danger {
  background:rgba(239,68,68,0.15); border-color:#ef4444;
  color:#ef4444;
}

.btn-danger:hover { background:rgba(239,68,68,0.25); box-shadow:0 0 15px rgba(239,68,68,0.3); }

.btn-info {
  background:rgba(56,189,248,0.15); border-color:#38bdf8;
  color:#38bdf8;
}

.btn-info:hover { background:rgba(56,189,248,0.25); box-shadow:0 0 15px rgba(56,189,248,0.3); }

.btn-warning {
  background:rgba(245,158,11,0.15); border-color:#f59e0b;
  color:#f59e0b;
}

.btn-sm { padding:5px 10px; font-size:11px; border-radius:6px; }

.btn-ghost {
  background:none; border-color:var(--border); color:var(--text-muted);
}

.btn-ghost:hover { border-color:var(--text-muted); color:var(--text-secondary); }

/* ============= SECURITY MODAL ============= */
.modal-backdrop {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.8); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
}

.modal-backdrop.open { display:flex; }

.modal {
  background:var(--bg-card);
  border:1px solid var(--border-bright); border-radius:16px;
  padding:28px; width:440px; max-width:95vw;
  animation:modalIn 0.3s ease-out;
  position:relative;
}

@keyframes modalIn {
  from { transform:scale(0.9) translateY(20px); opacity:0; }
  to { transform:scale(1) translateY(0); opacity:1; }
}

.modal-title { font-size:18px; font-weight:500; margin-bottom:6px; }
.modal-sub { font-size:13px; color:var(--text-muted); margin-bottom:20px; }

.input-group { margin-bottom:14px; }
.input-label { font-size:12px; color:var(--text-muted); margin-bottom:6px; display:block; }

.input-field {
  width:100%; padding:10px 14px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border); border-radius:8px;
  color:var(--text-primary); font-size:14px;
  font-family:'Noto Sans TC',sans-serif;
  outline:none; transition:all 0.2s;
}

.input-field:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(92,219,92,0.1); }

/* ============= NOTIFICATION PANEL ============= */
.notif-panel {
  position:fixed; top:120px; right:24px; z-index:150;
  width:320px; max-height:60vh; overflow-y:auto;
  display:none; flex-direction:column; gap:8px;
}

.notif-panel.open { display:flex; }

.notif-item {
  background:var(--bg-card);
  border:1px solid var(--border); border-radius:10px;
  padding:12px; animation:notifSlide 0.3s ease-out;
  position:relative; overflow:hidden;
}

@keyframes notifSlide {
  from { transform:translateX(30px); opacity:0; }
  to { transform:translateX(0); opacity:1; }
}

.notif-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
}

.notif-item.info::before { background:var(--info); }
.notif-item.warning::before { background:var(--warning); }
.notif-item.danger::before { background:var(--danger); }
.notif-item.success::before { background:var(--accent); }

.notif-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.notif-icon { font-size:14px; }
.notif-title { font-size:13px; font-weight:500; flex:1; }
.notif-time { font-size:10px; color:var(--text-muted); font-family:'Space Mono',monospace; }
.notif-body { font-size:12px; color:var(--text-muted); padding-left:22px; }

/* ============= GAUGE ============= */
.gauge-wrap { display:flex; justify-content:center; padding:10px 0; }

.gauge {
  width:120px; height:70px;
  position:relative;
}

.gauge svg { width:100%; height:auto; }

/* ============= MISC ============= */
.page { display:none; }
.page.active { display:block; }

.divider {
  height:1px; background:var(--border);
  margin:16px 0;
}

.tag {
  display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:11px; font-family:'Space Mono',monospace;
}

.loading-bar {
  height:2px; border-radius:1px;
  background:rgba(92,219,92,0.1); overflow:hidden;
  margin-bottom:16px;
}

.loading-fill {
  height:100%; border-radius:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:loadingAnim 2s ease-in-out infinite;
  width:60%;
}

@keyframes loadingAnim {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(200%); }
}

.co2-gauge {
  text-align:center; padding:10px 0;
}

.co2-val {
  font-family:'Rajdhani',sans-serif;
  font-size:42px; font-weight:700; line-height:1;
  color:var(--accent-bright);
}

.co2-lbl { font-size:13px; color:var(--text-muted); }

.wind-compass {
  width:80px; height:80px; margin:0 auto;
  position:relative;
}

.compass-ring {
  width:100%; height:100%; border-radius:50%;
  border:2px solid var(--border);
  background:rgba(0,0,0,0.3);
  position:relative;
  display:flex; align-items:center; justify-content:center;
}

.compass-needle {
  position:absolute;
  width:3px; height:35px;
  background:linear-gradient(0deg,#ef4444 50%,var(--text-muted) 50%);
  border-radius:2px;
  transform-origin:bottom center;
  bottom:50%; left:calc(50% - 1.5px);
  transition:transform 0.5s ease;
}

.compass-n { position:absolute; top:2px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--text-muted); }

/* Security overlay */
.security-overlay {
  position:fixed; inset:0; z-index:300;
  background:#050f05;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:24px;
}

.security-logo { font-size:64px; animation:logoGlow 2s infinite; }
.security-title { font-family:'Rajdhani',sans-serif; font-size:32px; font-weight:700; color:var(--accent-bright); letter-spacing:4px; }
.security-sub { font-size:14px; color:var(--text-muted); }

.pin-display {
  display:flex; gap:12px; justify-content:center; margin:8px 0;
}

.pin-dot {
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--border-bright);
  background:transparent; transition:all 0.2s;
}

.pin-dot.filled { background:var(--accent); border-color:var(--accent); box-shadow:0 0 10px var(--accent); }

.pin-pad {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; width:240px;
}

.pin-key {
  height:56px; border-radius:10px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  color:var(--text-primary); font-size:22px;
  font-family:'Rajdhani',sans-serif; font-weight:600;
  cursor:pointer; transition:all 0.15s;
}

.pin-key:hover { background:rgba(92,219,92,0.15); border-color:var(--accent); }
.pin-key:active { transform:scale(0.95); }

.security-error { color:#ef4444; font-size:13px; height:18px; text-align:center; }

/* Auto-water status */
.auto-status {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:8px;
  background:rgba(56,189,248,0.08);
  border:1px solid rgba(56,189,248,0.2);
  margin-bottom:10px;
}

.auto-icon { font-size:20px; }
.auto-info { flex:1; }
.auto-title { font-size:13px; font-weight:500; }
.auto-detail { font-size:11px; color:var(--text-muted); }

/* Fertilize panel */
.fert-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 一列三個 */
  gap: 10px;
}
.fert-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px;
  background:rgba(255,255,255,0.02); margin-bottom:8px;
}

.fert-color { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.fert-name { font-size:13px; flex:1; }
.fert-amount { font-family:'Space Mono',monospace; font-size:12px; color:var(--text-muted); }

/* ============= SCROLL BAR ============= */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb { background:var(--green-2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--green-3); }

/* Animated cucumber vine decoration */
.vine-decoration {
  position:fixed; right:0; top:0; bottom:0;
  width:60px; pointer-events:none; z-index:0; opacity:0.08;
  overflow:hidden;
}

.vine-decoration svg { width:100%; height:100%; }

/* Toast */
.toast-container {
  position:fixed; bottom:24px; right:24px; z-index:500;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}

.toast {
  background:var(--bg-card);
  border:1px solid var(--border-bright); border-radius:10px;
  padding:12px 16px; min-width:260px;
  display:flex; align-items:center; gap:10px;
  animation:toastIn 0.3s ease-out;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

@keyframes toastIn {
  from { transform:translateX(30px); opacity:0; }
  to { transform:translateX(0); opacity:1; }
}

@keyframes toastOut {
  from { transform:translateX(0); opacity:1; }
  to { transform:translateX(30px); opacity:0; }
}

.toast-icon { font-size:18px; flex-shrink:0; }
.toast-msg { font-size:13px; flex:1; }

/* Map/zone visualization */
.farm-map {
  background:#050f05;
  border-radius:10px; padding:16px;
  border:1px solid var(--border);
  position:relative;
  min-height:200px;
}

.map-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; height:180px;
}

.map-zone {
  border-radius:6px; display:flex;
  align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
  font-size:11px; cursor:pointer;
  transition:all 0.2s; position:relative;
  overflow:hidden;
}

.map-zone::after {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    45deg,
    transparent, transparent 4px,
    rgba(255,255,255,0.02) 4px, rgba(255,255,255,0.02) 8px
  );
}

.map-zone.zone-dry {
  background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.3);
  color:#f59e0b;
}

.map-zone.zone-ok {
  background:rgba(74,222,128,0.1); border:1px solid rgba(74,222,128,0.2);
  color:#4ade80;
}

.map-zone.zone-wet {
  background:rgba(56,189,248,0.1); border:1px solid rgba(56,189,248,0.2);
  color:#38bdf8;
}

.map-zone.zone-watering {
  background:rgba(56,189,248,0.2); border:2px solid #38bdf8;
  color:#38bdf8; animation:wateringAnim 1.5s infinite;
}

.zone-moisture-val {
  font-family:'Rajdhani',sans-serif; font-size:20px; font-weight:700;
}

/* ============= RESPONSIVE ============= */
@media(max-width:768px) {
  .main { padding:12px; }
  .stat-row { grid-template-columns:repeat(3,1fr); }
  .zone-grid { grid-template-columns:repeat(2,1fr); }
  .env-grid { grid-template-columns:repeat(2,1fr); }
  .header { padding:0 12px; }
  .logo-sub { display:none; }
}

        .chat-body {
            font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
            background-color: #131314;
            color: #e3e3e3;
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 70vh;
        }
        .chat-header {
            padding: 15px 20px;
            font-size: 20px;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .model-input {
            background: #1e1f20;
            color: #e3e3e3;
            border: 1px solid #444;
            padding: 5px 10px;
            border-radius: 8px;
            outline: none;
            font-size: 14px;
        }
        #chat-box {
            flex: 1;
            overflow-y: auto;
            padding: 20px 15%;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .message-container {
            display: flex;
            flex-direction: column;
            max-width: 100%;
        }
        .message {
            max-width: 80%;
            padding: 12px 18px;
            border-radius: 12px;
            line-height: 1.6;
            font-size: 16px;
            word-wrap: break-word;
            white-space: pre-wrap;
        }
        .user-container {
            align-items: flex-end;
        }
        .user-msg {
            background-color: #303134;
            color: #fff;
            border-bottom-right-radius: 4px;
        }
        .bot-container {
            align-items: flex-start;
        }
        .bot-msg {
            background-color: transparent;
            color: #e3e3e3;
        }
        #input-area {
            padding: 20px 15%;
            background-color: #131314;
            display: flex;
            justify-content: center;
        }
        .input-wrapper {
            display: flex;
            width: 100%;
            background-color: #1e1f20;
            border-radius: 24px;
            padding: 8px 16px;
            border: 1px solid #444;
        }
        .input-wrapper:focus-within {
            background-color: #303134;
            border-color: #555;
        }
        input[type="text"] {
            flex: 1;
            background: transparent;
            border: none;
            color: white;
            font-size: 16px;
            outline: none;
            padding: 10px;
        }
        .chat-btn {
            background: transparent;
            border: none;
            color: #a8c7fa;
            font-weight: bold;
            cursor: pointer;
            font-size: 16px;
            padding: 10px 15px;
            border-radius: 50%;
            transition: background 0.2s;
        }
        .chat-btn:hover {
            background: #303134;
        }
        .loading {
            font-style: italic;
            color: #888;
        }