:root{--bg:rgba(12,12,18,.96);--acc:#fbbf24;--pry:#3b82f6;--danger:#ef4444;--success:#10b981;--txt:#fff;--road:#94a3b8;--bio:#ec4899;--pdr:#06b6d4;--hydro:#0ea5e9;--sym:#a3e635}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;display:flex;height:100vh;background:#000;overflow:hidden;color:var(--txt)}
#map{flex-grow:1;height:100%;z-index:0;background:#050505}
#sidebar{position:absolute;top:10px;left:10px;bottom:10px;width:370px;background:var(--bg);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px;overflow-y:auto;z-index:1000;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 50px rgba(0,0,0,.9)}
#sidebar::-webkit-scrollbar{width:3px}#sidebar::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}
h2{margin:0;font-size:1.3rem;font-weight:800;color:var(--acc);letter-spacing:1.5px;text-transform:uppercase}
.subtitle{font-size:.7rem;color:#64748b;margin-bottom:8px;border-left:3px solid var(--sym);padding-left:8px;line-height:1.4}
.card{background:rgba(255,255,255,.025);padding:11px;border-radius:10px;border:1px solid rgba(255,255,255,.05)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
label{display:block;font-size:.68rem;color:#94a3b8;margin-bottom:3px;font-weight:700;letter-spacing:.3px}
input[type="number"],input[type="text"]{width:100%;background:rgba(0,0,0,.6);border:1px solid #1e293b;color:#e2e8f0;padding:7px 8px;border-radius:6px;font-family:'Cascadia Code',monospace;font-size:.85rem}
input:focus{border-color:var(--pry);outline:none;box-shadow:0 0 0 2px rgba(59,130,246,.15)}
select{width:100%;background:rgba(0,0,0,.6);border:1px solid #1e293b;color:#e2e8f0;padding:7px 8px;border-radius:6px;font-family:monospace;font-size:.82rem}
.btn{width:100%;padding:9px;border:none;border-radius:8px;font-weight:700;cursor:pointer;color:#fff;font-size:.78rem;transition:all .2s;letter-spacing:.3px}
.btn:hover{filter:brightness(1.15);transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.btn-pry{background:var(--pry)}.btn-acc{background:var(--acc);color:#000}
.btn-dang{background:var(--danger)}.btn-dark{background:#1e293b}
.btn-bio{background:linear-gradient(135deg,#ec4899,#db2777);color:#fff;box-shadow:0 4px 15px rgba(236,72,153,.25)}
.btn-gold{background:linear-gradient(135deg,#fbbf24,#d97706);color:#000}
.btn-sym{background:linear-gradient(135deg,#a3e635 0%,#65a30d 50%,#3f6212 100%);color:#fff;box-shadow:0 4px 20px rgba(163,230,53,.3);font-size:.82rem;padding:11px}
.btn-scan{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;box-shadow:0 4px 15px rgba(14,165,233,.25)}
.btn-scan.scanning{background:linear-gradient(135deg,#f59e0b,#d97706);animation:pulse-s 1s ease-in-out infinite}
@keyframes pulse-s{0%,100%{opacity:1}50%{opacity:.6}}
.badge{background:#064e3b;color:#34d399;padding:7px;border-radius:6px;text-align:center;font-size:.72rem;font-weight:bold;border:1px solid #059669;display:none}
.badge.active{display:block;animation:flash .5s}
@keyframes flash{from{background:#059669}to{background:#064e3b}}
.chk-label{display:flex;justify-content:space-between;align-items:center;padding:5px 0;cursor:pointer;user-select:none}
.chk-label:hover{opacity:.8}.chk-label input{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}
.lbl-tag{background:rgba(0,0,0,.85);border:1px solid var(--pry);color:var(--pry);padding:1px 4px;border-radius:4px;font-size:9px;font-weight:bold;white-space:nowrap;text-align:center}
.lbl-area{background:rgba(0,0,0,.7);border:1px solid #38bdf8;color:#38bdf8;padding:2px 5px;border-radius:4px;font-size:10px;font-weight:bold}
.tt-custom{background:rgba(0,0,0,.92);border:1px solid var(--acc);color:#fff;font-family:monospace;font-size:10px;padding:4px 8px;border-radius:4px}
.leaflet-tooltip{background:transparent;border:none;box-shadow:none}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.st-box{background:rgba(0,0,0,.5);border:1px solid #1e293b;padding:6px;border-radius:6px;text-align:center}
.st-val{font-size:.85rem;font-weight:bold;color:#fff}.st-lbl{font-size:.58rem;color:#64748b;text-transform:uppercase;letter-spacing:.5px}
.drop-zone{border:2px dashed #334155;padding:9px;text-align:center;border-radius:8px;cursor:pointer;color:#64748b;font-size:.72rem;margin-bottom:8px;transition:.2s}
.drop-zone:hover{border-color:var(--pry);color:var(--pry)}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);z-index:2000;display:none;justify-content:center;align-items:center}
.modal{background:#13131a;width:460px;max-height:90vh;overflow-y:auto;padding:25px;border-radius:20px;border:1px solid var(--acc);box-shadow:0 0 60px rgba(0,0,0,.6);position:relative}
.close-btn{position:absolute;top:12px;right:18px;color:#fff;cursor:pointer;font-size:1.4rem;z-index:10;opacity:.7;transition:.2s}.close-btn:hover{opacity:1}
.modal h3{color:var(--acc);margin-top:0;text-transform:uppercase;letter-spacing:1px;font-size:1rem}
.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}
.bio-res{background:rgba(236,72,153,.08);border:1px solid var(--bio);padding:14px;border-radius:10px;margin-bottom:15px}
.bio-val{color:var(--bio);font-weight:bold;font-family:monospace;font-size:1.05rem}
.sym-card{background:linear-gradient(135deg,rgba(163,230,53,.04),rgba(101,163,13,.02));padding:12px;border-radius:12px;border:1px solid rgba(163,230,53,.2);position:relative}
.sym-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--sym),transparent);border-radius:12px 12px 0 0}
.sym-res{background:rgba(163,230,53,.06);border:1px solid rgba(163,230,53,.25);padding:12px;border-radius:10px;margin-top:10px}
.sym-val{color:var(--sym);font-weight:bold;font-family:monospace;font-size:.95rem}
.sym-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:.78rem;color:#d1d5db}
.sym-status{font-size:.72rem;padding:8px 12px;border-radius:8px;text-align:center;margin-top:8px;font-weight:600;line-height:1.4}
.sym-status.ok{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(5,150,105,.4)}
.sym-status.warn{background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(217,119,6,.4)}
.sym-status.err{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(220,38,38,.4)}
.sym-status.flow{background:rgba(163,230,53,.1);color:#a3e635;border:1px solid rgba(101,163,13,.4)}
.sym-feedback{margin-top:8px;padding:10px;border-radius:8px;font-size:.72rem;line-height:1.5}
.sym-feedback.gravity{background:rgba(16,185,129,.1);border-left:3px solid #10b981;color:#6ee7b7}
.sym-feedback.friction{background:rgba(239,68,68,.1);border-left:3px solid #ef4444;color:#fca5a5}
.sym-feedback.carbon{background:rgba(163,230,53,.08);border-left:3px solid var(--sym);color:#d9f99d}
.nucleus-icon{background:radial-gradient(circle,#a3e635,#65a30d 60%,#3f6212 90%,transparent);border:3px solid #84cc16;border-radius:50%;width:28px;height:28px;box-shadow:0 0 25px rgba(163,230,53,.7),0 0 50px rgba(163,230,53,.3);animation:nuc-p 2.5s ease-in-out infinite}
@keyframes nuc-p{0%,100%{box-shadow:0 0 25px rgba(163,230,53,.7)}50%{box-shadow:0 0 40px rgba(163,230,53,1),0 0 70px rgba(163,230,53,.4)}}
.corridor-label{background:rgba(0,0,0,.88);border:1px solid #22d3ee;color:#22d3ee;padding:2px 6px;border-radius:4px;font-size:9px;font-weight:bold;font-family:monospace}
.pdr-center-grab{cursor:grab!important}.pdr-center-grab:active{cursor:grabbing!important}
.pipe-popup{font-family:monospace;font-size:11px;line-height:1.5}.pipe-popup .ok{color:#10b981;font-weight:bold}.pipe-popup .warn{color:#ef4444;font-weight:bold}
.section-divider{height:1px;background:linear-gradient(90deg,transparent,#334155,transparent);margin:4px 0}
.aspect-tag{display:inline-block;background:rgba(163,230,53,.15);color:var(--sym);padding:1px 6px;border-radius:4px;font-size:.62rem;font-weight:700;font-family:monospace;border:1px solid rgba(163,230,53,.3)}
/* ═══ ETHOHYDRO ═══ */
.etho-card{background:linear-gradient(135deg,rgba(14,165,233,.04),rgba(6,182,212,.02));padding:12px;border-radius:12px;border:1px solid rgba(14,165,233,.25);position:relative}
.etho-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--hydro),var(--pdr),transparent);border-radius:12px 12px 0 0}
.etho-res{background:rgba(14,165,233,.06);border:1px solid rgba(14,165,233,.2);padding:10px;border-radius:8px;margin-top:8px;font-size:.72rem;line-height:1.5;color:#bae6fd}
.etho-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:.72rem;color:#cbd5e1}
.etho-val{color:#38bdf8;font-weight:bold;font-family:monospace;font-size:.82rem}
.btn-etho{background:linear-gradient(135deg,#0ea5e9 0%,#06b6d4 50%,#0891b2 100%);color:#fff;box-shadow:0 4px 18px rgba(14,165,233,.3);font-size:.8rem;padding:10px}
.water-icon{background:radial-gradient(circle,#38bdf8,#0284c7 70%,transparent);border:2px solid #7dd3fc;border-radius:50%;width:18px;height:18px;box-shadow:0 0 12px rgba(56,189,248,.7);display:inline-block}
.gate-icon{background:radial-gradient(circle,#fbbf24,#d97706 70%,transparent);border:2px solid #fde68a;border-radius:3px;width:14px;height:14px;box-shadow:0 0 10px rgba(251,191,36,.6);display:inline-block}
.shade-icon{background:radial-gradient(circle,#4ade80,#166534 80%,transparent);border:2px solid #86efac;border-radius:50%;width:22px;height:22px;box-shadow:0 0 15px rgba(74,222,128,.5);display:inline-block}
.etho-arrow{color:#22d3ee;font-size:12px;font-weight:bold;font-family:monospace;text-shadow:0 0 8px rgba(34,211,238,.6)}
.etho-legend{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;font-size:.62rem;color:#94a3b8;margin-top:6px;padding:6px;background:rgba(0,0,0,.3);border-radius:6px}
.etho-legend span{font-size:.65rem}
/* ═══ UNDO/REDO ═══ */
.undo-bar{display:flex;gap:4px;margin-top:5px}
.undo-bar .btn{padding:5px;font-size:.7rem;flex:1}
.undo-bar .btn:disabled{opacity:.3;cursor:not-allowed;filter:none;transform:none}
/* ═══ INTERACTIVE PROFILE ═══ */
.profile-wrap{position:relative;cursor:crosshair}
.profile-tip{position:absolute;background:rgba(0,0,0,.92);border:1px solid #0ea5e9;color:#e0f2fe;font-family:monospace;font-size:9px;padding:4px 7px;border-radius:5px;pointer-events:none;white-space:nowrap;transform:translate(-50%,-130%);z-index:10;display:none;line-height:1.3}
.profile-crosshair{position:absolute;width:1px;background:#0ea5e9;top:10px;bottom:20px;pointer-events:none;opacity:.5;display:none}
/* ═══ KML VALIDATION TOAST ═══ */
.toast{position:fixed;bottom:20px;right:20px;background:#1e1b4b;border:1px solid #7c3aed;color:#c4b5fd;padding:12px 18px;border-radius:10px;font-size:.78rem;z-index:9000;max-width:350px;line-height:1.4;box-shadow:0 8px 30px rgba(0,0,0,.6);animation:toast-in .4s ease}
.toast.warn{border-color:#f59e0b;background:#451a03;color:#fde68a}
.toast.ok{border-color:#10b981;background:#064e3b;color:#6ee7b7}
.toast.err{border-color:#ef4444;background:#450a0a;color:#fca5a5}
@keyframes toast-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* ═══ CURSOR COORDINATES ═══ */
.cursor-coords{position:absolute;bottom:8px;left:390px;background:rgba(0,0,0,.85);border:1px solid #334155;color:#94a3b8;font-family:'Cascadia Code',monospace;font-size:10px;padding:4px 10px;border-radius:6px;z-index:800;pointer-events:none;letter-spacing:.5px}
.cursor-coords b{color:#38bdf8}
/* ═══ BASEMAP SELECTOR ═══ */
.basemap-ctrl{position:absolute;top:10px;right:54px;z-index:800;display:flex;gap:0;border-radius:8px;overflow:hidden;border:1px solid #334155;box-shadow:0 4px 12px rgba(0,0,0,.6)}
.basemap-btn{padding:5px 10px;background:rgba(15,15,20,.9);color:#94a3b8;border:none;cursor:pointer;font-size:9px;font-weight:700;letter-spacing:.3px;transition:.2s}
.basemap-btn:hover{background:#1e293b}.basemap-btn.active{background:var(--pry);color:#fff}
.basemap-btn:not(:last-child){border-right:1px solid #334155}
/* ═══ HELP OVERLAY ═══ */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0;max-height:50vh;overflow-y:auto;padding-right:8px}
.help-grid::-webkit-scrollbar{width:3px}.help-grid::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}
.help-item{background:rgba(255,255,255,.03);padding:10px;border-radius:8px;border-left:3px solid var(--acc)}
.help-item h4{margin:0 0 4px;font-size:.78rem;color:var(--acc)}.help-item p{margin:0;font-size:.68rem;color:#94a3b8;line-height:1.4}
.help-shortcut{display:flex;justify-content:space-between;padding:4px 0;font-size:.72rem;border-bottom:1px solid rgba(255,255,255,.04)}
.help-shortcut kbd{background:#1e293b;border:1px solid #334155;padding:2px 6px;border-radius:3px;font-family:monospace;font-size:.68rem;color:#e2e8f0}
/* ═══ RESPONSIVE TABLET ═══ */
.sidebar-toggle{display:none;position:absolute;top:12px;left:12px;z-index:1001;background:var(--bg);border:1px solid rgba(255,255,255,.12);color:#fff;width:40px;height:40px;border-radius:10px;font-size:1.2rem;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,.5)}
@media(max-width:850px){
    .sidebar-toggle{display:flex}
    #sidebar{left:-380px;transition:left .35s cubic-bezier(.4,0,.2,1)}
    #sidebar.open{left:10px}
    .cursor-coords{left:60px}
    .basemap-ctrl{right:10px;top:55px}
}
/* ═══ UNITS TOGGLE ═══ */
.unit-toggle{display:inline-flex;gap:0;border-radius:5px;overflow:hidden;border:1px solid #334155;margin-left:6px;vertical-align:middle}
.unit-btn{padding:2px 7px;background:transparent;border:none;color:#64748b;font-size:.6rem;font-weight:700;cursor:pointer;transition:.15s}
.unit-btn.active{background:var(--pry);color:#fff}
/* ═══ RESPONSIVE TABLET ═══ */
@media(max-width:900px){
    #sidebar{width:calc(100vw - 20px);left:10px;right:10px;top:auto;bottom:10px;max-height:50vh;border-radius:16px 16px 16px 16px}
    #map{height:55vh}
    body{flex-direction:column}
}
@media(max-width:600px){
    #sidebar{width:calc(100vw - 10px);left:5px;right:5px;bottom:5px;max-height:55vh;padding:12px;gap:8px}
    h2{font-size:1.1rem}
    .row{grid-template-columns:1fr}
    .bio-grid{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr 1fr}
    .btn{padding:10px;font-size:.82rem}
    input[type="number"],input[type="text"],select{padding:9px;font-size:.9rem}
}

/* ═══ SPLASH SCREEN ═══ */
#splash-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(12,12,18,0.98) 0%,#000 100%)}
#splash-screen.hidden{opacity:0;pointer-events:none;transition:opacity 0.5s ease-out}
@keyframes splashFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(4deg)}}
@keyframes splashProgress{0%{width:0}100%{width:100%}}
@keyframes splashPulse{0%,100%{text-shadow:0 0 20px rgba(251,191,36,0.5)}50%{text-shadow:0 0 40px rgba(251,191,36,0.8),0 0 60px rgba(59,130,246,0.3)}}