:root{
  --bg:#07090f;
  --surface:#0b1220;
  --surface-2:#111a2e;
  --border:#1b263d;
  --muted:#8b93a7;
  --fg:#e8eef6;
  --gold:#d4af37;
  --gold-soft:#f5d97a;
  --gold-glow:rgba(212,175,55,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overflow:hidden}
body{min-height:100dvh;touch-action:manipulation;overflow:hidden}
a{color:inherit}
button{font:inherit;-webkit-tap-highlight-color:transparent}

/* ---------- loading overlay (circular golden progress ring) ---------- */
.loading-overlay{
  position:fixed;inset:0;z-index:1000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:28px;
  background:radial-gradient(ellipse at 50% 40%,#0a1022 0%,#030509 70%,#000 100%);
  transition:opacity .7s cubic-bezier(.4,0,.2,1),visibility .7s;
  padding:24px;
  overflow:hidden;
}
.loading-overlay.done{opacity:0;visibility:hidden;pointer-events:none}
.loading-stars{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.9) 0, rgba(255,255,255,.9) 1px, transparent 1.5px),
    radial-gradient(circle at 82% 15%, rgba(255,230,180,.8) 0, rgba(255,230,180,.8) 1px, transparent 1.5px),
    radial-gradient(circle at 45% 82%, rgba(255,255,255,.85) 0, rgba(255,255,255,.85) 1px, transparent 1.5px),
    radial-gradient(circle at 68% 70%, rgba(184,212,255,.8) 0, rgba(184,212,255,.8) 1px, transparent 1.5px),
    radial-gradient(circle at 28% 60%, rgba(255,255,255,.7) 0, rgba(255,255,255,.7) 1px, transparent 1.5px),
    radial-gradient(circle at 92% 48%, rgba(255,255,255,.8) 0, rgba(255,255,255,.8) 1px, transparent 1.5px);
  opacity:.9;pointer-events:none;
}
.loading-brand{display:flex;gap:14px;align-items:center;justify-content:center}
/* Invisible mirror of .dot on the right so the title text is mathematically centred */
.loading-brand .dot-spacer{width:16px;height:16px;flex-shrink:0;visibility:hidden;pointer-events:none}
.loading-brand .dot{
  width:16px;height:16px;border-radius:999px;
  background:radial-gradient(circle at 32% 32%,#fff4b0 0%,#f5d97a 35%,#d4af37 70%,#a8801f 100%);
  box-shadow:0 0 24px rgba(245,217,122,.6),0 0 48px rgba(212,175,55,.4);
  animation:brandPulse 1.8s ease-in-out infinite;
}
@keyframes brandPulse{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.18);filter:brightness(1.15)}
}
.loading-brand .title{
  font-size:26px;font-weight:700;letter-spacing:.5px;
  background:linear-gradient(90deg,#d4af37 0%,#f5d97a 40%,#fff4b0 55%,#f5d97a 70%,#d4af37 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:titleShine 3.5s linear infinite;
}
@keyframes titleShine{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ── Circular progress ring (MagicUI animated-circular-progress-bar) ─── */
/* SVG: viewBox 0 0 100 100, r=45, strokeWidth=10.                        */
/* Circumference = 2π×45 ≈ 282.74 px — matched in JS.                    */
/* Primary arc  : gold,      strokeDasharray = "filledPx circumference"   */
/* Secondary arc: dim gold,  strokeDasharray = "remainingPx circumference"*/
/* Both arcs have strokeLinecap=round → rounded ends, 5 % gap between them*/

.cp-wrap{
  position:relative;
  /* size-40 equivalent but larger for loading screen presence */
  width:220px;height:220px;
  flex-shrink:0;
}
.cp-ring{
  width:100%;height:100%;
  overflow:visible;           /* lets the glow extend beyond the SVG viewport */
  filter:drop-shadow(0 0 6px rgba(212,175,55,.65)) drop-shadow(0 0 14px rgba(212,175,55,.3));
  /* JS sets strokeDasharray per-frame; no rotation needed here —
     transform is applied per-circle via CSS below */
}

/* Primary arc — gold filled portion.
   Rotated -90 ° so the arc starts at 12-o'clock (top).
   transform-box:fill-box makes transform-origin:"center" relative to the
   circle's own bounding box, which equals cx/cy. */
.cp-primary{
  stroke:#d4af37;
  transform-box:fill-box;
  transform-origin:center;
  transform:rotate(-90deg);
  stroke-dasharray:0 282.74;
  /* No CSS transition — JS RAF loop drives every frame for uninterruptable smoothness */
}

/* Secondary arc — dim unfilled remainder.
   Exact MagicUI transform: rotate(252deg) scaleY(-1)
   252 = 360 - 90 - (5 gap% × 3.6 deg/%) — positions the arc end-to-end
   with the primary arc separated by a 5 % gap on each side. */
.cp-secondary{
  stroke:rgba(212,175,55,.18);
  transform-box:fill-box;
  transform-origin:center;
  transform:rotate(252deg) scaleY(-1);
  transition:opacity 0.3s ease;
  stroke-dasharray:0 282.74;    /* JS overwrites every RAF frame */
}

/* Logo: absolute, centered using translate so the image's own centre point
   sits exactly on the ring's mathematical centre. */
.cp-logo{
  position:absolute;
  top:50%;left:50%;
  width:88px;height:88px;
  transform:translate(-50%,-50%);   /* anchors image centre to ring centre */
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(245,217,122,.55)) drop-shadow(0 0 22px rgba(212,175,55,.35));
  animation:logoSpin 4.2s linear infinite;
  will-change:transform;
  pointer-events:none;
}
/* Spin is applied on top of the translate; use a combined keyframe
   so translate is preserved throughout the rotation. */
@keyframes logoSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}
}

