:root{
  --fg:#e7e7e7;
  --muted:#a0a0a0;
  --accent:#00d1b2;

  --bullet:#00d1b2;
  --bullet-ring:rgba(0,209,178,.15);

  --pin:var(--bullet);
  --pin-ring:var(--bullet-ring);

  --bar:#000;
  --card:#0f0f12;
  --card-border:#1b1b1b;
  --card-border-hover:#262626;

  --sub-bg:rgba(0,209,178,.08);
  --sub-border:rgba(0,209,178,.35);
  --sub-fg:#fff;

  --footer-h:48px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--fg);
  background:linear-gradient(180deg,#161719 0%, #1c1d20 100%);
  padding-bottom:var(--footer-h);
}

/* header */
header{
  background:var(--bar); color:#fff; height:56px;
  display:flex; align-items:center; gap:12px; padding:0 16px;
  font-weight:600; letter-spacing:1px; text-transform:uppercase; font-size:15px;
}
.header-link{
  color:inherit; text-decoration:none;
  font-size:10px; font-weight:600; letter-spacing:.4px; transition:opacity .2s;
  white-space:nowrap;
}
.header-link:hover{opacity:.75}
.title{flex:1; font-size:14px}
header .title{color:inherit; text-decoration:none; white-space:nowrap}

.toggle-icon{
  appearance:none; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; width:32px; height:32px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
}
.toggle-icon:focus-visible{outline:2px solid rgba(255,255,255,.4); outline-offset:2px}
.toggle-icon svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] .icon-sun{display:none}
html[data-theme="light"] .icon-moon{display:none}

/* layout */
main{height:calc(100% - 56px); display:grid; grid-template-rows:40vh 1fr;}

