/* 0A.5(e): self-hosted fonts — Inter + Playfair Display (Latin) and
   Noto Sans Devanagari. Generated from @fontsource CSS (unicode-range
   kept as published); system fonts fall back for every other script. */
/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/inter-latin-400-normal.woff2) format('woff2');
}
/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/inter-latin-500-normal.woff2) format('woff2');
}
/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/inter-latin-600-normal.woff2) format('woff2');
}
/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/inter-latin-700-normal.woff2) format('woff2');
}
/* playfair-display-latin-500-normal */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/playfair-display-latin-500-normal.woff2) format('woff2');
}
/* playfair-display-latin-700-normal */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/playfair-display-latin-700-normal.woff2) format('woff2');
}
/* playfair-display-latin-500-italic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/playfair-display-latin-500-italic.woff2) format('woff2');
}
/* noto-sans-devanagari-devanagari-400-normal */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/noto-sans-devanagari-devanagari-400-normal.woff2) format('woff2');
}
/* noto-sans-devanagari-devanagari-500-normal */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/noto-sans-devanagari-devanagari-500-normal.woff2) format('woff2');
}
/* noto-sans-devanagari-devanagari-600-normal */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/noto-sans-devanagari-devanagari-600-normal.woff2) format('woff2');
}
/* noto-sans-devanagari-devanagari-700-normal */
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/noto-sans-devanagari-devanagari-700-normal.woff2) format('woff2');
}

/* ═══════════════════════════════════════════════════
   WORLDLAYER — Design System
   Light, editorial, alive. Serif stories. Glass cards.
═══════════════════════════════════════════════════ */
/* Google Fonts loaded asynchronously in head */

:root {
  --paper: #f5f7fa;
  --card: #ffffff;
  --card2: #f8f9fb;
  --ink: #1a2332;
  --ink2: #3d4f63;
  --muted: #6b7a8d;
  --line: #e2e8f0;
  --green: #1e5a46;
  --green2: #d4ede3;
  --green3: #0d9e72;
  --teal: #0f7da8;
  --gold: #c8923a;
  --gold2: #fff4e0;
  --red: #c0392b;
  --red2: #fff0ee;
  --purple: #6c5ce7;
  --purple2: #f0eeff;
  --shadow-sm: 0 1px 3px rgba(26,35,50,.07), 0 1px 2px rgba(26,35,50,.04);
  --shadow: 0 4px 16px rgba(26,35,50,.08), 0 1px 4px rgba(26,35,50,.04);
  --shadow-lg: 0 20px 60px rgba(26,35,50,.12), 0 4px 16px rgba(26,35,50,.06);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
/* 0A.8: visible keyboard focus on everything interactive. */
:focus-visible{outline:3px solid var(--green3);outline-offset:2px;border-radius:6px}
/* 0A.8: reduced motion — stop every CSS animation/transition. The JS
   gates (confetti, fly-to) live in app.js; this covers the rest. */
.reduced-motion *,.reduced-motion *::before,.reduced-motion *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
.reduced-motion .pulse-marquee{animation:none !important}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;min-height:100vh;overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--green2)}

/* ── Layout ── */
.app-shell{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;min-height:100vh;max-width:1520px;margin:0 auto}
@media(max-width:1200px){.app-shell{grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:760px){.app-shell{display:block}}

/* ── Topbar ── */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 20px;height:62px;box-shadow:0 1px 0 var(--line)}
.topbar-brand{display:none;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.3px;white-space:nowrap;flex-shrink:0}
.topbar-brand .brandmark{width:28px;height:28px;border-radius:9px;background:var(--green);display:grid;place-items:center}
.topbar-brand .brandmark svg{width:17px;stroke:#d6ea8b}
.topbar-search{flex:1;max-width:580px;position:relative}
.topbar-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;color:var(--muted);pointer-events:none}
.topbar-search input{width:100%;height:40px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);padding:0 14px 0 38px;outline:none;font-size:14px;transition:border var(--transition),box-shadow var(--transition)}
.topbar-search input:focus{border-color:var(--green3);box-shadow:0 0 0 3px rgba(13,158,114,.12)}
.topbar-search input::placeholder{color:var(--muted)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--muted);transition:background var(--transition),color var(--transition)}
.icon-btn:hover{background:var(--card2);color:var(--ink)}
.avatar-btn{width:34px;height:34px;border-radius:50%;background:var(--green);color:white;font-size:12px;font-weight:700;display:grid;place-items:center;cursor:pointer;transition:opacity var(--transition)}
.avatar-btn:hover{opacity:.85}
@media(max-width:760px){.topbar-brand{display:flex}}
/* Phone top bar: the old layout overflowed — search shrank to 54px and the
   info/profile buttons were pushed off-screen. Keep everything visible. */
@media(max-width:760px){
  .topbar{gap:8px;padding:0 8px;height:56px}
  .topbar-brand .brand-text{display:none}
  .topbar-search{flex:1;min-width:110px}
  .topbar-search input{height:36px;font-size:13px}
  .topbar-actions{gap:2px;flex-shrink:0}
  /* 0A.8: the motion toggle is a sixth topbar button — hide the teleport
     text label on phones so the avatar stays on-screen. */
  .teleport-label{display:none}
  .teleport-btn{padding:7px 9px}
  .teleport-label{display:none}
  .sound-btn,.theme-btn,.icon-btn{width:32px;height:32px}
  .avatar-btn{width:30px;height:30px}
  /* Mobile top bar (2026-11-16): only the essentials stay — logo, search,
     teleport, the reduced-motion switch and profile. Sound, dark mode and
     About are desktop-only here; they stay in the DOM (and in the desktop
     bar) so nothing that references them breaks. The motion switch stays
     visible because it is the reduced-motion control and the a11y suite
     drives it at 390px. */
  #soundToggle,#themeToggle,#aboutBtn{display:none}
}

