:root {
  /* ── Ghostmode palette ──────────────────────────────────────────────
     Ghost Blue #5B8CFF · Deep Navy #0B1020 · Soft Blue Mist #DDE8FF
     Pale Background #F7FAFF · Dark Background #060914
     Sleek, glassy, softly mysterious — never Halloween or harsh neon. */
  --ghost: #5B8CFF;
  --ghost-deep: #3B6FE0;
  --ghost-mist: #DDE8FF;
  --ghost-glow: rgba(91, 140, 255, .35);
  --ghost-glow-soft: rgba(91, 140, 255, .14);

  /* Surface ladder — aliased to legacy names so the rest of the CSS keeps
     working. Light mode: pale blue-tinted paper. */
  --paper: #F7FAFF;
  --paper-2: #FFFFFF;
  --note-paper: #FFFFFF;
  --ink: #0B1020;
  --muted: #5A6483;
  --line: rgba(11, 16, 32, .10);
  --coral: var(--ghost);          /* legacy alias → ghost accent */
  --lime: var(--ghost-mist);      /* legacy alias → mist */
  --blue: var(--ghost);           /* legacy alias → ghost */
  --shadow: 0 12px 40px rgba(91, 140, 255, .14);

  --surface-1: #F7FAFF;
  --surface-2: #FFFFFF;
  --surface-3: #EEF3FF;
  --surface-ink: #0B1020;
  --surface-muted: #5A6483;
  --on-accent: #FFFFFF;

  --border-strong: var(--ghost);
  --border-faint: rgba(11, 16, 32, .10);

  /* Soft shadows (ghost-glow tinted) — replaced the old hard neo-brutal
     stack. Kept the same names so existing rules still resolve. */
  --shadow-hard: 0 2px 12px rgba(91, 140, 255, .16);
  --shadow-hard-sm: 0 1px 8px rgba(91, 140, 255, .12);
  --shadow-hard-lg: 0 4px 20px rgba(91, 140, 255, .22);

  /* ── Fonts ─────────────────────────────────────────────────────────── */
  --font-body: "Cairo", system-ui, "Segoe UI", sans-serif;
  --font-logo: "Kanit", var(--font-body);

  /* ── Motion tokens ─────────────────────────────────────────────────── */
  --ease-spring: cubic-bezier(.16, 1.2, .3, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: .15s;
  --dur-base: .25s;
  --dur-slow: .4s;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 99px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --topbar-base: 74px;
  --topbar-height: calc(var(--topbar-base) + var(--safe-top));
  --bottom-nav-offset: calc(14px + var(--safe-bottom));
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

html[data-theme="dark"] {
  /* Ghostmode dark — deep navy, glassy. Each surface tier lifts brightness. */
  --paper: #060914;
  --paper-2: #0B1020;
  --note-paper: #0B1020;
  --ink: #DDE8FF;
  --muted: #8090B8;
  --line: rgba(221, 232, 255, .12);
  --shadow: 0 12px 40px rgba(0, 0, 0, .50);

  --surface-1: #060914;
  --surface-2: #0B1020;
  --surface-3: #1A2347;
  --surface-ink: #DDE8FF;
  --surface-muted: #8090B8;
  --on-accent: #FFFFFF;

  --border-strong: rgba(91, 140, 255, .55);
  --border-faint: rgba(221, 232, 255, .12);
  --shadow-hard: 0 2px 12px rgba(91, 140, 255, .28);
  --shadow-hard-sm: 0 1px 8px rgba(91, 140, 255, .22);
  --shadow-hard-lg: 0 4px 20px rgba(91, 140, 255, .36);

  color-scheme: dark;
}

/* Glassy surface utility — frosted blue-mist panels. */
.glass {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--border-faint);
}
html[data-theme="dark"] .glass {
  background: rgba(18, 24, 51, .55);
}

* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
body { margin: 0; min-width: 320px; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: var(--paper); position: relative; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; }
svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .22; z-index: 100; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"); }
.map-view [data-demo-feed],
.feed-view [data-demo-feed],
.nearby-panel [data-demo-feed] { display: none !important; }
.app-shell { height: 100vh; height: 100dvh; min-height: 100svh; position: relative; z-index: 1; overflow: hidden; }
.topbar { height: var(--topbar-height); padding: var(--safe-top) max(28px,var(--safe-right)) 0 max(28px,var(--safe-left)); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; border-bottom: 1px solid var(--border-faint); position: relative; z-index: 30; background: rgba(255,218,38,.93); backdrop-filter: blur(18px); }

/* ── Dark-mode surface assignments (tokenized, no more one-off hex) ──── */
html[data-theme="dark"] .topbar { background: rgba(4,8,23,.94); }
html[data-theme="dark"] .nearby-panel,
html[data-theme="dark"] .profile-view { background: var(--surface-2); }
html[data-theme="dark"] .pulse-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .feed-card,
html[data-theme="dark"] .modal { background: var(--surface-2); }
html[data-theme="dark"] .coral-card,
html[data-theme="dark"] .feed-card.feature { background: var(--ghost-deep); }
html[data-theme="dark"] .mapbox-map,
html[data-theme="dark"] .mapbox-fallback { filter:none; }
html[data-theme="dark"] .noise { opacity: .1; }
html[data-theme="dark"] .live-pill,
html[data-theme="dark"] .location-chip,
html[data-theme="dark"] .mode-switch,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .round-button,
html[data-theme="dark"] .map-caption,
html[data-theme="dark"] .city-reveal { background: var(--surface-2); color: var(--surface-ink); border-color: var(--border-strong); }
/* Inputs + raised chips use surface-3 (highest tier) so they read as
   interactive against surface-2 cards. */
html[data-theme="dark"] .person span,
html[data-theme="dark"] .composer-body,
html[data-theme="dark"] .google-button,
html[data-theme="dark"] .input-label input,
html[data-theme="dark"] .emoji-picker button,
html[data-theme="dark"] .map-actions,
html[data-theme="dark"] .poll-builder input,
html[data-theme="dark"] .photo-caption-input,
html[data-theme="dark"] .comment-form input,
html[data-theme="dark"] .admin-add-form input,
html[data-theme="dark"] .input-label select,
html[data-theme="dark"] #reportDetail,
html[data-theme="dark"] .composer-body textarea { background: var(--surface-3); color: var(--surface-ink); }
/* Paper (the onboarding promise scroll) stays cream in BOTH themes — it's a
   physical paper artifact, not a UI surface. Its text stays dark ink. */
html[data-theme="dark"] .paper,
html[data-theme="dark"] .doodle-draw,
html[data-theme="dark"] .note-media img,
html[data-theme="dark"] .feed-media-preview { background: #e8e3d6; color: #171816; }
html[data-theme="dark"] .paper,
html[data-theme="dark"] .badge-card,
html[data-theme="dark"] .audio-player,
html[data-theme="dark"] .unlock-button,
html[data-theme="dark"] .identity-preview,
html[data-theme="dark"] .note-pin.lime { color: #171816; }
html[data-theme="dark"] .paper p { color: #171816; }
html[data-theme="dark"] .trail-pin { background: var(--surface-3); }
html[data-theme="dark"] .place-tag { background: rgba(255,255,255,.12); }
html[data-theme="dark"] .photo-caption,
html[data-theme="dark"] .feed-card.visual .feed-card-head { background: var(--surface-2); }
html[data-theme="dark"] .pulse-card.photo-card { background: var(--surface-2); }
html[data-theme="dark"] .settings-card button:hover { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .city-reveal small { color: var(--surface-muted); }
html[data-theme="dark"] .mode-switch { background: var(--surface-2); border-color: var(--border-strong); }
html[data-theme="dark"] .mode-button { color: #d4d7cf; }
html[data-theme="dark"] .mode-button.is-active { background: var(--surface-ink); color: var(--surface-1); box-shadow: 0 0 0 1px var(--border-strong); }
html[data-theme="dark"] .mode-button:nth-child(2).is-active { background: var(--coral); color: var(--on-accent); }
html[data-theme="dark"] .mode-button small { opacity: .72; }
html[data-theme="dark"] .place-button { background: var(--surface-ink); color: var(--surface-1); border: 1px solid var(--border-strong); box-shadow: 0 12px 35px rgba(0,0,0,.5); }
html[data-theme="dark"] .place-button span { color: #3153c9; }
html[data-theme="dark"] .mapbox-status,
html[data-theme="dark"] .photo-picker { background: var(--surface-2); }
/* Legibility bump: muted caption text reads faint on dark, raise opacity. */
html[data-theme="dark"] .card-top small,
html[data-theme="dark"] .identity small,
html[data-theme="dark"] .trend { opacity: .82; }
/* feed-media-preview stayed cream in dark mode — bright white box on dark UI.
   Force it to surface-3 so it reads as a raised surface, not a lightbulb. */
html[data-theme="dark"] .feed-media-preview { background: var(--surface-3); }
/* Dark mode body text slightly heavier — same perceived weight as light. */
html[data-theme="dark"] body { font-weight: 500; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -1px; }
.brand-mark, .onboarding-logo { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50% 50% 48% 52% / 53% 44% 56% 47%; color: var(--paper-2); background: var(--ink); font-family: Georgia, serif; font-style: italic; font-size: 24px; transform: rotate(-6deg); }
.brand-dot { color: var(--coral); }
.live-pill { justify-self: center; border: 1px solid var(--line); background: rgba(247,244,236,.75); border-radius: 99px; padding: 9px 14px; font: 500 11px var(--font-body); text-transform: uppercase; letter-spacing: .5px; }
.live-dot { width: 7px; height: 7px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,101,77,.13); animation: blink 1.7s infinite; }
.view { display: none; position: absolute; inset: var(--topbar-height) 0 0; padding-bottom: calc(220px + var(--safe-bottom)); overflow: auto; }
.view.is-active { display: block; animation: view-in .35s ease both; }
.map-view.is-active { display: grid; grid-template-columns: minmax(0, 1fr) 365px; overflow: hidden; }
.view.map-view { padding-bottom: 0; }
.map-stage { position: relative; overflow: hidden; cursor: grab; isolation: isolate; background: #deddd4; }
.map-stage:active { cursor: grabbing; }
.map-stage.is-map-tapped { animation:map-tap .24s ease; }
.map-location-loader { position:absolute; inset:0; z-index:45; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:28px; text-align:center; background:var(--paper); opacity:1; visibility:visible; transition:opacity .55s ease,visibility .55s ease; }
.map-location-loader b { font-size:18px; letter-spacing:-.5px; }
.map-location-loader small { max-width:310px; color:var(--muted); font-size:10px; line-height:1.55; }
.map-location-loader button { margin-top:5px; padding:10px 14px; border:1px solid var(--ink); border-radius:9px; background:var(--lime); box-shadow:3px 3px 0 var(--ink); font-size:9px; font-weight:800; }
.map-loading-ring { width:47px; height:47px; margin-bottom:6px; border:4px solid rgba(91,140,255,.16); border-top-color:var(--blue); border-right-color:var(--coral); border-radius:50%; animation:map-loading-spin .8s linear infinite; }
.map-location-loader.has-error .map-loading-ring { animation:none; border-color:var(--coral); }
.map-stage.map-location-ready .map-location-loader { opacity:0; visibility:hidden; pointer-events:none; }

/* ── Launch / splash screen ─────────────────────────────────────────────
   Procedural ASCII sky used during the intro loading state. The hide is
   driven from JS (dismissLaunchSplash) so we can honor a minimum brand-
   display time even when the map resolves fast. */
.launch-splash {
  position: absolute; inset: 0; z-index: 45;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 0 8vw 12vh;
  background:
    radial-gradient(circle at 18% 16%, rgba(170,196,255,.22), transparent 16%),
    radial-gradient(circle at 50% 12%, rgba(190,215,255,.16), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(170,196,255,.20), transparent 15%),
    radial-gradient(circle at 24% 76%, rgba(156,187,255,.16), transparent 18%),
    radial-gradient(circle at 80% 80%, rgba(142,176,255,.16), transparent 20%),
    linear-gradient(180deg, #ffffff 0%, #f9fcff 34%, #ebf3ff 63%, #fdfdff 100%);
  background-blend-mode: screen, screen, screen, normal;
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, visibility .6s ease;
  overflow: hidden;
}
.launch-splash:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 16%, rgba(180,208,255,.18), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(170,200,255,.16), transparent 16%),
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.78), transparent 30%),
    radial-gradient(circle at 12% 84%, rgba(171,200,255,.16), transparent 20%),
    radial-gradient(circle at 86% 84%, rgba(150,185,255,.15), transparent 22%);
  mix-blend-mode: multiply;
  opacity: .8;
}
.launch-splash.launch-hiding { opacity: 0; visibility: hidden; pointer-events: none; }
.launch-splash.is-error { z-index: 46; }
.launch-ascii {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  opacity: .72;
  mix-blend-mode: multiply;
  filter: saturate(1.02) contrast(1.02) brightness(1.06);
}
.launch-ascii-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  color: rgba(70, 133, 232, .42);
  mix-blend-mode: multiply;
  opacity: .9;
  filter: blur(.15px);
}
.ascii-cloud {
  position: absolute;
  margin: 0;
  font: 800 clamp(7px, 1.75vw, 10px)/.76 var(--font-body);
  letter-spacing: 0;
  white-space: pre;
  text-align: center;
  transform-origin: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
  animation: launchCloudDrift 9s ease-in-out infinite alternate;
}
.cloud-a { left: -4%; top: 10%; transform: scale(1.32); animation-delay: -.6s; }
.cloud-b { right: -11%; top: 23%; transform: scale(1.12); animation-delay: -2.3s; }
.cloud-c { left: 27%; top: 39%; transform: scale(1.18); animation-delay: -4s; }
.cloud-d { left: 5%; bottom: 14%; transform: scale(1.16); animation-delay: -1.2s; }
.cloud-e { right: -2%; bottom: 11%; transform: scale(1.12); animation-delay: -3.4s; }
.launch-splash:before {
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 24%, rgba(171,199,255,.14), transparent 24%),
    radial-gradient(circle at 70% 20%, rgba(152,186,255,.1), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.52), transparent 58%);
  mix-blend-mode: multiply;
  opacity: .72;
}
.launch-title {
  position: relative;
  z-index: 2;
  margin: 0;
  font: 800 clamp(50px, 8.2vw, 96px) var(--font-body), sans-serif;
  letter-spacing: -.075em;
  line-height: .92;
  color: #202633;
  text-shadow: 0 1px 0 rgba(255,255,255,.92);
}
.launch-title b {
  display: inline-block;
  width: .22em;
  height: .22em;
  margin: 0 .04em .03em;
  border-radius: 2px;
  vertical-align: middle;
  background: #2e72ff;
  color: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.42);
}
.launch-progress {
  position: relative;
  z-index: 2;
  width: min(70vw, 390px);
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,247,253,.98));
  border: 1px solid rgba(149,170,208,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(128,158,212,.08),
    0 12px 28px rgba(31,102,255,.07);
}
.launch-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #2b72ff 0%, #3d86ff 45%, #5ca0ff 78%, #7cc1ff 100%);
  box-shadow: 0 0 14px rgba(43,114,255,.34);
  animation: launchProgressSweep 2.2s ease-in-out infinite alternate;
}
.launch-progress i:after {
  content:"";
  position:absolute;
  top:0; right:-18%;
  width:40%; height:100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.78), rgba(255,255,255,0));
  opacity: .78;
  filter: blur(1px);
}
.launch-status {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  z-index: 2;
  transform: translateX(-50%);
  font: 500 10px var(--font-body);
  color: rgba(138,145,160,.86);
  text-transform: uppercase;
  letter-spacing: 2.1px;
}
@keyframes launchProgressSweep {
  0% { transform: translateX(0); width: 26%; }
  100% { transform: translateX(115%); width: 45%; }
}
@keyframes launchCloudDrift {
  from { translate: -5px -3px; opacity: .72; }
  to { translate: 6px 4px; opacity: .95; }
}
html[data-theme="dark"] body.launch-active .topbar {
  background: rgba(255,218,38,.96);
  color: #11120f;
}
html[data-theme="dark"] body.launch-active .brand {
  color: #11120f;
}
html[data-theme="dark"] body.launch-active .brand-mark {
  background: #11120f;
  color: #f7f4ec;
}
html[data-theme="dark"] .launch-splash {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.24), transparent 15%),
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.2), transparent 18%),
    radial-gradient(circle at 84% 20%, rgba(255,255,255,.22), transparent 15%),
    radial-gradient(circle at 24% 66%, rgba(255,255,255,.16), transparent 16%),
    radial-gradient(circle at 76% 70%, rgba(255,255,255,.14), transparent 17%),
    radial-gradient(circle at 50% 58%, rgba(90,153,255,.18), transparent 42%),
    linear-gradient(180deg, #8ad8ff 0%, #3392e4 30%, #0b3577 70%, #071326 100%);
  background-blend-mode: screen, screen, screen, normal;
  padding-bottom: 13vh;
}
html[data-theme="dark"] .launch-splash:after {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 78% 24%, rgba(255,255,255,.14), transparent 16%),
    radial-gradient(circle at 50% 47%, rgba(255,255,255,.1), transparent 34%),
    radial-gradient(circle at 12% 84%, rgba(255,255,255,.12), transparent 20%),
    radial-gradient(circle at 86% 83%, rgba(255,255,255,.1), transparent 22%);
  opacity: .74;
}
html[data-theme="dark"] .launch-ascii {
  opacity: .96;
  mix-blend-mode: screen;
  filter: saturate(1.12) contrast(1.03) brightness(.98) drop-shadow(0 2px 0 rgba(0,40,85,.12));
}
html[data-theme="dark"] .launch-ascii-fallback {
  color: rgba(246,252,255,.82);
  mix-blend-mode: screen;
  opacity: .92;
  text-shadow: 0 0 10px rgba(51,172,255,.18);
}
html[data-theme="dark"] .ascii-cloud { font-size: clamp(7px, 1.75vw, 10px); }
html[data-theme="dark"] .launch-splash:before {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.12), transparent 20%),
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.08), transparent 58%);
  opacity: .8;
}
html[data-theme="dark"] .launch-title {
  font: 800 clamp(32px, 5vw, 52px) var(--font-body), sans-serif;
  color: #f6f8fc;
  text-shadow: 0 2px 18px rgba(0,0,0,.32);
}
html[data-theme="dark"] .launch-title b {
  background: var(--coral);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22);
}
html[data-theme="dark"] .launch-progress { display: none; }
html[data-theme="dark"] .launch-status {
  display: block;
  font-size: 12px;
  color: rgba(235,238,242,.82);
  bottom: 10vh;
}
html:not([data-theme="dark"]) .launch-status { display: none; }
html:not([data-theme="dark"]) .launch-progress { margin-top: 2.2vh; }
.mapbox-fallback { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) saturate(.16) contrast(1.04) brightness(1.02); opacity: 0; transition: opacity .25s; }
.map-stage.mapbox-static-ready .mapbox-fallback { opacity: 1; }
.map-stage.mapbox-ready .mapbox-fallback { opacity: 0; }
.mapbox-map { position: absolute; inset: 0; z-index: 2; opacity:0; overflow:hidden; transition:opacity .55s ease; }
.mapbox-map:before,.mapbox-map:after { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .32s ease; }
.mapbox-map:after { background:linear-gradient(0deg,rgba(91,140,255,.46) 0%,rgba(91,140,255,.32) 12%,rgba(91,140,255,.18) 22%,rgba(91,140,255,.07) 33%,rgba(91,140,255,0) 48%); mix-blend-mode:multiply; }
.map-stage.map-location-ready .mapbox-map:after { opacity:1; }
body.post-mode .map-stage.map-location-ready .mapbox-map:after { opacity:0; }
.map-stage.map-style-switching .mapbox-map { transition:none; }
.map-stage.map-style-switching .mapbox-map:before {
  opacity:1;
  z-index:20;
  background:var(--paper);
  mix-blend-mode:normal;
  backdrop-filter:none;
  -webkit-mask:none;
  mask:none;
}
.map-stage.map-style-switching .map-canvas { opacity:0; transition:none; }
html[data-theme="dark"] .map-stage.map-style-switching .mapbox-map:before { background:#060914; }
body.post-mode .map-stage.map-location-ready .mapbox-map:before {
  opacity:1;
  background:
    linear-gradient(180deg,rgba(91,140,255,.34) 0%,rgba(91,140,255,.2) 13%,rgba(91,140,255,.07) 24%,rgba(91,140,255,0) 36%),
    linear-gradient(0deg,rgba(91,140,255,.38) 0%,rgba(91,140,255,.23) 14%,rgba(91,140,255,.08) 25%,rgba(91,140,255,0) 38%);
  mix-blend-mode:multiply;
  -webkit-backdrop-filter:blur(1px);
  backdrop-filter:blur(1px);
  -webkit-mask:linear-gradient(180deg,#000 0 20%,transparent 38% 62%,#000 80% 100%);
  mask:linear-gradient(180deg,#000 0 20%,transparent 38% 62%,#000 80% 100%);
}
.map-stage.map-location-ready .mapbox-map { opacity:1; }
.city-reveal { position:relative; z-index:1; justify-self:end; align-self:center; display:flex; align-items:center; gap:12px; min-width:215px; min-height:58px; padding:7px 14px 7px 8px; border:1px solid transparent; border-radius:15px; background:transparent; color:var(--ink); overflow:hidden; opacity:0; visibility:hidden; transform:translateY(18px); }
.city-reveal[hidden] { display:none !important; }
.city-reveal.is-visible { opacity:1; visibility:visible; transform:translateY(0); animation:city-rise .58s cubic-bezier(.16,1,.3,1) forwards; }
.city-reveal:after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.72) 50%,transparent 70%); transform:translateX(-130%); }
.city-reveal.is-scrambling:after { animation:city-scan .65s linear infinite; }
.city-locator { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--coral); }
.city-locator svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.city-copy { min-width:0; text-align:left; }
.city-reveal small,.city-reveal b { display:block; }
.city-reveal small { margin-bottom:2px; font:500 8px var(--font-body); letter-spacing:1.5px; color:var(--muted); }
.city-reveal b { overflow:hidden; text-overflow:ellipsis; font:800 16px var(--font-body); text-transform:uppercase; white-space:nowrap; letter-spacing:.45px; }
.city-reveal.is-resolved { transform:translateY(0); animation:city-resolve .48s cubic-bezier(.2,1.4,.4,1) forwards; }
.map-canvas { position: absolute; z-index: 3; width: 125%; height: 125%; left: -12.5%; top: -12.5%; transition: transform .4s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.map-canvas.is-dragging { transition: none; }
.map-stage.mapbox-ready .map-canvas { inset: 0; width: 100%; height: 100%; left: 0; top: 0; }
.map-stage.mapbox-ready .note-pin,
.map-stage.mapbox-ready .real-user-marker { pointer-events: auto; }
body.account-mode [data-demo-feed] { display:none !important; }
.mapboxgl-marker.note-pin { left: 0; top: 0; z-index:8 !important; transition: none !important; }
.mapboxgl-marker.note-pin.is-jiggling,
.note-pin.is-jiggling { animation:none; }
.mapboxgl-marker.walker { left: 0; top: 0; animation: none !important; transition: none !important; }
.mapboxgl-marker.user-location { position:absolute; left:0; top:0; z-index:8 !important; transition:none !important; }
.mapboxgl-ctrl-bottom-left { bottom: 76px; }
.mapboxgl-ctrl-bottom-right { bottom: 76px; }
.mapboxgl-ctrl-attrib { font: 400 9px var(--font-body); background: rgba(247,244,236,.78) !important; }
/* NOTE: no transform: translate(-50%,-50%) here. The marker uses Mapbox's
   anchor:'bottom', which positions the wrapper so the pin's bottom tip sits at
   the lng/lat. A manual center-offset translate on the child fought that anchor
   and caused a ~1px sub-pixel vibration every frame (Mapbox recomputes the
   wrapper transform on camera/radius updates, and the conflicting child
   translate shimmered). Letting anchor:'bottom' do the positioning removes the
   feedback loop. Hover uses transform: scale() only (centered via origin),
   which composes with Mapbox's wrapper translate without re-introducing it. */
.note-pin { position: absolute; left: 0; top: 0; transform-origin: center; display: flex; align-items: center; gap: 5px; min-width: 48px; height: 38px; padding: 4px 7px; border-radius: 20px 20px 20px 5px; border: 2px solid var(--paper-2); background: var(--coral); box-shadow: 0 6px 14px rgba(23,24,22,.2); transition: filter .15s, transform .15s; z-index: 4; isolation:isolate; overflow:visible; }
.note-pin:after { content:""; position:absolute; inset:-6px; z-index:-1; border:2px solid rgba(91,140,255,.55); border-radius:inherit; opacity:0; pointer-events:none; }
.note-pin.is-jiggling:after { animation:user-pulse .52s ease-out both; }
.pin-bounce { display:inline-flex; align-items:center; gap:5px; transform-origin:center center; will-change:transform; }
.note-pin.photo .pin-bounce { position:relative; display:block; width:100%; height:100%; }
.note-pin.is-jiggling .pin-bounce { animation:note-icon-pop .24s cubic-bezier(.2,1.45,.4,1) both; transform-origin:center center; }
.pin-avatar { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.78); font-size: 13px; }
.pin-count { font: 700 10px var(--font-body); }
.pin-count.is-empty { display: none; }