/* Percentage counter: below the status text, normal flow */
.cp-pct{
  font-size:14px;font-weight:700;letter-spacing:.06em;
  color:var(--gold-soft);
  text-shadow:0 0 14px rgba(245,217,122,.55);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  pointer-events:none;
}

/* Status text below the ring */
.cp-status{
  margin:0;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-soft);
  text-shadow:0 0 12px rgba(245,217,122,.4);
}
@media (prefers-reduced-motion:reduce){
  .cp-logo{animation:none;transform:translate(-50%,-50%)}
  .loading-brand .dot,.loading-brand .title{animation:none}
}

/* ---------- public map ---------- */
.shell{position:fixed;inset:0;display:grid;grid-template-columns:1fr 340px}

.map-wrap{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#0a1022 0%,#030509 70%,#000 100%)}
#map{position:absolute;inset:0;touch-action:none;z-index:2;background:transparent !important}
#map canvas{touch-action:none;outline:none}
.maplibregl-map{background:transparent !important}
.maplibregl-canvas-container{background:transparent}

/* ---------- space background (behind the globe) ---------- */
.space-bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;transform:translateZ(0)}
.space-stars{
  position:absolute;inset:0;display:block;
  image-rendering:auto;
}
.celestial{
  position:absolute;border-radius:999px;pointer-events:none;
  transform:translateZ(0);backface-visibility:hidden;
  will-change:transform;
}
.sun-logo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:999px;
  opacity:.72;
  mix-blend-mode:screen;
  pointer-events:none;
}
/* Aeon mark melted into the moon. Same logic as .sun-logo, but `multiply`
   etches the logo as darker tones into the pale lunar surface — the
   inverse of the sun's `screen` blend, which lightens onto warm tones. */
.moon-logo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:999px;
  opacity:.78;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.celestial.sun{
  width:80px;height:80px;top:7%;right:11%;
  background:
    radial-gradient(circle at 35% 32%,#fffbe6 0%,#ffe37a 18%,#fdb813 45%,#d68a0c 72%,#a86900 100%);
  box-shadow:
    0 0 30px rgba(253,184,19,.6),
    0 0 70px rgba(253,184,19,.38),
    0 0 140px rgba(253,184,19,.2),
    inset -6px -8px 20px rgba(120,60,0,.35);
  animation:sunPulse 8s ease-in-out infinite;
}
@keyframes sunPulse{
  0%,100%{filter:brightness(1) saturate(1)}
  50%{filter:brightness(1.08) saturate(1.1)}
}
.celestial.moon{
  width:34px;height:34px;top:13%;left:7%;
  background:
    radial-gradient(circle at 32% 28%,#fff 0%,#e8edf4 35%,#b8bfcc 65%,#6d7383 100%);
  box-shadow:
    0 0 18px rgba(220,230,245,.3),
    inset -8px -6px 14px rgba(0,0,0,.45),
    inset 4px 3px 8px rgba(255,255,255,.25);
}
.celestial.planet{
  box-shadow:
    0 0 12px rgba(255,255,255,.12),
    inset -4px -3px 8px rgba(0,0,0,.5),
    inset 2px 2px 5px rgba(255,255,255,.15);
  animation:planetFloat 14s ease-in-out infinite;
}
.celestial.planet .ring{
  position:absolute;left:-60%;top:38%;width:220%;height:24%;
  border:1.5px solid rgba(212,175,55,.65);
  border-radius:50%;
  transform:rotate(-18deg);
  box-shadow:0 0 8px rgba(212,175,55,.35),inset 0 0 4px rgba(212,175,55,.2);
  background:linear-gradient(90deg,transparent 10%,rgba(212,175,55,.15) 50%,transparent 90%);
}
@keyframes planetFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(3px,-5px,0)}
}

