:root{
  --bg0:#0b1020;
  --bg1:#0e1731;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.12);
  --text:#e9edf7;
  --muted:rgba(233,237,247,.72);
  --primary:#7c5cff;
  --primary2:#b46cff;
  --good:#4ade80;
  --bad:#fb7185;
  --shadow:0 18px 60px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font: 15px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 20% 10%, rgba(124,92,255,.22), transparent 60%),
              radial-gradient(900px 500px at 80% 0%, rgba(180,108,255,.18), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(900px 500px at 70% 70%, rgba(74,222,128,.12), transparent 55%),
    radial-gradient(800px 500px at 15% 80%, rgba(251,113,133,.10), transparent 55%);
  pointer-events:none;
  filter: blur(0px);
  opacity:.9;
}

.topbar{
  position:sticky; top:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  background: rgba(11,16,32,.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:38px;height:38px;border-radius:12px;
  display:grid; place-items:center;
  font-weight:800;
  background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(180,108,255,.9));
  box-shadow: 0 10px 30px rgba(124,92,255,.25);
}
.brandText .title{font-weight:800; letter-spacing:.2px}
.brandText .subtitle{font-size:12px; color:var(--muted)}

.actions{display:flex; gap:10px}
.topLeft{display:flex; align-items:center; gap:10px}
.topLabel{font-size:12px; color:var(--muted)}
.regionPicker{position:relative}
.regionPickerPanel{
  position:absolute;
  top:44px;
  left:0;
  z-index:2100;
  width:260px;
  max-height: 340px;
  overflow:auto;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,14,30,.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.regionPickerActions{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.regionRow{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  border-radius:10px;
}
.regionRow:hover{background: rgba(255,255,255,.07)}
.regionRow input{accent-color:#a855f7}

.mapShell{
  position: relative;
  width: 100vw;
  height: calc(100vh - 74px);
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.hero{display:flex; justify-content:space-between; gap:18px; padding: 18px}
.hero h1{margin:0 0 6px; font-size: 22px}
.hero p{margin:0}
.heroRight{min-width:320px}
.stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px}
.stat{
  padding:12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.statLabel{font-size:12px; color:var(--muted)}
.statValue{font-size:18px; font-weight:800; margin-top:4px}

.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  margin-top:14px;
}

.cardHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 8px;
}
.cardHeader h2{margin:0; font-size:16px}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(233,237,247,.9);
}

.controls{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  padding: 0 14px 12px;
}
.control label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px}
select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,12,24,.65);
  color: var(--text);
  outline:none;
}
.toggleRow{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding: 9px 10px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,12,24,.65);
  color: var(--text);
  font-size:14px !important;
}
.toggleRow input{accent-color:#a855f7}

.quiz{padding: 12px 14px 14px}
.qTop{display:flex; flex-direction:column; gap:8px}
.qMeta{display:flex; justify-content:space-between}
.qSmall{font-size:12px}
.qPrompt{font-size:20px; font-weight:850; letter-spacing:.2px}

.answers{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top: 12px;
}
.answerBtn{
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.answerBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(124,92,255,.40);
  background: rgba(124,92,255,.10);
}
.answerBtn:disabled{
  opacity:.58;
  cursor:not-allowed;
  transform:none;
}

.typeArea{margin-top:12px}
.typeRow{display:flex; gap:10px}
.input{
  flex:1;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,12,24,.65);
  color: var(--text);
  outline:none;
}
.hint{margin-top:8px; font-size:12px}