.map-wrap{
  position:relative; display:grid; grid-template-rows:auto 1fr;
  min-height:0; overflow:hidden;
  background:radial-gradient(1000px 600px at 50% -200px, #202124, #161719);
}
.subtitle{
  max-width:min(820px,90%);
  margin:10px auto 6px; padding:6px 10px;
  font-weight:600; font-size:clamp(14px,1.6vw,19px); line-height:1.25; letter-spacing:.2px;
  text-wrap:balance; color:var(--fg); text-align:center; pointer-events:none;
}
html[data-theme="dark"] .subtitle{ text-shadow:0 1px 3px rgba(0,0,0,.8), 0 0 5px rgba(0,0,0,.43); }
html[data-theme="light"] .subtitle{ color:#000; text-shadow:none; }

.map-pad{ grid-row:2/3; grid-column:1/2; position:relative; padding-inline:clamp(.6rem, 2vw, 1.2rem); height:100%; }
.map{ display:block; width:100%; height:100%; object-fit:contain; filter:contrast(110%) saturate(80%); opacity:.95; user-select:none; -webkit-user-drag:none; }
.map-tint{ position:absolute; inset:0; background:#b8bcc3; mix-blend-mode:lighten; pointer-events:none; opacity:0; }
html[data-theme="light"] .map-tint{ opacity:.9; }

@media (prefers-reduced-motion: no-preference){
  html.theming body, html.theming header, html.theming .map-wrap, html.theming .panel,
  html.theming .item, html.theming .country, html.theming .org, html.theming .hint,
  html.theming .dot, html.theming .pin, html.theming .subtitle, html.theming .map-tint,
  html.theming .subbox{
    transition: background-color .35s ease, color .35s ease, border-color .35s ease,
                box-shadow .35s ease, filter .35s ease, opacity .35s ease;
  }
}

/* list */
.panel{
  min-height:0; overflow:auto; border-top:1px solid #151515; padding:10px 12px 18px;
  padding-bottom:calc(18px + var(--footer-h));
}
.hint{color:var(--muted); font-size:12px; margin:6px 2px 10px;}
.list{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:start; }
@media (max-width:720px){.list{grid-template-columns:1fr}}

.item{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px;                               /* more padding */
  border:1px solid var(--card-border);
  background:var(--card);
  border-radius:14px;                          /* slightly rounder */
  cursor:pointer; transition:transform .15s, border-color .15s, background .15s; outline:none; text-align:left !important;
  box-shadow:0 1px 0 rgba(255,255,255,.02), 0 10px 22px rgba(0,0,0,.25);
  min-height:88px;
}
.item:hover,.item:focus-visible{transform:translateY(-1px); border-color:var(--card-border-hover); background:#111118;}
.item .content{flex:1}

.dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--bullet);
  box-shadow:0 0 0 4px var(--bullet-ring);
  margin-top:4px; flex:0 0 9px; aspect-ratio:1/1; align-self:flex-start;
}
.country{
  display:block; line-height:1.2; font-weight:700; color:var(--fg);
  min-height:calc(1.2em * 2);                 /* reserve 2 lines -> uniform heights */
}

/* pills */
.pills{ margin-top:3px; display:flex; flex-direction:column; gap:8px; }


.subbox{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;                           /* smaller pill */
  border:1px dashed var(--sub-border);
  background:var(--sub-bg);
  border-radius:999px;
  font-size:12px;                             /* smaller text */
  font-weight:700;
    justify-content: center;   /* centers flex contents horizontally */
  text-align: center;   
  color:var(--sub-fg);
  cursor:pointer; text-decoration:none;
}
.subbox svg{width:14px;height:14px; flex:0 0 14px; fill:currentColor; opacity:.95}

.sep{grid-column:1/-1; border-bottom:1px solid #3f3f3f; margin:6px 0;}
html[data-theme="light"] .sep{ border-bottom:1px solid #cfd5df; }

/* pins */
.pin{
  position:absolute; width:6px; height:6px; border-radius:50%; background:var(--pin);
  box-shadow:0 0 0 2px var(--pin-ring), 0 2px 6px rgba(0,0,0,.45), inset 0 -1px 0 rgba(0,0,0,.25);
  transform:translate(-50%,-50%) scale(1);
  transition:transform .15s, box-shadow .15s;
  border:1px solid rgba(0,0,0,.35);
}
.pin::after{content:""; position:absolute; left:50%; top:50%; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.9; transform:translate(-50%,-50%);}
.pin::before{
  content: attr(data-name);
  position:absolute; bottom:125%; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.85); color:#fff; padding:2px 6px; border-radius:4px; font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s;
}
.pin:hover::before,.pin:focus::before{opacity:1}
.pin:hover,.pin:focus{
  transform:translate(-50%,-50%) scale(1.2);
  box-shadow:0 0 0 5px var(--pin-ring), 0 5px 12px rgba(0,0,0,.5), inset 0 -1px 0 rgba(0,0,0,.25);
  z-index:10; outline:none;
}
.pin.active{
  transform:translate(-50%,-50%) scale(1.25);
  box-shadow:0 0 0 6px var(--pin-ring), 0 6px 14px rgba(0,0,0,.6), inset 0 -1px 0 rgba(0,0,0,.25);
  z-index:12;
}
.pin a{position:absolute; inset:-8px; text-indent:-9999px;}

@media (min-width:980px) and (orientation:landscape){
  main{grid-template-rows:unset; grid-template-columns:minmax(0,1fr) 400px;}
  .panel{border-top:none; border-left:1px solid #151515;}
  .map-wrap{min-height:100%}
}
@media (max-width:720px){
  .pin{ width:5px; height:5px; box-shadow:0 0 0 1.5px var(--pin-ring), 0 1.5px 4px rgba(0,0,0,.45), inset 0 -1px 0 rgba(0,0,0,.25);}
  .pin:hover,.pin:focus{ transform:translate(-50%,-50%) scale(1.1); box-shadow:0 0 0 3px var(--pin-ring), 0 3px 8px rgba(0,0,0,.45), inset 0 -1px 0 rgba(0,0,0,.25); }
  .pin.active{ transform:translate(-50%,-50%) scale(1.15); box-shadow:0 0 0 3.5px var(--pin-ring), 0 3.5px 9px rgba(0,0,0,.5), inset 0 -1px 0 rgba(0,0,0,.25); }
  .title{flex:1; font-size:12px}
}
@media (max-width:420px){
  .pin{ width:4px; height:4px; }
  .pin a{ inset:-5px; }
  .title{flex:1; font-size:11px}
}

/* footer */
.site-footer{
  position:fixed; bottom:0; left:0; right:0;
  height:var(--footer-h);
  padding:0 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--muted);
  border-top:1px solid #2a2a2a; background:var(--bar);
  z-index:100;
}

/* contact page */
.contact-main{
  display:flex; justify-content:center; align-items:center; text-align:center;
  height:calc(100vh - (56px + var(--footer-h)));
  padding:0 20px;
}
.contact-content h1{ font-size:clamp(20px, 2vw, 28px); margin-bottom:10px; }
.contact-content p{ max-width:600px; margin:auto; color:var(--muted); font-size:14px; line-height:1.5; }
.highlight{ color:var(--pin); font-weight:600; }

/* light mode vars */
html[data-theme="light"]{
  --fg:#000; --muted:#333; --accent:#00a898;
  --bullet:#006eff; --bullet-ring:rgba(0,110,255,.18);
  --pin:#006eff; --pin-ring:rgba(11,116,255,.22);
  --bar:#000; --card:#fff; --card-border:#e7eaf0; --card-border-hover:#dde2ea;
  --sub-bg:rgba(0,110,255,.06); --sub-border:rgba(0,110,255,.28);
  --sub-fg:#000;
}
html[data-theme="light"] .site-footer{ border-top:1px solid #e5e8ee; background:#fff; color:#777; }
html[data-theme="light"] body{ background:linear-gradient(180deg,#eef1f5 0%, #f9fafb 100%); }
html[data-theme="light"] .map-wrap{ background:radial-gradient(1000px 600px at 50% -200px, #f2f4f7, #f7f8fa); }
html[data-theme="light"] .panel{ border-top:1px solid #e5e8ee; }
html[data-theme="light"] .item{ background:#fff; border:1px solid #e7eaf0; }
html[data-theme="light"] .item:hover, html[data-theme="light"] .item:focus-visible{ background:#f3f5f7; border-color:#dde2ea; }
html[data-theme="light"] .sep{ border-bottom:1px solid #e5e8ee; }

/* modal */
.pop-backdrop{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.45); z-index:999; }
.pop-backdrop.show{ display:grid; animation:popFade .12s ease }
@keyframes popFade{ from{opacity:0} to{opacity:1} }
.pop{ width:min(520px, 92vw); background:var(--card); color:var(--fg); border:1px solid var(--card-border); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.5); padding:16px 16px 12px; transform:translateY(4px); animation:popIn .14s ease forwards; }
@keyframes popIn{ to{ transform:translateY(0) } }
.pop-title{ margin:0 0 6px; font-size:16px; font-weight:700 }
.pop-text{ margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.45 }
.pop-actions{ display:flex; gap:8px; justify-content:flex-end }
.pop-btn{ appearance:none; border:1px solid var(--card-border); background:#111118; color:var(--fg); padding:8px 12px; border-radius:10px; font-weight:600; cursor:pointer; }
.pop-btn:hover{ border-color:var(--card-border-hover) }
.pop-accent{ border-color:var(--sub-border); background:var(--sub-bg); color:var(--sub-fg); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

/* light tweaks for modal */
html[data-theme="light"] .pop{ background:#fff }
html[data-theme="light"] .pop-btn{ background:#f7f8fa; color:#000 }

/* toolbar */
.panel-bar{
  display:flex; align-items:center; justify-content:space-between;
  margin:6px 2px 10px;
}
.panel .hint{ margin:0 } /* avoid double spacing */

/* cute switch (theme-aware, scales with text) */
.switch{ display:inline-flex; align-items:center; gap:.55em; font-size:12px; user-select:none; cursor:pointer; }
.switch input{ position:absolute; opacity:0; pointer-events:none; }
.switch-label{ font-weight:600; color:var(--muted); }

.switch .slider{
  --h: 1.25em;                 /* height scales with surrounding text */
  --w: calc(var(--h) * 1.9);   /* width */
  position:relative; width:var(--w); height:var(--h); border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--card-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition:background .2s, border-color .2s;
}
.switch .slider::after{
  content:""; position:absolute; top:50%; left:2px;
  width:calc(var(--h) - 6px); height:calc(var(--h) - 6px); border-radius:999px;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.35);
  transform:translate(0,-50%); transition:transform .2s;
}
.switch input:checked + .slider{
  background:var(--sub-bg); border-color:var(--sub-border);
}
.switch input:checked + .slider::after{
  transform:translate(calc(var(--w) - var(--h)), -50%);
  background:var(--pin);
}
html[data-theme="light"] .switch .slider{ background:#f1f3f7; }
html[data-theme="light"] .switch-label{ color:#555; }

.subbox.placeholder {
  visibility: hidden;
  pointer-events: none;
}