/* ── Left sidebar ── */
.sidebar-left{border-right:1px solid var(--line);padding:20px 0;position:sticky;top:62px;height:calc(100vh - 62px);overflow-y:auto;background:var(--card)}
.sidebar-left::-webkit-scrollbar{width:0}
.brand{display:flex;align-items:center;gap:10px;padding:4px 20px 20px;font-weight:700;font-size:16px;letter-spacing:-.4px}
.brandmark{width:32px;height:32px;border-radius:10px;background:var(--green);display:grid;place-items:center;flex-shrink:0}
.brandmark svg{width:19px;stroke:#d6ea8b}
.brand-tagline{font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.3px}
.nav-label{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;padding:0 20px 8px}
.nav{padding:0 10px;display:grid;gap:2px;margin-bottom:20px}
.nav-btn{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--ink2);transition:all var(--transition);position:relative}
.nav-btn:hover{background:var(--paper);color:var(--ink)}
.nav-btn.active{background:var(--green2);color:var(--green);font-weight:600}
.nav-btn svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.7}
.nav-badge{margin-left:auto;min-width:20px;height:20px;border-radius:10px;background:var(--green);color:white;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.sidebar-cta{margin:16px 10px 0;padding:16px;background:linear-gradient(135deg,var(--green) 0%,var(--green3) 100%);border-radius:var(--radius);color:white}
.sidebar-cta .cta-label{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;opacity:.75;margin-bottom:8px}
.sidebar-cta .cta-title{font-family:var(--serif);font-size:18px;line-height:1.3;margin-bottom:14px}
.sidebar-cta-btn{background:white;color:var(--green);border-radius:var(--radius-sm);padding:9px 14px;font-size:13px;font-weight:700;width:100%;transition:opacity var(--transition)}
.sidebar-cta-btn:hover{opacity:.9}

/* ── Center feed ── */
.feed-center{min-width:0;border-right:1px solid var(--line)}
@media(max-width:1200px){.feed-center{border-right:0}}
.feed-topbar{position:sticky;top:62px;z-index:30;background:rgba(248,249,251,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 28px}
.feed-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
/* Tab rows scroll horizontally with no visible affordance, so the last
   tab looked cut off. The right-edge fade says there is more to scroll. */
.feed-tabs,.profile-tabs{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
.feed-tabs::-webkit-scrollbar{display:none}
.feed-tab{flex-shrink:0;padding:16px 16px 14px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;transition:all var(--transition);white-space:nowrap}
.feed-tab:hover{color:var(--ink)}
.feed-tab.active{color:var(--green);border-bottom-color:var(--green)}
.feed-content{padding:24px 28px 100px}
@media(max-width:760px){.feed-content{padding:16px 16px 170px}.feed-topbar{padding:0 16px;top:56px}}

/* ── Story cards ── */
.story-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:0;margin-bottom:12px;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);overflow:hidden;position:relative}
.story-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:rgba(30,90,70,.2)}
.story-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
.story-card[data-kind="Memory"]::before{background:var(--green3)}
.story-card[data-kind="Tip"]::before{background:var(--gold)}
.story-card[data-kind="Warning"]::before{background:var(--red)}
.story-inner{padding:16px 18px 14px 20px}
.story-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.story-kind{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:3px 8px;border-radius:5px}
.story-kind.memory{background:rgba(13,158,114,.1);color:var(--green)}
.story-kind.tip{background:var(--gold2);color:var(--gold)}
.story-kind.warning{background:var(--red2);color:var(--red)}
.story-kind.capsule{background:var(--purple2);color:var(--purple)}
.story-place{font-weight:700;font-size:13px;color:var(--ink);transition:color var(--transition)}
.story-place:hover{color:var(--green)}
.story-dot{color:var(--line)}
.story-city{font-size:12px;color:var(--muted)}
.story-week{font-size:11px;color:var(--muted);margin-left:auto;font-family:var(--mono);white-space:nowrap}
.story-community{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--purple2);color:var(--purple);font-weight:600;letter-spacing:.3px}
.story-quote{font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--ink);margin-bottom:14px;letter-spacing:-.1px}
.story-quote.capsule-locked{font-family:var(--sans);font-size:14px;color:var(--muted);font-style:italic}
.story-photo{width:100%;max-height:280px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:14px}
.story-footer{display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);padding-top:11px;flex-wrap:wrap}
.story-handle{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.story-handle::before{content:'';display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--green2)}
.seed-label{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--paper);color:var(--muted);border:1px solid var(--line);font-family:var(--mono)}
.story-actions-row{margin-left:auto;display:flex;align-items:center;gap:2px}
.story-action-btn{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;color:var(--muted);transition:all var(--transition)}
.story-action-btn:hover{background:var(--paper);color:var(--ink)}
.story-action-btn.voted{color:var(--green3)}
.story-action-btn.downvoted{color:var(--red)}
.story-action-btn.saved{color:var(--gold)}
.story-action-btn svg{width:15px;height:15px;stroke-width:1.7}

/* ── First-to-post banner ── */
.be-first-banner{background:linear-gradient(135deg,var(--gold2) 0%,#fff7e6 100%);border:1px solid rgba(200,146,58,.25);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;display:flex;align-items:center;gap:14px}
.be-first-icon{font-size:28px;flex-shrink:0}
.be-first-text strong{display:block;font-size:14px;font-weight:700;color:var(--gold);margin-bottom:3px}
.be-first-text span{font-size:13px;color:var(--ink2)}

/* ── Daily story card ── */
.daily-card{background:linear-gradient(135deg,#1e3a5f 0%,#1a5276 50%,#0d7a8c 100%);border-radius:var(--radius);padding:20px;color:white;margin-bottom:16px;position:relative;overflow:hidden}
.daily-card::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.04)}
.daily-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:8px}
.daily-place{font-family:var(--serif);font-size:22px;line-height:1.2;margin-bottom:4px}
.daily-city{font-size:12px;color:rgba(255,255,255,.65);margin-bottom:12px}
.daily-quote{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85);margin-bottom:16px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.daily-actions{display:flex;gap:8px}
.daily-btn{border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-sm);padding:8px 14px;font-size:12px;font-weight:600;color:white;transition:background var(--transition)}
.daily-btn:hover{background:rgba(255,255,255,.1)}
.daily-btn.primary{background:white;color:#1e3a5f;border-color:white}
.daily-btn.primary:hover{background:rgba(255,255,255,.9)}

/* ── Weekly prompt ── */
.prompt-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;background:var(--card);display:flex;align-items:center;gap:14px}
.prompt-icon{width:38px;height:38px;border-radius:10px;background:var(--green2);display:grid;place-items:center;flex-shrink:0;color:var(--green)}
.prompt-icon svg{width:18px;stroke-width:1.7}
.prompt-body{flex:1;min-width:0}
.prompt-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--green);margin-bottom:4px}
.prompt-question{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.prompt-status{font-size:11px;color:var(--muted);margin-top:2px}
.prompt-answer-btn{flex-shrink:0;padding:8px 14px;border-radius:var(--radius-sm);background:var(--green);color:white;font-size:12px;font-weight:700;transition:opacity var(--transition)}
.prompt-answer-btn:hover{opacity:.85}
/* Mobile prompt card (2026-11-16): the 3-column row (icon | narrow text |
   button) squeezed the question into ~110px. Stack it vertically so the
   question gets the full width and the button sits below it. */
@media(max-width:760px){
  .prompt-card{flex-direction:column;align-items:flex-start;gap:10px}
  .prompt-body{width:100%}
  .prompt-answer-btn{align-self:stretch;text-align:center;padding:10px 14px}
}

/* ── Feed header ── */
.feed-header{margin-bottom:16px}
.feed-title{font-size:22px;font-weight:700;letter-spacing:-.5px;margin-bottom:4px}
.feed-subtitle{font-size:13px;color:var(--muted)}
/* Mobile feed header (2026-11-16): the subtitle ran the full width and
   its tail sat under the fixed compose FAB. Keep its text clear of the
   FAB zone so it wraps fully instead of being covered. */
@media(max-width:760px){#feedSubtitle{max-width:calc(100% - 76px)}}
.feed-controls{display:flex;align-items:center;gap:8px;margin:14px 0;overflow-x:auto;scrollbar-width:none}
.feed-controls::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:6px 12px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.chip:hover{border-color:var(--green3);color:var(--green)}
.chip.active{background:var(--green);border-color:var(--green);color:white}
.chip.gold-chip.active{background:var(--gold);border-color:var(--gold);color:white}
.chip-sep{width:1px;height:20px;background:var(--line);flex-shrink:0}

/* ── Sort bar ── */
.sort-bar{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px;background:var(--card)}
.sort-btn{flex:1;padding:9px 8px;font-size:12px;font-weight:600;color:var(--muted);border-right:1px solid var(--line);text-align:center;transition:all var(--transition)}
.sort-btn:last-child{border-right:0}
.sort-btn:hover{background:var(--paper);color:var(--ink)}
.sort-btn.active{background:var(--green);color:white}

/* ── Communities ── */
.community-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;background:var(--purple2);color:var(--purple);font-size:11px;font-weight:600}
.community-pill svg{width:12px}

/* ── Ghost Trails ── */
.trail-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:12px;display:flex;gap:14px;align-items:flex-start;cursor:pointer;transition:all var(--transition)}
.trail-card:hover{border-color:var(--green3);transform:translateY(-1px);box-shadow:var(--shadow)}
.trail-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.trail-body{flex:1;min-width:0}
.trail-name{font-weight:700;font-size:15px;margin-bottom:3px}
.trail-desc{font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.4}
.trail-progress{display:flex;align-items:center;gap:8px}
.trail-dots{display:flex;gap:4px}
.trail-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background var(--transition)}
.trail-dot.done{background:var(--green3)}
.trail-dot.current{background:var(--gold)}
.trail-progress-label{font-size:11px;color:var(--muted);font-weight:600}
.trail-complete-badge{font-size:11px;padding:3px 8px;border-radius:5px;background:var(--green2);color:var(--green);font-weight:700}