.feedbackRow{
  margin-top:12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.feedback{font-size:13px}
.feedback.ok{color: rgba(74,222,128,.95)}
.feedback.bad{color: rgba(251,113,133,.95)}

.mapArea{margin-top:12px}
.mapHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.map{
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow:hidden;
  background: #6ec5ff;
}
.overlay{
  position:absolute;
  z-index:500;
}
.overlayTop{
  left:14px; top:14px;
  max-width:min(720px, calc(100vw - 28px));
  background: rgba(11,16,32,.62);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding:10px 12px;
  backdrop-filter: blur(8px);
}
.overlayType{
  left:14px;
  right:14px;
  top:120px;
  max-width:520px;
}
.overlayBottom{
  left:14px;
  right:14px;
  bottom:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(11,16,32,.62);
  backdrop-filter: blur(8px);
}
.settingsPanel{
  position:absolute;
  z-index:700;
  right:14px;
  top:14px;
  width:min(360px, calc(100vw - 28px));
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(11,16,32,.86);
  backdrop-filter: blur(8px);
}

/* Leaflet tweaks to match UI */
.leaflet-control-zoom a{
  background: rgba(255,255,255,.08) !important;
  color: rgba(233,237,247,.95) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.leaflet-control-zoom a:hover{
  background: rgba(124,92,255,.16) !important;
}
.leaflet-container{
  font: inherit;
}

.rightActions{display:flex; gap:10px}

.btn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{border-color: rgba(124,92,255,.35)}
.btnPrimary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(180,108,255,.95));
  border-color: rgba(255,255,255,.12);
}
.btnSecondary{
  background: rgba(255,255,255,.08);
}
.btnGhost{
  background: transparent;
}

.muted{color:var(--muted)}
.small{font-size:12px}
.hidden{display:none !important}

.plan{padding: 0 14px 10px}
.planRow{
  display:flex; justify-content:space-between; gap:12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,.10);
}
.planRow:last-child{border-bottom:none}
.planTitle{color: var(--muted); font-size:12px}
.planValue{font-weight:800}

.divider{height:1px; background: rgba(255,255,255,.10); margin: 10px 14px}
.h3{margin: 10px 14px 8px; font-size: 13px; color: rgba(233,237,247,.92)}

.chips{display:flex; flex-wrap:wrap; gap:8px; padding: 0 14px 10px}
.chip{
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(124,92,255,.10);
}

.progressList{padding: 0 14px 14px; display:flex; flex-direction:column; gap:10px}
.progressRow{display:grid; grid-template-columns: 1.1fr 1.6fr .4fr; gap:10px; align-items:center}
.prefName{font-weight:800}
.prefMeta{font-size:12px; text-align:right}
.barOuter{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  overflow:hidden;
}
.barInner{
  height: 100%;
  background: linear-gradient(90deg, rgba(74,222,128,.75), rgba(124,92,255,.75));
}

.dialog{
  width:min(720px, calc(100vw - 24px));
  border:none;
  padding:0;
  border-radius: 18px;
  background: rgba(10,14,30,.96);
  color: var(--text);
  box-shadow: var(--shadow);
}
.dialog::backdrop{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
.dialogInner{padding: 14px}
.dialogHeader{
  display:flex; justify-content:space-between; gap:14px; align-items:flex-start;
  padding-bottom:10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dialogTitle{font-weight:900; font-size:16px}
.iconBtn{
  width:38px;height:38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}
.dialogBody{padding: 10px 0 0; display:flex; flex-direction:column; gap:14px}
.settingBlock{padding: 10px 0}
.settingTitle{font-weight:900; margin-bottom:6px}

.orderList{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.orderItem{
  display:grid;
  grid-template-columns: 28px 1fr auto;
  gap:10px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.orderItem.dragging{opacity:.6}
.drag{
  color: rgba(233,237,247,.5);
  font-weight:900;
  user-select:none;
}
.orderName{font-weight:900}
.orderMeta{font-size:12px}

.rangeRow{display:flex; align-items:center; gap:12px; margin-top: 10px}
input[type="range"]{width:100%}
.rangeValue{
  min-width:56px;
  text-align:right;
  font-weight:900;
}
.checkboxRow{
  display:flex; gap:10px; align-items:center;
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.dialogFooter{
  display:flex;
  justify-content:flex-end;
  padding-top:10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr}
  .hero{flex-direction:column}
  .heroRight{min-width:auto}
  .controls{grid-template-columns: 1fr}
  .answers{grid-template-columns: 1fr}
  .map{height: 420px}
}