@media (max-width:900px){
  .celestial.sun{width:62px;height:62px;top:9%;right:7%}
  .celestial.moon{width:26px;height:26px;top:15%;left:6%}
}
@media (max-width:420px){
  .celestial.sun{width:54px;height:54px}
}

/* Twinkling stars — opacity + tiny scale, GPU-only properties */
.twinkle{
  position:absolute;width:3px;height:3px;border-radius:999px;
  background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.7),0 0 12px rgba(255,230,180,.4);
  opacity:.3;
  animation-name:twinkle;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
  will-change:opacity,transform;
  pointer-events:none;
}
@keyframes twinkle{
  0%,100%{opacity:.25;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.15)}
}

@media (prefers-reduced-motion:reduce){
  .twinkle,.celestial.sun,.celestial.planet{animation:none}
}

.topbar{position:absolute;left:14px;right:14px;top:calc(12px + env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:10;pointer-events:none}
.topbar>*{pointer-events:auto}
.top-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.3px;padding:8px 12px;border-radius:12px;background:rgba(11,18,32,.6);backdrop-filter:blur(10px);border:1px solid var(--border)}
.brand-logo{width:20px;height:20px;object-fit:contain;display:block;filter:drop-shadow(0 0 4px var(--gold-glow));animation:brandLogoSpin 4s linear infinite;will-change:transform}
@keyframes brandLogoSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.layer-switch{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(11,18,32,.6);backdrop-filter:blur(10px);border:1px solid var(--border)}
.layer-switch button{border:0;background:transparent;color:var(--muted);padding:6px 10px;border-radius:8px;font-size:12px;cursor:pointer;transition:.15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.layer-switch button:hover{color:var(--fg)}
.layer-switch button.active{background:var(--gold);color:#1a1300}

/* Country grouping in the people list — premium accordion.
   Each country is a collapsible section: flag, display name, count badge,
   chevron. Click header to fold/unfold. Sticky header keeps the country
   label visible while scrolling through its people.                       */
.country-group{margin-bottom:6px}
.country-head{
  position:sticky;top:0;z-index:2;
  width:100%;display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(11,18,32,.96),rgba(11,18,32,.88));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--fg);font-weight:600;font-size:13px;
  cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s,box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.country-head:hover{
  border-color:rgba(212,175,55,.45);
  background:linear-gradient(180deg,rgba(28,22,8,.7),rgba(11,18,32,.88));
  box-shadow:0 0 0 1px rgba(212,175,55,.15) inset;
}
.country-head .flag{font-size:18px;line-height:1;flex:0 0 auto}
.country-head .cname{
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.01em;
}
.country-head .ccount{
  flex:0 0 auto;font-size:11px;font-weight:700;
  padding:2px 9px;border-radius:999px;
  background:rgba(212,175,55,.16);
  color:var(--gold-soft);
  font-variant-numeric:tabular-nums;
  border:1px solid rgba(212,175,55,.22);
}
.country-head .chevron{
  flex:0 0 auto;font-size:11px;color:var(--muted);
  transition:transform .25s cubic-bezier(.2,.85,.25,1);
  width:14px;text-align:center;
}
.country-group.collapsed .chevron{transform:rotate(-90deg)}
.country-body{
  padding:4px 0 6px 0;
  display:flex;flex-direction:column;gap:1px;
  overflow:hidden;
  /* Smooth fold/unfold via grid-rows trick (works without measuring height) */
}
.country-group.collapsed .country-body{display:none}

/* side panel */
.panel{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.panel-handle{display:none}
.panel header{padding:16px 16px 10px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.panel h2{margin:0;font-size:15px;font-weight:600}
.panel h2 .count{color:var(--muted);font-weight:400;margin-left:6px;font-variant-numeric:tabular-nums}
.panel .controls{padding:12px 16px 6px;display:flex;gap:8px}
.panel input[type="search"],.panel select{flex:1;background:var(--surface-2);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:13px;outline:none}
.panel input[type="search"]:focus,.panel select:focus{border-color:var(--gold)}
.panel .list{
  flex:1;overflow-y:auto;padding:6px 8px 14px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  /* Premium scroll feel — momentum on touch, subtle ease on programmatic scroll */
  scroll-behavior:smooth;
  /* Firefox: thin track + gold-tinted thumb */
  scrollbar-width:thin;
  scrollbar-color:rgba(212,175,55,.32) transparent;
}
/* WebKit (Chrome / Safari / Edge): bespoke gold scrollbar */
.panel .list::-webkit-scrollbar{
  width:8px;
}
.panel .list::-webkit-scrollbar-track{
  background:transparent;
  margin:4px 0;          /* keeps thumb away from the rounded panel edges */
}
.panel .list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(245,217,122,.42),rgba(212,175,55,.28));
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;          /* shrinks visual thumb so the 2px border acts as inner gutter */
  box-shadow:0 0 6px rgba(212,175,55,.18);
  transition:background .2s,box-shadow .2s;
}
.panel .list::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(245,217,122,.7),rgba(212,175,55,.5));
  background-clip:padding-box;
  box-shadow:0 0 10px rgba(212,175,55,.45);
}
.panel .list::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg,rgba(255,236,166,.85),rgba(212,175,55,.65));
  background-clip:padding-box;
}
.panel .list::-webkit-scrollbar-corner{background:transparent}