/* ── Trail detail view ── */
.trail-timeline{position:relative;padding-left:28px}
.trail-timeline::before{content:'';position:absolute;left:9px;top:0;bottom:0;width:2px;background:var(--line)}
.trail-stop{position:relative;padding:0 0 24px 20px}
.trail-stop::before{content:'';position:absolute;left:-11px;top:4px;width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--line);z-index:1;transition:all var(--transition)}
.trail-stop.done::before{background:var(--green3);border-color:var(--green3)}
.trail-stop.current::before{background:white;border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,146,58,.2)}
.trail-stop-name{font-weight:700;font-size:14px;margin-bottom:4px}
.trail-stop-narration{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.trail-stop-btn{padding:7px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--green3);color:var(--green);font-size:12px;font-weight:700;transition:all var(--transition)}
.trail-stop-btn:hover,.trail-stop-btn.done-btn{background:var(--green2)}
.trail-stop-btn.mark-btn{background:var(--green3);border-color:var(--green3);color:white}
.trail-stop-btn.mark-btn:hover{opacity:.85}

/* ── Place detail view ── */
.place-header{position:relative;min-height:220px;background:linear-gradient(to bottom, var(--green) 0%, rgba(30,90,70,.7) 100%);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.place-photo-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.45}
.place-header-content{position:relative;z-index:1;color:white}
.place-eyebrow{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.75;margin-bottom:6px}
.place-name-h{font-family:var(--serif);font-size:28px;line-height:1.2;margin-bottom:4px}
.place-location{font-size:13px;opacity:.8;margin-bottom:12px}
.place-header-actions{display:flex;gap:8px;flex-wrap:wrap}
.place-action-btn{padding:8px 14px;border-radius:var(--radius-sm);border:1.5px solid rgba(255,255,255,.4);color:white;font-size:12px;font-weight:700;transition:all var(--transition);backdrop-filter:blur(8px)}
.place-action-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.7)}
.place-action-btn.hear-btn svg{width:14px;margin-right:4px;vertical-align:-2px}
.place-history{background:var(--card2);border-left:3px solid var(--gold);padding:14px 16px;margin:16px 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:13px;line-height:1.6;color:var(--ink2)}
.place-history-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.place-story-count{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:16px}
.place-story-count strong{color:var(--ink);font-size:16px}

/* ── Modals ── */
.modal-overlay{position:fixed;inset:0;background:rgba(26,35,50,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--transition),visibility var(--transition)}
.modal-overlay.open{opacity:1;pointer-events:all;visibility:visible}
.modal-box{background:var(--card);border-radius:var(--radius-lg);padding:28px;width:min(100%,520px);max-height:calc(100vh - 40px);overflow-y:auto;transform:translateY(10px);transition:transform var(--transition);box-shadow:var(--shadow-lg)}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-close{position:absolute;right:20px;top:20px;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:all var(--transition)}
.modal-close:hover{background:var(--paper);color:var(--ink)}
.modal-eyebrow{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--green3);margin-bottom:8px}
.modal-title{font-family:var(--serif);font-size:26px;line-height:1.2;margin-bottom:8px}
.modal-subtitle{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:22px}
.form-row{margin-bottom:16px}
.form-label{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.form-input{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;font-size:14px;outline:none;background:var(--card);transition:border var(--transition),box-shadow var(--transition)}
.form-input:focus{border-color:var(--green3);box-shadow:0 0 0 3px rgba(13,158,114,.12)}
textarea.form-input{min-height:120px;resize:vertical;font-family:var(--serif);font-size:16px;line-height:1.6}
.kind-picker{display:flex;gap:8px;flex-wrap:wrap}
.kind-btn{flex:1;min-width:80px;padding:10px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--line);font-size:13px;font-weight:600;color:var(--muted);text-align:center;transition:all var(--transition)}
.kind-btn:hover{border-color:var(--green3);color:var(--ink)}
.kind-btn.selected.memory{border-color:var(--green3);background:rgba(13,158,114,.08);color:var(--green)}
.kind-btn.selected.tip{border-color:var(--gold);background:var(--gold2);color:var(--gold)}
.kind-btn.selected.warning{border-color:var(--red);background:var(--red2);color:var(--red)}
.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.modal-footer-note{font-size:11px;color:var(--muted);line-height:1.5}
.modal-footer-note strong{color:var(--gold)}
.btn{padding:11px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.btn-primary{background:var(--green);color:white;border:none}
.btn-primary:hover{background:var(--green3)}
.btn-secondary{background:var(--paper);color:var(--ink);border:1.5px solid var(--line)}
.btn-secondary:hover{border-color:var(--green3);color:var(--green)}
.char-count{font-size:11px;color:var(--muted);font-family:var(--mono);text-align:right;margin-top:4px}

/* OTP modal specific */
.otp-preview-toggle{display:flex;align-items:center;gap:10px;padding:12px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--gold2);cursor:pointer;margin-bottom:16px;transition:border var(--transition)}
.otp-preview-toggle:hover{border-color:var(--gold)}
.otp-preview-toggle input{width:16px;height:16px;cursor:pointer;accent-color:var(--gold)}
.otp-preview-label{font-size:13px;font-weight:600;color:var(--gold)}
.otp-preview-sub{font-size:11px;color:var(--muted);margin-top:2px}
.otp-warning{padding:10px 13px;border-radius:var(--radius-sm);background:var(--paper);border:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:16px}
.otp-warning strong{color:var(--ink)}

/* Compose: live preview */
.compose-preview{padding:14px;border:1.5px dashed var(--line);border-radius:var(--radius-sm);background:var(--paper);margin-top:12px}
.compose-preview-label{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.compose-preview-quote{font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--ink);min-height:24px}
.compose-preview-quote:empty::before{content:'Your story will appear here…';color:var(--muted);font-style:italic}

/* Capsule toggle */
.capsule-toggle{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;transition:border var(--transition),background var(--transition)}
.capsule-toggle:hover{border-color:var(--purple)}
.capsule-toggle.active{border-color:var(--purple);background:var(--purple2)}
.capsule-toggle input{width:16px;height:16px;accent-color:var(--purple)}
.capsule-toggle-label{font-size:13px;font-weight:600}
.capsule-toggle-sub{font-size:11px;color:var(--muted)}
.capsule-date-row{margin-top:10px;display:none}
.capsule-date-row.show{display:flex;gap:10px;align-items:center}
.capsule-date-row label{font-size:12px;color:var(--muted);white-space:nowrap}