/* NEW tag on a just-dropped note pin. Hidden by default; revealed only while the
   pin has .is-just-dropped (set on the optimistic note, removed on reconcile).
   Positioned at the top-right of the pin so it's visible without covering the
   icon. High-contrast lime/ink so it pops on any pin background color. */
.pin-new-tag {
  position: absolute; right: -6px; top: -8px;
  display: none;
  padding: 2px 5px; border-radius: 99px;
  background: var(--lime); color: var(--ink);
  border: 1.5px solid var(--ink);
  font: 800 8px var(--font-body); letter-spacing: .5px;
  box-shadow: 1px 1px 0 var(--ink);
  pointer-events: none; z-index: 5;
  white-space: nowrap;
}
.note-pin.is-just-dropped .pin-new-tag { display: inline-block; animation: pin-new-fade 2.6s ease 1.2s both; }
@keyframes pin-new-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

.note-pin.ink { background: var(--ink); color: white; }
.note-pin.lime { background: var(--lime); }
.note-pin.coral { background: var(--coral); color: white; }
.note-pin.sky { background: #8ec9ff; }
.note-pin.gold { background: #ffd166; }
.note-pin.rose { background: #ff9ec7; }
.note-pin.photo { width: 49px; height: 49px; padding: 3px; border-radius: 50% 50% 50% 8px; }
.mini-photo { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(#7a82b7 0 35%, #f68662 36% 57%, #252f3d 58%); }
.note-pin.photo .pin-count { position: absolute; right: -17px; top: -9px; background: var(--paper-2); color: var(--ink); border-radius: 20px; padding: 3px 5px; }

/* Just-dropped (optimistic) note: a pure opacity pop. The pin appears at full
   size instantly and does one soft opacity pulse (1 → 0.35 → 1). No scale, no
   translate — so it's completely camera-independent (immune to zoom/pitch) and
   reads as "blinked into existence here" rather than "flew in from somewhere."
   The +N PTS badge next to it provides the celebratory motion. */
.note-pin.is-just-dropped { animation: note-opacity-pop .45s ease-out both; z-index: 14; }
@keyframes note-opacity-pop {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  50%  { opacity: .35; }
  100% { opacity: 1; }
}
/* Transient +N PTS badge shown next to a just-dropped pin. Auto-removed by JS. */
.note-pin .drop-pin-points {
  position: absolute; right: -8px; top: -22px;
  display: flex; align-items: baseline; gap: 2px;
  padding: 4px 8px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--lime); color: #171816;
  box-shadow: 3px 3px 0 var(--ink);
  font: 800 12px var(--font-body); white-space: nowrap;
  pointer-events: none; z-index: 15;
  animation: drop-points-pop 2.6s ease-out both;
}
.note-pin .drop-pin-points b { font-size: 14px; }
.note-pin .drop-pin-points small { font-size: 8px; letter-spacing: .5px; opacity: .8; }
@keyframes drop-points-pop {
  0%   { transform: translateY(8px) scale(.6); opacity: 0; }
  18%  { transform: translateY(-2px) scale(1.08); opacity: 1; }
  30%  { transform: translateY(0) scale(1); }
  75%  { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-14px) scale(.9); opacity: 0; }
}
.note-pin.locked { min-width: 34px; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #a9aaa4; color: #696a66; filter: grayscale(1); opacity: .72; }
.note-pin.locked svg { width: 18px; }
.walker { position: absolute; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--ink); z-index: 3; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.walker:before, .walker:after { content:""; position:absolute; inset:-4px; z-index:-1; border:2px solid var(--blue); border-radius:50%; opacity:0; animation:user-pulse 2.8s ease-out infinite; }
.walker:after { animation-delay:1.4s; }
.walker span { font-size: 18px; }
.walker i, .person i { position: absolute; right: 0; bottom: 1px; width: 9px; height: 9px; background: #53cf72; border: 2px solid var(--paper-2); border-radius: 50%; }
.walker em { position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%); padding:3px 6px; border:1px solid var(--ink); border-radius:5px; background:var(--paper-2); color:var(--ink); box-shadow:2px 2px 0 var(--ink); font:normal 700 7px var(--font-body); letter-spacing:.8px; white-space:nowrap; }
.walker.is-high-fived,.person.is-high-fived { filter:saturate(.5); opacity:.72; cursor:default; }
.walker.is-high-fived:after { content:"✓"; z-index:4; inset:auto -4px -4px auto; width:16px; height:16px; display:grid; place-items:center; border:2px solid white; border-radius:50%; background:#53cf72; color:#171816; opacity:1; animation:none; font:800 8px var(--font-body); }
.walker-one { left: 53%; top: 66%; }
.walker-two { left: 33%; top: 35%; }
.real-user-marker { position:absolute; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:2px solid var(--ink); background:var(--paper-2); box-shadow:0 8px 18px rgba(0,0,0,.18); z-index:9; }
.real-user-marker:before,.real-user-marker:after { content:""; position:absolute; inset:-5px; border:2px solid var(--blue); border-radius:50%; opacity:0; animation:user-pulse 2.8s ease-out infinite; }
.real-user-marker:after { animation-delay:1.4s; }
.real-user-marker span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:white; font-size:18px; }
.real-user-marker i { position:absolute; right:1px; bottom:2px; width:10px; height:10px; border:2px solid var(--paper-2); border-radius:50%; background:#53cf72; }
.real-user-marker em { position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%); padding:4px 7px; border:1px solid var(--ink); border-radius:6px; background:var(--paper-2); color:var(--ink); box-shadow:2px 2px 0 var(--ink); font:normal 800 7px var(--font-body); white-space:nowrap; }
.real-user-marker.is-nearby { background:var(--lime); }
.user-location { display:none; position:relative; z-index:2147483000; width:62px; height:62px; padding:0; border:0; border-radius:50%; background:transparent; pointer-events:auto; cursor:pointer; overflow:visible; filter:drop-shadow(0 5px 10px rgba(91,140,255,.25)); }
.user-location.has-fix { display: block; }
.user-location span { position:absolute; z-index:2; left:50%; top:50%; display:block; width:36px; height:36px; border-radius:50%; background:var(--blue); border:6px solid white; box-shadow:0 4px 16px rgba(91,140,255,.58); transform:translate(-50%,-50%); }
.user-location span:after { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; background:white; transform:translate(-50%,-50%); }
.user-location i { position:absolute; inset:0; border:3px solid rgba(91,140,255,.44); border-radius:50%; animation:location-wave 2s infinite; }
.user-location em { position:absolute; z-index:3; left:50%; top:calc(100% + 2px); transform:translateX(-50%); padding:4px 8px; border:2px solid white; border-radius:99px; background:var(--blue); color:white; box-shadow:0 3px 0 rgba(23,24,22,.85); font:normal 800 8px var(--font-body); letter-spacing:1px; white-space:nowrap; }
.self-speech { position:absolute; z-index:5; left:50%; bottom:calc(100% + 12px); width:max-content; max-width:190px; padding:9px 12px; border:1px solid var(--ink); border-radius:12px 12px 12px 3px; background:var(--paper-2); color:var(--ink); box-shadow:4px 4px 0 var(--ink); font:700 10px/1.35 var(--font-body); white-space:normal; opacity:0; visibility:hidden; transform:translate(-50%,8px) scale(.82); transform-origin:50% 100%; pointer-events:none; }
.self-speech:after { content:""; position:absolute; left:50%; top:100%; width:10px; height:10px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--paper-2); transform:translate(-50%,-5px) rotate(45deg); }
.self-speech.is-speaking { visibility:visible; animation:self-speech-pop 2.35s cubic-bezier(.2,.9,.25,1) both; }
.user-location.is-tapped span { animation:self-core-shake .42s ease; }
.user-location.is-tapped em { animation:self-label-shake .42s ease; }
.drop-pin { display:none; position:absolute; left:50%; top:50%; z-index:15; width:82px; height:126px; transform:translate(-50%,-50%); transform-origin:center bottom; pointer-events:none; --dust-a-x:-28px; --dust-a-y:-14px; --dust-b-x:29px; --dust-b-y:-12px; --dust-c-x:-14px; --dust-c-y:-25px; --dust-d-x:16px; --dust-d-y:-22px; --dust-e-x:0px; --dust-e-y:-30px; }
.drop-pin:before,.drop-pin:after { content:""; position:absolute; left:50%; bottom:9px; width:112px; height:54px; border-radius:50%; pointer-events:none; opacity:0; transform:translateX(-50%) scale(.18); filter:blur(7px); background:radial-gradient(circle at 28% 58%,rgba(255,255,255,.88) 0 10%,transparent 26%),radial-gradient(circle at 52% 36%,rgba(255,255,255,.76) 0 13%,transparent 32%),radial-gradient(circle at 72% 62%,rgba(255,255,255,.68) 0 12%,transparent 30%),radial-gradient(circle at 44% 76%,rgba(255,255,255,.5) 0 11%,transparent 29%); }
.drop-pin:after { width:86px; height:82px; bottom:0; filter:blur(10px); background:radial-gradient(circle at 38% 42%,rgba(255,255,255,.72) 0 11%,transparent 31%),radial-gradient(circle at 62% 61%,rgba(255,255,255,.58) 0 14%,transparent 34%); }
.smoke-fluid { position:absolute; inset:0; z-index:14; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity .16s ease; mix-blend-mode:screen; }
.smoke-fluid.is-active { opacity:1; }
.drop-head { position:absolute; left:50%; bottom:31px; width:60px; height:72px; display:grid; place-items:center; transform:translateX(-50%); transform-origin:50% 94%; transition:transform .16s cubic-bezier(.16,1,.3,1); animation:drop-head-pulse 2.2s ease-in-out infinite; filter:drop-shadow(0 8px 16px rgba(255,101,77,.32)); }
.drop-pin-svg { width:100%; height:100%; overflow:visible; display:block; }
.drop-pin-svg * { vector-effect:non-scaling-stroke; }
.drop-pin-outline { fill:var(--paper-2); stroke:var(--paper-2); stroke-width:2; stroke-linejoin:round; }
.drop-pin-fill { fill:var(--ghost); stroke:var(--ghost-deep); stroke-width:1.3; stroke-linejoin:round; transition:fill .08s, filter .08s; }
.drop-pin-inner { fill:rgba(255,255,255,.18); stroke:rgba(255,255,255,.72); stroke-width:2; }
.drop-pin-plus { fill:none; stroke:white; stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round; }
.drop-shadow { position:absolute; left:50%; bottom:20px; width:38px; height:10px; transform:translateX(-50%); border-radius:50%; background:rgba(0,0,0,.24); filter:blur(3px); transition:transform .18s,opacity .18s; }
.dust-particle { position:absolute; left:50%; bottom:22px; width:7px; height:7px; border-radius:50%; background:rgba(23,24,22,.28); opacity:0; pointer-events:none; filter:blur(.2px); }
.dust-b,.dust-d { width:5px; height:5px; background:rgba(255,101,77,.35); }
.dust-e { width:9px; height:4px; border-radius:99px; background:rgba(23,24,22,.18); }
body.post-mode .drop-pin { display: block; }
body.post-mode .drop-pin.is-lifted .drop-head { animation:pin-slingshot-lift 2s cubic-bezier(.12,.9,.18,1) forwards; }
body.post-mode .drop-pin.is-lifted .drop-shadow { transform:translateX(-50%) scale(.42); opacity:.34; transition-duration:.2s; }
body.post-mode .drop-pin.is-slamming .drop-head { animation:pin-slam-head .38s cubic-bezier(.2,.9,.25,1), drop-head-pulse 2.2s ease-in-out .4s infinite; }
body.post-mode .drop-pin.is-impact-flashing .drop-pin-fill { animation:pin-impact-flash .24s ease-out both; }
body.post-mode .drop-pin.is-impact-flashing .drop-pin-inner { animation:pin-inner-flash .24s ease-out both; }
body.post-mode .drop-pin.is-slamming .dust-a { animation:dust-burst-a .58s cubic-bezier(.12,.8,.16,1) both; }
body.post-mode .drop-pin.is-slamming .dust-b { animation:dust-burst-b .52s cubic-bezier(.12,.8,.16,1) .02s both; }
body.post-mode .drop-pin.is-slamming .dust-c { animation:dust-burst-c .62s cubic-bezier(.12,.8,.16,1) .04s both; }
body.post-mode .drop-pin.is-slamming .dust-d { animation:dust-burst-d .5s cubic-bezier(.12,.8,.16,1) .03s both; }
body.post-mode .drop-pin.is-slamming .dust-e { animation:dust-burst-e .55s cubic-bezier(.12,.8,.16,1) .01s both; }
body.post-mode .drop-pin.is-smoke-blasting:before { animation:smoke-blast-wide .9s cubic-bezier(.12,.8,.16,1) both; }
body.post-mode .drop-pin.is-smoke-blasting:after { animation:smoke-blast-curl 1.05s cubic-bezier(.12,.8,.16,1) .05s both; }
body.post-mode .user-location { opacity:1; }
.mode-switch { position: absolute; z-index: 20; top: 22px; left: 50%; transform: translateX(-50%); display: flex; padding: 4px; border: 1px solid rgba(23,24,22,.12); border-radius: 16px; background: rgba(247,244,236,.91); box-shadow: 0 10px 30px rgba(23,24,22,.12); backdrop-filter: blur(15px); }
.mode-button { min-width: 128px; display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 12px; background: transparent; border-radius: 12px; }
.mode-button.is-active { background: var(--ink); color: white; }
.mode-button:nth-child(2).is-active { background: var(--coral); color: var(--ink); }
.mode-icon { font-size: 20px; }
.mode-button b, .mode-button small { display: block; }
.mode-button b { font-size: 12px; }
.mode-button small { opacity: .58; font: 400 8px var(--font-body); text-transform: uppercase; margin-top: 2px; }
.map-actions { position:absolute; right:20px; bottom:108px; z-index:18; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(23,24,22,.2); border-radius:10px; background:rgba(247,244,236,.96); box-shadow:0 5px 15px rgba(0,0,0,.22); backdrop-filter:blur(10px); }
.round-button, .icon-button { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(247,244,236,.9); box-shadow:0 8px 20px rgba(0,0,0,.1); font-size:22px; }
.map-actions .round-button { width:44px; height:44px; border-radius:0; background:transparent; box-shadow:none; color:var(--ink); font:500 25px/1 Arial,sans-serif; transition:background .15s, transform .15s; }
.map-actions .round-button + .round-button { border-top:1px solid rgba(23,24,22,.16); }
.map-actions .round-button:hover { background:rgba(23,24,22,.07); }
.map-actions .round-button:active { background:rgba(23,24,22,.12); transform:scale(.94); }
.map-actions .locate-control { border-top:2px solid rgba(23,24,22,.22) !important; }
.round-button svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
html[data-theme="dark"] .map-actions { background:rgba(5,12,30,.96); border-color:rgba(145,181,255,.34); }
html[data-theme="dark"] .map-actions .round-button { color:#f2f0e8; }
html[data-theme="dark"] .map-actions .round-button + .round-button { border-color:rgba(255,255,255,.18); }
html[data-theme="dark"] .map-actions .locate-control { border-color:rgba(255,255,255,.26) !important; }
html[data-theme="dark"] .map-actions .round-button:hover { background:rgba(255,255,255,.1); }
.map-caption { display:none !important; position: absolute; left: 20px; bottom: 22px; z-index: 12; padding: 9px 12px; border-radius: 8px; background: rgba(247,244,236,.84); backdrop-filter: blur(10px); font: 500 9px var(--font-body); letter-spacing: .4px; }
.pulse-mark { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--coral); }
/* Centered via margin:auto + width:fit-content (NOT transform: translateX(-50%)).
   This matters: the previous translateX(-50%) centering made the `scale` property
   pivot from off-center (right side), because the translate and scale shared a
   transform context and the effective origin shifted. With no translate on the
   element, transform-origin: center is unambiguous and scale pivots from the
   true center. */
.place-button {
  display: none;
  position: absolute;
  left: 0; right: 0;
  bottom: calc(104px + var(--safe-bottom));
  margin: 0 auto;
  width: fit-content;
  z-index: 35;
  transform-origin: center;
  background: var(--ink); color: white;
  padding: 14px 18px; border-radius: 99px;
  font-size: 12px; font-weight: 800;
  box-shadow: 0 12px 35px rgba(0,0,0,.25);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), background .12s, color .12s, box-shadow .28s ease-out;
}

/* Ambient breathe remains independent from the shared hover treatment below. */
body.post-mode .place-button { animation: place-button-breathe 2.2s ease-in-out infinite; }
@keyframes place-button-breathe {
  0%, 100% { scale: 1; box-shadow: 0 12px 35px rgba(0,0,0,.25); }
  50%      { scale: 1.07; box-shadow: 0 16px 42px rgba(0,0,0,.32), 0 0 0 6px rgba(199,241,91,.18); }
}
/* Click feedback: a quick squish + lime flash when tapped. Pure CSS, mouse + touch. */
.place-button:active {
  transform: scale(.92);
  background: var(--lime) !important;
  color: var(--ink) !important;
  animation: none;
}
.place-button span { color: var(--lime); padding-left: 12px; }
body.post-mode .place-button { display: block; }
body.post-mode .map-caption { display: none; }
.nearby-panel { overflow-y: auto; border-left: 1px solid var(--line); background: var(--paper-2); padding: 24px 22px 160px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.eyebrow { display: block; font: 500 9px var(--font-body); letter-spacing: 1.3px; color: var(--muted); margin-bottom: 7px; }
.panel-heading h2, .page-head h1, .profile-hero h1 { margin: 0; font-size: 29px; letter-spacing: -1.5px; }
.icon-button { width: 34px; height: 34px; box-shadow: none; border: 1px solid var(--line); font-size: 13px; }
.people-strip { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; background: transparent; font-size: 17px; }
.person span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: white; }
.person b { font-size: 8px; font-weight: 700; }
.person.more span { font: 600 10px var(--font-body); background: var(--ink); color: white; }
.pulse-card { border: 1px solid var(--line); border-radius: 15px; padding: 14px; margin-bottom: 12px; background: #fffdf7; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.coral-card { background: var(--coral); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.card-top, .feed-card-head, .identity { display: flex; align-items: center; }
.card-top { gap: 9px; }
.avatar-bubble { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); border: 1px solid rgba(23,24,22,.18); }
.card-top div { display: flex; flex-direction: column; }
.card-top b, .identity b { font-size: 11px; }
.card-top small, .identity small { font: 400 8px var(--font-body); opacity: 1; color: rgba(23,24,22,.58); }
.trend { margin-left: auto; font: 700 10px var(--font-body); }
.pulse-card > p { font-size: 14px; line-height: 1.42; font-weight: 700; margin: 16px 0 20px; }
.card-footer { display: flex; justify-content: space-between; font: 500 8px var(--font-body); text-transform: uppercase; }
.photo-card { padding: 0; overflow: hidden; }
.photo-block, .feed-photo { min-height: 135px; position: relative; display: flex; align-items: flex-end; padding: 12px; overflow: hidden; background: linear-gradient(175deg,#4f67a0 0 35%,#ee8c70 36% 55%,#8b5549 56% 58%,#17232b 59%); }
.photo-block:after, .feed-photo:after { content:""; position:absolute; left:0; right:0; bottom:0; height:42%; opacity:.7; background: repeating-linear-gradient(88deg, transparent 0 35px, #111a20 36px 47px); clip-path: polygon(0 80%,12% 40%,25% 65%,36% 15%,46% 66%,56% 34%,68% 72%,79% 20%,91% 62%,100% 38%,100% 100%,0 100%); }
.sun-orb { position: absolute; width: 35px; height: 35px; border-radius: 50%; background: #ffd277; top: 45%; left: 33%; box-shadow: 0 0 30px #ffb05f; }
.photo-block span, .feed-photo span { position: relative; z-index: 2; color: white; font: 500 8px var(--font-body); }
.photo-caption { display: flex; justify-content: space-between; padding: 14px; }
.photo-caption b { font-size: 10px; }
.photo-caption p { margin: 4px 0 0; font-size: 11px; }
.photo-caption > span { font: 700 10px var(--font-body); }
.see-feed { width: 100%; display: flex; justify-content: space-between; padding: 15px 2px; background: transparent; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 800; }
.bottom-nav { position: fixed; z-index: 40; bottom: var(--bottom-nav-offset); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(23,24,22,.16); border-radius: 22px; background: rgba(247,244,236,.91); backdrop-filter: blur(20px); box-shadow: 0 12px 38px rgba(23,24,22,.18); }
.nav-button { width: 80px; height: 54px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; border-radius: 17px; background: transparent; color: #777970; }
.nav-button svg { width: 20px; }
.nav-button span { font-size: 8px; font-weight: 800; }
.nav-button.is-active { background: var(--ink); color: white; }
.nav-button.map-button.is-active { background: var(--coral); color: var(--ink); }
.close-button { position: absolute; top: 11px; right: 11px; width: 30px; height: 30px; z-index: 5; display: grid; place-items: center; border-radius: 50%; background: rgba(23,24,22,.08); font-size: 21px; }
.note-delete-button { margin-left:auto; padding:6px 9px; color:var(--coral); }
.note-delete-button + .bookmark { margin-left:0; }
.note-delete-button:hover { background:rgba(255,101,77,.13); border-color:var(--coral); }
.note-delete-button svg,.trail-delete svg { width:17px; height:17px; }
.note-map-link { display:inline-flex; align-items:center; gap:6px; margin:8px 0 0; padding:6px 12px; border:1px solid var(--ink); border-radius:var(--radius-pill, 99px); background:transparent; color:var(--ink); font:700 10px var(--font-body); letter-spacing:.6px; text-transform:uppercase; cursor:pointer; transition:background .2s ease,color .2s ease; }
.note-map-link:hover { background:var(--ink); color:var(--paper-2); }
.note-map-link.hidden { display:none; }
.vote, .stat-button, .feed-actions button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: transparent; font: 600 10px var(--font-body); }
.vote span:empty { display: none; }
.stat-button svg,.feed-actions button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; }
.feed-comment-button span:not(:empty) { margin-left:4px; }
.feed-comment-button span:empty { display:none; }
.vote.up.is-voted, .vote.up:hover { background: var(--lime); border-color: var(--ink); }
.vote.is-voted { background: var(--coral); border-color: var(--ink); }
.bookmark { margin-left: auto; padding:6px 9px; }
.bookmark svg,.feed-bookmark svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; }
.bookmark.is-bookmarked,.feed-bookmark.is-bookmarked { background:var(--ink); color:var(--coral); }
.bookmark.is-bookmarked svg,.feed-bookmark.is-bookmarked svg { fill:currentColor; }

/* Feed */
.feed-view, .profile-view { background: var(--paper); padding: 52px max(5vw, 28px) 380px; }
.page-head { max-width: 1080px; margin: 0 auto 30px; display: flex; justify-content: space-between; align-items: end; }
.page-head h1, .profile-hero h1 { font-size: clamp(42px, 7vw, 82px); line-height: .95; letter-spacing: -5px; }
.new-post { background: var(--coral); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 13px 18px; border-radius: 10px; font-size: 11px; font-weight: 800; }
.feed-filters { max-width: 1080px; margin: 0 auto 24px; display: flex; gap: 7px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.filter { padding: 9px 14px; border-radius: 99px; background: transparent; font: 600 10px var(--font-body); }
.filter.is-active { background: var(--ink); color: white; }
.feed-grid { max-width: 1080px; margin: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.feed-card { display: flex; flex-direction: column; min-height: 310px; padding: 20px; border: 1px solid var(--ink); border-radius: 18px; background: var(--paper-2); box-shadow: 4px 4px 0 var(--ink); cursor:pointer; transition: transform .3s, opacity .3s; }
.react-feed-card { content-visibility: auto; contain-intrinsic-size: 310px; }
.react-note-avatar { color: var(--ghost-blue, #3b6fe0); }
.react-note-avatar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Color inheritance: when a feed card's note has a custom color, JS sets the
   --note-color / --note-ink CSS vars. The card's header takes the note's color
   (mirroring the pin in the map view) so the feed isn't monochrome. The body
   stays light for readability; only the header + type label use the accent. */
.feed-card.visual { --note-color: var(--paper-2); --note-ink: var(--ink); }
.feed-card.visual .feed-card-head { background: var(--note-color); color: var(--note-ink); }
.feed-card.visual .type-label { color: rgba(23,24,22,.68); }
.feed-card.visual .identity small { color: color-mix(in srgb, var(--note-ink) 68%, transparent); }
.feed-card-head { justify-content: space-between; }
.feed-card-head > button { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:transparent; color:inherit; }
.feed-card-head > button svg { width:18px; height:18px; }
.owned-card-delete { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; color:var(--muted); }
.owned-card-delete:hover { background:rgba(255,101,77,.13); color:var(--coral); }
.owned-card-delete svg { width:16px; }
.identity { gap: 9px; }
.identity div { display: flex; flex-direction: column; }
.big-quote { margin: 28px 0 14px; font-size: clamp(24px,3vw,36px); line-height: 1.15; letter-spacing: -1.4px; font-weight: 800; }
.medium-quote { font-size: 23px; font-weight: 800; letter-spacing: -.8px; }
.feed-card.feature { background: var(--coral); }
.place-tag { align-self: flex-start; margin: 16px 0; padding: 7px 10px; border: 1px solid rgba(23,24,22,.08); border-radius: 99px; background: rgba(23,24,22,.05); color: rgba(23,24,22,.68); font: 600 9px var(--font-body); text-shadow: none; }
.feed-card.visual .place-tag { background: rgba(23,24,22,.05); color: rgba(23,24,22,.7); border-color: rgba(23,24,22,.08); }
.feed-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(23,24,22,.15); }
.feed-actions .push-right { margin-left: auto; }
.feed-actions .feed-map-button { margin-left:auto; }
.feed-actions .feed-delete-button { color:var(--coral); }
.feed-actions .feed-map-button svg,
.feed-actions .feed-delete-button svg { width:15px; height:15px; }
.feed-card.visual { padding: 0; overflow: hidden; }
.feed-photo { min-height: 205px; border-bottom: 1px solid var(--ink); }
/* Photo cards keep the inset head (sits below the photo). */
.feed-card.visual .feed-photo ~ .feed-card-head,
.feed-card.visual > p, .feed-card.visual .feed-actions { margin-left: 20px; margin-right: 20px; }
.feed-card.visual .feed-actions { margin-bottom: 20px; }
/* Color-inherited cards: the head becomes a FULL-BLEED color band spanning the
   card's full width (edge to edge, respecting the rounded corners via the
   card's overflow:hidden). Content inside the head gets internal padding instead
   of external margin, so the color fills the whole top quarter seamlessly —
   no thin strip with white margins around it. The body copy/actions sit below
   on the neutral card background for readability. */
.feed-card.visual:not(.has-photo) .feed-card-head {
  margin: 0;
  padding: 18px 20px 16px;
  border-radius: 0;
}
.feed-card.visual:not(.has-photo) > p,
.feed-card.visual:not(.has-photo) .place-tag,
.feed-card.visual:not(.has-photo) .feed-actions {
  margin-left: 20px;
  margin-right: 20px;
}
.feed-card.visual:not(.has-photo) > p { margin-top: 18px; }
.feed-card.visual:not(.has-photo) .feed-actions { margin-bottom: 20px; }
.feed-card.visual:not(.has-photo) .type-label { margin-left: 20px; margin-right: 20px; }
.type-label { margin: 28px 0 5px; font: 600 9px var(--font-body); color: var(--muted); }
.react-feed-card .type-label { display: inline-flex; align-items: center; gap: 5px; }
.react-feed-card .type-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feed-state { grid-column: 1 / -1; min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 32px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; }
.feed-state strong { color: var(--ink); font-size: 16px; }
.feed-state span { font-size: 11px; }
.feed-error { color: var(--coral); }
#reactNoteModalRoot { position: relative; z-index: 120; }
.react-note-modal-root { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left)); background: rgba(7, 12, 25, .42); backdrop-filter: blur(7px); }
.react-note-modal { width: min(560px, 100%); max-height: min(680px, calc(100dvh - 32px)); overflow: auto; border: 1px solid var(--ink); border-radius: 22px; background: var(--paper-2); color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.react-note-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.react-note-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.react-note-author > div { display: grid; gap: 3px; min-width: 0; }
.react-note-author b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.react-note-author small { color: var(--muted); font-size: 9px; }
.react-note-head-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.react-note-head-actions button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: inherit; }
.react-note-modal-body { padding: 22px 20px; }
.react-note-type { display: inline-flex; align-items: center; gap: 6px; color: var(--ghost-blue, #3b6fe0); font: 700 9px var(--font-body); letter-spacing: .7px; }
.react-note-type svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.react-note-copy { margin: 18px 0; font-size: clamp(24px, 4vw, 34px); line-height: 1.12; letter-spacing: -.9px; font-weight: 800; white-space: pre-wrap; overflow-wrap: anywhere; }
.react-note-place { color: var(--muted); font-size: 10px; }
.react-note-media { display: block; width: 100%; max-height: 310px; object-fit: cover; margin: 12px 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.react-note-media.doodle { object-fit: contain; }
.react-note-audio { display: block; width: 100%; margin: 14px 0; }
.react-note-poll { display: grid; gap: 8px; margin: 14px 0; }
.react-note-poll button { padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; text-align: left; }
.react-note-rating { margin: 16px 0; color: var(--ghost-blue, #3b6fe0); letter-spacing: 4px; font-size: 20px; }
.react-note-rating span { color: var(--muted); }
.react-note-modal-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 14px 20px 20px; border-top: 1px solid var(--line); }
.react-note-modal-actions .note-map-link { margin: 0 0 0 auto; }
.react-note-modal-actions .bookmark { margin-left: 0; }
html[data-theme="dark"] .react-note-modal-root { background: rgba(0, 0, 0, .58); }
html[data-theme="dark"] .react-note-modal { background: var(--surface-1, #11192e); color: var(--text, #f5f8ff); border-color: rgba(255,255,255,.2); box-shadow: 6px 6px 0 rgba(0,0,0,.55); }
@media (max-width: 520px) {
  .react-note-modal { max-height: calc(100dvh - 20px); border-radius: 18px; }
  .react-note-modal-head { padding: 14px 15px; }
  .react-note-modal-body { padding: 18px 15px; }
  .react-note-copy { font-size: 24px; }
  .react-note-modal-actions { padding: 12px 15px 15px; }
  .react-note-modal-actions .note-map-link { order: 10; flex-basis: 100%; justify-content: center; }
}
.poll-option { position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: 11px 12px; margin-top: 7px; border: 1px solid var(--line); border-radius: 9px; background: transparent; font-size: 10px; }
.poll-option span, .poll-option b { position: relative; z-index: 2; }
.poll-option i { position: absolute; inset: 0 auto 0 0; background: rgba(199,241,91,.55); }
.audio-player { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px; margin: 18px 0; border: 1px solid var(--ink); border-radius: 10px; background: var(--lime); }
.play { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 9px; }
.waveform { flex: 1; letter-spacing: 2px; overflow: hidden; white-space: nowrap; }

/* Profile */
.profile-view { background: var(--paper-2); }
.profile-hero { position:relative; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.profile-avatar { position: relative; width: 110px; height: 110px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); border: 1px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font-size: 46px; }
.online-ring { position: absolute; right: 5px; bottom: 8px; width: 19px; height: 19px; border: 4px solid var(--paper-2); background: #54d77b; border-radius: 50%; }
.profile-hero h1 { font-size: clamp(38px,5vw,62px); letter-spacing: -3px; }
.profile-hero p { margin: 8px 0; font-size: 14px; }
.profile-meta { display: flex; gap: 15px; font: 500 9px var(--font-body); text-transform: uppercase; color: var(--muted); }
.edit-profile { align-self: start; padding: 11px 15px; border-radius: 9px; border: 1px solid var(--ink); background: transparent; font-size: 10px; font-weight: 800; }
.profile-actions { align-self:start; display:flex; gap:8px; }
.language-button { min-width:45px; height:39px; padding:0 9px; border:1px solid var(--ink); border-radius:9px; background:transparent; font:800 11px var(--font-body); }
.profile-settings-button { width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:9px; background:var(--ink); color:var(--paper-2); }
.profile-settings-button svg { width:18px; }
.profile-settings-popover { position:absolute; z-index:25; right:0; top:50px; width:min(92vw,390px); padding:15px; border:1px solid var(--ink); border-radius:16px; background:var(--paper-2); box-shadow:6px 6px 0 var(--ink),var(--shadow); opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top right; transition:.2s ease; }
.profile-settings-popover.is-open { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.settings-popover-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.settings-popover-head h3 { margin:0; font-size:22px; letter-spacing:-.8px; }
.settings-popover-head button { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--line); font-size:20px; }
.language-popover { position:absolute; z-index:26; right:47px; top:50px; width:190px; padding:7px; border:1px solid var(--ink); border-radius:12px; background:var(--paper-2); box-shadow:4px 4px 0 var(--ink),var(--shadow); opacity:0; visibility:hidden; transform:translateY(-7px); transition:.18s; }
.language-popover.is-open { opacity:1; visibility:visible; transform:translateY(0); }
.language-popover button { width:100%; display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:7px; padding:9px; border-radius:8px; background:transparent; text-align:left; }
.language-popover button:hover,.language-popover button.is-active { background:var(--line); }
.language-popover button b { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper-2); }
.language-popover button span { font-size:10px; font-weight:700; }
.language-popover button i { visibility:hidden; font-style:normal; color:var(--blue); }
.language-popover button.is-active i { visibility:visible; }
.profile-stats { max-width: 1080px; margin: 0 auto 35px; display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--line); }
.profile-stats div { padding: 22px 0; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); }
.profile-stats div:last-child { border-right: 0; }
.profile-stats b { font-size: 24px; letter-spacing: -1px; }
.profile-stats b.is-counting { color:var(--blue); animation:points-total-pulse .45s ease alternate infinite; }
.profile-stats span { font: 500 8px var(--font-body); text-transform: uppercase; color: var(--muted); }
.profile-layout { max-width: 1080px; margin: auto; display: grid; grid-template-columns: 1.7fr 1fr; gap: 45px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.section-title h2 { font-size: 22px; }
.section-title button { padding: 7px 10px; background: transparent; font: 600 9px var(--font-body); border-radius: 99px; }
.section-title button.is-active { background: var(--ink); color: white; }
.trail-item { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; padding: 18px 0; border-top: 1px solid var(--line); }
#profileNotesList:empty::before { content:"No notes placed yet. Drop your first one from the map."; display:block; padding:24px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.trail-pin { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50% 50% 50% 8px; background: var(--paper); }
.trail-item small { font: 500 8px var(--font-body); color: var(--muted); }
.trail-item p { font-size: 14px; font-weight: 700; margin: 7px 0 10px; }
.trail-item div div { font: 500 9px var(--font-body); }
.trail-actions { display:flex; align-items:center; gap:8px; align-self:center; }
.trail-map-button { display:flex; align-items:center; gap:6px; padding:9px 11px; border:1px solid var(--ink); border-radius:99px; background:var(--ink); color:var(--paper-2); white-space:nowrap; font:700 8px var(--font-body); text-transform:uppercase; }
.trail-map-button svg { width:14px; height:14px; color:var(--ghost-mist); }
.trail-map-button span { color:inherit; font-size:8px; line-height:1; }
.trail-actions > button:not(.trail-map-button) { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--muted); }
.trail-actions > button:not(.trail-map-button) svg { width:16px; height:16px; }
.trail-delete { width:31px; height:31px; display:grid; place-items:center; align-self:center; border-radius:50%; background:transparent; color:var(--muted); }
.trail-delete:hover { background:rgba(255,101,77,.13); color:var(--coral); }
.bookmark-item { cursor:pointer; border-top:1px solid var(--line); padding:16px 0; }
.bookmark-item-head { display:flex; align-items:center; gap:10px; }
.bookmark-item-head .avatar-bubble { width:32px; height:32px; }
.bookmark-item-head div { display:flex; flex-direction:column; }
.bookmark-item-head b { font-size:10px; }
.bookmark-item-head small { font:400 8px var(--font-body); color:var(--muted); }
.bookmark-item p { margin:10px 0 8px; font-size:14px; font-weight:700; }
.bookmark-item-footer { display:flex; justify-content:space-between; font:500 8px var(--font-body); color:var(--muted); text-transform:uppercase; }
.empty-bookmarks { padding:38px 20px; border:1px dashed var(--line); border-radius:13px; text-align:center; color:var(--muted); }
.empty-bookmarks svg { width:28px; margin-bottom:8px; }
.badge-card { display: flex; gap: 14px; padding: 20px; margin-bottom: 15px; background: var(--lime); border: 1px solid var(--ink); border-radius: 15px; box-shadow: 4px 4px 0 var(--ink); }
.badge-icon { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 24px; }
.badge-card h3 { margin: 0 0 3px; }
.badge-card p, .badge-card small { margin: 0; font-size: 9px; }
.highfive-list-button,.admin-dashboard-button { width:100%; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; padding:14px 15px; border:1px solid var(--ink); border-radius:12px; background:var(--paper); box-shadow:3px 3px 0 var(--ink); text-align:left; font-size:10px; font-weight:800; }
.admin-dashboard-button { margin-bottom:10px; background:var(--ink); color:var(--paper-2); }
.highfive-list-button b,.admin-dashboard-button b { min-width:24px; padding:4px 7px; border-radius:99px; background:var(--coral); color:#171816; text-align:center; font:800 8px var(--font-body); }
.highfive-list-button i { font-style:normal; font-size:20px; transition:transform .2s; }
.highfive-list-button[aria-expanded="true"] i { transform:rotate(90deg); }
.highfive-people-list { margin-top:9px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.highfive-person { display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--line); }
.highfive-person:last-child { border-bottom:0; }
.highfive-person span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--paper-2); border:1px solid var(--ink); }
.highfive-person div { display:flex; flex-direction:column; }
.highfive-person b { font-size:10px; }
.highfive-person small { color:var(--muted); font:500 7px var(--font-body); text-transform:uppercase; }
.highfive-empty { padding:18px; color:var(--muted); text-align:center; font-size:9px; }
.badge-progress { height: 4px; margin: 12px 0 5px; background: rgba(23,24,22,.2); border-radius: 99px; }
.badge-progress i { display: block; width: 68%; height: 100%; background: var(--ink); }
.settings-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
.settings-card button { width: 100%; display: grid; grid-template-columns: 25px 1fr auto auto; align-items: center; text-align: left; padding: 14px; border-bottom: 1px solid var(--line); background: transparent; font-size: 10px; }
.settings-card button:last-child { border: 0; }
.settings-card button:hover { background: rgba(255,255,255,.6); }
.settings-card em { font: normal 8px var(--font-body); color: var(--muted); }
.settings-card b { font-size: 17px; }
.theme-switch { width: 34px; height: 19px; position: relative; border: 1px solid var(--line); border-radius: 99px; background: rgba(121,123,116,.28); }
.theme-switch i { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper-2); box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .25s, background .25s; }
#themeToggle[aria-checked="true"] .theme-switch { background: var(--blue); }
#themeToggle[aria-checked="true"] .theme-switch i { transform: translateX(15px); background: white; }

/* Modals */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(18,19,17,.55); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: .25s; }
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
.modal { position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%,-46%) scale(.96); width: min(92vw, 550px); max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto; padding: 27px; border-radius: var(--radius-xl); border: 1px solid var(--border-faint); background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: var(--shadow-hard-lg), var(--shadow); opacity: 0; visibility: hidden; transition: var(--dur-base) var(--ease-out-expo); }
html[data-theme="dark"] .modal { background: rgba(11,16,32,.78); }
.modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.modal h2 { margin: 4px 0 6px; font-size: 34px; letter-spacing: -1.7px; line-height: 1.04; }
.modal-handle { display: none; }

.cluster-sheet { width:min(92vw,520px); padding:28px; }
.cluster-sheet-intro { margin:7px 0 20px; color:var(--muted); }
.cluster-note-list { display:grid; gap:9px; max-height:min(52dvh,460px); overflow:auto; padding:2px 4px 6px 2px; scrollbar-width:thin; }
.cluster-note-item { appearance:none; width:100%; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; text-align:start; color:var(--ink); background:color-mix(in srgb,var(--paper-2) 88%,var(--ghost) 12%); border:1px solid color-mix(in srgb,var(--line) 74%,var(--ghost) 26%); border-radius:16px; cursor:pointer; transition:transform .22s var(--ease-spring),border-color .2s,background .2s; }
.cluster-note-item:hover { transform:translateY(-2px) scale(1.01); border-color:var(--ghost); background:color-mix(in srgb,var(--paper-2) 82%,var(--ghost) 18%); }
.cluster-note-item:active { transform:scale(.985); }
.cluster-note-avatar { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--surface); border:1px solid var(--line); font-size:21px; }
.cluster-note-copy { min-width:0; }
.cluster-note-copy b,.cluster-note-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cluster-note-copy b { font-size:14px; margin-bottom:4px; }
.cluster-note-copy small { color:var(--muted); font-size:11px; }
.cluster-note-arrow { color:var(--ghost); font-size:20px; }
.cluster-note-loading { padding:30px 12px; text-align:center; color:var(--muted); font-size:12px; }
.cluster-note-item.is-locked { filter:saturate(.35); opacity:.72; }
html[dir="rtl"] .cluster-note-item { text-align:right; }
.composer-place { font: 500 9px var(--font-body); color: var(--muted); }
.composer { display: flex; flex-direction: column; overflow: hidden; }
.composer > .composer-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.media-types { display: flex; justify-content: space-between; gap: 7px; margin: 23px 0 14px; }
.media-types button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 5px; background: transparent; border: 1px solid var(--line); border-radius: 10px; font-size: 8px; font-weight: 700; }
.media-types button span { font-size: 17px; }
.media-types button.is-active { background: var(--ink); color: white; border-color: var(--ink); }
.composer-body { position: relative; min-height: 160px; border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; }
.composer-body textarea { width: 100%; height: 160px; padding: 16px; border: 0; outline: 0; resize: none; background: transparent; font-size: 15px; line-height: 1.5; }
.char-count { position: absolute; right: 11px; bottom: 9px; font: 500 8px var(--font-body); color: var(--muted); }
.composer-state { min-height: 160px; display: grid; place-items: center; text-align: center; padding: 20px; }
.composer-state span { display: block; font-size: 35px; margin-bottom: 10px; }
.composer-state b { display: block; }
.composer-state small { color: var(--muted); }
.media-panel { min-height:160px; padding:14px; }
.voice-recorder { min-height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.record-button { width:62px; height:62px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; background:var(--coral); box-shadow:4px 4px 0 var(--ink); font-size:21px; }
.record-button.is-recording { animation:record-pulse 1s infinite; background:var(--ink); color:white; }
.record-time { font:700 11px var(--font-body); }
.voice-preview { width:100%; }
.voice-preview audio { width:100%; height:38px; }
.voice-wave { width:100%; height:48px; display:block; }
.voice-wave.hidden { display:none; }
.doodle-tools { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.doodle-tools span { font:600 8px var(--font-body); color:var(--muted); }
.doodle-tools button { padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:transparent; font-size:8px; }
.doodle-draw { width:100%; height:190px; border:1px solid rgba(91,140,255,.18); background:#fffdf7; }
.doodle-draw .drag-draw-surface path { stroke-width:5; }
.poll-builder { display:grid; gap:8px; }
.poll-builder input, .photo-caption-input { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:8px; background:var(--paper-2); outline:0; font-size:11px; }
.poll-builder .poll-question { font-size:14px; font-weight:700; }
.photo-picker { position:relative; min-height:190px; display:grid; place-items:center; overflow:hidden; border:1px dashed var(--line); border-radius:10px; background:rgba(121,123,116,.07); }
.photo-picker input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.photo-picker img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-picker div { text-align:center; pointer-events:none; }
.photo-picker div span { display:block; font-size:30px; margin-bottom:7px; }
.photo-caption-input { margin-top:9px; }
.feed-media-preview { width:100%; max-height:260px; margin:16px 0; object-fit:cover; border:1px solid var(--ink); border-radius:10px; background:#fffdf7; }
.feed-doodle { object-fit:contain; }
.feed-poll-options { display:grid; gap:7px; margin:12px 0; }
.feed-poll-options button { display:flex; justify-content:space-between; padding:10px; border:1px solid var(--line); border-radius:8px; background:transparent; font-size:10px; }
.feed-poll-options button.is-voted { border-color:var(--ink); background:var(--lime); color:#171816; }
.feed-voice { width:100%; margin:15px 0; }
.composer-footer { flex: 0 0 auto; margin-top: 15px; padding-top: 12px; display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid var(--line); background: var(--paper); }
.post-note-button, .unlock-button, .next-button, .sign-button { padding: 12px 16px; border-radius: 9px; background: var(--coral); border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 10px; font-weight: 800; }
.post-note-button span, .next-button span { margin-left: 12px; }
.unlock-modal { text-align: center; max-width: 410px; padding: 38px; }
.unlock-orbit { width: 95px; height: 95px; display: grid; place-items: center; margin: 0 auto 21px; border: 1px dashed var(--coral); border-radius: 50%; }
.unlock-orbit span { width: 51px; height: 51px; display: grid; place-items: center; background: var(--coral); border-radius: 50%; font-size: 24px; }
.unlock-modal p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.price-row { display: flex; justify-content: space-between; margin: 22px 0 12px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.price-row span { font-size: 11px; }
.price-row b { font: 700 12px var(--font-body); }
.unlock-button { width: 100%; background: var(--lime); padding: 14px; }
.unlock-modal > small { display: block; margin-top: 13px; font-size: 8px; color: var(--muted); }
.unlock-cancel-button { display: block; width: 100%; margin-top: 13px; padding: 8px 4px; border: 0; background: transparent; color: var(--muted); font-size: 10px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.unlock-cancel-button:hover { color: var(--ink); }
.location-modal { text-align: center; max-width: 420px; padding: 38px; }
.location-modal > .location-orbit { margin: 0 auto 20px; }
.location-modal > p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.permission-state { display: flex; align-items: center; gap: 11px; margin: 20px 0 13px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; text-align: left; background: rgba(255,255,255,.04); }
.permission-state > span { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #e6a72f; box-shadow: 0 0 0 5px rgba(230,167,47,.13); }
.permission-state b, .permission-state small { display: block; }
.permission-state b { font-size: 10px; }
.permission-state small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.permission-state.is-granted > span { background: #47c96b; box-shadow: 0 0 0 5px rgba(71,201,107,.13); }
.permission-state.is-denied > span { background: var(--coral); box-shadow: 0 0 0 5px rgba(255,101,77,.13); }
.location-modal > small { display: block; margin-top: 12px; color: var(--muted); font-size: 8px; }
.account-modal { max-width:440px; }
.user-profile-modal { max-width:390px; text-align:center; }
.user-profile-card { display:flex; flex-direction:column; align-items:center; gap:9px; }
.user-profile-avatar { width:76px; height:76px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--lime); box-shadow:5px 5px 0 var(--ink); font-size:36px; }
.user-profile-card h2 { margin:3px 0 0; font-size:32px; }
.user-profile-card p { margin:0 0 8px; color:var(--muted); font:600 10px var(--font-body); text-transform:uppercase; letter-spacing:.6px; }
.account-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:15px 0; border-top:1px solid var(--line); }
.account-row b,.account-row small { display:block; }
.account-row b { font-size:11px; }
.account-row small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.45; }
.danger-zone { margin-top:16px; padding:17px; border:1px solid rgba(255,101,77,.55); border-radius:12px; background:rgba(255,101,77,.06); }
.danger-zone > b { display:block; font-size:14px; }
.danger-zone p { color:var(--muted); font-size:10px; line-height:1.55; }
.danger-zone button,.danger-button { padding:11px 14px; border:1px solid #9f2d20; border-radius:8px; background:var(--coral); color:#171816; font-size:10px; font-weight:800; }
.confirm-modal { max-width:400px; text-align:center; }
.confirm-icon { width:61px; height:61px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; background:rgba(255,101,77,.13); color:var(--coral); }
.confirm-icon svg { width:27px; }
.confirm-modal > p { color:var(--muted); font-size:11px; line-height:1.55; }
.confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:22px; }
.confirm-actions button { padding:12px; border:1px solid var(--line); border-radius:8px; background:transparent; font-size:10px; font-weight:800; }
.confirm-actions .danger-button { background:var(--coral); border-color:#9f2d20; }
.highfive-toast { position: fixed; z-index: 55; left: max(22px,var(--safe-left)); bottom: calc(22px + var(--safe-bottom)); display: flex; align-items: center; gap: 12px; max-width: 430px; padding: 11px 12px; border: 1px solid var(--ink); border-radius: 15px; background: var(--lime); box-shadow: 5px 5px 0 var(--ink); opacity:0; visibility:hidden; transform:translateY(24px); transition:opacity .22s ease,transform .22s ease,visibility .22s; }
.highfive-toast[hidden] { display:none !important; }
.highfive-toast.is-open { opacity:1; visibility:visible; transform:translateY(0); }
.walker-avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: white; }
.highfive-toast div b { font-size: 11px; }
.highfive-toast div p { font-size: 9px; margin: 2px 0; }
.highfive-toast > button { background: var(--ink); color: white; padding: 10px 12px; border-radius: 9px; font-size: 9px; font-weight: 800; }
.highfive-toast .toast-close { padding: 4px; background: transparent; color: var(--ink); font-size: 18px; }
.onboarding { width:min(calc(100vw - 18px),800px); max-width:800px; min-height:min(650px,calc(100dvh - 18px)); max-height:calc(100dvh - 18px); padding:18px; overflow-y:auto; overflow-x:hidden; background:var(--paper); }
.onboarding.is-required > .close-button { display: none; }
.onboarding-step { display: none; min-height: 470px; text-align: center; flex-direction: column; align-items: center; justify-content: center; }
.onboarding-step.is-active { display: flex; animation: view-in .4s ease; }
.onboarding-logo { width: 64px; height: 64px; font-size: 42px; margin-bottom: 28px; }
.onboarding-step h2 { font-size: 39px; margin: 8px 0 13px; }
.onboarding-step > p { max-width: 360px; color: var(--muted); line-height: 1.6; font-size: 12px; }
.concept-deck { width:min(100%,520px); display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:15px 0 18px; }
.concept-card { position:relative; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; text-align:left; padding:13px; border:1px solid var(--line); border-radius:12px; background:#fffdf5; opacity:.56; transform:translateY(4px) scale(.95); transition:.28s cubic-bezier(.2,.9,.25,1); overflow:hidden; }
.concept-card:before { content:""; position:absolute; inset:10px 10px auto; height:42px; border-radius:8px; background:repeating-linear-gradient(135deg,rgba(23,24,22,.12) 0 6px,transparent 6px 12px); opacity:.45; transform:skew(-8deg); }
.concept-card b { position:relative; width:max-content; padding:5px 7px; border:1px solid var(--ink); border-radius:8px; background:var(--ink); color:white; font:800 9px var(--font-body); letter-spacing:.5px; }
.concept-card span { position:relative; font-weight:800; font-size:13px; line-height:1.12; }
.concept-card small { position:relative; color:var(--muted); font-size:9px; line-height:1.35; }
.concept-card.is-active { opacity:1; transform:translateY(-7px) scale(1.04); border-color:var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--lime); animation:concept-pop .26s cubic-bezier(.16,1.2,.32,1) both; }
.concept-card.is-active:before { animation:concept-wiggle 1.2s ease infinite alternate; opacity:.28; }
.onboarding.is-advancing .concept-card.is-active span { animation:text-pop .22s cubic-bezier(.16,1.25,.35,1) both; }
.eula-modal.is-open { z-index:76; }
.eula-link { padding:9px 10px; border:1px solid var(--line); border-radius:99px; background:transparent; color:var(--muted); font:700 8px var(--font-body); text-transform:uppercase; letter-spacing:.5px; }
.eula-link:hover { color:var(--ink); border-color:var(--ink); }
.comments-list { max-height:310px; overflow:auto; display:flex; flex-direction:column; gap:10px; margin:17px 0; padding-right:4px; }
.comment-item { padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.32); }
.comment-item b { display:block; margin-bottom:3px; font-size:11px; }
.comment-item p { margin:0; font-size:12px; line-height:1.45; }
.comment-item small { display:block; margin-top:7px; color:var(--muted); font:600 7px var(--font-body); text-transform:uppercase; }
.comment-form,.admin-add-form { display:grid; grid-template-columns:1fr auto; gap:8px; }
.comment-form input,.admin-add-form input,.input-label select,#reportDetail { width:100%; padding:12px; border:1px solid var(--ink); border-radius:10px; background:white; color:#171816; outline:0; font-size:12px; }
.comment-form button,.admin-add-form button { padding:0 14px; border:1px solid var(--ink); border-radius:10px; background:var(--lime); box-shadow:3px 3px 0 var(--ink); font-size:10px; font-weight:800; }
#reportDetail { min-height:100px; resize:vertical; margin:10px 0 15px; }
.eula-copy { display:grid; gap:10px; margin-top:15px; color:var(--muted); font-size:13px; line-height:1.55; }
.admin-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:15px 0; }
.admin-stats div { padding:13px 10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.24); }
.admin-stats b { display:block; font-size:22px; letter-spacing:-1px; }
.admin-stats span { color:var(--muted); font:700 8px var(--font-body); text-transform:uppercase; }
.admin-list-section { margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.18); }
.admin-section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; color:var(--muted); font:800 8px var(--font-body); letter-spacing:.8px; }
.admin-section-title b { min-width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; color:var(--ink); background:var(--paper-2); }
.admin-list { display:grid; gap:7px; }
.admin-list-row { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.28); }
.admin-list-row span { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:700; }
.admin-list-row button { flex:0 0 auto; padding:7px 9px; border:1px solid var(--ink); border-radius:8px; background:var(--coral); color:#171816; font-size:9px; font-weight:800; }
.admin-report-list { max-height:320px; overflow:auto; margin-top:14px; display:grid; gap:10px; }
.admin-report-card { padding:13px; border:1px solid var(--line); border-radius:12px; background:rgba(255,101,77,.06); }
.admin-report-card b,.admin-report-card small { display:block; }
.admin-report-card small { color:var(--muted); font:600 8px var(--font-body); text-transform:uppercase; }
.admin-report-card p { margin:8px 0; font-size:12px; line-height:1.4; }
.admin-report-card button { padding:8px 10px; border:1px solid var(--ink); border-radius:8px; background:var(--coral); color:#171816; font-size:9px; font-weight:800; }
.google-button-host { width:min(100%,340px); min-height:44px; margin-top:25px; display:grid; place-items:center; }
.google-button-host[hidden] { display:none !important; }
.google-button-host > div { margin:0 auto; }
.google-button { width: min(100%, 340px); margin-top: 25px; padding: 14px; border: 1px solid var(--ink); border-radius: 10px; background: white; box-shadow: 4px 4px 0 var(--ink); font-size: 11px; font-weight: 800; }
.google-button span { font-size: 16px; margin-right: 10px; color: #4285f4; }
.google-button[hidden] { display:none !important; }
.google-button:disabled { opacity:.62; cursor:not-allowed; }
.onboarding-step > small { max-width: 340px; margin-top: 17px; color: var(--muted); font-size: 8px; }
.input-label input::placeholder { color:rgba(121,123,116,.68); }
.account-row button { padding:10px 13px; border:1px solid var(--ink); border-radius:9px; background:var(--paper-2); box-shadow:2px 2px 0 var(--ink); font-size:9px; font-weight:800; white-space:nowrap; }
.account-row:has(#signOutButton) { display:none; }
.location-orbit { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 22px; border: 1px dashed var(--blue); border-radius: 50%; background: rgba(91,140,255,.07); color: var(--blue); font-size: 28px; }
.location-step .next-button { margin-top: 20px; }
.text-button { margin-top: 13px; padding: 7px; background: transparent; color: var(--muted); font-size: 9px; text-decoration: underline; }
.location-step.is-locating .location-orbit { animation: location-wave 1.3s infinite alternate; }
.input-label { width: min(100%,340px); margin: 22px 0 12px; text-align: left; font: 600 9px var(--font-body); color: var(--muted); }
.input-label input { width: 100%; display: block; margin-top: 6px; padding: 13px; border: 1px solid var(--ink); border-radius: 9px; background: white; font-size: 15px; font-weight: 700; outline: 0; }
.input-label input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(91,140,255,.1); }
.identity-preview { width: 68px; height: 68px; display: grid; place-items: center; margin: 12px 0 -8px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); box-shadow: 4px 4px 0 var(--ink); font-size: 31px; transition: transform .2s; }
.identity-preview.is-changing { transform: rotate(-8deg) scale(1.12); }
.picker-label { width: min(100%,340px); margin: 2px 0 8px; text-align: left; font: 600 9px var(--font-body); color: var(--muted); }
.emoji-picker { display: flex; gap: 8px; margin-bottom: 25px; }
.emoji-picker button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: 18px; }
.emoji-picker .emoji-custom { border-style:dashed; font:800 18px var(--font-body); }
.emoji-picker button.is-active { border-color: var(--ink); background: var(--lime); box-shadow: 2px 2px 0 var(--ink); }
.username-error { min-height: 13px; margin: -14px 0 10px !important; color: var(--coral) !important; }
.promise-step { justify-content:flex-start; padding:12px 8px 8px; }
.promise-heading { width:min(100%,650px); margin:0 auto 13px; text-align:left; }
.promise-heading .eyebrow { margin:0 0 5px; letter-spacing:2px; }
.promise-heading h2 { margin:0; font-size:clamp(36px,6vw,56px); letter-spacing:-3px; line-height:.96; }
.promise-heading p { margin:8px 0 0; color:var(--muted); font:500 9px var(--font-body); }
.paper-roll { position:relative; width:min(100%,650px); margin:0 auto 14px; transform-origin:top center; opacity:0; clip-path:inset(0 0 100% 0 round 3px); }
.paper-roll:before { content:""; position:absolute; z-index:8; left:-8px; right:-8px; top:-6px; height:17px; border-radius:99px; background:linear-gradient(#f8f4e9,#d8d1c0); border:1px solid rgba(23,24,22,.22); box-shadow:0 5px 9px rgba(0,0,0,.17); }
.promise-step.is-active .paper-roll { animation:promise-unroll 1.05s .12s cubic-bezier(.2,.82,.2,1) forwards; }
.paper { position:relative; width:100%; padding:31px 34px 25px; color:#171816; background:#fffdf5; border:1px solid rgba(23,24,22,.18); box-shadow:0 14px 28px rgba(0,0,0,.16); overflow:hidden; }
.paper:before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(32,30,24,.055) 31px); }
.paper:after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 -12px 18px rgba(64,53,32,.045); }
.paper-masthead { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:1px solid rgba(23,24,22,.17); color:#747066; font:600 8px var(--font-body); letter-spacing:1.2px; }
.paper-emoji { font-size:18px; transform:rotate(8deg); }
.promise-copy { position:relative; z-index:2; max-width:530px; margin:18px auto 17px; font-family:Georgia,serif; font-size:clamp(18px,2.5vw,24px); line-height:1.48; text-align:center; pointer-events:none; }
.signature-stage { position:relative; z-index:2; padding:9px 10px 8px; border:1px solid rgba(23,24,22,.28); border-radius:3px; background:rgba(255,255,255,.5); }
.signature-stage-head,.signature-footer { display:flex; justify-content:space-between; align-items:center; color:#7d776c; font:600 7px var(--font-body); letter-spacing:.7px; text-transform:uppercase; }
.signature-stage-head { height:22px; padding:0 4px; border-bottom:1px solid rgba(23,24,22,.12); }
.signature-draw { width:100%; height:178px; border:0; border-radius:0; background:transparent; }
.signature-draw:after { content:""; position:absolute; left:5%; right:5%; bottom:27px; border-bottom:1px solid rgba(23,24,22,.24); pointer-events:none; }
.signature-draw .drag-draw-hint { top:48%; color:rgba(118,108,91,.52); font-size:8px; letter-spacing:.4px; white-space:nowrap; }
.signature-clear { position:relative; z-index:5; padding:3px 0 3px 10px; color:#e95c38; font-size:7px; }
.signature-footer { padding:5px 4px 0; }
.signature-footer span:first-child { color:#e95c38; text-transform:none; }
.pen-flourish { position:absolute; z-index:4; right:18px; top:48%; width:56px; height:16px; pointer-events:none; transform:rotate(-34deg); }
.paper.has-signature .pen-flourish { opacity:0; transform:translate(18px,-12px) rotate(-20deg); transition:.3s ease; }
.pen-flourish span { position:absolute; inset:3px 8px 3px 0; border-radius:8px 2px 2px 8px; background:linear-gradient(90deg,#452c6e,#ff654d); box-shadow:2px 2px 0 rgba(23,24,22,.2); }
.pen-flourish i { position:absolute; right:0; top:5px; width:0; height:0; border-top:3px solid transparent; border-bottom:3px solid transparent; border-left:9px solid #222; }
.drag-draw { position:relative; overflow:hidden; border-radius:9px; background:rgba(91,140,255,.035); touch-action:none; cursor:crosshair; user-select:none; }
.drag-draw-surface { display:block; width:100%; height:100%; }
.drag-draw-surface path { fill:none; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.drag-draw-surface .draw-start { fill:#fffdf7; stroke:#ff6045; stroke-width:2; vector-effect:non-scaling-stroke; }
.drag-draw-surface .draw-end { fill:#ffad3d; stroke:#fffdf7; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.drag-draw-hint { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(91,140,255,.4); font:600 9px var(--font-body); pointer-events:none; }
.drag-draw.has-strokes .drag-draw-hint { display:none; }
.drag-draw.is-locked { cursor:default; }
.draw-clear { padding:4px 7px; border:0; background:transparent; color:var(--muted); font:600 7px var(--font-body); text-decoration:underline; }
.stamp { position:absolute; z-index:7; right:48px; bottom:54px; width:92px; height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:4px double #e94f34; border-radius:50%; color:#e94f34; font-family:var(--font-body); transform:rotate(-12deg) scale(2.6); opacity:0; pointer-events:none; }
.stamp:after { content:""; position:absolute; inset:6px; border:1px solid currentColor; border-radius:50%; }
.stamp small { font-size:6px; letter-spacing:1px; }
.stamp b { font-size:10px; line-height:1; }
.stamp.is-stamped { animation:stamp-slam .58s cubic-bezier(.16,1.7,.3,1) forwards; }
.paper.has-stamp { animation: paper-impact .35s ease; }
.stamp-burst { position:absolute; z-index:6; right:92px; bottom:99px; pointer-events:none; }
.stamp-burst i { position: absolute; width: 4px; height: 20px; border-radius: 99px; background: var(--coral); opacity: 0; transform-origin: 2px 45px; }
.stamp-burst.is-bursting i { animation: burst .55s ease-out forwards; }
.stamp-burst i:nth-child(2) { transform: rotate(60deg); }
.stamp-burst i:nth-child(3) { transform: rotate(120deg); }
.stamp-burst i:nth-child(4) { transform: rotate(180deg); }
.stamp-burst i:nth-child(5) { transform: rotate(240deg); }
.stamp-burst i:nth-child(6) { transform: rotate(300deg); }
.stamp-burst i:nth-child(1) { --angle: 0deg; }
.stamp-burst i:nth-child(2) { --angle: 60deg; }
.stamp-burst i:nth-child(3) { --angle: 120deg; }
.stamp-burst i:nth-child(4) { --angle: 180deg; }
.stamp-burst i:nth-child(5) { --angle: 240deg; }
.stamp-burst i:nth-child(6) { --angle: 300deg; }
.sign-button { background:var(--blue); color:white; box-shadow:3px 3px 0 var(--ink); }
.sign-button span { margin-left: 8px; }
.promise-actions { min-height:48px; display:flex; justify-content:center; align-items:center; gap:13px; }
.promise-status { color:var(--muted); font:500 8px var(--font-body); }
.promise-status.is-sealed { color:#287d43; font-weight:700; }
.hidden { display: none !important; }
.toast { position: fixed; left: 50%; bottom: 95px; z-index: 90; transform: translate(-50%, 30px); padding: 11px 15px; border-radius: 99px; background: var(--ink); color: white; font-size: 10px; opacity: 0; visibility: hidden; transition: .3s; }
.toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%,0); }
/* Drop-success celebration. ANCHORED TO THE PIN, not screen center.
   JS sets left/top to the pin's projected screen position and --pin-size to the
   pin's rendered size. All children are sized relative to --pin-size so the
   celebration scales with the pin and reads as belonging to it. The container
   is a zero-size point at the pin's location; children absolutely position
   themselves relative to that point. */
.drop-success-marker {
  --pin-size: 54px;
  position: fixed;
  left: 0; top: 0;            /* JS overrides with the pin's screen x/y */
  width: 0; height: 0;
  z-index: 2147483646;
  pointer-events: none;
}
/* Green core dot, sized ~0.7x the pin (sits on top of the pin like a badge). */
.drop-success-marker:before {
  content: ""; position: absolute; left: 0; top: 0;
  width: calc(var(--pin-size) * 0.7); height: calc(var(--pin-size) * 0.7);
  border-radius: 50%; background: var(--lime); border: 4px solid white;
  box-shadow: 0 0 0 3px var(--ink), 0 8px 22px rgba(0,0,0,.3);
  transform: translate(-50%, -50%);
  animation: success-core 1s cubic-bezier(.2,1.7,.4,1) both;
}
/* Expanding ring, starts at the pin size and grows to ~2.4x. */
.drop-success-marker:after {
  content: ""; position: absolute; left: 0; top: 0;
  width: var(--pin-size); height: var(--pin-size);
  border: 5px solid var(--lime); border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: success-ring 1.65s ease-out .08s both;
}
.drop-success-burst { position: absolute; left: 0; top: 0; width: 0; height: 0; }
/* Rays extend ~1.4x the pin's height above the anchor — proportional, not fixed. */
.drop-success-burst i {
  position: absolute;
  left: -3px; top: calc(var(--pin-size) * -1.4);
  width: 6px; height: calc(var(--pin-size) * 0.65);
  border-radius: 99px; background: var(--coral);
  transform-origin: 3px calc(var(--pin-size) * 1.4);
  animation: success-ray 1.35s cubic-bezier(.2,.8,.2,1) both;
}
.drop-success-burst i:nth-child(2) { transform: rotate(45deg); background: var(--lime); }
.drop-success-burst i:nth-child(3) { transform: rotate(90deg); }
.drop-success-burst i:nth-child(4) { transform: rotate(135deg); background: var(--lime); }
.drop-success-burst i:nth-child(5) { transform: rotate(180deg); }
.drop-success-burst i:nth-child(6) { transform: rotate(225deg); background: var(--lime); }
.drop-success-burst i:nth-child(7) { transform: rotate(270deg); }
.drop-success-burst i:nth-child(8) { transform: rotate(315deg); background: var(--lime); }
/* Label floats ~1.3x the pin's height above the anchor. */
.drop-success-label {
  position: absolute; left: 0;
  top: calc(var(--pin-size) * -1.3);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 2px solid var(--ink); border-radius: 11px;
  background: var(--lime); color: #171816; box-shadow: 5px 5px 0 var(--ink);
  font: 800 11px var(--font-body); letter-spacing: .5px; white-space: nowrap;
  animation: success-label 2.55s ease both;
}
.drop-success-label b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #171816; color: white; font-size: 13px; }
/* +PTS readout floats ~1x the pin's height below the anchor. */
.points-pop {
  position: absolute; left: 0;
  top: calc(var(--pin-size) * 1);
  transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 3px;
  color: var(--lime);
  text-shadow: 0 3px 0 #171816, 2px 0 0 #171816, -2px 0 0 #171816;
  font: 800 calc(var(--pin-size) * 0.72) var(--font-body);
  white-space: nowrap;
  animation: points-pop 2.6s ease both;
}
.points-pop small { font-size: calc(var(--pin-size) * 0.19); letter-spacing: 1.5px; }
.map-stage.is-drop-celebrating { animation:map-impact .55s cubic-bezier(.2,.8,.2,1); }
.mapboxgl-canvas-container.is-impact { animation:map-impact .55s cubic-bezier(.2,.8,.2,1); }
.app-shell.is-impact { animation:map-impact .55s cubic-bezier(.2,.8,.2,1); }
/* Smooth theme transition on the surfaces that change color. Keeps the toggle
   from flashing. Excludes map/pins (those have their own transitions and
   flashing them would jitter the map). */
html:not(.is-theme-transitioning) body,
.topbar, .modal, .feed-card, .pulse-card, .settings-card,
.live-pill, .mode-switch, .bottom-nav, .city-reveal,
.account-row, .settings-card button, .comment-item, .admin-stats div,
.admin-list-row, .admin-list-section {
  transition: background-color var(--dur-base) var(--ease-out-quart),
              color var(--dur-base) var(--ease-out-quart),
              border-color var(--dur-base) var(--ease-out-quart);
}

/* Unified focus ring for keyboard users. :focus-visible only fires for
   keyboard navigation, not mouse clicks, so it doesn't clutter mouse use. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Some elements already have hard shadows; the outline offset accommodates. */
.modal:focus-visible, .composer:focus-visible,
.onboarding:focus-visible { outline-offset: 4px; }

/* ── Button variants (applied via class on existing buttons) ────────── */
.btn-primary {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--coral);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-hard-sm);
  font-size: 11px; font-weight: 800;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out-quart);
}
.btn-primary:hover { box-shadow: var(--shadow-hard); }
.btn-primary:active { transform: translateY(1px); box-shadow: 2px 2px 0 var(--border-strong); }

.btn-secondary {
  padding: 11px 15px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--border-strong);
  font-size: 10px; font-weight: 800;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.btn-secondary:hover { background: var(--border-faint); }
.btn-secondary:active { transform: translateY(0); }

.btn-ghost {
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--border-faint);
  font-size: 10px; font-weight: 700;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.btn-ghost:hover { background: var(--border-faint); }
.btn-ghost.is-active { background: var(--ink); color: var(--paper); }

/* Normalize the most inconsistent radii on key surfaces to the token ladder.
   Touch-only — don't restructure, just snap to the 4-tier system. */
.filter, .vote, .stat-button, .feed-actions button { border-radius: var(--radius-pill); }
.new-post { border-radius: var(--radius-md); }
.account-row button { border-radius: var(--radius-md); }
.danger-zone button, .danger-button { border-radius: var(--radius-sm); }

/* Legibility: chips and muted metadata should stay dark on the light cards. */
html[data-theme="dark"] .place-tag { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.12); }
.note-copy { color: var(--surface-ink); }

/* Reduced-motion users: GSAP respects this via matchMedia, but also gate
   the new CSS transitions so the theme toggle is instant for them. */
@media (prefers-reduced-motion: reduce) {
  .topbar, .modal, .feed-card, .pulse-card, .settings-card,
  .live-pill, .mode-switch, .bottom-nav, .city-reveal,
  .btn-primary, .btn-secondary, .btn-ghost {
    transition-duration: .01ms !important;
  }
}

/* Keyboard accessibility for click-driven cards. Feed/pulse/bookmark cards
   use cursor:pointer + click handlers but weren't focusable. Make them real
   buttons-in-spirit: focusable, with a visible focus ring, and Enter/Space
   activated (the keydown handler is wired in app.js). */
.feed-card, .pulse-card, .bookmark-item {
  focus-visible: outline;
}
.feed-card:focus-visible, .pulse-card:focus-visible, .bookmark-item:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* nav-button inactive color darkened to clear WCAG AA on the paper background. */
.nav-button { color: var(--muted); }
.nav-button.is-active { color: white; }

/* Hover feedback is intentionally limited to devices with a real hover
   pointer. Touchscreens keep the GSAP press response without sticky hover. */
@media (hover:hover) and (pointer:fine) {
  :where(button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"])) {
    transition:
      background-color .18s ease,
      border-color .18s ease,
      color .18s ease,
      box-shadow .2s var(--ease-out-quart);
  }
  .feed-actions button:hover,
  .note-stats button:hover {
    border-color:var(--ink);
    background:rgba(23,24,22,.07);
  }
  .feed-actions .feed-delete-button:hover {
    border-color:var(--coral);
    background:rgba(255,101,77,.13);
  }
}

@keyframes blink { 50% { opacity:.35; } }
@keyframes view-in { from { opacity:0; transform:translateY(8px); } }
@keyframes location-wave { from { transform:scale(.6); opacity:1; } to { transform:scale(1.5); opacity:0; } }
@keyframes map-loading-spin { to { transform:rotate(360deg); } }
@keyframes ring-march { to { transform:rotate(360deg); } }
@keyframes note-icon-pop {
  0%,100% { scale:1; filter:brightness(1); }
  48% { scale:1.14; filter:brightness(1.04); }
  76% { scale:1.04; }
}
@keyframes pin-slam { 0% { transform:translate(-50%,-190%) scale(1.09); } 62% { transform:translate(-50%,-86%) scale(.94,1.08); } 80% { transform:translate(-50%,-108%) scale(1.03,.98); } 100% { transform:translate(-50%,-100%) scale(1); } }
@keyframes pin-slingshot-lift { 0% { transform:translateX(-50%) translateY(0) scale(1); } 16% { transform:translateX(-50%) translateY(-52px) scale(1.035,1); } 42% { transform:translateX(-50%) translateY(-61px) scale(1.04,1.055); } 70% { transform:translateX(-50%) translateY(-69px) scale(1.045,1.11); } 100% { transform:translateX(-50%) translateY(-76px) scale(1.04,1.18); } }
@keyframes pin-slam-head { 0% { transform:translateX(-50%) translateY(-76px) scale(1.04,1.18); } 42% { transform:translateX(-50%) translateY(6px) scale(1.09,.74); } 63% { transform:translateX(-50%) translateY(-7px) scale(.98,1.08); } 82% { transform:translateX(-50%) translateY(2px) scale(1.02,.96); } 100% { transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes drop-head-pulse { 0%,100% { filter:drop-shadow(0 8px 16px rgba(255,101,77,.32)) brightness(1); } 50% { filter:drop-shadow(0 0 0 rgba(255,101,77,0)) drop-shadow(0 8px 18px rgba(255,101,77,.42)) brightness(1.08); } }
@keyframes pin-impact-flash { 0% { fill:#f7faff; filter:drop-shadow(0 0 16px rgba(120,216,255,.9)); } 36% { fill:#9db9ff; filter:drop-shadow(0 0 20px rgba(91,140,255,.85)); } 100% { fill:var(--ghost); filter:none; } }
@keyframes pin-inner-flash { 0% { fill:rgba(255,255,255,.78); stroke:white; } 100% { fill:rgba(255,255,255,.18); stroke:rgba(255,255,255,.72); } }
@keyframes smoke-blast-wide {
  0% { opacity:0; transform:translateX(-50%) translateY(0) scale(.18,.08) rotate(0deg); filter:blur(3px); }
  13% { opacity:.82; transform:translateX(-50%) translateY(-5px) scale(.75,.34) rotate(-2deg); }
  46% { opacity:.48; transform:translateX(-50%) translateY(-22px) scale(1.32,.88) rotate(4deg); filter:blur(8px); }
  100% { opacity:0; transform:translateX(-50%) translateY(-52px) scale(1.9,1.08) rotate(-9deg); filter:blur(15px); }
}
@keyframes smoke-blast-curl {
  0% { opacity:0; transform:translateX(-50%) translateY(8px) scale(.16) rotate(0deg); filter:blur(5px); }
  18% { opacity:.68; transform:translateX(calc(-50% + 5px)) translateY(-8px) scale(.72) rotate(18deg); }
  58% { opacity:.34; transform:translateX(calc(-50% - 12px)) translateY(-35px) scale(1.18,.9) rotate(-34deg); filter:blur(11px); }
  100% { opacity:0; transform:translateX(calc(-50% + 22px)) translateY(-70px) scale(1.65,.72) rotate(52deg); filter:blur(18px); }
}
@keyframes map-tap { 0%,100% { transform:translate(0); } 35% { transform:translate(-2px,1px); } 70% { transform:translate(2px,-1px); } }
@keyframes user-pulse { 0% { transform:scale(.75); opacity:.55; } 75%,100% { transform:scale(2); opacity:0; } }
@keyframes self-core-shake { 0%,100% { transform:translate(-50%,-50%) rotate(0); } 22% { transform:translate(calc(-50% - 4px),-50%) rotate(-7deg); } 45% { transform:translate(calc(-50% + 4px),-50%) rotate(7deg); } 68% { transform:translate(calc(-50% - 2px),-50%) rotate(-3deg); } }
@keyframes self-label-shake { 0%,100% { transform:translateX(-50%) rotate(0); } 22% { transform:translateX(calc(-50% - 3px)) rotate(-4deg); } 45% { transform:translateX(calc(-50% + 3px)) rotate(4deg); } 68% { transform:translateX(calc(-50% - 1px)) rotate(-2deg); } }
@keyframes self-speech-pop { 0% { opacity:0; transform:translate(-50%,8px) scale(.82); } 12%,78% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-5px) scale(.96); } }
@keyframes record-pulse { 50% { transform:scale(1.08); box-shadow:0 0 0 12px rgba(255,101,77,.12),4px 4px 0 var(--ink); } }
@keyframes city-scan { to { transform:translateX(130%); } }
@keyframes city-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes city-resolve { 0% { transform:translateY(0) scale(.96); } 65% { transform:translateY(0) scale(1.035); } 100% { transform:translateY(0) scale(1); } }
@keyframes concept-wiggle { to { transform:translateX(4px) skew(-8deg); } }
@keyframes dust-burst-a { 0% { opacity:.75; transform:translate(-50%,0) scale(.55); } 18% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--dust-a-x)) , var(--dust-a-y)) scale(1.9); } }
@keyframes dust-burst-b { 0% { opacity:.72; transform:translate(-50%,0) scale(.45); } 20% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--dust-b-x)) , var(--dust-b-y)) scale(1.6); } }
@keyframes dust-burst-c { 0% { opacity:.65; transform:translate(-50%,0) scale(.55); } 24% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--dust-c-x)) , var(--dust-c-y)) scale(1.75); } }
@keyframes dust-burst-d { 0% { opacity:.68; transform:translate(-50%,0) scale(.45); } 18% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--dust-d-x)) , var(--dust-d-y)) scale(1.45); } }
@keyframes dust-burst-e { 0% { opacity:.55; transform:translate(-50%,0) scale(.6); } 22% { opacity:.85; } 100% { opacity:0; transform:translate(calc(-50% + var(--dust-e-x)) , var(--dust-e-y)) scale(2.3,.9); } }
@keyframes concept-pop { 0% { transform:translateY(4px) scale(.96); } 100% { transform:translateY(-7px) scale(1.04); } }
@keyframes text-pop { 0% { opacity:.4; transform:translateY(9px) scale(.92); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes onboarding-jiggle { 0%,100% { transform:translate(-50%,-46%) scale(1); } 25% { transform:translate(calc(-50% - 4px),calc(-46% + 2px)) rotate(-.35deg) scale(1.006); } 55% { transform:translate(calc(-50% + 5px),calc(-46% - 1px)) rotate(.3deg); } 78% { transform:translate(calc(-50% - 2px),-46%) rotate(-.18deg); } }
@keyframes success-core { 0% { opacity:0; transform:translate(-50%,-50%) scale(0) rotate(-18deg); } 58% { opacity:1; transform:translate(-50%,-50%) scale(1.42) rotate(8deg); } 78% { transform:translate(-50%,-50%) scale(.92) rotate(-3deg); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0); } }
@keyframes success-ring { 0% { opacity:.9; transform:translate(-50%,-50%) scale(.5); } 100% { opacity:0; transform:translate(-50%,-50%) scale(4.2); } }
@keyframes success-ray { 0% { opacity:0; scale:.2; } 26% { opacity:1; scale:1.18; } 100% { opacity:0; scale:1.55; } }
@keyframes success-label { 0% { opacity:0; transform:translate(-50%,22px) rotate(-3deg) scale(.78); } 16%,76% { opacity:1; transform:translate(-50%,0) rotate(0) scale(1); } 100% { opacity:0; transform:translate(-50%,-15px) scale(1.04); } }
@keyframes points-pop { 0% { opacity:0; transform:translate(-50%,18px) scale(.45); } 22%,76% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-24px) scale(1.16); } }
@keyframes map-impact { 0%,100% { transform:translate(0); } 14% { transform:translate(var(--impact-x1,-7px),var(--impact-y1,4px)) rotate(-.18deg); } 30% { transform:translate(var(--impact-x2,6px),var(--impact-y2,-5px)) rotate(.16deg); } 46% { transform:translate(var(--impact-x3,-4px),var(--impact-y3,-2px)); } 64% { transform:translate(calc(var(--impact-x2,6px) * -.35),calc(var(--impact-y2,-5px) * -.35)); } 82% { transform:translate(calc(var(--impact-x1,-7px) * .14),calc(var(--impact-y1,4px) * .14)); } }
@keyframes points-total-pulse { to { transform:scale(1.08); } }
@keyframes promise-unroll { 0% { opacity:0; clip-path:inset(0 0 100% 0 round 3px); transform:translateY(-14px) scaleY(.35); } 68% { opacity:1; clip-path:inset(0 0 0 0 round 3px); transform:translateY(0) scaleY(1.018); } 100% { opacity:1; clip-path:inset(0 0 0 0 round 3px); transform:translateY(0) scaleY(1); } }
@keyframes stamp-slam { 0% { opacity:0; transform:rotate(-12deg) scale(2.6); } 55% { opacity:.9; transform:rotate(-12deg) scale(.86); } 78% { opacity:.78; transform:rotate(-12deg) scale(1.08); } 100% { opacity:.82; transform:rotate(-12deg) scale(1); } }
@keyframes paper-impact { 25% { transform:rotate(-.4deg) scale(.975); } 60% { transform:rotate(.2deg) scale(1.006); } }
@keyframes burst { 0% { opacity:1; transform:rotate(var(--angle,0deg)) translateY(0) scaleY(.2); } 100% { opacity:0; transform:rotate(var(--angle,0deg)) translateY(-28px) scaleY(1); } }