/* folder / layer toggles */
.folders{padding:4px 12px 8px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
.folders .f-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 4px;cursor:pointer;user-select:none}
.folders .f-head .f-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.folders .f-head .f-actions{display:flex;gap:8px;font-size:11px}
.folders .f-head .f-actions button{background:none;border:0;color:var(--muted);padding:0;cursor:pointer}
.folders .f-head .f-actions button:hover{color:var(--gold)}
.folders .f-body{display:flex;flex-direction:column;gap:2px;max-height:30vh;overflow-y:auto}
.folders.collapsed .f-body{display:none}
.folder-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;cursor:pointer;font-size:12px;transition:.12s}
.folder-row:hover{background:var(--surface-2)}
.folder-row .dot{width:10px;height:10px;border-radius:3px;background:var(--gold);flex:0 0 auto;box-shadow:0 0 6px var(--gold-glow);transition:.12s}
.folder-row.off .dot{background:transparent;box-shadow:none;border:1px solid var(--border)}
.folder-row.off{color:var(--muted)}
.folder-row .f-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-row .f-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}

.person{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;transition:.12s}
.person:hover{background:var(--surface-2)}
.person img{width:38px;height:38px;border-radius:999px;object-fit:cover;border:2px solid var(--gold);box-shadow:0 0 0 1px #0008,0 0 12px var(--gold-glow)}
.person .meta{min-width:0;flex:1}
.person .name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person .sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* MapLibre cluster */
.cluster-badge{
  width:46px;height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 30%,var(--gold-soft),var(--gold));
  color:#1a1300;font-weight:700;font-size:13px;cursor:pointer;
  box-shadow:0 6px 18px var(--gold-glow),0 0 0 2px #1a130040 inset
}
.cluster-badge.big{width:58px;height:58px;font-size:14px}