/* Community select */
.community-select{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;font-size:14px;outline:none;background:var(--card);transition:border var(--transition)}
.community-select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(108,92,231,.1)}

/* ── Right sidebar ── */
.sidebar-right{padding:20px;position:sticky;top:62px;height:calc(100vh - 62px);overflow-y:auto}
.sidebar-right::-webkit-scrollbar{width:0}
.sidebar-section{margin-bottom:24px}
.sidebar-section-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:12px}
.mini-map-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:160px;position:relative}
.mini-map-wrap img{width:100%;height:100%;object-fit:cover;opacity:.6}
.mini-map-label{position:absolute;bottom:8px;left:10px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.85);padding:3px 7px;border-radius:4px}
.surprise-btn{width:100%;padding:10px;border-radius:var(--radius-sm);border:1.5px dashed var(--line);font-size:13px;font-weight:600;color:var(--muted);transition:all var(--transition);margin-top:8px;display:flex;align-items:center;justify-content:center;gap:7px}
.surprise-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold2)}
.sidebar-place-row{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:opacity var(--transition)}
.sidebar-place-row:last-child{border-bottom:0}
.sidebar-place-row:hover{opacity:.7}
.sidebar-place-thumb{width:40px;height:40px;border-radius:9px;background:var(--green2);display:grid;place-items:center;color:var(--green);font-size:13px;font-weight:800;flex-shrink:0}
.sidebar-place-name{font-size:13px;font-weight:600}
.sidebar-place-loc{font-size:11px;color:var(--muted)}
.sidebar-place-count{font-size:11px;font-family:var(--mono);color:var(--muted);margin-left:auto;white-space:nowrap}

/* ── Profile / My World ── */
.profile-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.profile-avatar{width:60px;height:60px;border-radius:50%;background:var(--green);color:white;font-size:18px;font-weight:700;display:grid;place-items:center;flex-shrink:0}
.profile-name{font-weight:700;font-size:20px;letter-spacing:-.3px}
.profile-sub{font-size:12px;color:var(--muted);margin-top:2px;font-family:var(--mono)}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.stat-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:center}
.stat-num{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--ink);line-height:1}
.stat-label{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.profile-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.profile-tabs::-webkit-scrollbar{display:none}
.profile-tab{flex-shrink:0;padding:12px 16px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;transition:all var(--transition)}
.profile-tab:hover{color:var(--ink)}
.profile-tab.active{color:var(--green);border-bottom-color:var(--green)}

/* Passport stamps */
.passport-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}
.passport-stamp{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:12px 8px;text-align:center;cursor:pointer;transition:all var(--transition)}
.passport-stamp:hover{border-color:var(--green3);transform:scale(1.03)}
.passport-stamp-icon{font-size:22px;margin-bottom:6px}
.passport-stamp-name{font-size:10px;font-weight:700;color:var(--ink);line-height:1.3}
.passport-stamp-count{font-size:10px;color:var(--muted);margin-top:2px;font-family:var(--mono)}

/* Collections */
.collection-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all var(--transition)}
.collection-card:hover{border-color:var(--green3);box-shadow:var(--shadow-sm)}
.collection-name{font-weight:700;font-size:14px;margin-bottom:4px}
.collection-meta{font-size:12px;color:var(--muted)}

/* ── Map view ── */
.map-view{position:fixed;inset:62px 0 0;z-index:50;background:var(--paper);display:none}
@media(max-width:760px){.map-view{inset:56px 0 0}}
.map-view.open{display:block}
.map-back-btn{position:absolute;left:16px;top:16px;z-index:10;background:white;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 14px;font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px;box-shadow:var(--shadow);transition:all var(--transition)}
.map-back-btn:hover{background:var(--paper)}
#mapCanvas,#worldMapSvg{position:absolute;inset:0;width:100%;height:100%}
#worldMapSvg{display:none}
#worldMapSvg.show{display:block}
.map-controls-wrap{position:absolute;right:16px;top:16px;z-index:10;display:flex;flex-direction:column;gap:8px}
.map-ctrl-btn{background:white;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;font-size:12px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-sm);transition:all var(--transition);white-space:nowrap}
.map-ctrl-btn:hover{background:var(--paper)}
.map-glass-card{position:absolute;bottom:20px;left:20px;width:min(300px,calc(100vw-40px));background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-lg);display:none}
.map-glass-card.show{display:block}
.map-glass-place{font-weight:700;font-size:16px;margin-bottom:4px}
.map-glass-loc{font-size:12px;color:var(--muted);margin-bottom:12px}
.map-glass-actions{display:flex;gap:8px}
.map-glass-btn{padding:8px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;transition:all var(--transition)}
.map-glass-btn.primary{background:var(--green);color:white;border:none}
.map-glass-btn.secondary{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.map-glass-btn:hover{opacity:.85}
.atlas-credit{position:absolute;bottom:10px;right:10px;font-size:10px;color:var(--muted);background:rgba(255,255,255,.85);padding:4px 8px;border-radius:5px;z-index:10}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);background:#1a2332;color:white;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:500;z-index:200;opacity:0;pointer-events:none;transition:all 0.25s ease;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:all}
.toast-undo{margin-left:12px;text-decoration:underline;cursor:pointer;font-weight:700}

/* ── Mobile nav ── */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:8px 0 max(8px,env(safe-area-inset-bottom));z-index:50;justify-content:space-around}
.mobile-nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;flex:1;min-width:0;color:var(--muted);font-size:10px;font-weight:600;transition:color var(--transition)}
.mobile-nav-btn.active{color:var(--green)}
.mobile-nav-btn svg{width:22px;height:22px;stroke-width:1.7}
@media(max-width:360px){.mobile-nav-btn{font-size:9px}.mobile-nav-btn svg{width:20px;height:20px}}
@media(max-width:760px){.mobile-nav{display:flex}.sidebar-left{display:none}.sidebar-right{display:none}}

