:root{
  --accent:#0085a1;
  --accent-d:#006d85;
  --ink:#1f2933;
  --ink-soft:#5b6770;
  --terr:#e07a3f;          /* captured-territory accent (warm earth) */
  --card:rgba(255,255,255,0.94);
  --card-line:rgba(20,40,55,0.08);
  --shadow:0 6px 28px rgba(20,40,60,0.16);
  font-synthesis:none;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#eef1f3;
  -webkit-font-smoothing:antialiased;
}
#app{position:fixed;inset:0;overflow:hidden;}
#map{position:absolute;inset:0;background:#eef1f3;}

/* Leaflet tweaks for the clean-cartographic look */
.leaflet-container{font:inherit;}
/* Drain most colour from the topo basemap so the flight lines + captured
   territory (drawn on their own canvas panes) read clearly on top. */
.topo-muted{filter:saturate(0.28) brightness(1.07) contrast(0.93);}
.leaflet-control-attribution{
  font-size:10px;background:rgba(255,255,255,0.7);color:#90a0a8;
}
.leaflet-control-attribution a{color:#7c8c94;}
.leaflet-bar a{color:var(--ink);}

/* ---------------------------------------------------- summary panel */
.panel{
  position:absolute;top:18px;left:18px;z-index:1000;
  width:340px;max-width:calc(100vw - 36px);
  background:var(--card);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border:1px solid var(--card-line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:18px 18px 14px;
  transition:max-height .25s ease;
}
/* minimise / expand */
.panel-min{
  position:absolute;top:12px;right:12px;z-index:2;
  width:26px;height:26px;border:1px solid var(--card-line);border-radius:8px;
  background:rgba(255,255,255,0.7);color:var(--ink-soft);
  font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.panel-min:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.panel.collapsed{padding-bottom:14px;}
.panel.collapsed .stats,
.panel.collapsed .controls,
.panel.collapsed .viewnav,
.panel.collapsed .hint,
.panel.collapsed .sub{display:none;}
.panel.collapsed .panel-head h1::after{display:none;}
.panel-head h1{
  margin:0;
  font-size:1.42rem;
  letter-spacing:-0.02em;
  font-weight:700;
  line-height:1.05;
  color:var(--ink);
}
.panel-head h1::after{
  content:"";display:block;width:38px;height:3px;margin-top:8px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--terr));
}
.sub{
  margin:10px 0 4px;font-size:0.79rem;line-height:1.5;color:var(--ink-soft);
}

.stats{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:14px 0 12px;
}
.stat{
  background:rgba(255,255,255,0.6);
  border:1px solid var(--card-line);
  border-radius:11px;
  padding:9px 11px;
}
.stat-num{font-size:1.18rem;font-weight:700;letter-spacing:-0.02em;color:var(--ink);line-height:1.1;}
.stat-lab{font-size:0.66rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--ink-soft);margin-top:2px;}
.stat-note{font-size:0.69rem;color:var(--accent-d);margin-top:4px;line-height:1.3;min-height:0;}

.controls{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding-top:12px;border-top:1px solid var(--card-line);
}
.toggle{font-size:0.78rem;color:var(--ink-soft);display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;}
.toggle input{accent-color:var(--accent);width:14px;height:14px;}
.upload-btn{
  margin-left:auto;font-size:0.78rem;font-weight:600;color:#fff;
  background:var(--accent);padding:6px 12px;border-radius:8px;cursor:pointer;
  transition:background .15s;
}
.upload-btn:hover{background:var(--accent-d);}
.viewnav{
  display:flex;align-items:center;gap:6px;margin-top:11px;
}
.viewnav button{
  font:inherit;font-size:0.74rem;font-weight:600;color:var(--ink-soft);
  background:rgba(255,255,255,0.7);border:1px solid var(--card-line);
  border-radius:7px;padding:5px 9px;cursor:pointer;transition:all .12s;line-height:1;
}
.viewnav button:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
#nav-label{font-size:0.7rem;color:var(--ink-soft);min-width:64px;text-align:center;}

.hint{margin-top:9px;font-size:0.68rem;color:#9aa7ae;}
.hint code{background:rgba(0,0,0,0.05);padding:1px 4px;border-radius:4px;}

/* ---------------------------------------------------- hover readout */
.readout{
  position:absolute;z-index:1000;pointer-events:none;
  background:rgba(28,40,48,0.92);color:#fff;
  padding:8px 11px;border-radius:9px;font-size:0.74rem;line-height:1.45;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);max-width:230px;
  transform:translate(-50%,-115%);
}
.readout b{font-size:0.82rem;}
.readout .swatch{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.readout .r-row{color:#cdd8de;}
.hidden{display:none !important;}

/* ---------------------------------------------------- loading veil */
.veil{
  position:absolute;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(238,241,243,0.92);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:opacity .4s;font-size:0.95rem;color:var(--ink);
}
.veil.gone{opacity:0;pointer-events:none;}
.veil-inner{
  text-align:center;background:#fff;padding:26px 30px;border-radius:16px;
  box-shadow:var(--shadow);border:1px solid var(--card-line);min-width:230px;
}
.spinner{
  width:34px;height:34px;margin:0 auto 14px;border-radius:50%;
  border:3px solid rgba(0,133,161,0.2);border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.veil-bar{
  width:200px;max-width:60vw;height:6px;margin:14px auto 0;border-radius:4px;
  background:rgba(0,133,161,0.15);overflow:hidden;
}
#veil-fill{
  height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--terr));transition:width .2s ease;
}