@media (max-width: 900px) {
  .map-view.is-active { grid-template-columns: 1fr; }
  .nearby-panel { display: none; }
  .feed-grid { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; gap: 25px; }
}

@media (max-width: 600px) {
  :root { --topbar-base: 62px; --bottom-nav-offset: calc(9px + var(--safe-bottom)); }
  .topbar { height: var(--topbar-height); padding: var(--safe-top) max(14px,var(--safe-right)) 0 max(14px,var(--safe-left)); grid-template-columns: minmax(0,1fr) auto; column-gap:8px; }
  .live-pill { display: none; }
  .brand { min-width:0; font-size: 18px; overflow:hidden; }
  .brand > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .brand-mark { width: 30px; height: 30px; font-size: 21px; }
  .view { inset: var(--topbar-height) 0 0; padding-bottom:calc(200px + var(--safe-bottom)); }
  .map-view.is-active { height:calc(100dvh - var(--topbar-height)); }
  .map-stage { min-height:calc(100dvh - var(--topbar-height)); }
  .mode-switch { top: 12px; }
  .mode-button { min-width: clamp(96px, 29vw, 112px); padding: 7px 9px; }
  .mode-button b { font-size:14px; }
  .mode-button small { font-size:7px; letter-spacing:.8px; }
  .map-actions { right:max(12px,var(--safe-right)); bottom:calc(108px + var(--safe-bottom)); }
  .treasure-box { width:68px; height:61px; }
  .treasure-box.territory-prompt {
    width:auto;
    min-width:160px;
    max-width:min(208px,calc(100vw - 24px - var(--safe-left) - var(--safe-right)));
    height:auto;
    top:calc(112px + var(--safe-top));
    padding:9px 10px 9px 9px;
    grid-template-columns:30px 1fr;
    gap:8px;
  }
  .treasure-box.territory-prompt .territory-prompt-icon { width:30px; height:30px; font-size:16px; }
  .treasure-box.territory-prompt .territory-prompt-copy b { font-size:11px; }
  .treasure-box.territory-prompt .territory-prompt-copy small { font-size:7px; }
  .city-reveal { min-width:0; min-height:52px; gap:9px; padding:5px 1px 5px 7px; }
  .city-locator { width:35px; height:35px; }
  .city-locator svg { width:17px; }
  .city-reveal small { font-size:7px; letter-spacing:1.1px; }
  .city-reveal b { max-width:112px; font-size:14px; }
  .map-caption { left:max(10px,var(--safe-left)); bottom:calc(18px + var(--safe-bottom)); }
  .place-button { bottom:calc(92px + var(--safe-bottom)); max-width:calc(100vw - 32px); white-space:nowrap; }
  .bottom-nav { bottom:var(--bottom-nav-offset); max-width:calc(100vw - 22px - var(--safe-left) - var(--safe-right)); }
  .nav-button { width: 70px; height: 50px; }
  .feed-view, .profile-view { padding: 35px 16px 280px; }
  .page-head { align-items: flex-start; }
  .page-head h1 { font-size: 50px; letter-spacing: -3px; }
  .new-post { padding: 10px; }
  .feed-filters { overflow-x: auto; }
  .feed-card { min-height: 290px; padding: 17px; }
  .big-quote { font-size: 27px; }
  .profile-hero { grid-template-columns: auto 1fr; gap: 15px; }
  .profile-avatar { width: 75px; height: 75px; font-size: 30px; }
  .profile-hero h1 { font-size: 35px; letter-spacing: -2px; }
  .profile-hero p { font-size: 10px; }
  .profile-actions { grid-column:1/-1; width:100%; }
  .edit-profile { flex:1; }
  .profile-settings-popover { top:100%; right:0; }
  .language-popover { top:100%; right:47px; }
  .trail-item { grid-template-columns:auto 1fr; }
  .trail-actions { grid-column:2; justify-content:flex-start; }
  .profile-stats b { font-size: 19px; }
  .modal { width: calc(100% - 20px - var(--safe-left) - var(--safe-right)); max-height:calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom)); padding: 22px; overflow:auto; }
  .territory-game { padding:0; }
  .territory-card { max-height:none; padding:0; border-radius:0; gap:0; box-shadow:none; }
  .territory-head { top:calc(70px + var(--safe-top)); left:max(10px,var(--safe-left)); max-width:calc(100% - 72px); padding:10px; gap:10px; }
  .territory-head h2 { font-size:39px; letter-spacing:-2px; }
  .territory-head p { font-size:10px; }
  .territory-score { min-width:78px; padding:9px; }
  .territory-score b { font-size:21px; }
  .territory-wrap { inset:0; }
  .territory-instructions { display:none; }
  #territoryCanvas { height:100%; min-height:0; }
  .territory-footer { bottom:calc(86px + var(--safe-bottom)); align-items:flex-start; flex-direction:column; }
  .territory-actions { width:100%; }
  .territory-actions button { flex:1; }
  .territory-pad { display:none !important; }
  .composer { top: auto; bottom: 0; width: 100%; height: min(760px, calc(100dvh - var(--safe-top) - 10px)); max-height:calc(100dvh - var(--safe-top) - 10px); padding-bottom:calc(14px + var(--safe-bottom)); border-radius: 22px 22px 0 0; transform: translate(-50%,100%); box-shadow: 0 -10px 40px rgba(0,0,0,.2); }
  .composer.is-open { transform: translate(-50%,0); }
  .modal-handle { display: block; width: 38px; height: 4px; margin: -11px auto 15px; background: var(--line); border-radius: 99px; }
  .composer > .composer-body { min-height: 0; }
  .media-types { justify-content: flex-start; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; overscroll-behavior-inline: contain; }
  .media-types::-webkit-scrollbar { display: none; }
  .media-types button { flex: 0 0 clamp(76px, 21vw, 96px); font-size: 7px; }
  .composer-footer { margin-top: 10px; padding-top: 10px; }
  .highfive-toast { left:max(10px,var(--safe-left)); right:max(10px,var(--safe-right)); bottom:calc(80px + var(--safe-bottom)); }
  .highfive-toast div { flex: 1; }
  .onboarding { width:calc(100vw - 12px - var(--safe-left) - var(--safe-right)); min-height:auto; max-height:calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom)); padding:16px 10px calc(16px + var(--safe-bottom)); }
  .onboarding-step h2 { font-size: 32px; }
  .concept-deck { grid-template-columns:1fr; max-width:360px; }
  .concept-card { min-height:82px; }
  .concept-card:before { width:52px; height:auto; bottom:10px; right:12px; left:auto; }
  .promise-step { padding:10px 0 8px; }
  .promise-heading { padding:0 7px; }
  .promise-heading h2 { font-size:38px; letter-spacing:-2px; }
  .paper-roll { width:100%; }
  .paper { padding:25px 16px 18px; }
  .promise-copy { margin:14px auto; font-size:17px; line-height:1.42; }
  .signature-stage { padding:7px 7px 6px; }
  .signature-draw { height:190px; }
  .signature-draw .drag-draw-hint { max-width:80%; white-space:normal; line-height:1.5; }
  .stamp { right:25px; bottom:45px; }
  .stamp-burst { right:69px; bottom:90px; }
  .promise-actions { flex-wrap:wrap; gap:8px 12px; }
  .promise-status { width:100%; }
}