/* ── Views ── */
.view{display:none;animation:fadeSlide 220ms ease}
.view.active{display:block}
@keyframes fadeSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Misc ── */
.empty-state{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-state .empty-icon{font-size:40px;margin-bottom:12px}
.empty-state strong{display:block;font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px}
.empty-state p{font-size:14px;line-height:1.5;max-width:300px;margin:0 auto 16px}
.empty-state .btn{display:inline-block}
.demo-banner{background:var(--gold2);border:1px solid rgba(200,146,58,.3);border-radius:var(--radius-sm);padding:8px 14px;font-size:12px;color:var(--gold);font-weight:600;text-align:center;margin-bottom:16px}
.demo-banner strong{color:#8b6420}
.legal-placeholder{background:var(--red2);border:1px solid rgba(192,57,43,.2);border-radius:var(--radius-sm);padding:10px 14px;font-size:12px;color:var(--red);font-weight:600;margin:8px 0}
.reply-thread{border-top:1px solid var(--line);padding:12px 18px;display:none}
.reply-thread.open{display:block}
.reply-item{padding:8px 0;border-bottom:1px solid var(--line)}
.reply-item:last-child{border-bottom:0}
.reply-handle{font-size:12px;font-weight:700;color:var(--green);margin-bottom:3px}
.reply-text{font-size:13px;color:var(--ink2);line-height:1.5}
.reply-compose{display:flex;gap:8px;padding-top:10px}
.reply-compose textarea{flex:1;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;font-size:13px;min-height:40px;resize:none;outline:none;transition:border var(--transition)}
.reply-compose textarea:focus{border-color:var(--green3)}
.reply-submit{padding:8px 14px;border-radius:var(--radius-sm);background:var(--green);color:white;font-size:12px;font-weight:700;align-self:flex-end;transition:opacity var(--transition)}
.reply-submit:hover{opacity:.85}
.digest-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;display:flex;gap:14px;align-items:center}
.digest-icon{width:40px;height:40px;border-radius:10px;background:var(--teal);display:grid;place-items:center;color:white;font-size:18px;flex-shrink:0}
.digest-title{font-weight:700;font-size:14px;margin-bottom:3px}
.digest-sub{font-size:12px;color:var(--muted)}

/* ═══════════════════════════════
   DARK MODE — data-theme="dark"
═══════════════════════════════ */
[data-theme="dark"]{
  --paper: #0f1117;
  --card: #1a1f2e;
  --card2: #141928;
  --ink: #e8ecf0;
  --ink2: #a8b4c4;
  --muted: #6b7a8d;
  --line: #2a3245;
  --green: #1e8a62;
  --green2: #0e2920;
  --green3: #0fb87e;
  --teal: #0f7da8;
  --gold: #d4a04a;
  --gold2: #1f1a0a;
  --red: #e05550;
  --red2: #200f0e;
  --purple: #8b7af0;
  --purple2: #17132e;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
  --shadow: 0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.3);
}
[data-theme="dark"] .topbar{background:rgba(15,17,23,.95)}
[data-theme="dark"] .sidebar-left{background:var(--card)}
[data-theme="dark"] .topbar-search input{background:var(--card2)}
[data-theme="dark"] meta[name="theme-color"]{content:#0f1117}
[data-theme="dark"] .mobile-nav{background:rgba(15,17,23,.97)}
[data-theme="dark"] .feed-topbar{background:rgba(20,25,40,.97)}
[data-theme="dark"] .modal-box{background:var(--card)}
[data-theme="dark"] .form-input,.community-select{background:var(--card2)}
[data-theme="dark"] .compose-preview{background:var(--card2)}
[data-theme="dark"] .capsule-toggle.active{background:var(--purple2)}
[data-theme="dark"] .otp-preview-toggle{background:var(--gold2)}
[data-theme="dark"] img[src*="BlankMap"]{filter:invert(.85) hue-rotate(180deg) saturate(.6)}

/* ─── Dark mode toggle btn ─── */
.theme-btn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--muted);transition:background var(--transition),color var(--transition);font-size:16px}
.theme-btn:hover{background:var(--card2);color:var(--ink)}

/* ─── Reactions ─── */
.reaction-bar{display:flex;gap:4px;padding:10px 20px 10px;border-top:1px solid var(--line);flex-wrap:wrap}
.reaction-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;border:1.5px solid var(--line);font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;background:var(--card);transition:all var(--transition)}
.reaction-btn:hover{border-color:var(--green3);transform:scale(1.07)}
.reaction-btn.reacted{border-color:var(--green3);background:var(--green2);color:var(--green)}
.reaction-btn .r-emoji{font-size:14px}
.reaction-btn .r-count{font-size:11px;font-family:var(--mono)}

/* ─── Share btn / copy link ─── */
.share-btn{margin-left:auto;display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;color:var(--muted);border:1.5px solid var(--line);cursor:pointer;background:var(--card);transition:all var(--transition)}
.share-btn:hover{border-color:var(--green3);color:var(--green)}
.share-btn svg{width:13px;height:13px}

/* ─── Skeleton loader ─── */
.skeleton{background:linear-gradient(90deg,var(--line) 25%,var(--card2) 50%,var(--line) 75%);background-size:200% 100%;animation:skelPulse 1.4s ease infinite;border-radius:var(--radius-sm)}
@keyframes skelPulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:12px}
.skel-line{height:14px;margin-bottom:10px}
.skel-line.w80{width:80%}
.skel-line.w60{width:60%}
.skel-line.w40{width:40%}
.skel-line.tall{height:60px}

/* ─── Onboarding overlay ─── */
.onboarding-overlay{position:fixed;inset:0;background:rgba(15,20,30,.88);backdrop-filter:blur(8px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.onboarding-box{background:var(--card);border-radius:var(--radius-lg);padding:36px;width:min(100%,460px);box-shadow:var(--shadow-lg);text-align:center;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.onboard-step-dots{display:flex;justify-content:center;gap:8px;margin-bottom:28px}
.onboard-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .25s}
.onboard-dot.active{background:var(--green)}
.onboard-emoji{font-size:52px;margin-bottom:16px;line-height:1}
.onboard-title{font-family:var(--serif);font-size:24px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.onboard-body{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:28px}
.onboard-next{background:var(--green);color:white;border:none;border-radius:var(--radius-sm);padding:12px 28px;font-size:14px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.onboard-next:hover{background:var(--green3);transform:translateY(-1px)}
.onboard-skip{display:block;margin-top:14px;font-size:12px;color:var(--muted);cursor:pointer;transition:color var(--transition)}
.onboard-skip:hover{color:var(--ink)}

/* ─── Offline banner ─── */
.offline-banner{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);background:#ff5050;color:white;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:600;z-index:200;display:none;align-items:center;gap:8px;white-space:nowrap;box-shadow:var(--shadow)}
.offline-banner.show{display:flex}
/* 0A.7: update banner — a new build waits for the user's tap. */
.update-banner{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);background:#1a2332;color:white;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;z-index:200;display:none;align-items:center;gap:12px;white-space:nowrap;box-shadow:var(--shadow)}
.update-banner.show{display:flex}

/* ─── PWA install banner ─── */
.pwa-banner{background:linear-gradient(135deg,var(--green) 0%,var(--green3) 100%);color:white;padding:12px 18px;display:none;align-items:center;gap:12px;border-bottom:none}
.pwa-banner.show{display:flex}
.pwa-banner-text{flex:1;font-size:13px;font-weight:600}
.pwa-banner-sub{font-size:11px;opacity:.8;font-weight:400}
.pwa-install-btn{background:white;color:var(--green);border:none;border-radius:var(--radius-sm);padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s}
.pwa-install-btn:hover{opacity:.9}
.pwa-dismiss-btn{background:transparent;border:none;color:rgba(255,255,255,.7);font-size:18px;cursor:pointer;padding:0 4px;line-height:1}

/* ─── Search highlights ─── */
mark{background:rgba(13,158,114,.22);color:var(--green);border-radius:2px;padding:0 1px}
[data-theme="dark"] mark{background:rgba(15,184,126,.25);color:var(--green3)}

/* ─── Photo attachment ─── */
.photo-upload-row{display:flex;align-items:center;gap:10px;padding:10px;border:1.5px dashed var(--line);border-radius:var(--radius-sm);cursor:pointer;transition:border var(--transition),background var(--transition)}
.photo-upload-row:hover{border-color:var(--green3);background:var(--paper)}
.photo-remove-btn{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--red);color:white;border:2px solid var(--card);font-size:11px;display:grid;place-items:center;cursor:pointer;line-height:1}
.photo-upload-label{font-size:13px;color:var(--muted)}
.photo-upload-label strong{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}

/* ─── Streak / stats upgrade ─── */
.stats-row-5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}
@media(max-width:600px){.stats-row-5{grid-template-columns:repeat(3,1fr)}}
.stat-box-sm{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 8px;text-align:center}
.stat-box-sm .stat-num{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink);line-height:1}
.stat-box-sm .stat-label{font-size:10px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.stat-box-sm .stat-icon{font-size:16px;margin-bottom:4px}
.streak-fire{color:var(--red)}

/* ─── Notification dot ─── */
.notif-dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--card);display:none}
.notif-dot.show{display:block}
.mobile-nav-btn{position:relative}