/* individual pfp pin */
.pfp-pin{width:44px;height:44px;border-radius:999px;background:#000;border:2px solid var(--gold);box-shadow:0 4px 12px rgba(0,0,0,.55),0 0 0 1px #0007,0 0 12px var(--gold-glow);overflow:hidden;cursor:pointer;transition:transform .12s}
.pfp-pin:hover{transform:scale(1.08);border-color:var(--gold-soft)}
.pfp-pin img{width:100%;height:100%;display:block;object-fit:cover}

/* popup */
.maplibregl-popup{z-index:20}
.maplibregl-popup-content{padding:0;background:transparent;border-radius:14px;box-shadow:none}
.maplibregl-popup-tip{border-top-color:#fff !important;border-bottom-color:#fff !important}
.pfp-popup{background:#fff;color:#0b1220;padding:12px 14px;border-radius:14px;box-shadow:0 20px 48px rgba(0,0,0,.55);display:flex;gap:10px;align-items:center;min-width:220px;max-width:280px}
.pfp-popup img{width:44px;height:44px;border-radius:999px;object-fit:cover;border:2px solid var(--gold)}
.pfp-popup .pname{font-weight:700;font-size:14px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfp-popup .phandle{font-size:12px;color:#4a5468;margin-top:2px}
.pfp-popup .pdesc{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.pfp-popup a{color:var(--gold);text-decoration:none;font-weight:600;font-size:12px;margin-top:6px;display:inline-block}
.maplibregl-popup-close-button{color:#4a5468;font-size:18px;padding:4px 8px}

/* MapLibre native control styling on mobile */
.maplibregl-ctrl-bottom-right{margin-bottom:calc(12px + env(safe-area-inset-bottom));margin-right:12px}
.maplibregl-ctrl-attrib{background:rgba(11,18,32,.55) !important;color:var(--muted) !important;backdrop-filter:blur(8px)}
.maplibregl-ctrl-attrib a{color:var(--muted) !important}

/* ---------- mobile: bottom-sheet panel + gesture polish ---------- */
@media (max-width:900px){
  :root{--peek:140px;--sheet-max:82dvh}
  .shell{grid-template-columns:1fr;grid-template-rows:1fr}
  .map-wrap{grid-row:1/-1;grid-column:1/-1}

  .topbar{left:10px;right:10px;top:calc(10px + env(safe-area-inset-top));flex-wrap:wrap;gap:6px;align-items:flex-start}
  .brand{padding:6px 10px;font-size:13px;border-radius:10px}
  .top-controls{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .layer-switch{padding:3px;border-radius:9px}
  .layer-switch button{padding:5px 8px;font-size:11px;border-radius:7px}

  /* Grouped/All selector is hidden on mobile. Clustering is always on —
     showing 1000+ individual icons on a phone is bad UX anyway, and the
     toggle itself was a source of reload bugs. Desktop still has it. */
  #cluster-switch{display:none !important}

  .panel{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    height:var(--sheet-max);max-height:var(--sheet-max);
    z-index:40;
    border-left:0;border-top:1px solid var(--border);
    border-top-left-radius:20px;border-top-right-radius:20px;
    background:rgba(11,18,32,.92);backdrop-filter:blur(20px);
    box-shadow:0 -18px 48px rgba(0,0,0,.5);
    transform:translateY(calc(100% - var(--peek) - env(safe-area-inset-bottom)));
    transition:transform .32s cubic-bezier(.2,.85,.25,1);
    padding-bottom:env(safe-area-inset-bottom);
    will-change:transform;
    touch-action:none;
  }
  .panel.open{transform:translateY(0)}
  .panel.dragging{transition:none}

  .panel-handle{
    display:flex;flex-direction:column;align-items:center;
    padding:12px 0 6px;   /* extra top padding = bigger tap target on mobile */
    cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  }
  .panel-handle:active{cursor:grabbing}
  /* pointer-events:none on the grip pill prevents it stealing touchstart from the handle */
  .panel-handle .grip{width:42px;height:4px;border-radius:999px;background:var(--border);transition:background .15s,width .15s;pointer-events:none}
  .panel.open .panel-handle .grip{background:var(--muted);width:56px}

  .panel header{padding:4px 16px 10px;touch-action:none}
  .panel h2{font-size:14px}
  .panel .controls,.folders,.panel .list{touch-action:pan-y}

  .maplibregl-ctrl-bottom-right{margin-bottom:calc(var(--peek) + 12px + env(safe-area-inset-bottom));transition:margin-bottom .28s cubic-bezier(.2,.85,.25,1),opacity .2s}
  body.panel-open .maplibregl-ctrl-bottom-right{opacity:0;pointer-events:none}

  .pfp-popup{min-width:200px;max-width:72vw}
  .folders .f-body{max-height:26vh}

  /* fatter PFP pins = easier to tap */
  .pfp-pin{width:52px;height:52px}
}

@media (max-width:420px){
  :root{--peek:132px}
  .top-controls{gap:4px}
  .layer-switch button{padding:4px 6px;font-size:10px}
  .layer-switch{padding:2px}
}

/* ---------- admin ---------- */
/* Admin shell owns its own scroll context so html/body overflow:hidden
   (needed by the map page) doesn't block admin page scrolling.          */
.admin-shell{
  display:grid;
  grid-template-columns:220px 1fr;
  height:100dvh;          /* fill viewport exactly */
  overflow:hidden;        /* clip the grid itself  */
}
.admin-nav{
  background:var(--surface);border-right:1px solid var(--border);padding:16px;
  overflow-y:auto;        /* sidebar scrolls independently if content overflows */
  height:100%;
}
.admin-nav .brand{width:100%;justify-content:flex-start;margin-bottom:18px}
.admin-nav a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:14px;margin-bottom:2px}
.admin-nav a:hover{color:var(--fg);background:var(--surface-2)}
.admin-nav a.active{color:var(--gold);background:var(--surface-2)}
.admin-nav .foot{position:absolute;bottom:16px;left:16px;font-size:11px;color:var(--muted)}
.admin-main{
  padding:24px 28px;
  overflow-y:auto;        /* main content scrolls independently */
  overflow-x:hidden;
  height:100%;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.admin-main h1{font-size:18px;margin:0 0 4px}
.admin-main .sub{color:var(--muted);font-size:13px;margin-bottom:18px}

.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;padding:10px 8px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--border)}
.table td{padding:8px;border-bottom:1px solid var(--border)}
.table tr:hover td{background:var(--surface-2)}
.table img.thumb{width:36px;height:36px;border-radius:999px;object-fit:cover;border:2px solid var(--gold)}
.table .danger{color:#f87171;background:none;border:0;cursor:pointer}
.table .danger:hover{color:#fca5a5}

.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;max-width:640px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;background:var(--surface-2);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:9px 11px;font-size:13px;outline:none}
.field input:focus,.field select:focus{border-color:var(--gold)}
.btn{background:var(--gold);color:#1a1300;border:0;padding:10px 18px;font-weight:700;border-radius:10px;cursor:pointer;box-shadow:0 0 18px var(--gold-glow);transition:.15s;display:inline-flex;gap:6px;align-items:center}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:none;border:1px solid var(--border)}

.drop{border:2px dashed var(--border);border-radius:16px;padding:36px;text-align:center;cursor:pointer;transition:.15s}
.drop:hover{border-color:var(--gold);background:var(--surface-2)}
.drop strong{color:var(--gold)}
.notice{padding:10px 12px;border-radius:10px;font-size:13px;margin-top:12px}
.notice.ok{background:rgba(16,185,129,.12);color:#a7f3d0;border:1px solid rgba(16,185,129,.3)}
.notice.err{background:rgba(248,113,113,.12);color:#fecaca;border:1px solid rgba(248,113,113,.3)}

/* login */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:360px}
.login-card h1{font-size:18px;margin:0 0 6px}
.login-card p{color:var(--muted);font-size:13px;margin:0 0 18px}

/* ---------- "Add yourself" submission modal ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  opacity:0;visibility:hidden;
  transition:opacity .22s,visibility .22s;
}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px 22px 20px;
  width:100%;max-width:460px;
  max-height:90dvh;overflow-y:auto;
  position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.65);
}
.modal-card h3{margin:0 0 18px;font-size:16px;font-weight:700}
.modal-close{
  position:absolute;top:14px;right:16px;
  background:none;border:0;color:var(--muted);font-size:22px;cursor:pointer;
  line-height:1;padding:2px 6px;border-radius:6px;
}
.modal-close:hover{color:var(--fg);background:var(--surface-2)}
.modal-pfp-wrap{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.modal-pfp-preview{
  width:72px;height:72px;border-radius:50%;
  object-fit:cover;border:2px solid var(--gold);
  background:var(--surface-2);flex:0 0 72px;
  display:block;
}
.modal-pfp-btn{font-size:12px;color:var(--gold);cursor:pointer;text-decoration:underline;background:none;border:0;padding:0}
.modal-field{margin-bottom:12px}
.modal-field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.modal-field input,.modal-field select,.modal-field textarea{
  width:100%;background:var(--surface-2);color:var(--fg);
  border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;font-size:13px;outline:none;
  font-family:inherit;
}
.modal-field input:focus,.modal-field select:focus,.modal-field textarea:focus{border-color:var(--gold)}
.modal-field textarea{resize:vertical;min-height:72px}
.modal-actions{display:flex;gap:10px;margin-top:16px}
.modal-actions .btn{flex:1;justify-content:center}
.modal-notice{padding:10px 12px;border-radius:10px;font-size:13px;margin-top:12px}
.modal-notice.ok{background:rgba(16,185,129,.12);color:#a7f3d0;border:1px solid rgba(16,185,129,.3)}
.modal-notice.err{background:rgba(248,113,113,.12);color:#fecaca;border:1px solid rgba(248,113,113,.3)}
.modal-success{text-align:center;padding:20px 0 8px}
.modal-success .check{font-size:40px;display:block;margin-bottom:12px}
.modal-success p{color:var(--muted);font-size:13px;line-height:1.5;margin:0}

/* "Add yourself" button in panel header */
.btn-add-self{
  background:var(--gold);color:#1a1300;border:0;
  padding:5px 11px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;
  white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:.15s;
}
.btn-add-self:hover{filter:brightness(1.1)}

/* =====================================================================
   ADMIN — PREMIUM MOBILE RESPONSIVE (<= 900px)
   ---------------------------------------------------------------------
   • Sidebar becomes a sticky horizontal pill-nav with smooth scroll
   • Pin table transforms into stacked cards (CSS grid, zero HTML change)
   • Forms/cards re-padded for thumb reach, buttons become 44 px targets
   ===================================================================== */
@media (max-width: 900px){
  /* ---- layout ---- */
  .admin-shell{
    grid-template-columns:1fr;
    height:100dvh;
    /* Stack nav on top, main below; nav is fixed-height, main fills the rest */
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .admin-nav{
    /* Top pill-bar — fixed height, scrolls horizontally */
    flex:0 0 auto;
    height:auto;
    position:static;          /* not sticky — it's at the top of the flex stack */
    display:flex;flex-direction:row;flex-wrap:nowrap;
    align-items:center;gap:6px;
    overflow-x:auto;overflow-y:hidden;
    padding:10px 12px;
    border-right:0;
    border-bottom:1px solid var(--border);
    background:rgba(11,18,32,.88);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    z-index:30;
  }
  .admin-nav::-webkit-scrollbar{display:none}
  .admin-nav .brand{
    margin:0 6px 0 0;padding:0;
    flex:0 0 auto;font-size:14px;font-weight:700;
  }
  .admin-nav .brand .dot{width:10px;height:10px}
  .admin-nav a{
    flex:0 0 auto;white-space:nowrap;
    margin:0;padding:8px 14px;
    border-radius:999px;font-size:13px;font-weight:500;
    background:transparent;
    border:1px solid transparent;
    transition:.15s;
  }
  .admin-nav a.active{
    background:rgba(212,175,55,.12);
    border-color:rgba(212,175,55,.28);
    color:var(--gold);
  }
  /* Neutralize inline margin-top on "← Public map" link (desktop-only visual) */
  .admin-nav a[style*="margin-top"]{margin-top:0 !important}

  /* Main content: fills remaining height and scrolls vertically */
  .admin-main{
    flex:1 1 auto;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:16px 14px 40px;
  }
  .admin-main h1{font-size:20px}
  .admin-main .sub{font-size:12px;margin-bottom:14px}

  /* ---- cards / forms ---- */
  .card{padding:16px;border-radius:14px;max-width:100%}
  .field input,.field select,.field textarea{
    font-size:16px;           /* prevents iOS zoom-on-focus */
    padding:11px 12px;
  }
  .btn{
    padding:11px 18px;min-height:44px;font-size:14px;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  }
  .btn.ghost{min-height:44px}

  /* Inline style overrides need specificity — use attribute selectors */
  .admin-main form[method="get"].card{padding:12px}
  .admin-main form[method="get"].card .field{margin-bottom:8px;min-width:0;flex:1 1 100%}
  .admin-main form[method="get"].card > div:last-child{width:100%;display:flex;gap:8px}
  .admin-main form[method="get"].card > div:last-child .btn{flex:1}

  /* ---- TABLES → stacked cards (scoped per-table via :has() column count) ---- */
  .table{display:block;font-size:14px;width:100%}
  .table thead{display:none}
  .table tbody{display:block}
  .table tr{
    display:block;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px 14px;
    margin-bottom:10px;
    transition:.15s;
  }
  .table tr:hover td{background:transparent}
  .table tr:active{transform:scale(.995)}
  .table td{display:block;padding:0;border:0;min-width:0}

  /* ── PINS table: 7 columns → rich card with avatar + grid ── */
  .table tr:has(td:nth-child(7)){
    display:grid;
    grid-template-columns:56px 1fr auto;
    grid-template-areas:
      "thumb  name    actions"
      "thumb  handle  actions"
      "meta   meta    meta"
      "folder folder  folder";
    gap:4px 14px;
  }
  .table tr:has(td:nth-child(7)) td:nth-child(1){grid-area:thumb;align-self:center}
  .table tr:has(td:nth-child(7)) td:nth-child(2){
    grid-area:name;font-weight:600;color:var(--fg);font-size:15px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .table tr:has(td:nth-child(7)) td:nth-child(3){grid-area:handle;font-size:12px;color:var(--gold-soft)}
  .table tr:has(td:nth-child(7)) td:nth-child(4){grid-area:meta;font-size:12px;color:var(--muted)}
  .table tr:has(td:nth-child(7)) td:nth-child(4)::before{content:"📍 "}
  .table tr:has(td:nth-child(7)) td:nth-child(5){grid-area:folder;margin-top:6px}
  .table tr:has(td:nth-child(7)) td:nth-child(5) select{width:100%;font-size:14px;padding:8px 10px}
  .table tr:has(td:nth-child(7)) td:nth-child(6){display:none}       /* hide date */
  .table tr:has(td:nth-child(7)) td:nth-child(7){
    grid-area:actions;align-self:center;
    display:flex;gap:6px;align-items:center;
  }
  .table tr:has(td:nth-child(7)) td:nth-child(7) .btn{
    padding:7px 12px !important;font-size:12px !important;min-height:34px;
  }
  .table tr:has(td:nth-child(7)) td:nth-child(7) .danger{
    background:rgba(248,113,113,.1) !important;
    border:1px solid rgba(248,113,113,.25) !important;
    border-radius:8px;padding:6px 10px !important;
    min-width:34px;min-height:34px;margin-left:0 !important;font-size:14px;
  }
  .table img.thumb{width:52px;height:52px;border-width:2px}

  /* ── LAYERS table: 4 columns → simpler card with stacked meta + actions ── */
  .table tr:has(td:nth-child(4)):not(:has(td:nth-child(5))){
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "name   count"
      "view   view"
      "acts   acts";
    gap:6px 10px;
  }
  .table tr:has(td:nth-child(4)):not(:has(td:nth-child(5))) td:nth-child(1){
    grid-area:name;font-weight:600;font-size:15px;color:var(--fg);
  }
  .table tr:has(td:nth-child(4)):not(:has(td:nth-child(5))) td:nth-child(2){
    grid-area:count;font-size:12px;color:var(--muted);align-self:center;
  }
  .table tr:has(td:nth-child(4)):not(:has(td:nth-child(5))) td:nth-child(2)::before{content:"· "}
  .table tr:has(td:nth-child(4)):not(:has(td:nth-child(5))) td:nth-child(3){grid-area:view}
  .table tr:has(td:nth-child(4)):not(:has(td:nth-child(5))) td:nth-child(3) .btn{width:100%;justify-content:center}
  .table tr:has(td:nth-child(4)):not(:has(td:nth-child(5))) td:nth-child(4){
    grid-area:acts;text-align:left !important;white-space:normal !important;
    display:flex;gap:6px;flex-wrap:wrap;
  }
  .table tr:has(td:nth-child(4)):not(:has(td:nth-child(5))) td:nth-child(4) .btn{
    flex:1 1 auto;justify-content:center;font-size:12px;padding:9px 12px;min-height:38px;
  }
  .table tr:has(td:nth-child(4)):not(:has(td:nth-child(5))) td:nth-child(4) .danger{
    flex:1 1 auto;
    background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.25);
    color:#fca5a5;padding:9px 12px;border-radius:10px;cursor:pointer;min-height:38px;
  }

  /* Empty-state row spans full width */
  .table tr:has(td[colspan]){display:block;padding:28px 16px;text-align:center}
  .table tr td[colspan]{text-align:center}

  /* ---- SUBMISSIONS sub-card → stacked on mobile ---- */
  .sub-card{
    flex-direction:column;align-items:stretch !important;gap:12px !important;
    padding:14px !important;
  }
  .sub-card .sub-avatar{
    width:64px !important;height:64px !important;flex:0 0 64px !important;
    align-self:flex-start;
  }
  .sub-actions{
    flex-direction:row !important;flex-wrap:wrap;
    align-items:stretch !important;gap:8px !important;
  }
  .sub-actions .folder-pick{flex:1 1 100%;min-width:0 !important;font-size:14px;padding:9px 10px}
  .sub-actions .btn-approve,
  .sub-actions .btn-reject{flex:1 1 calc(50% - 4px);min-height:42px}

  /* ---- edit-pin location picker ---- */
  #loc-map{height:260px !important}
  .coord-row{grid-template-columns:1fr 1fr !important;gap:8px !important}

  /* ---- login ---- */
  .login-card{padding:18px}
}

/* Extra-tight phones */
@media (max-width: 420px){
  .admin-main{padding:14px 10px 32px}
  .table tr{grid-template-columns:48px 1fr auto;padding:10px 12px}
  .table img.thumb{width:44px;height:44px}
  .table td:nth-child(2){font-size:14px}
  .admin-nav a{padding:7px 11px;font-size:12px}
  .btn{font-size:13px}
}