:root{
  --bg:#edf3f9; --card:#fff; --text:#172033; --muted:#64748b; --line:#d8e4f0;
  --primary:#1558d6; --primary2:#0891b2; --green:#16803d; --danger:#dc2626;
  --shadow:0 12px 35px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
.app{height:100vh;display:flex;flex-direction:column}
.topbar{
  min-height:86px;background:linear-gradient(115deg,#0f1e46,#1558d6 60%,#0891b2);
  color:#fff;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px
}
.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:900;opacity:.85}
.topbar h1{margin:4px 0;font-size:30px;line-height:1}
.topbar p{margin:0;color:#dbeafe;font-size:13px}
.top-buttons{display:flex;gap:8px}
button{border:0;border-radius:12px;padding:10px 12px;font-weight:900;cursor:pointer;transition:.15s}
button:hover{transform:translateY(-1px);filter:brightness(.98)}
.topbar button{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.25)}
.layout{flex:1;min-height:0;display:grid;grid-template-columns:330px 1fr 330px;gap:12px;padding:12px}
.sidebar,.results{overflow:auto;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow)}
.map-area{min-width:0;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.map-toolbar{height:55px;padding:10px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.map-toolbar span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
#map{flex:1;min-height:500px}
.box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
.step-title{display:flex;align-items:center;gap:9px;font-weight:900;font-size:14px;margin-bottom:10px}
.step-title span{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#dbeafe;color:#1d4ed8;font-size:12px}
.status{background:#dcfce7;color:#166534;font-weight:800;border-radius:13px;padding:11px 12px;margin-bottom:12px;font-size:12px}
.status.warn{background:#fee2e2;color:#991b1b}
label{display:block;font-size:11px;font-weight:900;color:#334155;margin:9px 0 5px}
input,select{width:100%;border:1px solid #bfd0e3;border-radius:12px;background:white;padding:10px;font-size:13px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.help{font-size:11px;line-height:1.45;color:var(--muted);margin:6px 0 0}
.primary{width:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));color:white;margin-top:10px}
.download{width:100%;background:linear-gradient(90deg,#dc2626,#f97316);color:white;margin-top:12px}
.soft{background:#e8eef7;color:#10203b}
.danger{background:#fee2e2;color:#991b1b}
.aoi-stats,.summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.aoi-stats div,.summary div{background:#eff6ff;border:1px solid #bfdbfe;border-radius:13px;padding:10px;text-align:center}
.aoi-stats b,.summary b{display:block;font-size:19px;color:#1558d6}
.aoi-stats span,.summary span{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:800}
.bands{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:170px;overflow:auto;margin-top:8px}
.band{border:1px solid var(--line);border-radius:11px;background:#f8fafc;padding:8px;font-size:11px}
.band input{width:auto;margin-right:5px}
.mode-info{background:#f8fafc;border:1px solid #dbe4f0;border-left:4px solid var(--primary);border-radius:12px;padding:10px;font-size:11px;line-height:1.45;color:#334155;margin-top:8px}
.scene-list{max-height:430px;overflow:auto}
.scene{border:1px solid #dbeafe;background:#f8fbff;border-radius:14px;padding:10px;margin-bottom:8px;cursor:pointer}
.scene.active{outline:2px solid var(--primary);background:#eef6ff}
.scene-row{display:flex;justify-content:space-between;gap:8px}
.scene b{font-size:12px}
.scene span{font-size:10px;color:var(--muted)}
.scene label{display:block;font-size:10px;color:#1558d6;margin:7px 0 3px}
.scene input{width:auto;margin-right:5px}
.actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin:10px 0}
details{border-top:1px solid var(--line);padding:9px 0}
summary{font-weight:900;font-size:12px;cursor:pointer}
details p{font-size:11px;line-height:1.45;color:var(--muted)}
#downloadResult{margin-top:10px}
.download-card,.download-summary{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:10px;margin-bottom:8px;font-size:12px;color:#1e3a8a}
.download-links{display:grid;gap:7px;max-height:260px;overflow:auto}
.download-links a,#downloadResult>a{display:block;text-decoration:none;background:#dcfce7;color:#166534;padding:10px;border-radius:12px;font-weight:900;font-size:12px}
.download-links span,#downloadResult span{font-size:10px;word-break:break-all;opacity:.9}
.progress-box{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:10px}
.hidden{display:none!important}
.progress-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}
.bar{height:9px;background:#e2e8f0;border-radius:99px;overflow:hidden}
#barFill{width:0%;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));transition:.3s}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.6);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.modal-card{background:white;border-radius:18px;box-shadow:0 22px 70px rgba(0,0,0,.28);width:min(720px,95vw);padding:18px;font-size:14px;line-height:1.6}
.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
.modal-head h2{margin:0}
#closeGuide{background:#eef2ff;color:#1e3a8a;border-radius:50%;width:36px;height:36px;padding:0}
.leaflet-control-layers{border-radius:12px!important;box-shadow:var(--shadow)!important;border:1px solid var(--line)!important}
@media(max-width:1100px){
  .app{height:auto}.layout{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}#map{height:70vh}
}

.preview-note {
  background:#f8fafc;
  border:1px solid #dbe4f0;
  border-radius:12px;
  padding:10px;
  font-size:11px;
  color:#475569;
}

.clip-toggle{
  display:flex!important;
  align-items:center;
  gap:8px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  border-radius:12px;
  padding:10px;
  margin:10px 0;
  font-size:12px;
}
.clip-toggle input{width:auto!important;margin:0!important;}

.preview-info{
  margin-top:8px;
  background:#f8fafc;
  border:1px solid #dbe4f0;
  border-left:4px solid #1558d6;
  border-radius:12px;
  padding:10px;
  font-size:11px;
  line-height:1.45;
  color:#334155;
}
.preview-info span{
  color:#64748b;
}


.leaflet-control-layers-expanded{
  min-width: 215px;
}
.leaflet-control-layers-list{
  font-size: 12px;
  line-height: 1.4;
}



.leaflet-control-layers-expanded {
  min-width: 245px !important;
}
.leaflet-control-layers label {
  font-weight: 800;
}



.leaflet-control-layers-expanded {
  min-width: 265px !important;
}


.leaflet-control-layers-expanded {
  min-width: 285px !important;
}
.leaflet-control-layers-overlays label {
  padding: 3px 0;
}