.m-road { background: var(--cat-road); }
.m-social { background: var(--cat-social); }
.m-commerce { background: var(--cat-commerce); }
:root {
      --bg: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --panel: rgba(255,255,255,.92);
      --panel-blur: saturate(180%) blur(8px);
      --divider: rgba(2,6,23,.08);
      --accent: #2563eb;

      --chip-bg: rgba(2,6,23,.05);

      --cat-complaint: #ef4444;
      --cat-idea: #f59e0b;
      --cat-event: #22c55e;
      --cat-lostfound: #0ea5e9;
      --cat-commerce: #10b981;
      --cat-social: #ec4899;
      --cat-road: #f97316;
      --cat-commerce: #10b981;

      --tag-hole: #7c3aed;
      --tag-trash: #16a34a;
      --tag-praise: #fbbf24;
      --tag-snow: #38bdf8;
      --tag-light: #f97316;
      --tag-yard: #10b981;
      --tag-other: #94a3b8;
    
  --peek-height: 64px;

    --panel: #F9FAFB;
    --panel-blur: none;
  }
    .dark {
      --bg: #0b1117;
      --text: #e5e7eb;
      --muted: #94a3b8;
      --panel: rgba(13,18,24,.86);
      --divider: rgba(255,255,255,.08);
      --chip-bg: rgba(148, 163, 184, .18);
      --accent: #60a5fa;
    }
    html,body,#app { height:100%; margin:0; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial; }
    #map { position:absolute; inset:0; }

    /* tabs bottom sheet */
    .sheet { position:absolute; left:0; right:0; bottom:0; z-index:30; background:var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); border-top-left-radius:16px; border-top-right-radius:16px; border-top:1px solid var(--divider); box-shadow: 0 -10px 30px rgba(0,0,0,.14); transform: translateY(58%); transition: transform .25s ease; }
    .sheet.open { transform: translateY(0%); }
    .grip { width:44px; height:4px; background:var(--divider); border-radius:99px; margin:8px auto; }
    .tabs { display:flex; gap:8px; padding:0 12px 8px; }
    .tab-btn { flex:1; text-align:center; padding:10px 0; border-radius:10px; border:1px solid var(--divider); background:var(--chip-bg); font-weight:800; cursor:pointer; }
    .tab-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
    .tab { display:none; max-height: 58vh; overflow:auto; padding: 0 12px 12px; }
    .tab.active { display:block; }

    .section-title { font-weight:800; margin:10px 0 6px; }

    .chips { display:flex; flex-wrap:wrap; gap:8px; }
    .chip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; background:var(--chip-bg); border:1px solid var(--divider); border-radius:999px; font-weight:700; cursor:pointer; }
    .chip i { width:10px; height:10px; border-radius:50%; display:inline-block; }
    .chip.primary[data-k="COMPLAINT"] i { background: var(--cat-complaint); }
    .chip.primary[data-k="IDEA"] i { background: var(--cat-idea); }
    .chip.primary[data-k="EVENT"] i { background: var(--cat-event); }
    .chip.primary[data-k="LOSTFOUND"] i { background: var(--cat-lostfound); }
    .chip.active { outline: 2px solid var(--accent); }
    .chip.tag[data-k="HOLE"] i { background: var(--tag-hole); }
    .chip.tag[data-k="TRASH"] i { background: var(--tag-trash); }
    .chip.tag[data-k="PRAISE"] i { background: var(--tag-praise); }
    .chip.tag[data-k="SNOW"] i { background: var(--tag-snow); }
    .chip.tag[data-k="LIGHT"] i { background: var(--tag-light); }
    .chip.tag[data-k="YARD"] i { background: var(--tag-yard); }
    .chip.tag[data-k="OTHER"] i { background: var(--tag-other); }

    .row { display:flex; gap:8px; align-items:center; }
    .field { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
    select, input, textarea { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--divider); background:rgba(0,0,0,.03); color:var(--text); }
    textarea { min-height:72px; resize:vertical; }
    .btn { border:1px solid var(--divider); background:var(--accent); color:#fff; border-radius:10px; padding:12px; cursor:pointer; font-weight:800; }
    .btn.secondary { background:transparent; color:var(--text); }
    .btn.block { width:100%; }

    /* fab */
    .fab { position:absolute; right:12px; bottom: 190px; z-index:20; display:flex; flex-direction:column; gap:8px; }
    .fab button { background:var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); border:1px solid var(--divider); border-radius:12px; padding:10px 12px; font-weight:700; cursor:pointer; }

    /* marker */
    .marker { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:900; box-shadow: 0 0 0 2px #fff, 0 10px 16px rgba(0,0,0,.22); }
    .m-complaint { background: var(--cat-complaint); }
    .m-idea { background: var(--cat-idea); }
    .m-event { background: var(--cat-event); }
    .m-lost { background: var(--cat-lostfound); }
    .marker.pulse::after { content:""; position:absolute; inset:-6px; border:2px solid currentColor; border-radius:50%; opacity:.6; animation:pulse 1.2s ease-out infinite; }
    .marker.draft { background:#111827; color:#fff; }
    @keyframes pulse { 0% { transform: scale(.6); opacity:.8; } 100% { transform: scale(1.5); opacity:0; } }

    /* popup */
    .popup { position:absolute; left:12px; right:12px; bottom: calc(35% + 12px); z-index:25; display:none; background:var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); border:1px solid var(--divider); border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.24); }
    .popup.open { display:block; }
    .popup .wrap { padding:12px; max-height:inherit; overflow:auto; }
    /* popup v2 additions */
    .popup { border-radius:12px; }
    .popup::before{
      content:""; position:absolute; bottom:-10px; width:0; height:0;
      border-left:9px solid transparent; border-right:9px solid transparent;
      border-top:10px solid var(--panel);
      left: var(--arrow-left, 50%); transform: translateX(-50%);
      filter: drop-shadow(0 2px 2px rgba(0,0,0,.05));
      pointer-events:none;
    }
    .icon-btn { position:absolute; top:8px; padding:6px 8px; border:none; background:transparent; cursor:pointer; }
    .popup-share { right:36px; }
    .popup-close { right:8px; font-weight:700; }
    .meta-row { display:flex; align-items:center; gap:8px; margin:8px 0; }
    .badge.category { border-radius:8px; border:1px solid var(--divider); padding:6px 8px; background:rgba(0,0,0,.03); font-weight:800; }
    .author-link { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); }
    .author-link .avatar { width:24px; height:24px; border-radius:50%; background:#e5e7eb; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
    .author-link img.avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; display:inline-block; }
    .clamp[data-lines="10"]{ display:-webkit-box; -webkit-line-clamp:10; -webkit-box-orient:vertical; }
    .sticky-actions { position:sticky; bottom:0; padding-top:10px; margin-top:10px; background: linear-gradient(to top, var(--panel) 70%, rgba(0,0,0,0) 100%); }
    .reactions { display:flex; gap:8px; align-items:center; margin-top:8px; }
    .react-btn { border:1px solid var(--divider); background:transparent; border-radius:10px; padding:6px 10px; cursor:pointer; }
    .react-btn.active { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.3); }
    .re-mini { display:inline-flex; gap:6px; align-items:center; margin-left:4px; font-size:12px; color:var(--muted); }
    .re-mini .cnt { font-style:normal; }
    /* category colors */
    .category--complaint { background:#fee2e2; border-color:#fecaca; }
    .category--idea { background:#e0f2fe; border-color:#bae6fd; }
    .category--event { background:#dcfce7; border-color:#bbf7d0; }
    .category--lostfound { background:#ffedd5; border-color:#fed7aa; }
    /* modal light style */
    .modal .panel { background: var(--panel); }
    .carousel { background: var(--panel); }
    .carousel img, .carousel video { width:100%; height:100%; object-fit: contain; }
    .carousel .nav { pointer-events: auto; z-index: 3; }
    .carousel .nav button { pointer-events:auto; }
    .play-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:64px; opacity:.85; }
    .m-count { font-size:13px; color:var(--muted); margin-left:auto; margin-right:12px; }

    .addr-rect { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; background:var(--chip-bg); border:1px solid var(--divider);  font-weight:800; margin-bottom:8px; }
    .text { white-space:pre-wrap; }
    .actions { margin-top:10px; display:flex; gap:8px; }
    .modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:50; }
    .modal.open { display:flex; }
    .modal .panel { width:90vw; max-width:820px; height:70vh; background:var(--bg); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--divider); }
    .modal header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--divider); }
    .carousel { position:relative; flex:1; display:flex; align-items:center; justify-content:center; background:#000; }
    .carousel img, .carousel video { max-width:100%; max-height:100%; }
    .nav { position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; padding:0 12px; }
    .nav button { background:rgba(0,0,0,.45); color:#fff; border:none; padding:10px 12px; border-radius:10px; }

    /* feed */
    .feed { display:flex; flex-direction:column; gap:10px; }
    .card { border:1px solid var(--divider); border-radius:12px; background:var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); padding:10px; }
    .card .row1 { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
    .badge { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; background:var(--chip-bg); border:1px solid var(--divider); border-radius:999px; font-weight:800; }
    .statline { position:absolute; left:12px; right:12px; bottom: calc(100% + 8px); text-align:center; font-size:12px; color:var(--muted); }
  
    /* toast */
    .toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
             background: rgba(17,24,39,.94); color:#fff; border-radius:10px; padding:10px 12px;
             box-shadow: 0 8px 20px rgba(0,0,0,.25); font-weight:700; opacity:0; pointer-events:none;
             transition: opacity .2s ease; max-width: 92vw; text-align:center; }
    .toast.show { opacity:1; }

    /* popup fixes */
    .popup { left:12px; right:12px; max-height: 56vh; overflow: hidden; }
    .popup .wrap { max-height: inherit; overflow:auto; }
    .text { white-space: pre-wrap; overflow-wrap:anywhere; word-break: break-word; }

    /* author link */
    .addr-rect a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

    /* feed meta */
    .card .text { white-space: pre-wrap; overflow-wrap:anywhere; word-break: break-word; }
    .meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .badge.small { font-size:12px; padding:6px 10px; }
    .badge.category { color:#111827; }
    .share { margin-left:auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
    .share svg { width:18px; height:18px; }

    /* category colors */
    .category--complaint { background:#fee2e2; border-color:#fecaca; }
    .category--idea      { background:#dbeafe; border-color:#bfdbfe; }
    .category--event     { background:#dcfce7; border-color:#bbf7d0; }
    .category--lost      { background:#ffedd5; border-color:#fed7aa; }

    /* switch (tumbler) */
    .switch { display:flex; align-items:center; gap:10px; margin:10px 0; }
    .switch .track { width:46px; height:26px; border-radius:999px; border:1px solid var(--divider);
                     background: var(--chip-bg); position:relative; transition: background .2s; }
    .switch .knob { position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
                    background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15); transition: left .18s ease; }
    .switch.active .track { background: var(--accent); }
    .switch.active .knob { left:22px; }

  
/* THEME VARIABLES (overridable via Telegram themeParams) */
:root{
  --bg:#0b1220; --fg:#cbd5e1; --muted:#94a3b8;
  --accent:#22c55e; --chip-bg:rgba(255,255,255,.06); --divider:rgba(255,255,255,.12);

    --text: var(--fg);
    --panel: #F9FAFB;
    --panel-blur: none;
  }
.badge.category{ color:#111827; }
.category--complaint{ background:#fee2e2; border-color:#fecaca; }
.category--idea{      background:#dbeafe; border-color:#bfdbfe; }
.category--event{     background:#dcfce7; border-color:#bbf7d0; }
.category--lost{      background:#ffedd5; border-color:#fed7aa; }
.clamp{ position:relative; overflow:hidden; }
.clamp[data-lines="6"]{ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; }
.clamp.expanded{ -webkit-line-clamp:unset; max-height:none; }
.clamp-toggle{ margin-top:6px; font-size:13px; color:var(--muted); cursor:pointer; user-select:none; }
.marker-active{ animation:pulse 1.2s ease-out infinite; box-shadow:0 0 0 0 rgba(34,197,94,.4); }
@keyframes pulse{ 0%{transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,.35);} 70%{transform:scale(1.05); box-shadow:0 0 0 12px rgba(34,197,94,0);} 100%{transform:scale(1);} }
.avatar{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
         font-weight:700; font-size:12px; color:#fff; background:#64748b; }
.meta .avatar{ margin-right:4px; }
.preview{ width:56px; height:56px; border-radius:10px; background:var(--chip-bg) center/cover no-repeat; flex:0 0 auto; }
.preview.fallback{ display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--muted); }
.toast{ z-index:60; }
.text, .card .text{ white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }

  
/* --- FAB icon buttons (inline SVG, no external assets) --- */
:root { --icon-color: #1f2937; } /* slate-800 default */
.fab { display: flex; gap: 8px; }
.fab button { width:44px; height:44px; padding:0; display:grid; place-items:center; border-radius:12px; background: var(--panel, rgba(255,255,255,.92)); border: 1px solid rgba(15,23,42,.08); }
.fab button:active { transform: translateY(1px); }
.fab button svg { width:24px; height:24px; color: var(--icon-color); filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
@media (prefers-color-scheme: dark) {
  :root { --icon-color: #ffffff; }
  .fab button { background: color-mix(in oklab, #0b1220 70%, transparent); border-color: rgba(255,255,255,.08); }
}


/* --- Drawer peek/expand behavior --- */
:root { --peek-height: 64px; } /* shows grip + tabs row */
.sheet { transform: translateY(calc(100% - var(--peek-height))); transition: transform .22s ease; }
.sheet.open { transform: translateY(0%); }


/* 3D toggle active state */
.fab button.active{ outline: 2px solid var(--accent); }


/* === Rect chips + welcome + polish === */
:root { --chip-height: 40px; --chip-radius: 12px; }
#chips-primary { gap:12px; }

.chip {
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--chip-height); padding: 0 14px; box-sizing: border-box;
  border-radius: var(--chip-radius);
  background:#fff; border:1px solid #E5E7EB;
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 4px 10px rgba(16,24,40,.04);
  color:#111827; font-weight:600; line-height:1;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select:none; cursor:pointer;
}
.chip.active { background:#fff; border-color:#10B981; box-shadow:0 0 0 3px rgba(16,185,129,.14); }
#reset { background:#fff; border-color:#EF4444; color:#B91C1C; }
#reset:hover { background:#FEF2F2; }
*:focus { outline:none; } *:focus-visible{ outline:none; }
body { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Welcome overlay */
#welcome{position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:50; }
#welcome .card{ background:var(--panel); -webkit-backdrop-filter:var(--panel-blur); backdrop-filter:var(--panel-blur);
  border:1px solid var(--divider); border-radius:16px; padding:16px 18px; width:min(92vw, 380px); box-shadow:0 12px 38px rgba(16,24,40,.22); }
#welcome h3{ margin:0 0 8px; font-weight:800; }
#welcome p{ margin:0 0 12px; color:var(--muted); }
#welcome button{ display:inline-flex; align-items:center; gap:8px; background:#16A34A; color:#fff; border:none; padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer; }

/* avatar visuals */
.avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;display:inline-block;margin-right:6px;vertical-align:middle;background:#E5E7EB;color:#111;text-align:center;line-height:24px;font-weight:600;}

/* author link clickable avatar+name */
.author-link{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--tg-theme-link-color, #0ea5e9); }
.author-link .avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; }
.author-link .author-name{ font-weight:500; }
@media (min-width:480px){ .author-link .avatar{ width:28px; height:28px; } }

/* author inline (popup) */
.author-link{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--tg-theme-link-color, #0ea5e9); }
.author-link .avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; vertical-align:middle; }
.author-link .author-name{ font-weight:600; }


/* --- Media Viewer: centered nav buttons, scrims, and hit areas --- */
.carousel { position:relative; }
.carousel #m-nav{
  position:absolute;
  left:0; right:0;
  top:calc(var(--media-center-y, 50%));
  transform:translateY(-50%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 10px;
  pointer-events:none;
  z-index:4;
}
#m-nav .nav-btn{
  pointer-events:auto;
  width:56px; height:56px;
  border-radius:16px;
  border:1px solid var(--divider);
  background: rgba(17,24,39,.72);
  color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
#m-nav .nav-btn:active{ transform:scale(.98); }
#m-nav .nav-btn:disabled{ opacity:.4; }
#m-nav .nav-btn svg{ width:28px; height:28px; }

@media (max-width: 420px){
  #m-nav .nav-btn{ width:48px; height:48px; border-radius:14px; }
  #m-nav .nav-btn svg{ width:24px; height:24px; }
}

/* Click/tap hit areas for easy navigation */
.carousel .hit{
  position:absolute; top:0; bottom:0; width:22%;
  pointer-events:auto; z-index:3;
}
.carousel .hit.left{ left:0; }
.carousel .hit.right{ right:0; }

/* Edge scrims for better contrast */
.carousel .scrim{
  position:absolute; top:0; bottom:0; width:84px;
  pointer-events:none; z-index:2;
}
.carousel .scrim.left{ left:0; background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.carousel .scrim.right{ right:0; background:linear-gradient(270deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }

  
/* popup header grid and address marquee */
.popup .popup-header{ display:grid; grid-template-columns: 1fr 84px; align-items:center; column-gap:8px; margin-bottom:8px; }
.popup .hdr-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.popup .hdr-actions .icon-btn{ position:static; top:auto; right:auto; }
.addr-rect{
  position:relative; display:flex; align-items:center; overflow:hidden;
  padding:6px 4px 6px 0; margin-bottom:6px; background:transparent; border:none;
}
.marquee-track{ display:flex; align-items:center; gap:32px; will-change: transform; }
.marquee-item{ flex:0 0 auto; white-space:nowrap; line-height:1.2; }
@keyframes addr-marquee-kf { 0%{ transform: translateX(0);} 100%{ transform: translateX(var(--addr-marquee-dist,-100%)); } }
.addr-rect.marquee-on .marquee-track{ animation-name: addr-marquee-kf; animation-timing-function: linear; animation-iteration-count: infinite; }
.sticky-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.actions-right{ display:flex; align-items:center; gap:12px; margin-left:auto; }


/* === Feed actions cosmetics === */
.card .card-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:12px; }
.card .card-actions .left-actions{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.media-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.06); border:none; cursor:pointer; white-space:nowrap; }
.media-chip .media-count{ font-weight:700; font-size:12px; line-height:1; }
.media-chip .media-ico{ display:inline-flex; }
.icon-btn.map-btn{ padding:6px; border:none; background:transparent; cursor:pointer; }


/* Ensure map icon in feed sits inline, not absolutely-positioned */
.card .left-actions .icon-btn,
.card .left-actions .map-btn{
  position: static !important;
  top: auto !important;
  right: auto !important;
  padding: 6px;
}


/* Feed header with marquee address and share */
.card .card-header{ display:grid; grid-template-columns: 1fr 44px; align-items:center; column-gap:6px; margin-bottom:6px; }
.card .hdr-actions{ display:flex; justify-content:flex-end; }
.card .addr-rect{ overflow:hidden; padding-right:4px; background:transparent; }
.card .addr-rect .marquee-track{ display:flex; align-items:center; gap:32px; will-change: transform; }
.card .addr-rect .marquee-item{ display:inline-block; white-space:nowrap; line-height:1.2; }
@keyframes card-addr-marquee { 0%{ transform: translateX(0);} 100%{ transform: translateX(var(--card-addr-dist,-100%)); } }
.card .addr-rect.marquee-on .marquee-track{ animation-name: card-addr-marquee; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: var(--card-addr-dur,12s); }


/* Ensure share button in feed header stays inline */
.card .hdr-actions .popup-share{ position: static !important; top:auto!important; right:auto!important; padding:6px; }


/* --- feed badge capsule --- */
.tabs .tab-btn{ position: relative; }
.badge-new{
  position:absolute; top:-6px; right:-6px;
  background:#ef4444; color:#fff;
  border-radius:9999px; padding:0 6px;
  font-weight:700; font-size:11px; line-height:16px;
  min-width:16px; text-align:center;
}
.badge-new.hidden{ display:none; }

/* === Colorful category pills (popup + feed) === */
.badge.category{
  color:#fff;
  border:1px solid var(--cat-border, transparent);
  border-radius:8px;
  padding:6px 8px;
  font-weight:800;
  background: linear-gradient(180deg, var(--cat-bg-top, #666) 0%, var(--cat-bg, #555) 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.06) inset;
}

/* Variants with accessible contrast */
.badge.category.category--complaint{
  --cat-bg:     #d73d3d; /* >=4.5 with white text */
  --cat-bg-top: #db5454;
  --cat-border: #b63333;
}
.badge.category.category--idea{
  --cat-bg:     #a46907;
  --cat-bg-top: #ae7b24;
  --cat-border: #8b5905;
}
.badge.category.category--event{
  --cat-bg:     #178740;
  --cat-bg-top: #329556;
  --cat-border: #137236;
}
.badge.category.category--lostfound{
  --cat-bg:     #0a7db1;
  --cat-bg-top: #278cba;
  --cat-border: #086a96;
}

/* === Add-tab plus white circle + spin 180deg === */
@keyframes plus-rotate-180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
.tabs .tab-btn[data-tab="add"] .plus-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:4px;
  border-radius:999px; background:#fff; color: var(--add-plus-color, var(--cat-event));
  line-height:1; font-weight:900; box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transform-origin:50% 50%; will-change: transform;
}
.tabs .tab-btn[data-tab="add"] .plus-ico.spin{ animation: plus-rotate-180 .22s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce){
  .tabs .tab-btn[data-tab="add"] .plus-ico.spin{ animation: none; }
}

/* === Tabs single-line fix === */
.tabs{ display:flex; flex-wrap:nowrap; }
.tabs .tab-btn{ flex:1 1 0; min-width:0; white-space:nowrap; justify-content:center; }

/* === Feed cards: soft elevation shadow (Feed-only) === */
#tab-feed .card{
  box-shadow:
    0 1px 2px rgba(16,24,40,.06),
    0 6px 12px rgba(16,24,40,.06);
  border-color: rgba(2,6,23,.06);
}
/* optional small spacing between cards to let shadow breathe */
#tab-feed .feed{ gap:12px; }


/* ---- extracted from original inline <style> ---- */

/* ===== Fullscreen Telegram-like Viewer ===== */
#viewer{ position:fixed; inset:0; background:#000; z-index:9999; display:none; }
#viewer.open{ display:block; }
#viewer, #viewer *{ box-sizing:border-box; }
#v-top{ position:fixed; left:0; right:0; top:0; padding-top:env(safe-area-inset-top); height:56px; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:3; }
#v-counter{ color:#fff; font-weight:800; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 10px; font-size:13px; }
#v-close{ position:fixed; top:calc(8px + env(safe-area-inset-top)); right:8px; width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
          background:rgba(17,24,39,.6); color:#fff; display:grid; place-items:center; pointer-events:auto; z-index:4; }
#v-close svg{ width:20px; height:20px; }
#v-track{ position:absolute; inset:0; display:flex; touch-action:none; will-change:transform; z-index:1; }
.v-slide{ flex:0 0 100%; display:grid; place-items:center; overflow:hidden; }
.v-box{ position:relative; width:100%; height:100%; display:grid; place-items:center; }
.v-media{ max-width:100%; max-height:100%; object-fit:contain; transform-origin:50% 50%; will-change:transform; }
.v-video{ width:100%; height:100%; object-fit:contain; }
.v-hint{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:#fff; font-size:12px; opacity:.6; }


/* ---- extracted from original inline <style> ---- */

/* ===== STYLE 2 (SOLID): stable sheet solid background + rectangular chips, NO GLASS ===== */
body #app .sheet{
  position: absolute; left:0; right:0; bottom:0; z-index:30;
  transform: translateY(calc(100% - var(--peek-height))) !important;
  transition: transform .22s ease;
  background: #F9FAFB !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  border-top: 1px solid #E5E7EB;
  box-shadow: 0 -10px 30px rgba(0,0,0,.10);
  will-change: transform;
}
body #app .sheet.open{ transform: translateY(0%) !important; }
body #app .sheet::before, body #app .sheet::after{ content: none !important; }
body #app .tabs, body #app .tab, body #app #tab-feed, body #app #tab-map, body #app #tab-add, body #app .filters-wrap, body #app .sheet .content{
  background: transparent !important;
}
:root { --chip-height: 40px; --chip-radius: 12px; }
body #app #chips-primary{ gap: 12px; }
body #app .chip{
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--chip-height); padding: 0 14px; gap: 8px;
  border-radius: var(--chip-radius);
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 10px rgba(16,24,40,.04);
  color: #111827; font-weight: 600; line-height: 1;
  user-select: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
body #app .chip.active{
  background: #F3F4F6; border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.14);
}
body #app .chip i{ width:10px; height:10px; border-radius:50%; display:inline-block; }
body #app .chip.primary[data-k="COMPLAINT"] i { background: var(--cat-complaint); }
body #app .chip.primary[data-k="IDEA"] i      { background: var(--cat-idea); }
body #app .chip.primary[data-k="EVENT"] i     { background: var(--cat-event); }
body #app .chip.primary[data-k="LOSTANDFOUND"] i { background: var(--cat-lf); }
body #app .chip.tag[data-k="HOLE"] i      { background: var(--tag-hole); }
body #app .chip.tag[data-k="SNOW"] i      { background: var(--tag-snow); }
body #app .chip.tag[data-k="TRASH"] i     { background: var(--tag-trash); }
body #app .chip.tag[data-k="LIGHT"] i     { background: var(--tag-light); }
body #app .chip.tag[data-k="YARD"] i      { background: var(--tag-yard); }
body #app .chip.tag[data-k="OTHER"] i     { background: var(--tag-other); }
body #app .chip.tag[data-k="PET"] i       { background: var(--tag-pet); }
body #app .chip.tag[data-k="DOCUMENTS"] i { background: var(--tag-docs); }
body #app .chip.tag[data-k="ADVERT"] i    { background: var(--tag-ad); }
body #app #reset{ background:#FFFFFF; border-color:#EF4444; color:#B91C1C; }
body #app #reset:hover{ background:#FEF2F2; }

/* --- Media Viewer: centered nav buttons, scrims, and hit areas --- */
.carousel { position:relative; }
.carousel #m-nav{
  position:absolute;
  left:0; right:0;
  top:calc(var(--media-center-y, 50%));
  transform:translateY(-50%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 10px;
  pointer-events:none;
  z-index:4;
}
#m-nav .nav-btn{
  pointer-events:auto;
  width:56px; height:56px;
  border-radius:16px;
  border:1px solid var(--divider);
  background: rgba(17,24,39,.72);
  color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
#m-nav .nav-btn:active{ transform:scale(.98); }
#m-nav .nav-btn:disabled{ opacity:.4; }
#m-nav .nav-btn svg{ width:28px; height:28px; }

@media (max-width: 420px){
  #m-nav .nav-btn{ width:48px; height:48px; border-radius:14px; }
  #m-nav .nav-btn svg{ width:24px; height:24px; }
}

/* Click/tap hit areas for easy navigation */
.carousel .hit{
  position:absolute; top:0; bottom:0; width:22%;
  pointer-events:auto; z-index:3;
}
.carousel .hit.left{ left:0; }
.carousel .hit.right{ right:0; }

/* Edge scrims for better contrast */
.carousel .scrim{
  position:absolute; top:0; bottom:0; width:84px;
  pointer-events:none; z-index:2;
}
.carousel .scrim.left{ left:0; background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.carousel .scrim.right{ right:0; background:linear-gradient(270deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }

  

/* ---- extracted from original inline <style> ---- */

/* === Modal media viewer overrides (fit-to-screen + zoom/pan + fixed nav) === */
.modal .carousel { position: relative; height: calc(100vh - 180px); }
.modal .carousel #m-slide { position: absolute; inset: 0; }
.modal .carousel .viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.modal .carousel .content {
  position: absolute; top:0; left:0;
  will-change: transform;
  transform-origin: 0 0;
}
.modal .carousel .content img,
.modal .carousel .content video {
  display: block;
  width: auto; height: auto;
  max-width: none; max-height: none; /* disable implicit contain */
}
.modal .carousel .content video {
  background: #000;
  outline: none;
  /* allow interacting with controls */
  touch-action: auto;
}
/* Navigation overlay pinned to the stage, not the content */
.modal .carousel .nav {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  pointer-events: none; /* allow clicks to pass, except on buttons */
  z-index: 5;
}
.modal .carousel .nav button {
  pointer-events: auto;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--panel);
  backdrop-filter: var(--panel-blur);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.modal .carousel .nav button svg { width: 22px; height: 22px; }
.modal .carousel .nav #m-prev::before,
.modal .carousel .nav #m-next::before { content: ''; } /* hide text glyphs if any */

/* Counter bubble */
.modal .m-count {
  position:absolute; right: 12px; top: 12px;
  background: var(--panel);
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 600;
  z-index: 6;
}

/* Prevent accidental text selection while panning */
.modal .carousel, .modal .carousel * { user-select: none; }

/* --- Media Viewer: centered nav buttons, scrims, and hit areas --- */
.carousel { position:relative; }
.carousel #m-nav{
  position:absolute;
  left:0; right:0;
  top:calc(var(--media-center-y, 50%));
  transform:translateY(-50%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 10px;
  pointer-events:none;
  z-index:4;
}
#m-nav .nav-btn{
  pointer-events:auto;
  width:56px; height:56px;
  border-radius:16px;
  border:1px solid var(--divider);
  background: rgba(17,24,39,.72);
  color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
#m-nav .nav-btn:active{ transform:scale(.98); }
#m-nav .nav-btn:disabled{ opacity:.4; }
#m-nav .nav-btn svg{ width:28px; height:28px; }

@media (max-width: 420px){
  #m-nav .nav-btn{ width:48px; height:48px; border-radius:14px; }
  #m-nav .nav-btn svg{ width:24px; height:24px; }
}

/* Click/tap hit areas for easy navigation */
.carousel .hit{
  position:absolute; top:0; bottom:0; width:22%;
  pointer-events:auto; z-index:3;
}
.carousel .hit.left{ left:0; }
.carousel .hit.right{ right:0; }

/* Edge scrims for better contrast */
.carousel .scrim{
  position:absolute; top:0; bottom:0; width:84px;
  pointer-events:none; z-index:2;
}
.carousel .scrim.left{ left:0; background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.carousel .scrim.right{ right:0; background:linear-gradient(270deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }

/* === Gear speed-dial & Profile button === */
.fab .fab-btn { width:44px; height:44px; border-radius:999px; display:grid; place-items:center; padding:0; }
.fab .gear-btn { padding:2px; }
.fab .gear-btn svg { width:20px; height:20px; transition:transform .18s ease; transform-origin:50% 50%; }
.fab.gear-open .gear-btn svg { transform: rotate(45deg) scale(.92); }

#btn-profile img { width:100%; height:100%; border-radius:999px; object-fit:cover; }

.gear-panel {
  position:absolute; right:56px; top:0;
  display:grid; grid-template-columns:repeat(2, min-content); gap:8px;
  padding:8px; border-radius:12px;
  background: var(--panel);
  -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
  border:1px solid var(--divider);
  box-shadow: 0 12px 32px rgba(2,6,23,.22), 0 2px 8px rgba(2,6,23,.12);
  transform-origin:right center; transform: translateX(8px) scale(.96);
  opacity:0; pointer-events:none; transition: transform .18s ease, opacity .18s ease;
}
.fab.gear-open .gear-panel { transform: translateX(0) scale(1); opacity:1; pointer-events:auto; }
.gear-panel::after { content:""; position:absolute; right:-6px; top:var(--arrow-top,12px); width:10px; height:10px; background:inherit; border:inherit; border-left:none; border-bottom:none; transform:rotate(45deg); }

/* === Profile popover styles === */
.profile-popover {
  position:absolute; right:56px; top:56px;
  width:300px; max-width:calc(100vw - 90px);
  background:var(--panel); border:1px solid var(--divider);
  border-radius:16px; box-shadow: 0 18px 40px rgba(2,6,23,.25), 0 2px 8px rgba(2,6,23,.12);
  -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
  padding:12px; opacity:0; pointer-events:none; transform: translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  z-index: 21;
}
.profile-popover[aria-hidden="false"] { opacity:1; pointer-events:auto; transform: translateY(0); }
.profile-popover::after { content:""; position:absolute; right:-6px; top:var(--arrow-top,12px); width:10px; height:10px; background:inherit; border:inherit; border-left:none; border-bottom:none; transform:rotate(45deg); }

.pp-header { display:flex; align-items:center; gap:10px; }
.pp-avatar { width:56px; height:56px; border-radius:999px; object-fit:cover; }
.pp-user { display:flex; flex-direction:column; min-width:0; }
.pp-name { font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-username { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-close { margin-left:auto; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:transparent; border:1px solid var(--divider); }

.pp-actions { display:flex; gap:8px; margin-top:var(--arrow-top,12px); }
.pp-btn { flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--divider); background:#fff0; color:var(--text); }
.pp-btn:hover { background:rgba(2,6,23,.06); }

/* accessibility small screens */
@media (max-width: 360px){
  .gear-panel { grid-template-columns: 1fr; right:52px; }
  .profile-popover { right:52px; width:260px; }
}

.gear-panel .fab-btn { color: var(--text); }

/* Hide MapLibre +/- zoom controls completely */
.maplibregl-ctrl-zoom{ display:none !important; }