/* ─── Story image in card ─── */
.story-photo-wrap{padding:0 20px 12px;overflow:hidden}
.story-photo-wrap img{width:100%;max-height:260px;object-fit:cover;border-radius:var(--radius-sm);display:block;cursor:pointer;transition:transform .3s}
.story-photo-wrap img:hover{transform:scale(1.015)}

/* ─── Trending places ─── */
.trending-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:0 20px 8px;margin-top:8px}
.trending-row{display:flex;gap:8px;padding:0 20px 16px;overflow-x:auto;scrollbar-width:none}
.trending-row::-webkit-scrollbar{display:none}
.trending-chip{flex-shrink:0;padding:7px 12px;border-radius:20px;background:var(--paper);border:1.5px solid var(--line);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--transition)}
.trending-chip:hover{border-color:var(--green3);color:var(--green);background:var(--green2)}

/* ─── Smooth tab indicator ─── */
.feed-tab{position:relative}
/* ─── Scroll-snap city chips ─── */
#cityFilters{scroll-snap-type:x mandatory}
#cityFilters .chip{scroll-snap-align:start}

/* ─── Animated counter ─── */
@keyframes countUp{from{transform:translateY(4px);opacity:0}to{transform:none;opacity:1}}
.stat-num{animation:countUp .4s ease}

/* ─── Story age badge tweak ─── */
.age-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--gold);background:var(--gold2);border-radius:4px;padding:2px 6px;margin-top:4px}

/* ─── About modal ─── */
.about-modal-overlay{position:fixed;inset:0;background:rgba(26,35,50,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--transition),visibility var(--transition)}
.about-modal-overlay.open{opacity:1;pointer-events:all;visibility:visible}
.about-modal-box{background:var(--card);border-radius:var(--radius-lg);padding:32px;width:min(100%,480px);max-height:calc(100vh - 40px);overflow-y:auto;transform:translateY(10px);transition:transform var(--transition);box-shadow:var(--shadow-lg)}
.about-modal-overlay.open .about-modal-box{transform:translateY(0)}

/* ─── Keyboard shortcut hint ─── */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:4px;background:var(--paper);border:1px solid var(--line);font-size:10px;font-family:var(--mono);font-weight:700;color:var(--muted)}

/* ─── Compose photo section ─── */

/* ─── Follow pill  ─── */
.follow-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:12px;font-size:10px;font-weight:700;background:var(--green2);color:var(--green)}

/* ─── Lazy loading shimmer for feed ─── */
#storyFeed:empty::before{content:'';display:block}

/* ─── Community card upgrade ─── */
.community-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;cursor:pointer;transition:all var(--transition)}
.community-card:hover{border-color:var(--purple);transform:translateY(-1px);box-shadow:var(--shadow)}
.community-card-header{padding:20px;background:linear-gradient(135deg,var(--purple2) 0%,rgba(108,92,231,.05) 100%);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}
.community-card-emoji{width:48px;height:48px;border-radius:12px;background:var(--purple2);display:grid;place-items:center;font-size:24px;flex-shrink:0}
.community-card-name{font-weight:700;font-size:16px;margin-bottom:3px}
.community-card-desc{font-size:13px;color:var(--muted)}
.community-card-footer{padding:12px 20px;display:flex;align-items:center;gap:10px}
.community-card-count{font-size:12px;color:var(--muted);font-family:var(--mono)}
.community-join-btn{margin-left:auto;padding:6px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--purple);color:var(--purple);font-size:12px;font-weight:700;cursor:pointer;transition:all var(--transition)}
.community-join-btn:hover,.community-join-btn.joined{background:var(--purple);color:white;border-color:var(--purple)}


/* ═══════════════════════════════════════════════════════════
   STAGE 3: IMMERSIVE FEATURES & GAMIFICATION
═══════════════════════════════════════════════════════════ */

/* ── Teleport Warp Animation ── */
.teleport-warp{position:fixed;inset:0;background:radial-gradient(circle,rgba(30,90,70,.85) 0%,rgba(15,17,23,.95) 100%);z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.teleport-warp.active{opacity:1;pointer-events:all}
.teleport-spinner{width:64px;height:64px;border:4px solid rgba(255,255,255,.2);border-top-color:#d6ea8b;border-radius:50%;animation:warpSpin .6s linear infinite;margin-bottom:16px}
@keyframes warpSpin{to{transform:rotate(360deg)}}
.teleport-text{font-family:var(--serif);font-size:22px;letter-spacing:-.3px}

/* ── Teleport btn in topbar ── */
.teleport-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.mobile-nearby{display:none;margin-bottom:16px}
@media(max-width:1200px){.sidebar-right{display:none}.mobile-nearby{display:block}}
.teleport-btn:hover{border-color:var(--gold);background:var(--gold2);color:var(--gold);transform:scale(1.04)}

/* ── Sound toggle btn ── */
.sound-btn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--muted);transition:background var(--transition),color var(--transition);font-size:15px;cursor:pointer}
.sound-btn:hover{background:var(--card2);color:var(--ink)}

/* ── Immersive Story Reader Modal ── */
.reader-overlay{position:fixed;inset:0;background:rgba(15,17,23,.82);backdrop-filter:blur(8px);z-index:180;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity var(--transition),visibility var(--transition)}
.reader-overlay.open{opacity:1;pointer-events:all;visibility:visible}
.reader-box{background:var(--card);border-radius:var(--radius-lg);width:min(100%,680px);max-height:calc(100vh - 40px);overflow-y:auto;box-shadow:var(--shadow-lg);border:1px solid var(--line);animation:readerSlide .3s cubic-bezier(.34,1.3,.64,1)}
@keyframes readerSlide{from{opacity:0;transform:scale(.95) translateY(12px)}to{opacity:1;transform:none}}
.reader-header{padding:24px 28px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.reader-place-info strong{display:block;font-size:18px;font-family:var(--serif);color:var(--ink)}
.reader-place-info span{font-size:12px;color:var(--muted)}
.reader-content{padding:28px}
.reader-quote{font-family:var(--serif);font-size:24px;line-height:1.6;color:var(--ink);margin-bottom:20px}
.reader-image-wrap{margin-bottom:20px;border-radius:var(--radius);overflow:hidden;max-height:360px}
.reader-image-wrap img{width:100%;height:100%;object-fit:cover}
.reader-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-top:1px solid var(--line);background:var(--card2);border-radius:0 0 var(--radius-lg) var(--radius-lg);flex-wrap:wrap;gap:10px}
.reader-nav-btns{display:flex;gap:8px}
.reader-btn{padding:8px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--card);font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all var(--transition)}
.reader-btn:hover{border-color:var(--green3);color:var(--green)}

/* ── Card Image Modal Preview ── */
.card-export-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);z-index:250;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s,visibility .25s}
.card-export-modal.open{opacity:1;pointer-events:all;visibility:visible}
.card-export-box{background:var(--card);border-radius:var(--radius-lg);padding:24px;width:min(100%,480px);text-align:center;box-shadow:var(--shadow-lg)}
.card-export-canvas-wrap{margin:16px auto;max-width:320px;box-shadow:var(--shadow-lg);border-radius:12px;overflow:hidden}
.card-export-canvas-wrap canvas{width:100%;height:auto;display:block}