@media (max-width: 430px) {
  .topbar { padding-left:max(10px,var(--safe-left)); padding-right:max(10px,var(--safe-right)); }
  .brand { font-size:17px; gap:7px; }
  .city-reveal { min-height:46px; gap:6px; padding-right:0; }
  .city-locator { width:32px; height:32px; }
  .city-reveal small { font-size:6px; }
  .city-reveal b { max-width:86px; font-size:12px; letter-spacing:.2px; }
  .mode-switch { width:calc(100vw - 74px); justify-content:center; }
  .mode-button { min-width:0; flex:1; gap:6px; padding:7px 8px; }
  .mode-icon { font-size:14px; }
  .map-actions { transform:scale(.92); transform-origin:right bottom; }
  .treasure-box { width:62px; height:56px; }
  .treasure-box.territory-prompt {
    width:auto;
    min-width:148px;
    max-width:min(188px,calc(100vw - 20px - var(--safe-left) - var(--safe-right)));
    height:auto;
    top:calc(104px + var(--safe-top));
    padding:8px 9px 8px 8px;
    grid-template-columns:28px 1fr;
    gap:7px;
  }
  .treasure-box.territory-prompt .territory-prompt-icon { width:28px; height:28px; font-size:15px; }
  .treasure-box.territory-prompt .territory-prompt-copy b { font-size:10px; }
  .treasure-box.territory-prompt .territory-prompt-copy small { font-size:7px; }
  .bottom-nav { border-radius:20px; }
  .nav-button { width:64px; height:48px; }
  .profile-stats { grid-template-columns:repeat(2,1fr); }
  .profile-stats div:nth-child(2) { border-right:0; }
  .page-head h1 { font-size:42px; }
  .territory-head h2 { font-size:33px; letter-spacing:-1.6px; }
  .territory-head p { display:none; }
  #territoryCanvas { height:100%; min-height:0; }
}

