:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg: #080b11;--panel-bg: rgba(13, 20, 35, .65);--panel-border: rgba(255, 255, 255, .08);--panel-border-hover: rgba(16, 185, 129, .3);--text-main: #f3f4f6;--text-muted: #9ca3af;--accent: #10b981;--accent-blue: #3b82f6;--accent-yellow: #f59e0b;--danger: #ef4444;--glow-green: rgba(16, 185, 129, .15);--glow-blue: rgba(59, 130, 246, .15);--glow-red: rgba(239, 68, 68, .15)}*{box-sizing:border-box}body{background:radial-gradient(circle at 10% 20%,#0d1423,#080b11 90%);background-attachment:fixed;color:var(--text-main);font-family:Outfit,Inter,-apple-system,sans-serif;margin:0;padding:0;min-height:100vh}body:before{content:"";position:fixed;top:15%;left:10%;width:400px;height:400px;background:radial-gradient(circle,rgba(16,185,129,.08) 0%,transparent 70%);pointer-events:none;z-index:0}body:after{content:"";position:fixed;bottom:10%;right:15%;width:450px;height:450px;background:radial-gradient(circle,rgba(59,130,246,.06) 0%,transparent 75%);pointer-events:none;z-index:0}.app-wrapper{position:relative;z-index:1;min-height:100vh;padding:30px 20px;display:flex;justify-content:center}.app-container{max-width:1440px;width:100%;margin:0 auto}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.05);flex-wrap:wrap;gap:20px}.app-header-left{display:flex;align-items:center;gap:15px}.app-logo-icon{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-blue) 100%);width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #10b98166}.app-title{margin:0;font-size:32px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#ffffff 30%,#a7f3d0 70%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent}.app-subtitle{margin:4px 0 0;color:var(--text-muted);font-size:14px;font-weight:400}.backend-status-card{display:flex;align-items:center;gap:10px;background:var(--panel-bg);border:1px solid var(--panel-border);padding:8px 16px;border-radius:30px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:13px;box-shadow:0 4px 12px #0003}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;position:relative}.status-dot.online{background-color:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulseGreen 2s infinite}.status-dot.offline{background-color:var(--danger);box-shadow:0 0 10px var(--danger);animation:pulseRed 2s infinite}@keyframes pulseGreen{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1);box-shadow:0 0 0 8px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}@keyframes pulseRed{0%{transform:scale(.95);box-shadow:0 0 #ef4444b3}70%{transform:scale(1);box-shadow:0 0 0 8px #ef444400}to{transform:scale(.95);box-shadow:0 0 #ef444400}}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;padding:20px;display:flex;align-items:center;gap:16px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:all .3s cubic-bezier(.4,0,.2,1)}.stat-card:hover{transform:translateY(-3px);border-color:#ffffff26;box-shadow:0 8px 24px #0000004d}.stat-icon-wrapper{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center}.stat-icon-wrapper.blue{background:#3b82f626;color:var(--accent-blue)}.stat-icon-wrapper.green{background:#10b98126;color:var(--accent)}.stat-icon-wrapper.red{background:#ef444426;color:var(--danger)}.stat-info{display:flex;flex-direction:column}.stat-title{color:var(--text-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px}.stat-value{color:var(--text-main);font-size:26px;font-weight:800;margin-top:4px}.stat-sub{font-size:11px;color:var(--text-muted);margin-top:2px}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:30px;align-items:start}.glass-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:20px;padding:24px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 10px 30px #0000004d;transition:border-color .3s ease,box-shadow .3s ease;overflow:hidden;position:relative}.glass-panel:hover{border-color:#ffffff1f;box-shadow:0 12px 36px #0006}.panel-title{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;margin:0 0 20px;color:#fff}.panel-title svg{color:var(--accent)}.dropzone{border:2px dashed rgba(255,255,255,.15);border-radius:12px;padding:30px 20px;text-align:center;background:#ffffff05;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative}.dropzone:hover,.dropzone.active{border-color:var(--accent);background:#10b9810d;box-shadow:0 0 20px #10b9811a inset}.dropzone-icon{color:var(--text-muted);transition:color .3s ease,transform .3s ease}.dropzone:hover .dropzone-icon{color:var(--accent);transform:translateY(-3px)}.dropzone-text{font-size:14px;color:var(--text-main);font-weight:500}.slider-container{position:relative;width:100%;height:250px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);-webkit-user-select:none;user-select:none;background:#06090e}.slider-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.slider-img.underlay{z-index:1}.slider-img.overlay{z-index:2}.slider-handle{position:absolute;top:0;bottom:0;width:4px;background-color:var(--accent);z-index:3;cursor:ew-resize;box-shadow:0 0 10px #10b981cc}.slider-handle-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;background-color:#0d1423;border:2px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #00000080;pointer-events:none}.slider-handle-button svg{color:var(--accent)}.spectral-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:15px}.spectral-card{background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:10px;padding:12px 8px;text-align:center;position:relative;transition:all .2s ease}.spectral-card:hover{background:#ffffff0a;transform:translateY(-1px)}.spectral-title{font-size:10px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.spectral-value{font-size:16px;font-weight:800;margin-top:4px;color:#fff}.spectral-bar-bg{background:#ffffff0d;height:4px;border-radius:4px;margin-top:8px;overflow:hidden}.spectral-bar-fill{height:100%;border-radius:4px}.gps-panel{background:#3b82f60a;border:1px solid rgba(59,130,246,.12);border-radius:12px;padding:12px 16px;margin-top:15px;display:flex;align-items:center;justify-content:space-between;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.gps-left{display:flex;align-items:center;gap:10px}.gps-icon-indicator{color:var(--accent-blue);animation:bounceGps 2s infinite}@keyframes bounceGps{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.gps-coords-display{font-size:13px;font-weight:600;color:var(--text-main)}.dropzone-subtext{font-size:12px;color:var(--text-muted)}.upload-preview-container{position:relative;width:100%;max-height:250px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}.upload-preview-img{width:100%;height:100%;max-height:250px;object-fit:cover;display:block}.upload-preview-overlay{position:absolute;top:10px;right:10px}.btn{background:linear-gradient(135deg,var(--accent) 0%,#059669 100%);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 12px #10b98133;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn:hover:not(:disabled){transform:translateY(-1.5px);box-shadow:0 6px 16px #10b9814d;filter:brightness(1.1)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn.btn-secondary{background:#ffffff12;color:var(--text-main);border:1px solid rgba(255,255,255,.05);box-shadow:none}.btn.btn-secondary:hover:not(:disabled){background:#ffffff1f;border-color:#ffffff26;box-shadow:0 4px 12px #00000026}.btn.btn-danger{background:linear-gradient(135deg,var(--danger) 0%,#b91c1c 100%);box-shadow:0 4px 12px #ef444440}.btn.btn-danger:hover:not(:disabled){box-shadow:0 6px 16px #ef444459}.btn-icon-only{width:32px;height:32px;padding:0;border-radius:8px}.skeleton{background:linear-gradient(90deg,#ffffff08 25%,#ffffff14,#ffffff08 75%);background-size:200% 100%;animation:loadingSkeleton 1.5s infinite;border-radius:8px}.skeleton-text{height:18px;margin-bottom:10px}.skeleton-img{width:100%;height:200px}@keyframes loadingSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.prediction-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-weight:700;font-size:13px;text-transform:uppercase}.prediction-badge.deforested{background:#ef444426;color:var(--danger);border:1px solid rgba(239,68,68,.25)}.prediction-badge.healthy{background:#10b98126;color:var(--accent);border:1px solid rgba(16,185,129,.25)}.progress-container{margin:15px 0}.progress-label-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-bottom:6px;font-weight:600}.progress-bar-bg{background:#ffffff0d;height:8px;border-radius:10px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:10px;transition:width .8s cubic-bezier(.4,0,.2,1)}.progress-bar-fill.deforested{background:linear-gradient(90deg,var(--danger),#b91c1c);box-shadow:0 0 10px #ef444480}.progress-bar-fill.healthy{background:linear-gradient(90deg,var(--accent),#059669);box-shadow:0 0 10px #10b98180}.metrics-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.metric-mini-card{background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:12px;padding:16px;text-align:center;transition:background .2s ease}.metric-mini-card:hover{background:#ffffff0a}.metric-mini-title{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.metric-mini-value{font-size:22px;font-weight:800;color:#fff;margin-top:6px}.metric-mini-value.green-text{color:var(--accent)}.result-display-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.result-image-wrapper{background:#06090e;border:1px solid rgba(255,255,255,.05);border-radius:12px;overflow:hidden;height:220px;display:flex;align-items:center;justify-content:center;position:relative}.result-image-wrapper img{width:100%;height:100%;object-fit:cover;display:block}.image-label-tag{position:absolute;top:8px;left:8px;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-size:10px;padding:4px 8px;border-radius:4px;font-weight:600}.history-list{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto;padding-right:4px}.history-list::-webkit-scrollbar,.fancy-table-container::-webkit-scrollbar{width:6px;height:6px}.history-list::-webkit-scrollbar-track,.fancy-table-container::-webkit-scrollbar-track{background:transparent}.history-list::-webkit-scrollbar-thumb,.fancy-table-container::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.history-list::-webkit-scrollbar-thumb:hover,.fancy-table-container::-webkit-scrollbar-thumb:hover{background:#fff3}.history-item{background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:12px;padding:12px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:space-between}.history-item:hover{background:#ffffff0d;border-color:#ffffff14;transform:translate(2px)}.history-item-left{display:flex;flex-direction:column;gap:4px}.history-item-name{font-size:13px;font-weight:600;color:var(--text-main);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item-meta{font-size:10px;color:var(--text-muted)}.history-item-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.history-dot-indicator{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:6px}.history-dot-indicator.deforested{background-color:var(--danger)}.history-dot-indicator.healthy{background-color:var(--accent)}.fancy-table-container{overflow-x:auto;border-radius:12px;border:1px solid rgba(255,255,255,.05);margin-top:15px}.fancy-table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}.fancy-table th{background:#ffffff08;color:var(--text-muted);font-weight:600;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);text-transform:uppercase;font-size:11px;letter-spacing:.5px}.fancy-table td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.03);color:var(--text-main)}.fancy-table tr:last-child td{border-bottom:none}.fancy-table tr:hover td{background:#ffffff03}.error-banner{background:#ef44441a;border:1px solid rgba(239,68,68,.2);color:var(--danger);border-radius:10px;padding:12px 16px;font-size:13px;display:flex;align-items:center;gap:10px;margin:15px 0}@media print{body{background:#fff;color:#000}.app-header,.btn,.dropzone,.history-panel{display:none!important}.glass-panel{background:none!important;border:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}.app-footer{margin-top:60px;padding:30px 20px;border-top:1px solid rgba(255,255,255,.05);text-align:center;font-size:12px;color:var(--text-muted);display:flex;flex-direction:column;gap:6px}.app-footer-brand{font-weight:700;color:var(--text-main)}@media(max-width:1100px){.dashboard-grid{grid-template-columns:1fr}}@media(max-width:768px){.app-header{flex-direction:column;align-items:flex-start}.backend-status-card{width:100%;justify-content:center}.result-display-grid,.metrics-row{grid-template-columns:1fr}}