/* ── Traveler Tier & Badges in Passport ── */
.rank-card{background:linear-gradient(135deg,#1e5a46 0%,#0d7a5c 50%,#0d9e72 100%);color:white;border-radius:var(--radius);padding:20px 24px;margin-bottom:24px;display:flex;align-items:center;gap:20px;box-shadow:var(--shadow)}
.rank-badge-icon{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.4);display:grid;place-items:center;font-size:32px;flex-shrink:0}
.rank-info{flex:1}
.rank-eyebrow{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.8;margin-bottom:4px}
.rank-title{font-family:var(--serif);font-size:22px;line-height:1.2;margin-bottom:6px}
.rank-progress-bar{height:6px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden;margin:8px 0 4px}
.rank-progress-fill{height:100%;background:#d6ea8b;border-radius:3px;transition:width .4s ease}
.rank-progress-label{font-size:11px;opacity:.85}

.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-bottom:24px}
.badge-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 10px;text-align:center;transition:all var(--transition)}
.badge-card.earned{border-color:var(--gold);background:linear-gradient(180deg,var(--gold2) 0%,var(--card) 100%)}
.badge-card.locked{opacity:.45;filter:grayscale(1)}
.badge-icon{font-size:28px;margin-bottom:6px}
.badge-name{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:3px}
.badge-desc{font-size:10px;color:var(--muted);line-height:1.3}

/* ── Filter chips badge ── */
.chip-count{font-size:10px;font-family:var(--mono);opacity:.75;margin-left:4px}

/* ── Story Card clickable quote indicator ── */
.story-quote{cursor:pointer;position:relative}
.story-quote:hover{color:var(--green)}
.story-card-actions{display:flex;align-items:center;gap:6px;margin-top:10px}
.action-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:14px;border:1px solid var(--line);font-size:11px;font-weight:600;color:var(--muted);background:var(--card);cursor:pointer;transition:all var(--transition)}
.action-pill:hover{border-color:var(--green3);color:var(--green)}


/* ═══════════════════════════════════════════════════════════
   STAGE 4: LIVE PULSE, CONFETTI, LOCAL TIME & AMBIENT SUITE
═══════════════════════════════════════════════════════════ */

/* ── Live Traveler Pulse Ticker ── */
.pulse-ticker{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px;margin-bottom:16px;display:flex;align-items:center;gap:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.pulse-badge{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--green);background:var(--green2);padding:4px 9px;border-radius:12px;white-space:nowrap;flex-shrink:0}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--green3);animation:livePulse 1.4s ease infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.4)}}
.pulse-content{flex:1;overflow:hidden;white-space:nowrap;position:relative}
.pulse-marquee{display:inline-block;white-space:nowrap;animation:marqueeScroll 35s linear infinite}
.pulse-marquee:hover{animation-play-state:paused}
.pulse-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);margin-right:28px;cursor:pointer;transition:color var(--transition)}
.pulse-item:hover{color:var(--green)}
.pulse-item strong{color:var(--ink)}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── Confetti Canvas ── */
#confettiCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}

/* ── Place Solar Time Badge ── */
.solar-time-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:12px;background:rgba(255,255,255,.18);color:white;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3)}
.solar-time-card{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-family:var(--mono)}

/* ── Multi-Soundscape Bar in Place View ── */
.soundscape-bar{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;margin:12px 0}
.soundscape-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-right:4px}
.soundscape-chip{padding:5px 10px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);font-size:11px;font-weight:600;color:var(--ink2);cursor:pointer;transition:all var(--transition);display:inline-flex;align-items:center;gap:4px}
.soundscape-chip:hover{border-color:var(--green3);color:var(--green)}
.soundscape-chip.playing{background:var(--green2);border-color:var(--green3);color:var(--green);font-weight:700}

/* ── Capsule Countdown Display ── */
.capsule-countdown{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;background:var(--purple2);color:var(--purple);font-size:11px;font-weight:700;font-family:var(--mono);margin-top:4px}


/* ─── Cinematic Audio Tour Player in Place View ─── */
.audio-tour-player{background:linear-gradient(135deg,var(--card) 0%,var(--card2) 100%);border:1.5px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:16px 0;box-shadow:var(--shadow-sm);display:none}
.audio-tour-player.active{display:block;animation:fadeSlide .3s ease}
.audio-tour-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.audio-tour-title-wrap{display:flex;align-items:center;gap:10px}
.audio-wave{display:flex;align-items:flex-end;gap:3px;height:20px}
.audio-wave span{width:3px;background:var(--green3);border-radius:2px;animation:waveBar 1s ease infinite alternate}
.audio-wave span:nth-child(1){height:6px;animation-delay:0s}
.audio-wave span:nth-child(2){height:18px;animation-delay:.15s}
.audio-wave span:nth-child(3){height:10px;animation-delay:.3s}
.audio-wave span:nth-child(4){height:22px;animation-delay:.45s}
.audio-wave span:nth-child(5){height:14px;animation-delay:.6s}
.audio-wave.paused span{animation-play-state:paused;height:4px}
@keyframes waveBar{from{height:4px}to{height:22px}}
.audio-tour-title{font-weight:700;font-size:14px;color:var(--ink)}
.audio-tour-sub{font-size:11px;color:var(--muted)}
.audio-tour-narrative{font-family:var(--serif);font-size:14px;color:var(--ink2);line-height:1.6;margin:12px 0;padding:12px 14px;background:var(--paper);border-left:3px solid var(--green3);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.audio-tour-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.audio-ctrl-btns{display:flex;align-items:center;gap:8px}
.audio-btn{padding:7px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--card);font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all var(--transition)}
.audio-btn:hover{border-color:var(--green3);color:var(--green)}
.audio-btn.primary{background:var(--green);border-color:var(--green);color:white}
.audio-btn.primary:hover{background:var(--green3)}
.audio-speed-select{border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--card);padding:5px 8px;font-size:11px;font-weight:600;color:var(--muted);outline:none;cursor:pointer}

/* ─── Compose Modal: New Location Row ─── */
.new-place-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--gold);background:var(--gold2);padding:3px 8px;border-radius:4px;margin-top:4px}
.location-fields-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.gps-btn{padding:9px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--card);font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:6px;transition:all var(--transition)}
.gps-btn:hover{border-color:var(--green3);color:var(--green);background:var(--paper)}

/* ─── Mini Map clickable style ─── */
.mini-map-wrap{cursor:pointer;transition:transform var(--transition),box-shadow var(--transition)}
.mini-map-wrap:hover{transform:scale(1.02);box-shadow:var(--shadow)}


/* ─── Search Hero / Add Place Banner ─── */
.search-hero-banner{background:linear-gradient(135deg,var(--paper) 0%,var(--card) 100%);border:1.5px dashed var(--green3);border-radius:var(--radius);padding:16px 20px;margin-bottom:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm)}
.search-hero-icon{font-size:28px;flex-shrink:0}
.search-hero-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.search-hero-sub{font-size:12px;color:var(--muted)}
.search-place-match-card{background:var(--green2);border:1px solid var(--green3);border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all var(--transition)}
.search-place-match-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.gps-chip-btn{font-size:11px;font-weight:700;color:var(--green);background:var(--green2);border:1px solid var(--green3);border-radius:12px;padding:3px 9px;cursor:pointer;transition:all var(--transition)}
.gps-chip-btn:hover{background:var(--green);color:white}