@media (max-height: 740px) and (max-width: 600px) {
  .mode-switch { top:8px; }
  .map-actions { bottom:calc(94px + var(--safe-bottom)); }
  .place-button { bottom:calc(82px + var(--safe-bottom)); padding:12px 15px; }
  .onboarding-step { min-height:auto; }
  .onboarding-step h2 { font-size:29px; margin:6px 0 8px; }
  .onboarding-logo { width:52px; height:52px; margin-bottom:14px; }
  .concept-card { min-height:72px; padding:13px 14px; }
  .signature-draw { height:145px; }
  .promise-copy { font-size:15px; line-height:1.35; }
  #territoryCanvas { height:100%; min-height:0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
body.territory-mode .mapbox-map { filter:grayscale(1) contrast(1.04) brightness(.78); }
body.territory-mode .mode-switch,
body.territory-mode .map-actions,
body.territory-mode .drop-pin,
body.territory-mode .place-button,
body.territory-mode .treasure-box,
body.territory-mode .map-caption { opacity:0; pointer-events:none; }

/* Pin styling is a compact, two-step visual choice rather than a graphics tool. */
.pin-style-modal { width:min(520px,calc(100vw - 24px)); padding:28px; text-align:left; }
.pin-style-modal .eyebrow { display:block; margin-bottom:7px; color:var(--blue); font:700 9px/1 var(--font-body); letter-spacing:.2em; }
.pin-style-modal h2 { margin:0 0 18px; font-size:clamp(27px,5vw,38px); letter-spacing:-1.5px; }
.pin-style-preview { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg,rgba(91,140,255,.12),rgba(101,200,244,.04)); }
.pin-style-preview > div:first-child { display:flex; flex-direction:column; gap:3px; }
.pin-style-preview small,.pin-custom-color small { color:var(--muted); font:700 8px var(--font-body); letter-spacing:1.4px; }
.pin-style-preview strong,.pin-custom-color strong { font-size:13px; }
.pin-style-preview .note-pin { position:relative; left:auto; top:auto; flex:0 0 auto; width:62px; height:62px; min-width:62px; transform:none; padding:0; font-size:24px; box-shadow:0 12px 30px rgba(49,94,232,.28); }
.pin-style-preview .note-pin .pin-avatar { width:36px; height:36px; font-size:22px; }
.pin-style-section { margin:22px 0 0; text-align:left; }
.pin-style-section > label { display:block; margin-bottom:10px; color:var(--muted); font:700 9px/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase; }
.pin-shape-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.pin-shape-grid .shape-option { position:relative; min-width:0; min-height:84px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:9px 6px; border:1px solid var(--line); border-radius:15px; background:var(--paper-2); color:var(--ink); cursor:pointer; transition:border-color .18s,background .18s,transform .18s,box-shadow .18s; }
.pin-shape-grid .shape-option:hover { transform:translateY(-2px); border-color:rgba(91,140,255,.6); }
.pin-shape-grid .shape-option.is-selected { border-color:var(--blue); background:rgba(91,140,255,.11); box-shadow:0 0 0 2px rgba(91,140,255,.12); }
.pin-shape-grid .shape-option small { max-width:100%; overflow:hidden; color:var(--muted); font:700 8px var(--font-body); text-overflow:ellipsis; white-space:nowrap; }
.pin-shape-grid .shape-option b { position:absolute; right:7px; top:7px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-size:10px; opacity:0; transform:scale(.7); transition:.18s; }
.pin-shape-grid .shape-option.is-selected b { opacity:1; transform:scale(1); }
.shape-swatch { width:34px; height:34px; display:grid; place-items:center; background:var(--blue); color:#fff; }
.shape-swatch i { font-style:normal; font-size:13px; }
.shape-swatch.teardrop { border-radius:50% 50% 50% 14px; }
.shape-swatch.circle { border-radius:50%; }
.shape-swatch.squircle { border-radius:32%; }
.shape-swatch.hex { clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%); }
.shape-swatch.pill { width:46px; border-radius:999px; }
.shape-swatch.heart { border-radius:14px 14px 4px 4px; clip-path:polygon(50% 92%,7% 50%,7% 25%,25% 8%,50% 24%,75% 8%,93% 25%,93% 50%); }

