:root{
  /* coalesce.coach design tokens (see src/index.css) */
  --background:hsl(0 0% 0%);
  --surface:hsl(0 0% 5%);
  --card:hsl(0 0% 7%);
  --card-2:hsl(0 0% 10%);
  --foreground:hsl(0 0% 100%);
  --muted-foreground:hsl(0 0% 65%);
  --faint:hsl(0 0% 42%);
  --border:hsl(0 0% 20%);
  --border-bright:hsl(0 0% 30%);
  --primary:hsl(264 89% 65%);
  --brand:hsl(249 100% 60%);
  --gradient-blue:hsl(240 100% 68%);
  --gradient-magenta:hsl(320 85% 60%);
  --gradient-pink:hsl(340 82% 60%);
  --brand-gradient:linear-gradient(to right, hsl(264 89% 65%), hsl(330 85% 55%));
  --shadow:0 24px 60px rgba(0,0,0,.6);
  --radius:1rem;
  --radius-sm:.625rem;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--background);color:var(--foreground);overflow:hidden}
body{font-family:'Manrope',sans-serif;position:relative}

/* Subtle film grain, matching coalesce.coach's global texture */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#app{display:grid;grid-template-columns:372px 1fr;height:100vh}

/* ============ SIDEBAR ============ */
aside{
  position:relative;
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:28px 24px 22px;
  overflow-y:auto;
  box-shadow:var(--shadow);
  z-index:5;
}
/* soft brand glow, echoing the hero-gradient blobs on coalesce.coach */
aside::before{
  content:"";position:absolute;top:-120px;left:-80px;width:320px;height:320px;
  background:radial-gradient(circle, hsl(264 89% 65% / .28) 0%, transparent 70%);
  pointer-events:none;filter:blur(10px);
}

.brand{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px;position:relative}
.brand-mark{display:flex;align-items:center;gap:12px}
.brand-glyph{
  width:36px;height:36px;flex-shrink:0;border-radius:.7rem;
  background:var(--brand-gradient);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px hsl(264 89% 65% / .4);
}

h1{
  font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:700;
  font-size:22px;margin:0;line-height:1.1;letter-spacing:-.2px;color:var(--foreground);
}
h1 em{
  font-style:normal;background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kicker{
  font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--faint);
  margin-top:4px;font-weight:600;
}

.lang-toggle{
  display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;flex-shrink:0;
  background:var(--card);
}
.lang-toggle button{
  all:unset;cursor:pointer;font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.5px;padding:6px 12px;color:var(--faint);transition:.15s;
}
.lang-toggle button.active{background:var(--brand-gradient);color:#fff}
.lang-toggle button:not(.active):hover{color:var(--foreground)}

.sub{font-size:12.5px;color:var(--muted-foreground);margin:18px 0 24px;line-height:1.65;max-width:40ch}

.group{margin-bottom:20px;position:relative}
.group label{
  display:block;
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);margin-bottom:10px;
  font-weight:700;
}

select,button,input[type="text"]{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--card);color:var(--foreground);
  border:1px solid var(--border);font-size:13.5px;
  transition:.15s;cursor:pointer;
  font-family:inherit;
}
input[type="text"]{cursor:text}
input[type="text"]::placeholder{color:var(--faint)}
input[type="text"]:focus{outline:none;border-color:var(--primary);background:var(--card-2)}
select:hover,button:hover{border-color:var(--border-bright)}

/* ============ CITY COMBOBOX ============ */
.city-combobox{position:relative}
.city-combobox::after{
  content:"";position:absolute;right:14px;top:calc(1.75em + 12px + 5px);
  width:8px;height:8px;pointer-events:none;
  border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:translateY(-50%) rotate(45deg);transition:.15s;
}
.city-combobox:focus-within::after{border-color:var(--primary);transform:translateY(-30%) rotate(225deg)}
.city-combobox input[type="text"]{padding-right:38px}
.city-dropdown{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  margin:0;padding:6px;list-style:none;max-height:280px;overflow-y:auto;
  background:var(--card-2);border:1px solid var(--border-bright);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
}
.city-dropdown li{
  padding:9px 12px;border-radius:6px;font-size:13px;color:var(--muted-foreground);cursor:pointer;
}
.city-dropdown li.active{background:var(--brand-gradient);color:#fff}

.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.modes button{
  padding:12px 4px 10px;font-size:11px;letter-spacing:.2px;font-weight:700;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted-foreground);
  border-radius:var(--radius-sm);
}
.modes button.active{
  background:var(--brand-gradient);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px hsl(264 89% 65% / .35);
}
.modes button .ic{font-size:18px;filter:grayscale(.4);opacity:.8}
.modes button.active .ic{filter:none;opacity:1}