/* ═══════════════════════════════════════════════════════════
   STAGE 5: LIVING ATLAS, TRAVELER RADAR & RETRO STAMPS
═══════════════════════════════════════════════════════════ */

/* ── Proximity & Distance Badge on Story Cards ── */
.story-dist-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--teal);background:rgba(15,125,168,.08);padding:2px 7px;border-radius:12px;font-family:var(--mono);border:1px solid rgba(15,125,168,.18)}
[data-theme="dark"] .story-dist-badge{background:rgba(15,125,168,.2);color:#38bdf8}

/* ── Bucket List Button on Story Cards ── */
.story-action-btn.bucket-btn.in-bucket{color:var(--purple);font-weight:700}
.bucket-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:12px;font-size:10px;font-weight:700;background:var(--purple2);color:var(--purple);margin-left:6px}

/* ── Real-Time Sky Filter Bar ── */
.sky-filter-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
/* Mobile chip rows (2026-11-16): the last chip ended flush at the
   viewport edge, under the fixed compose FAB. Trailing padding lets it
   scroll fully clear of the FAB zone. */
@media(max-width:760px){.feed-controls,.sky-filter-row{padding-right:76px}}
.sky-filter-row::-webkit-scrollbar{display:none}
.sky-chip{flex-shrink:0;padding:5px 11px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--transition);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sky-chip:hover{border-color:var(--gold);color:var(--ink)}
.sky-chip.active{background:var(--gold);border-color:var(--gold);color:white}
.sky-chip.near-me-chip.active{background:var(--teal);border-color:var(--teal);color:white}

/* ── Floating Action Button (FAB) & Multi-Dial ── */
.fab-container{position:fixed;bottom:28px;right:28px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
@media(max-width:760px){.fab-container{bottom:calc(76px + env(safe-area-inset-bottom));right:16px}.fab-main-btn{width:48px;height:48px;font-size:20px}}
.fab-main-btn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--green) 0%,var(--green3) 100%);color:white;display:grid;place-items:center;font-size:24px;box-shadow:0 8px 24px rgba(13,158,114,.35);cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;border:2px solid rgba(255,255,255,.2)}
.fab-main-btn:hover{transform:scale(1.08) rotate(15deg);box-shadow:0 12px 30px rgba(13,158,114,.45)}
.fab-main-btn.active{transform:rotate(45deg);background:var(--red)}
.fab-dial{display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;opacity:0;transform:translateY(16px);transition:all .25s cubic-bezier(.34,1.3,.64,1)}
.fab-dial.open{pointer-events:all;opacity:1;transform:translateY(0)}
.fab-opt{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:6px 14px 6px 10px;font-size:12px;font-weight:700;color:var(--ink);box-shadow:var(--shadow);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.fab-opt:hover{transform:translateX(-4px);border-color:var(--green3);color:var(--green)}
.fab-opt-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:14px}
.fab-opt.memory .fab-opt-icon{background:rgba(13,158,114,.15);color:var(--green)}
.fab-opt.tip .fab-opt-icon{background:var(--gold2);color:var(--gold)}
.fab-opt.warning .fab-opt-icon{background:var(--red2);color:var(--red)}

/* ── Realistic Retro Inked Passport Stamps ── */
.retro-passport-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-bottom:24px}
.retro-stamp{position:relative;background:var(--card);border-radius:12px;padding:16px 12px;text-align:center;box-shadow:var(--shadow-sm);border:1px dashed var(--line);cursor:pointer;transition:transform .2s,box-shadow .2s;overflow:hidden}
.retro-stamp:hover{transform:scale(1.05) rotate(0deg)!important;box-shadow:var(--shadow);border-color:var(--green3)}
.stamp-seal{width:68px;height:68px;margin:0 auto 10px;border-radius:50%;border:2.5px dashed var(--green);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:rgba(30,90,70,.04)}
.stamp-seal::before{content:'';position:absolute;inset:2px;border-radius:50%;border:1px solid var(--green);opacity:.6}
.stamp-flag{font-size:24px;line-height:1}
.stamp-code{font-size:8px;font-weight:800;letter-spacing:1px;font-family:var(--mono);color:var(--green);margin-top:2px}
.stamp-title{font-family:var(--serif);font-size:12px;font-weight:700;color:var(--ink);line-height:1.2;margin-bottom:4px}
.stamp-date{font-size:9px;font-family:var(--mono);color:var(--muted);letter-spacing:.5px}
.stamp-badge-count{display:inline-block;margin-top:6px;font-size:9px;font-weight:800;padding:1px 6px;border-radius:8px;background:var(--green2);color:var(--green)}

/* ── Nearby Places Radar Sidebar Card ── */
.nearby-radar-card{background:linear-gradient(135deg,rgba(15,125,168,.08) 0%,rgba(30,90,70,.05) 100%);border:1.5px solid rgba(15,125,168,.25);border-radius:var(--radius);padding:16px;margin-bottom:20px}
.nearby-radar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.nearby-radar-title{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:6px}
.nearby-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06);cursor:pointer;transition:transform .15s}
[data-theme="dark"] .nearby-item{border-bottom-color:rgba(255,255,255,.08)}
.nearby-item:last-child{border-bottom:0}
.nearby-item:hover{transform:translateX(3px)}
.nearby-item-name{font-size:12px;font-weight:700;color:var(--ink)}
.nearby-item-sub{font-size:10px;color:var(--muted)}
.nearby-item-dist{font-size:11px;font-family:var(--mono);font-weight:700;color:var(--teal)}

/* ── Bucket List Itinerary View ── */
.itinerary-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;display:flex;gap:14px;align-items:flex-start;position:relative;box-shadow:var(--shadow-sm);transition:all var(--transition)}
.itinerary-card:hover{border-color:var(--purple);transform:translateY(-1px);box-shadow:var(--shadow)}
.itinerary-num{width:32px;height:32px;border-radius:50%;background:var(--purple2);color:var(--purple);display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
.itinerary-body{flex:1;min-width:0}
.itinerary-place{font-weight:700;font-size:15px;color:var(--ink);margin-bottom:2px}
.itinerary-note{font-size:13px;color:var(--ink2);line-height:1.4;margin:6px 0;font-family:var(--serif)}
.itinerary-remove{color:var(--red);font-size:11px;font-weight:600;cursor:pointer;background:none;border:none;padding:0}

/* ── Create Community Modal ── */
.emoji-picker-row{display:flex;gap:8px;margin-bottom:12px;overflow-x:auto}
.emoji-opt{width:40px;height:40px;border-radius:8px;border:1.5px solid var(--line);display:grid;place-items:center;font-size:20px;cursor:pointer;background:var(--card);transition:all var(--transition)}
.emoji-opt:hover,.emoji-opt.selected{border-color:var(--purple);background:var(--purple2)}


/* 0A.4(d): example-story badge — starting stories are samples, labelled
   everywhere they appear so they are never mistaken for real posts. */
.example-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--gold);background:var(--gold2);border-radius:6px;padding:3px 8px;margin-top:6px}

/* 0A.8: skip link — first tab stop, jumps to the bottom navigation. */
.skip-link{position:fixed;top:-48px;left:12px;z-index:400;background:#1a2332;color:#fff;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px}