/* ── Note-pin outer shapes ───────────────────────────────────────────────
   Shape-bearing pins are LARGER (54px) so the inner icon stays clearly
   readable, and soft/rounded. The vote count becomes a corner badge so the
   silhouette stays clean. Fill color is applied inline via applyNotePinColor. */
.note-pin.teardrop, .note-pin.circle, .note-pin.squircle, .note-pin.hex, .note-pin.pill, .note-pin.heart {
  width: 54px; height: 54px; min-width: 0; padding: 0; flex-direction: column; justify-content: center; box-shadow:0 2px 6px rgba(0,0,0,.22);
}
.note-pin.teardrop .pin-count, .note-pin.circle .pin-count, .note-pin.squircle .pin-count,
.note-pin.hex .pin-count, .note-pin.pill .pin-count, .note-pin.heart .pin-count {
  position: absolute; right: -8px; top: -8px; background: var(--paper); color: var(--ink);
  border-radius: 20px; padding: 2px 6px; font-size:11px; border: 1px solid var(--ink);
}
.note-pin.teardrop .pin-avatar, .note-pin.circle .pin-avatar, .note-pin.squircle .pin-avatar,
.note-pin.hex .pin-avatar, .note-pin.pill .pin-avatar, .note-pin.heart .pin-avatar { background: transparent; width:28px; height:28px; font-size:18px; }
.note-pin.teardrop { border-radius: 50% 50% 50% 16px; }
.note-pin.circle { border-radius: 50%; }
.note-pin.squircle { border-radius: 32%; }
.note-pin.hex { border-radius: 14px; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); }
.note-pin.pill { border-radius: 999px; }
.note-pin.heart { border-radius: 14px 14px 0 0; clip-path: path('M50 88 L12 50 a22 22 0 0 1 38 -16 a22 22 0 0 1 38 16 Z'); }
/* Center the icon inside clip-path shapes (clip-path can clip the avatar). */
.note-pin.hex .pin-avatar, .note-pin.heart .pin-avatar { transform: translateY(-2px); }

