*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0e1a;--surface: #111827;--panel: #1a1f2e;--border: #1e293b;--text: #e2e8f0;--text-muted: #64748b;--green: #22c55e;--green-glow: rgba(34, 197, 94, .15);--amber: #f59e0b;--amber-glow: rgba(245, 158, 11, .15);--red: #ef4444;--red-glow: rgba(239, 68, 68, .15);--cyan: #06b6d4;--purple: #8b5cf6}body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;min-height:100dvh}.app{max-width:480px;margin:0 auto;padding:0 16px 80px;min-height:100dvh}@media(min-width:768px){.app{max-width:960px;padding:0 24px 40px}}.header{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:20px;position:sticky;top:0;background:var(--bg);z-index:50}.header-logo{display:flex;align-items:center;gap:12px}.brand-logo{height:84px;width:auto;object-fit:contain}.header-dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse-dot 2s infinite}.header-dot.offline{background:var(--red);box-shadow:0 0 12px var(--red)}.header-dot.pulse{background:var(--cyan);box-shadow:0 0 20px var(--cyan);animation:data-pulse .5s ease}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}@keyframes data-pulse{0%{transform:scale(1)}50%{transform:scale(1.8);box-shadow:0 0 24px var(--cyan)}to{transform:scale(1)}}.header-right{display:flex;align-items:center;gap:10px}.live-badge{font-size:10px;font-family:Space Grotesk,monospace;color:var(--cyan);background:#06b6d41f;border:1px solid rgba(6,182,212,.25);padding:3px 10px;border-radius:12px;animation:badge-in .3s ease}@keyframes badge-in{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.header-title{font-family:Space Grotesk,monospace;font-weight:700;font-size:16px;letter-spacing:.05em}.header-mode{font-size:11px;font-family:Space Grotesk,monospace;color:var(--cyan);background:#06b6d41a;border-radius:20px;border:1px solid rgba(6,182,212,.2)}.skeleton{background:#111827;background-image:linear-gradient(90deg,#fff0 0,#ffffff08 20%,#ffffff0f 60%,#fff0);background-size:500px 100%;animation:shimmer 1.5s infinite linear;border-radius:12px}@keyframes shimmer{0%{background-position:-500px 0}to{background-position:500px 0}}.skeleton-card{padding:20px;border:1px solid var(--border);margin-bottom:20px;border-radius:16px;position:relative;overflow:hidden}.skeleton-line{height:12px;margin-bottom:12px;border-radius:6px}.skeleton-line.title{height:16px;width:40%;margin-bottom:20px}.skeleton-box{width:100%;border-radius:12px}.alert-banner{border-radius:16px;padding:20px;margin-bottom:20px;animation:slide-down .5s ease-out;position:relative;overflow:hidden}.alert-banner:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px}.alert-banner.critical{background:var(--red-glow);border:1px solid rgba(239,68,68,.3)}.alert-banner.critical:before{background:var(--red)}.alert-banner.high{background:#f973161a;border:1px solid rgba(249,115,22,.3)}.alert-banner.high:before{background:#f97316}.alert-banner.medium{background:var(--amber-glow);border:1px solid rgba(245,158,11,.3)}.alert-banner.medium:before{background:var(--amber)}.alert-banner.low{background:var(--green-glow);border:1px solid rgba(34,197,94,.3)}.alert-banner.low:before{background:var(--green)}.alert-title{font-weight:700;font-size:18px;margin-bottom:6px}.alert-message{font-size:14px;color:var(--text-muted);line-height:1.5;margin-bottom:12px}.alert-meta{display:flex;gap:12px;flex-wrap:wrap}.alert-tag{font-size:11px;font-family:Space Grotesk,monospace;padding:3px 8px;border-radius:6px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08)}@keyframes slide-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.section{margin-bottom:24px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title{font-family:Space Grotesk,monospace;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}@media(min-width:768px){.field-grid{grid-template-columns:repeat(6,1fr)}}.field-cell{border-radius:14px;padding:14px 10px;text-align:center;border:1px solid var(--border);transition:all .3s;cursor:pointer}.field-cell:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.field-cell.healthy{background:var(--green-glow);border-color:#22c55e40}.field-cell.watch{background:var(--amber-glow);border-color:#f59e0b40}.field-cell.stress{background:var(--red-glow);border-color:#ef444440}.field-id{font-family:Space Grotesk,monospace;font-weight:700;font-size:16px;margin-bottom:2px}.field-name{font-size:10px;color:var(--text-muted);margin-bottom:8px}.field-ndvi{font-family:Space Grotesk,monospace;font-size:20px;font-weight:700}.field-cell.healthy .field-ndvi{color:var(--green)}.field-cell.watch .field-ndvi{color:var(--amber)}.field-cell.stress .field-ndvi{color:var(--red)}.field-label{font-size:10px;color:var(--text-muted);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}.map-container{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);margin-bottom:10px}.mapbox-map{width:100%;height:300px}@media(min-width:768px){.mapbox-map{height:420px}}.map-legend{position:absolute;bottom:12px;left:12px;display:flex;gap:12px;background:#0a0e1ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.1);z-index:10}.legend-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.legend-dot{width:8px;height:8px;border-radius:50%}.zone-chips{display:flex;gap:6px;flex-wrap:wrap}.zone-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:all .2s;flex:1;min-width:55px;font-family:inherit;color:var(--text)}.zone-chip:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000004d}.zone-chip.healthy{border-color:#22c55e4d}.zone-chip.watch{border-color:#f59e0b4d;background:var(--amber-glow)}.zone-chip.stress{border-color:#ef44444d;background:var(--red-glow)}.zone-chip-id{font-family:Space Grotesk,monospace;font-weight:700;font-size:13px}.zone-chip-ndvi{font-family:Space Grotesk,monospace;font-size:11px;color:var(--text-muted)}.zone-chip.healthy .zone-chip-ndvi{color:var(--green)}.zone-chip.watch .zone-chip-ndvi{color:var(--amber)}.zone-chip.stress .zone-chip-ndvi{color:var(--red)}.mapboxgl-popup-content{background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:12px!important;padding:12px!important;box-shadow:0 8px 32px #00000080!important}.mapboxgl-popup-tip{border-top-color:var(--panel)!important}.mapboxgl-popup-close-button{color:var(--text-muted)!important;font-size:18px!important;padding:4px 8px!important}.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:12px}.recommendation{background:linear-gradient(135deg,#22c55e14,#06b6d414);border:1px solid rgba(34,197,94,.2);border-radius:16px;padding:20px;margin-bottom:20px}.rec-icon{font-size:28px;margin-bottom:8px}.rec-label{font-family:Space Grotesk,monospace;font-size:11px;color:var(--green);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}.rec-text{font-size:16px;font-weight:600;line-height:1.5}.chart-wrap{height:200px;position:relative}@media(min-width:768px){.chart-wrap{height:280px}}.sys-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media(min-width:768px){.sys-grid{grid-template-columns:repeat(4,1fr)}}.sys-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}.sys-value{font-family:Space Grotesk,monospace;font-size:18px;font-weight:700;color:var(--cyan)}.sys-label{font-size:10px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}.history-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}.history-item:last-child{border-bottom:none}.history-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0}.history-dot.critical,.history-dot.high{background:var(--red)}.history-dot.medium{background:var(--amber)}.history-dot.low{background:var(--green)}.history-title{font-size:14px;font-weight:600;margin-bottom:2px}.history-time{font-size:11px;color:var(--text-muted);font-family:Space Grotesk,monospace}.loading{display:flex;align-items:center;justify-content:center;min-height:60vh;flex-direction:column;gap:16px}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.weather-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 16px}@media(min-width:768px){.weather-stats{grid-template-columns:repeat(6,1fr)}}.weather-stat{display:flex;flex-direction:column;gap:2px}.weather-stat-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.weather-stat-value{font-family:Space Grotesk,monospace;font-size:13px;font-weight:600}.weather-warning{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#f59e0b14;border-left:3px solid var(--amber);border-radius:0 10px 10px 0;margin-bottom:6px;font-size:13px}