/* ---------------------------------------------------- completion toast */
.toast{
  position:absolute;left:50%;bottom:26px;z-index:2600;transform:translateX(-50%);
  background:rgba(28,40,48,0.95);color:#fff;padding:11px 18px;border-radius:10px;
  font-size:0.86rem;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,0.28);
  opacity:1;transition:opacity .4s,transform .4s;
}
.toast.hidden{opacity:0;transform:translate(-50%,12px);pointer-events:none;}
.toast .t-accent{color:#ffb86b;}

/* ---------------------------------------------------- drop overlay */
.drop{
  position:absolute;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;
  background:rgba(0,133,161,0.14);border:3px dashed var(--accent);
}
.drop div{
  background:#fff;padding:18px 26px;border-radius:12px;font-weight:600;color:var(--accent-d);
  box-shadow:var(--shadow);
}

/* dataset badge + restart link */
.badge{
  display:inline-block;margin-top:8px;font-size:0.66rem;font-weight:600;
  padding:3px 9px;border-radius:20px;background:rgba(0,133,161,0.1);color:var(--accent-d);
  letter-spacing:0.02em;
}
.badge.demo{background:rgba(224,122,63,0.14);color:#b6571f;}
#restart{color:var(--accent);text-decoration:none;font-weight:600;}
#restart:hover{text-decoration:underline;}

/* ---------------------------------------------------- welcome / onboarding */
.welcome{
  position:absolute;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(238,241,243,0.6);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);transition:opacity .35s;
}
.welcome.gone{opacity:0;pointer-events:none;}
.welcome-card{
  max-width:520px;width:100%;background:#fff;border:1px solid var(--card-line);
  border-radius:20px;box-shadow:0 18px 60px rgba(20,40,60,0.22);
  padding:30px 32px 26px;
  max-height:calc(100vh - 40px);overflow-y:auto;
}
.welcome-kicker{
  font-size:0.82rem;font-weight:700;color:var(--accent-d);letter-spacing:0.02em;margin-bottom:8px;
}
.welcome-card h2{
  margin:0 0 10px;font-size:1.5rem;line-height:1.15;letter-spacing:-0.02em;color:var(--ink);
}
.welcome-card>p{margin:0 0 16px;font-size:0.92rem;line-height:1.55;color:var(--ink-soft);}
.welcome-steps{list-style:none;margin:0 0 20px;padding:0;}
.welcome-steps li{
  position:relative;padding:7px 0 7px 34px;font-size:0.86rem;color:var(--ink-soft);line-height:1.4;
  border-top:1px solid var(--card-line);
}
.welcome-steps li:first-child{border-top:none;}
.welcome-steps b{
  position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:0.72rem;display:flex;align-items:center;justify-content:center;
}
.welcome-steps code{background:rgba(0,0,0,0.05);padding:1px 5px;border-radius:4px;font-size:0.82em;}
.welcome-actions{display:flex;gap:12px;flex-wrap:wrap;}
.w-btn{
  font:inherit;font-weight:600;font-size:0.92rem;border-radius:10px;padding:12px 18px;cursor:pointer;
  border:1px solid transparent;transition:all .15s;
}
.w-btn.primary{background:var(--accent);color:#fff;flex:1;min-width:200px;}
.w-btn.primary:hover{background:var(--accent-d);}
.w-btn.ghost{background:#fff;color:var(--accent-d);border-color:rgba(0,133,161,0.35);}
.w-btn.ghost:hover{background:rgba(0,133,161,0.07);}
.welcome-demo-note{margin:14px 0 0;font-size:0.74rem;color:#9aa7ae;line-height:1.4;}

.welcome-xc{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--card-line);
  font-size:0.82rem;color:var(--ink-soft);line-height:1.45;
}
.welcome-xc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.w-xc-link{
  font-weight:600;color:#fff;background:var(--accent);text-decoration:none;
  padding:4px 10px;border-radius:7px;font-size:0.78rem;white-space:nowrap;
}
.w-xc-link:hover{background:var(--accent-d);}
.welcome-xc-steps{margin:10px 0 0;padding-left:20px;}
.welcome-xc-steps li{margin:3px 0;}
.welcome-xc-steps code,.welcome-steps code{background:rgba(0,0,0,0.05);padding:1px 5px;border-radius:4px;font-size:0.82em;}

@media (max-width:640px){
  .panel{top:10px;left:10px;right:10px;width:auto;padding:14px;}
  .panel-head h1{font-size:1.22rem;}
  .sub{display:none;}
  .welcome-card{padding:22px 20px;}
  .welcome-card h2{font-size:1.28rem;}
}