.pin-color-palette { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.color-option { position:relative; min-width:0; min-height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px 5px; border:1px solid var(--line); border-radius:14px; background:var(--paper-2); color:var(--ink); }
.color-option > span { width:30px; height:30px; border:2px solid rgba(255,255,255,.82); border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px rgba(17,24,39,.14),0 5px 12px color-mix(in srgb,var(--swatch) 35%,transparent); }
.color-option small { max-width:100%; overflow:hidden; color:var(--muted); font:700 7px var(--font-body); text-overflow:ellipsis; white-space:nowrap; }
.color-option b { position:absolute; right:6px; top:6px; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-size:9px; opacity:0; transform:scale(.7); transition:.18s; }
.color-option.is-selected { border-color:var(--blue); background:rgba(91,140,255,.1); }
.color-option.is-selected b { opacity:1; transform:scale(1); }
.pin-custom-color { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:9px; padding:11px 13px; border:1px solid var(--line); border-radius:14px; background:var(--paper-2); }
.pin-custom-color > div { display:flex; flex-direction:column; gap:2px; }
.pin-custom-color label { display:flex; align-items:center; gap:9px; color:var(--muted); font:700 9px var(--font-body); }
.pin-custom-color input { width:38px; height:38px; padding:3px; border:1px solid var(--line); border-radius:11px; background:transparent; cursor:pointer; }
.pin-style-modal .primary-button { width:100%; min-height:48px; margin-top:22px; }
html[data-theme="dark"] .pin-style-preview,html[data-theme="dark"] .pin-shape-grid .shape-option,html[data-theme="dark"] .color-option,html[data-theme="dark"] .pin-custom-color { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .pin-shape-grid .shape-option.is-selected,html[data-theme="dark"] .color-option.is-selected { background:rgba(91,140,255,.16); border-color:var(--blue); }
@media (max-width:420px) {
  .pin-style-modal { padding:22px 18px; }
  .pin-style-preview { min-height:76px; }
  .pin-style-preview .note-pin { width:54px; height:54px; min-width:54px; }
  .pin-shape-grid .shape-option { min-height:72px; }
  .pin-color-palette { grid-template-columns:repeat(4,1fr); gap:7px; }
  .color-option { min-height:61px; }
  .color-option small { display:none; }
}

/* ═══ Welcome language picker modal ═══ */
.welcome-lang { display:none; }
.welcome-lang.is-open { display:grid; place-items:center; }
.welcome-lang-card { background:var(--paper); border:2px solid var(--ink); border-radius:24px; box-shadow:8px 8px 0 var(--ink); padding:32px 28px; max-width:380px; width:90vw; text-align:center; }
.welcome-lang-emoji { font-size:48px; margin-bottom:8px; }
.welcome-lang-title-en, .welcome-lang-title-ar { font:800 22px var(--font-body); color:var(--ink); margin:4px 0; }
.welcome-lang-body { font:500 14px var(--font-body); color:var(--ink); opacity:.8; margin:12px 0 20px; line-height:1.5; }
.welcome-lang-buttons { display:flex; gap:12px; justify-content:center; }
.welcome-lang-button { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 12px; border:2px solid var(--ink); border-radius:16px; background:var(--paper-2); cursor:pointer; transition:transform .2s, background .15s; font:800 15px var(--font-body); color:var(--ink); }
.welcome-lang-button:hover { background:var(--lime); }
.welcome-lang-flag { font-size:28px; }
.welcome-lang-symbol { font: 800 22px var(--font-body); color: var(--ink); }
.welcome-lang-hint { font:500 11px var(--font-body); color:var(--ink); opacity:.55; margin-top:18px; line-height:1.6; }

/* ═══ RTL (Arabic) layout mirroring ═══
   When <html dir="rtl">, mirror the asymmetric UI. Most of the app already
   auto-mirrors via Flexbox/Grid source order + logical properties; this block
   covers the directional exceptions (absolute-positioned panels, hard-coded
   left/right, icon-directional elements). */
html[dir="rtl"] body { text-align:right; }
html[dir="rtl"] .modal { direction:rtl; }
/* Keep the composer centered in RTL too. The shared modal transform is based
   on left:50%; pairing it with right:0 pushes the sheet off-screen on phones. */
html[dir="rtl"] .composer { left:50%; right:auto; }
html[dir="rtl"] .place-button { direction:rtl; }
html[dir="rtl"] .nav { flex-direction:row-reverse; }
html[dir="rtl"] .feed-card-head { flex-direction:row-reverse; }
html[dir="rtl"] .feed-actions { flex-direction:row-reverse; }
html[dir="rtl"] .note-pin { direction:rtl; }
html[dir="rtl"] .toast { direction:rtl; text-align:right; }
html[dir="rtl"] .account-modal { direction:rtl; text-align:right; }
html[dir="rtl"] .settings-popover { direction:rtl; }
html[dir="rtl"] .drop-success-label { direction:rtl; }
/* Map controls: zoom/locate stack lives on the right in LTR → mirror to left. */
html[dir="rtl"] .map-actions { right:auto; left:20px; }
@media (max-width:600px) {
  .view.map-view { padding-bottom: 0; }
  html[dir="rtl"] .map-actions { left:max(12px,var(--safe-left)); right:auto; }
  html[dir="rtl"] .map-actions { transform:scale(.92); transform-origin:left bottom; }
}
html[dir="rtl"] .map-caption { left:auto; right:max(10px,var(--safe-right)); }
html[dir="rtl"] .city-reveal { direction:rtl; }
html[dir="rtl"] .city-copy { text-align:right; }
/* Territory game: instructions panel flips to the left side, head stays. */
html[dir="rtl"] .territory-instructions { right:auto; left:max(16px,var(--safe-left)); }
html[dir="rtl"] .territory-head { direction:rtl; text-align:right; }
html[dir="rtl"] .territory-footer { direction:rtl; }
html[dir="rtl"] .territory-status { direction:rtl; }
/* Promise paper: pen flourish flips to the left margin, stamp mirrors. */
html[dir="rtl"] .paper-roll { direction:rtl; }
html[dir="rtl"] .paper { direction:rtl; }
html[dir="rtl"] .promise-copy { direction:rtl; }
html[dir="rtl"] .pen-flourish { right:auto; left:18px; transform:rotate(34deg); }
html[dir="rtl"] .stamp { right:auto; left:48px; transform:rotate(12deg) scale(2.6); }
html[dir="rtl"] .stamp.is-stamped { animation-name: stamp-slam-rtl; }
@keyframes stamp-slam-rtl {
  0% { opacity:0; transform:rotate(12deg) scale(2.6); }
  55% { opacity:.9; transform:rotate(12deg) scale(.86); }
  78% { opacity:.78; transform:rotate(12deg) scale(1.08); }
  100% { opacity:.82; transform:rotate(12deg) scale(1); }
}
html[dir="rtl"] .stamp-burst { right:auto; left:92px; }
html[dir="rtl"] .signature-stage { direction:rtl; }
html[dir="rtl"] .signature-stage-head,
html[dir="rtl"] .signature-footer { direction:rtl; }
/* Admin / account rows: keep grid but mirror visual reading order. */
html[dir="rtl"] .admin-modal { direction:rtl; text-align:right; }
html[dir="rtl"] .admin-stats div,
html[dir="rtl"] .admin-list-row { direction:rtl; }
html[dir="rtl"] .account-row { direction:rtl; }
html[dir="rtl"] .danger-zone { direction:rtl; text-align:right; }
html[dir="rtl"] .settings-card button { direction:rtl; text-align:right; }
/* Pin-style modal: shape/color labels read right-to-left. */
html[dir="rtl"] .pin-style-modal { direction:rtl; }
html[dir="rtl"] .pin-style-section { text-align:right; }
/* Onboarding deck: concept cards read right-to-left. */
html[dir="rtl"] .onboarding { direction:rtl; }
html[dir="rtl"] .onboarding-step { direction:rtl; }
html[dir="rtl"] .concept-deck { direction:rtl; }
html[dir="rtl"] .identity-step,
html[dir="rtl"] .location-step { direction:rtl; }
html[dir="rtl"] .input-label { direction:rtl; text-align:right; }
html[dir="rtl"] .picker-label { direction:rtl; text-align:right; }
/* Bottom-nav stays centered (translateX(-50%)) — only internal order flips. */
html[dir="rtl"] .bottom-nav { direction:rtl; }
/* Profile hero actions grid reads right-first. */
html[dir="rtl"] .profile-hero { direction:rtl; }
html[dir="rtl"] .profile-actions { direction:rtl; }
html[dir="rtl"] .language-popover { right:auto; left:47px; }
@media (max-width:600px) {
  html[dir="rtl"] .language-popover { left:47px; right:auto; }
}
/* Welcome language picker: already symmetric (centered grid). */
html[dir="rtl"] .welcome-lang-card { direction:rtl; }
/* Arabic font: IBM Plex Sans Arabic for all text in RTL mode. Modern, clean,
   reads well on screen at UI sizes. Latin UI uses Manrope/DM Mono. */
html[dir="rtl"] body, html[dir="rtl"] .modal, html[dir="rtl"] .toast,
html[dir="rtl"] .note-pin, html[dir="rtl"] button, html[dir="rtl"] input,
html[dir="rtl"] .feed-card, html[dir="rtl"] .composer,
html[dir="rtl"] .settings-popover, html[dir="rtl"] .onboarding,
html[dir="rtl"] .territory-head, html[dir="rtl"] .territory-instructions,
html[dir="rtl"] .territory-footer, html[dir="rtl"] .paper,
html[dir="rtl"] .admin-modal, html[dir="rtl"] .account-modal {
  font-family: var(--font-body), var(--font-body), sans-serif;
}
/* DM Mono numerals/eyebrows stay monospace in Arabic too — they're labels. */
html[dir="rtl"] .eyebrow, html[dir="rtl"] .city-reveal small,
html[dir="rtl"] .city-reveal b, html[dir="rtl"] .live-pill,
html[dir="rtl"] .mode-button small, html[dir="rtl"] .profile-meta,
html[dir="rtl"] .profile-stats span {
  font-family: var(--font-body), var(--font-body);
}

/* The app controls arrive only after the launch film has fully cleared.
   Keeping launch-active in the initial HTML prevents a one-frame nav flash. */
.bottom-nav {
  opacity: 1;
  visibility: visible;
  transition:
    opacity .38s ease,
    transform .55s cubic-bezier(.22,1,.36,1),
    visibility 0s linear 0s,
    background-color var(--dur-base) var(--ease-out-quart),
    color var(--dur-base) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-out-quart);
}
body.launch-active .bottom-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(18px) scale(.96);
  transition-delay: 0s, 0s, .55s, 0s, 0s, 0s;
}
body.launch-active .modal,
body.launch-active .modal-backdrop,
body.launch-active .toast {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ghostmode component retints — structural rules kept, palette follows the
   new tokens defined above. */
.noise { opacity:.05; }
.topbar { background:rgba(255,255,255,.72); border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(11,16,32,.04); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); }
html[data-theme="dark"] .topbar, html[data-theme="dark"] body.launch-active .topbar { background:rgba(11,16,32,.72); }
html[data-theme="dark"] body.launch-active .brand { color:var(--ink); }
html[data-theme="dark"] body.launch-active .brand-mark { background:var(--ink); color:var(--paper-2); }
.brand { font-family:var(--font-logo); font-size:20px; letter-spacing:-1.1px; }
.brand-mark { width:36px; height:36px; border-radius:50%; transform:none; }
.live-pill { background:var(--paper-2); border-color:var(--line); box-shadow:none; font-size:9px; }
.city-reveal { min-width:190px; min-height:52px; padding:6px 12px 6px 7px; border-color:var(--line); background:var(--paper-2); box-shadow:0 8px 20px rgba(91,140,255,.10); }
.city-locator { width:38px; height:38px; background:var(--ghost); }