.reachable-list{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:6px;max-height:220px;overflow-y:auto;
}
.reachable-list .row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-radius:6px;font-size:12.5px;color:var(--muted-foreground);
  cursor:pointer;transition:.12s;
}
.reachable-list .row:hover{background:var(--card-2);color:var(--foreground)}
.reachable-list .row .t{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:11px;flex-shrink:0;
  background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.reachable-list .empty{padding:14px 10px;font-size:12px;color:var(--faint);text-align:center}

.legend{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px}
.legend .row{
  display:flex;align-items:center;gap:11px;width:100%;margin:0;padding:8px 10px;
  font-size:12.5px;color:var(--muted-foreground);font-variant-numeric:tabular-nums;
  background:transparent;border:none;border-radius:6px;cursor:pointer;text-align:left;
  font-family:inherit;transition:.12s;
}
.legend .row:hover{background:var(--card-2);color:var(--foreground)}
.legend .row.active{background:var(--brand-gradient);color:#fff}
.swatch{width:14px;height:14px;border-radius:5px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}

.info{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:11.5px;line-height:1.7;color:var(--muted-foreground);
  position:relative;overflow:hidden;
}
.info::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-gradient)}
.info b{color:var(--foreground);font-weight:700}

.footer{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--border);
  font-size:10.5px;color:var(--faint);line-height:1.8;letter-spacing:.2px;
}

.credits{display:flex;gap:8px;margin-top:16px}