/* The launch covers the whole app canvas instead of only the map column. */
body.launch-active .map-view.is-active { display:block; }
body.launch-active .nearby-panel, body.launch-active .map-location-loader,
body.launch-active .mode-switch, body.launch-active .map-actions,
body.launch-active .place-button,
body.launch-active .map-caption, body.launch-active .user-location,
body.launch-active .treasure-box { visibility:hidden; pointer-events:none; }
.launch-splash { position:fixed; inset:var(--topbar-height) 0 0; z-index:45; padding:0 24px 11vh; gap:17px; background:radial-gradient(circle at 18% 20%, rgba(91,140,255,.13), transparent 18%),radial-gradient(circle at 82% 68%, rgba(91,140,255,.10), transparent 22%),linear-gradient(180deg, #fcfbf7 0%, #f5f8fc 54%, #edf2fa 100%); }
.launch-splash:before { opacity:.35; }
.launch-splash:after { opacity:.42; mix-blend-mode:normal; }
.launch-ascii { display:none; }
.launch-ascii-fallback { color:rgba(91,140,255,.34); opacity:.72; filter:none; mix-blend-mode:multiply; }
.ascii-cloud { font-size:clamp(6px, .8vw, 10px); animation-duration:14s; }
.launch-title { font-size:clamp(40px, 5.4vw, 72px); color:#1e2530; letter-spacing:-.07em; }
.launch-progress { width:min(56vw, 340px); height:8px; box-shadow:none; }
.launch-status { display:block !important; bottom:10vh; color:#687386; font-size:9px; }
html[data-theme="dark"] .launch-splash { background:radial-gradient(circle at 18% 20%, rgba(91,140,255,.20), transparent 22%),radial-gradient(circle at 82% 68%, rgba(91,140,255,.14), transparent 26%),linear-gradient(180deg,#040817 0%,#071329 55%,#0b1b3b 100%); }
html[data-theme="dark"] .launch-title { color:#f4f3ed; }
html[data-theme="dark"] .launch-ascii-fallback { color:rgba(91,140,255,.55); mix-blend-mode:screen; }
html[data-theme="dark"] .launch-status { color:rgba(232,238,250,.7); }

.map-view.is-active { background:var(--paper); }
.map-stage { background:#e9e7df; }
html[data-theme="dark"] .map-stage { background:#040817; }
.nearby-panel { background:var(--paper-2); border-left:1px solid var(--line); }
.mode-switch,.bottom-nav,.round-button,.feed-card,.profile-hero,.profile-stats,.settings-card,.badge-card,.modal { box-shadow:var(--shadow-hard-sm), var(--shadow); }
.mode-switch,.bottom-nav,.round-button,.modal { border-color:var(--line); }
.mode-button { border-radius:12px; }
.mode-button.is-active { box-shadow:none; }
.place-button,.new-post,.post-note-button,.trail-map-button { box-shadow:var(--shadow-hard); }
.feed-view,.profile-view { background:var(--paper); }
.feed-card { border-color:var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.feed-card:hover,.pulse-card:hover,.bookmark-item:hover { transform:none; }
.feed-card-head { border-bottom:1px solid var(--line); }
.card-top,.feed-card p,.feed-card h3,.feed-card small,.note-place,.note-meta span { color:var(--ink); }
.feed-card .place-tag,.feed-card .location-line { color:var(--muted); background:rgba(24,26,24,.04); border-color:rgba(24,26,24,.06); }
html[data-theme="dark"] .feed-card .place-tag,html[data-theme="dark"] .feed-card .location-line { color:var(--muted); background:rgba(255,255,255,.06); }
.profile-hero { border-bottom:1px solid var(--line); box-shadow:none; }
.profile-stats { box-shadow:none; border-color:var(--line); }
.profile-layout,.feed-grid { gap:22px; }
.modal { background:var(--paper-2); border-color:var(--line); }
.modal-backdrop { background:rgba(14,16,14,.48); backdrop-filter:blur(4px); }
@media (min-width:861px) { .feed-view,.profile-view { padding:46px clamp(32px,5vw,72px) 180px; } .map-view.is-active { grid-template-columns:minmax(0,1fr) 330px; } .nearby-panel { padding:32px 26px; } .bottom-nav { bottom:24px; } }
@media (max-width:860px) { .topbar { padding-left:max(16px,var(--safe-left)); padding-right:max(16px,var(--safe-right)); } .launch-splash { padding-bottom:15vh; } .ascii-cloud { font-size:6px; } .feed-view,.profile-view { padding-bottom:calc(170px + var(--safe-bottom)); } }

/* React owns the profile, comments, and report surfaces. The old markup lives
   inside inert templates so compatibility code can be retired incrementally
   without shipping a second rendered UI tree. */
#reactProfileRoot { display:block; width:100%; }
.onboarding > .auth-step,.onboarding > .identity-step,.onboarding > .language-step { display:none !important; }
.onboarding #reactOnboardingRoot { display:block; }
.react-onboarding-step { min-height:390px; display:flex; flex-direction:column; justify-content:center; padding:20px 8px; }
.react-onboarding-step h2 { max-width:490px; margin:10px 0; color:var(--ink); font-size:clamp(34px,6vw,56px); letter-spacing:-2.5px; line-height:.98; }
.react-onboarding-step p { max-width:380px; margin:0 0 22px; color:var(--muted); font-size:12px; line-height:1.55; }
.react-onboarding-auth { align-items:center; text-align:center; gap:12px; }
.react-auth-copy { display:grid; gap:3px; width:min(100%, 360px); text-align:center; }
.react-auth-copy strong { color:var(--ink); font:600 19px/1.2 "Kanit", sans-serif; letter-spacing:.01em; }
.react-auth-copy p { max-width:340px; margin:0; color:var(--muted); font:500 14px/1.5 "Cairo", sans-serif; }
.react-onboarding-auth .eyebrow { color:var(--ghost); }
.react-google-button { width:min(100%,360px); min-height:48px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--ink); font-size:11px; font-weight:800; }
.google-letter { color:#4285f4; font:900 17px Arial,sans-serif; }
.react-onboarding-identity { align-items:stretch; }
.react-identity-preview { width:76px; height:76px; display:grid; place-items:center; margin:4px 0 18px; border:1px solid var(--ink); border-radius:50%; background:var(--ghost-mist); font-size:34px; box-shadow:4px 4px 0 var(--ink); }
.react-onboarding-identity .input-label { display:grid; gap:6px; margin:0 0 15px; }
.react-onboarding-identity .input-label input { min-height:44px; width:100%; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font:inherit; outline:none; }
.react-picker-label { margin-bottom:8px; color:var(--muted); font:500 9px var(--font-body); text-transform:uppercase; }
.react-emoji-picker { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.react-emoji-picker button { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font-size:20px; }
.react-emoji-picker button.is-active { border-color:var(--ghost); box-shadow:0 0 0 2px color-mix(in srgb,var(--ghost) 35%,transparent); }
.react-emoji-picker .react-emoji-custom { font-size:20px; }
.react-onboarding-error { min-height:17px; color:var(--coral); font-size:10px; }
.react-onboarding-identity .next-button,.react-onboarding-language .next-button { align-self:flex-start; margin-top:10px; }
.react-onboarding-language { align-items:center; text-align:center; }
.react-language-grid { width:100%; max-width:430px; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 18px; }
.react-language-grid button { min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); }
.react-language-grid button.is-active { border-color:var(--ghost); background:color-mix(in srgb,var(--paper) 82%,var(--ghost) 18%); box-shadow:0 0 0 2px color-mix(in srgb,var(--ghost) 25%,transparent); }
.react-language-grid b { color:var(--ghost); font-size:26px; }
.react-language-grid span { font-size:11px; }
html[data-theme="dark"] .react-google-button,html[data-theme="dark"] .react-emoji-picker button,html[data-theme="dark"] .react-language-grid button { background:var(--surface-1,#11192e); }
.react-comments-content,.react-report-content { position:relative; }
.react-modal-close { position:absolute; top:-7px; right:-7px; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink); font-size:20px; }
.react-comments-content h2,.react-report-content h2 { margin:5px 0 7px; }
.react-report-content > p { margin:0 0 18px; color:var(--muted); font-size:12px; }
.react-comments-list { display:grid; gap:9px; max-height:min(50dvh,390px); overflow:auto; margin:20px 0 14px; padding-right:3px; }
.react-comment { padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--paper) 78%,var(--ghost) 22%); }
.react-comment b { font-size:11px; }
.react-comment p { margin:5px 0; font-size:12px; line-height:1.45; }
.react-comment small { color:var(--muted); font:500 8px var(--font-body); }
.react-comments-empty { padding:26px 10px; color:var(--muted); text-align:center; font-size:11px; }
.react-comment-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.react-comment-form input,.react-report-content textarea,.react-report-content select { width:100%; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font:inherit; font-size:11px; outline:none; }
.react-comment-form input { min-height:42px; padding:0 12px; }
.react-comment-form button { min-width:64px; border:1px solid var(--ink); border-radius:10px; background:var(--ghost); color:var(--ink); font-size:10px; font-weight:800; }
.react-comment-form button:disabled { opacity:.45; }
.react-report-label { display:grid; gap:6px; margin:18px 0 10px; }
.react-report-label span { color:var(--muted); font:500 9px var(--font-body); text-transform:uppercase; }
.react-report-content select { min-height:42px; padding:0 10px; }
.react-report-content textarea { min-height:100px; padding:11px; resize:vertical; }
.react-report-submit { width:100%; margin-top:14px; }
html[data-theme="dark"] .react-comment { background:rgba(255,255,255,.05); }
@media (max-width:520px) { .react-comment-form { grid-template-columns:1fr; } .react-comment-form button { min-height:40px; } }
.react-profile-surface { max-width:1080px; margin:0 auto; color:var(--ink); }
.react-profile-hero { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; padding:4px 0 28px; border-bottom:1px solid var(--line); }
.react-profile-avatar { position:relative; width:104px; height:104px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; background:var(--ghost-mist); box-shadow:5px 5px 0 var(--ink); font-size:42px; }
.react-profile-avatar i { position:absolute; right:4px; bottom:7px; width:18px; height:18px; border:4px solid var(--paper-2); border-radius:50%; background:#55d67c; }
.react-profile-identity { min-width:0; }
.react-profile-identity small,.react-profile-settings-head small { display:block; color:var(--muted); font:500 9px var(--font-body); letter-spacing:1.7px; text-transform:uppercase; }
.react-profile-identity h1 { margin:5px 0 7px; font-size:clamp(38px,5vw,62px); letter-spacing:-3px; line-height:.98; overflow:hidden; text-overflow:ellipsis; }
.react-profile-identity p { margin:0; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.react-profile-actions { align-self:start; display:flex; gap:8px; }
.react-profile-edit,.react-profile-settings-button { height:40px; border:1px solid var(--ink); border-radius:10px; background:transparent; color:var(--ink); font-size:10px; font-weight:800; }
.react-profile-edit { padding:0 17px; }
.react-profile-settings-button { width:40px; display:grid; place-items:center; background:var(--ink); color:var(--paper-2); font-size:17px; }
.react-profile-settings { position:relative; z-index:4; width:min(100%,400px); margin:-1px 0 20px auto; padding:15px; border:1px solid var(--ink); border-radius:16px; background:var(--paper-2); box-shadow:5px 5px 0 var(--ink),var(--shadow); }
html[dir="rtl"] .react-profile-settings { direction:rtl; text-align:right; }
html[dir="rtl"] .react-settings-row { direction:rtl; text-align:right; }
.react-profile-settings-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.react-profile-settings-head h2 { margin:3px 0 0; font-size:23px; letter-spacing:-1px; }
.react-profile-settings-head > button { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--line); color:var(--ink); font-size:20px; cursor:pointer; }
.react-profile-settings-head > button svg { width:18px; height:18px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.react-settings-row { width:100%; min-height:58px; display:grid; grid-template-columns:28px minmax(0,1fr) 28px; align-items:center; gap:10px; padding:0 2px; border-top:1px solid var(--line); text-align:start; background:transparent; color:var(--ink); font-size:10px; }
.react-settings-row:first-of-type { border-top:0; }
.react-settings-row b { font-weight:700; }
.react-settings-row > span:last-child { color:var(--muted); font-size:17px; }
.settings-row-icon { width:28px; height:28px; display:grid; place-items:center; color:var(--ghost); font:700 13px var(--font-body); }
.settings-row-icon svg,.settings-row-tail svg,.react-profile-settings-button svg { width:19px; height:19px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.settings-row-tail { width:28px; height:28px; display:grid; place-items:center; color:var(--muted); }
.react-settings-row.is-danger { color:var(--coral, #d94a5c); }
.react-settings-row.is-danger .settings-row-icon,.react-settings-row.is-danger .settings-row-tail { color:inherit; }
.react-settings-row.is-danger:hover,.react-settings-row.is-danger:focus-visible { background:color-mix(in srgb, var(--coral, #d94a5c) 10%, transparent); }
.react-settings-row .theme-switch { justify-self:end; }
.react-settings-row .theme-switch i.is-on { transform:translateX(15px); background:#fff; }
.react-profile-stats { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); margin-bottom:25px; }
.react-profile-stats div { min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid var(--line); }
.react-profile-stats div:last-child { border-right:0; }
.react-profile-stats b { min-height:25px; color:var(--ink); font-size:25px; letter-spacing:-1px; }
.react-profile-stats small { color:var(--muted); font:500 8px var(--font-body); text-transform:uppercase; }
.react-profile-tools { display:grid; gap:10px; margin-bottom:30px; }
.react-profile-tool { width:100%; min-height:49px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:0 15px; border:1px solid var(--ink); border-radius:12px; background:var(--paper-2); color:var(--ink); box-shadow:3px 3px 0 var(--ink); text-align:start; font-size:10px; }
.react-profile-tool.admin { background:var(--ink); color:var(--paper-2); }
.react-profile-tool span { min-width:24px; padding:4px 7px; border-radius:99px; background:var(--ghost); color:var(--ink); text-align:center; font:800 8px var(--font-body); }
.react-profile-tool i { font-style:normal; color:var(--muted); font-size:20px; }
.react-highfive-list { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper-2); }
.react-highfive-person { display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--line); }
.react-highfive-person:last-child { border-bottom:0; }
.react-highfive-person > span { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--paper); }
.react-highfive-person div { display:flex; flex-direction:column; gap:3px; }
.react-highfive-person b { font-size:10px; }
.react-highfive-person small { color:var(--muted); font:500 8px var(--font-body); text-transform:uppercase; }
.react-highfive-list > p { margin:0; padding:18px; color:var(--muted); text-align:center; font-size:10px; }
.react-profile-trail-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:7px; }
.react-profile-trail-head h2,.react-profile-bookmarks h2 { margin:0; font-size:25px; letter-spacing:-1.2px; }
.react-profile-trail-head > div { display:flex; gap:4px; }
.react-profile-trail-head button { padding:7px 10px; border-radius:99px; background:transparent; color:var(--ink); font:600 9px var(--font-body); }
.react-profile-trail-head button.is-active { background:var(--ink); color:var(--paper-2); }
.react-profile-list { border-bottom:1px solid var(--line); }
.react-profile-note { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; padding:17px 0; border-top:1px solid var(--line); }
.react-profile-note-icon { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--paper-2); color:var(--ghost); }
.react-profile-note-icon svg { width:19px; height:19px; }
.react-profile-note-copy { min-width:0; }
.react-profile-note-copy small { color:var(--muted); font:500 8px var(--font-body); }
.react-profile-note-copy p { margin:6px 0 7px; color:var(--ink); font-size:14px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.react-profile-note-copy > span { display:block; color:var(--muted); font:500 9px var(--font-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.react-profile-note-actions { display:flex; align-items:center; gap:7px; }
.react-profile-note-actions .trail-map-button { min-height:34px; padding:0 11px; }
.react-profile-note-actions .trail-delete { width:34px; height:34px; }
.react-profile-note-actions svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.react-profile-bookmarks { margin-top:28px; }
.react-profile-bookmarks h2 { margin-bottom:7px; }
.react-profile-empty { display:flex; flex-direction:column; gap:7px; padding:28px 0; border-top:1px solid var(--line); color:var(--muted); }
.react-profile-empty b { color:var(--ink); font-size:13px; }
.react-profile-empty span { font-size:10px; }
.react-profile-signed-out { min-height:55vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.react-profile-empty-icon { width:72px; height:72px; display:grid; place-items:center; margin-bottom:17px; border:1px solid var(--line); border-radius:50%; background:var(--ghost-mist); font-size:31px; }
.react-profile-signed-out > small { color:var(--muted); font:500 9px var(--font-body); letter-spacing:1.7px; text-transform:uppercase; }
.react-profile-signed-out h1 { max-width:430px; margin:10px 0; font-size:clamp(28px,4vw,44px); letter-spacing:-1.6px; }
.react-profile-signed-out p { max-width:330px; margin:0 0 20px; color:var(--muted); font-size:12px; }
.react-profile-primary { min-height:42px; padding:0 18px; border:1px solid var(--ink); border-radius:10px; background:var(--ghost); color:var(--ink); font-size:10px; font-weight:800; box-shadow:3px 3px 0 var(--ink); }
html[data-theme="dark"] .react-profile-settings, html[data-theme="dark"] .react-profile-tool, html[data-theme="dark"] .react-highfive-list, html[data-theme="dark"] .react-profile-note-icon { background:var(--surface-1,#11192e); }
html[data-theme="dark"] .react-profile-avatar { background:rgba(91,140,255,.18); }
html[data-theme="dark"] .react-profile-tool.admin { background:var(--ghost); color:#07101f; }
@media (max-width:600px) {
  .react-profile-hero { grid-template-columns:auto minmax(0,1fr); gap:14px; padding-top:0; }
  .react-profile-avatar { width:76px; height:76px; font-size:30px; }
  .react-profile-identity h1 { font-size:35px; letter-spacing:-2px; }
  .react-profile-identity p { font-size:10px; }
  .react-profile-actions { grid-column:1 / -1; width:100%; }
  .react-profile-edit { flex:1; }
  .react-profile-settings { width:100%; }
  .react-profile-note { grid-template-columns:auto minmax(0,1fr); }
  .react-profile-note-actions { grid-column:2; justify-content:flex-start; }
  .react-profile-stats b { font-size:19px; }
  .react-profile-stats small { font-size:7px; }
  .react-profile-trail-head { align-items:flex-start; flex-direction:column; }
  .react-profile-bookmarks { margin-top:24px; }
}

/* Mode order is a product rule, not a reading-direction rule: Read stays on
   the left and Post stays on the right in both languages. Only the labels
   themselves change direction in Arabic. */
.mode-switch { direction:ltr; }
.mode-switch .mode-button { direction:ltr; }
html[dir="rtl"] .mode-switch .mode-button > span:last-child { direction:rtl; text-align:right; }

/* The most recent whisper stays discoverable after the optimistic drop and
   after refresh. The same restrained ghost-blue treatment works in both themes. */
.note-pin.is-latest {
  z-index:18 !important;
  border-color:var(--paper-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ghost,#5b8cff) 75%,transparent),0 0 24px 9px color-mix(in srgb,var(--ghost,#5b8cff) 48%,transparent),0 8px 20px rgba(23,24,22,.24);
}
.note-pin.is-latest .pin-new-tag {
  display:inline-block;
  opacity:1;
  animation:latest-tag-breathe 2.4s ease-in-out infinite;
  background:var(--ghost,#5b8cff);
  color:#fff;
  border-color:var(--paper-2);
  box-shadow:0 2px 8px rgba(36,93,255,.28);
}
@keyframes latest-tag-breathe { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-2px) scale(1.04); } }
.feed-card.is-latest {
  position:relative;
  border-color:var(--ghost,#5b8cff);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ghost,#5b8cff) 70%,transparent),0 14px 42px color-mix(in srgb,var(--ghost,#5b8cff) 22%,transparent);
}
.feed-new-badge {
  position:absolute;
  top:12px;
  right:52px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border:1px solid color-mix(in srgb,var(--ghost,#5b8cff) 70%,var(--line));
  border-radius:999px;
  background:var(--ghost,#5b8cff);
  color:#fff;
  font:800 8px/1 var(--font-body);
  letter-spacing:.7px;
  text-transform:uppercase;
  box-shadow:0 5px 16px color-mix(in srgb,var(--ghost,#5b8cff) 28%,transparent);
}
html[dir="rtl"] .feed-new-badge { right:auto; left:52px; direction:rtl; text-transform:none; letter-spacing:0; }
.profile-new-badge { display:inline-flex; margin-inline-start:7px; padding:3px 7px; border-radius:999px; background:var(--ghost,#5b8cff); color:#fff; font:800 8px/1 var(--font-body); }
@media (prefers-reduced-motion:reduce) { .note-pin.is-latest .pin-new-tag { animation:none; } }