.made-by{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  padding:8px 9px;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--border);
  text-decoration:none;transition:.15s;position:relative;overflow:hidden;
}
.made-by::before{
  content:"";position:absolute;inset:0;opacity:0;transition:.2s;
  background:var(--brand-gradient);
}
.made-by:hover{border-color:transparent;box-shadow:0 6px 18px hsl(264 89% 65% / .3)}
.made-by:hover::before{opacity:1}
.made-by > *{position:relative}
.made-by > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.made-by-label{font-size:9px;color:var(--faint);transition:.15s;white-space:nowrap}
.made-by:hover .made-by-label{color:rgba(255,255,255,.85)}
.made-by img{border-radius:5px;flex-shrink:0;width:16px;height:16px}
.made-by-word{font-weight:800;color:var(--foreground);letter-spacing:.1px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.made-by-arrow{margin-left:auto;color:var(--faint);transition:.15s;flex-shrink:0;width:11px;height:11px}
.made-by:hover .made-by-arrow{color:#fff;transform:translate(2px,-2px)}

.about-trigger{
  all:unset;margin-top:14px;display:flex;align-items:center;gap:7px;
  font-size:11px;color:var(--faint);cursor:pointer;transition:.15s;width:fit-content;
}
.about-trigger:hover{color:var(--foreground)}
.about-trigger-ic{
  color:var(--primary);flex-shrink:0;
}

/* ============ ABOUT MODAL ============ */
dialog#aboutDialog{
  position:fixed;margin:auto;top:0;left:0;right:0;bottom:0;
  width:min(560px, calc(100vw - 48px));max-height:calc(100vh - 80px);
  background:var(--card);color:var(--foreground);
  border:1px solid var(--border-bright);border-radius:calc(var(--radius) * 1.2);
  box-shadow:var(--shadow);padding:36px 38px 32px;
  font-family:'Manrope',sans-serif;
}
dialog#aboutDialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(3px)}
dialog#aboutDialog h2{
  font-family:'Bricolage Grotesque','Manrope',sans-serif;font-size:24px;font-weight:700;
  margin:0 0 22px;
  background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
dialog#aboutDialog h3{
  font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:22px 0 10px;
}
dialog#aboutDialog p{font-size:13.5px;line-height:1.7;color:var(--muted-foreground);margin:0}
dialog#aboutDialog ul{margin:0;padding:0;list-style:none}
dialog#aboutDialog li{
  font-size:13px;line-height:1.6;color:var(--muted-foreground);
  padding:10px 0 10px 20px;border-top:1px solid var(--border);position:relative;
}
dialog#aboutDialog li:last-child{border-bottom:1px solid var(--border)}
dialog#aboutDialog li::before{
  content:"→";position:absolute;left:0;top:10px;color:var(--primary);font-weight:700;
}
dialog#aboutDialog li b{color:var(--foreground);font-weight:700}
.about-docs{
  display:inline-flex;align-items:center;gap:6px;margin-top:24px;
  font-size:13px;font-weight:700;text-decoration:none;
  background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.about-close{
  all:unset;position:absolute;top:20px;right:22px;cursor:pointer;
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:13px;background:var(--card-2);transition:.15s;
}
.about-close:hover{color:var(--foreground);background:var(--border)}
@media(max-width:600px){
  dialog#aboutDialog{padding:28px 22px 26px}
}

/* ============ MAP ============ */
#map{height:100%;background:var(--background)}
.leaflet-container{background:var(--background);font-family:inherit}
.leaflet-popup-content-wrapper{background:rgba(10,10,10,.96);color:var(--foreground);border:1px solid var(--border-bright);border-radius:var(--radius-sm);backdrop-filter:blur(10px)}
.leaflet-popup-tip{background:rgba(10,10,10,.96)}
.leaflet-popup-content{margin:12px 16px;font-size:12.5px;line-height:1.6;font-family:'Manrope',sans-serif}
.leaflet-popup-content b{
  background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.leaflet-control-zoom{border:1px solid var(--border-bright)!important;border-radius:var(--radius-sm)!important;overflow:hidden}
.leaflet-control-zoom a{background:var(--card)!important;color:var(--foreground)!important;border-color:var(--border)!important}

.city-marker{
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,hsl(264 89% 65%));
  border:1.5px solid #fff;box-shadow:0 0 10px hsl(264 89% 65% / .8),0 0 3px rgba(0,0,0,.5);
  cursor:pointer;
}
.city-marker.origin{
  width:20px;height:20px;
  background:radial-gradient(circle at 30% 30%,#fff,hsl(330 85% 60%));
  box-shadow:0 0 0 4px hsl(330 85% 60% / .25),0 0 22px hsl(330 85% 60%);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px hsl(330 85% 60% / .25),0 0 22px hsl(330 85% 60%)}
  50%{box-shadow:0 0 0 11px hsl(330 85% 60% / 0),0 0 32px hsl(330 85% 60%)}
}
.city-label{
  background:rgba(0,0,0,.7);color:var(--muted-foreground);
  padding:2px 8px;border-radius:5px;font-size:10.5px;letter-spacing:.2px;
  border:1px solid var(--border);white-space:nowrap;
  transform:translate(7px,-7px);backdrop-filter:blur(4px);
  font-family:'Manrope',sans-serif;font-weight:600;
}

.overlay-title{
  position:absolute;top:20px;right:20px;z-index:1000;
  background:rgba(7,7,7,.75);backdrop-filter:blur(14px);
  border:1px solid var(--border-bright);border-radius:var(--radius);
  padding:14px 20px;font-size:11.5px;color:var(--muted-foreground);
  box-shadow:var(--shadow);
  max-width:270px;
}
.overlay-title b{
  font-family:'Bricolage Grotesque','Manrope',sans-serif;font-weight:700;color:var(--foreground);font-size:18px;display:block;margin-bottom:3px;
}
.overlay-coords{
  background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:10.5px;letter-spacing:.3px;font-variant-numeric:tabular-nums;font-weight:700;
}

.banner{
  position:absolute;top:20px;left:20px;z-index:1000;
  background:rgba(239,111,108,.14);border:1px solid #ef6f6c;
  color:#ffb3b1;border-radius:var(--radius-sm);padding:10px 16px;font-size:12px;
  display:none;max-width:320px;
}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}

@media (prefers-reduced-motion: reduce){
  .city-marker.origin{animation:none}
}

@media(max-width:780px){
  #app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  aside{max-height:48vh}
}