/* =========================================================
   APNI.CITY CANONICAL DESIGN TOKENS
   Extracted from Mockups 7.png–12.png & 15.png
   ========================================================= */

:root {
  /* Brand Core Palette */
  --brand-navy: #071E36;
  --brand-cream: #F7F4EC;
  --brand-yellow: #FFC72C;
  --brand-yellow-hover: #E6B220;
  --brand-yellow-active: #CC9B16;

  /* Surfaces & Elevation */
  --surface-base: #071E36;
  --surface-navy: #0B2545;
  --surface-card: #0F3057;
  --surface-elevated: #112E51;
  --surface-overlay: rgba(7, 30, 54, 0.85);
  --surface-scrim: rgba(0, 0, 0, 0.7);

  /* Borders & Dividers */
  --border-navy: #183C66;
  --border-subtle: #0F3057;
  --border-focus: #FFC72C;
  --border-glass: rgba(255, 255, 255, 0.12);

  /* Typography Colors */
  --text-cream: #F7F4EC;
  --text-white: #FFFFFF;
  --text-muted: #94A9C0;
  --text-dim: #5C7694;
  --text-inverted: #071E36;

  /* Category Identity Colors */
  --cat-issue: #FF5B5F;
  --cat-issue-bg: rgba(255, 91, 95, 0.15);
  --cat-issue-border: rgba(255, 91, 95, 0.35);

  --cat-amenity: #2F8CFF;
  --cat-amenity-bg: rgba(47, 140, 255, 0.15);
  --cat-amenity-border: rgba(47, 140, 255, 0.35);

  --cat-work: #35D07F;
  --cat-work-bg: rgba(53, 208, 127, 0.15);
  --cat-work-border: rgba(53, 208, 127, 0.35);

  --cat-rent: #A65CFF;
  --cat-rent-bg: rgba(166, 92, 255, 0.15);
  --cat-rent-border: rgba(166, 92, 255, 0.35);

  /* Status Colors */
  --status-open: #FF5B5F;
  --status-open-bg: rgba(255, 91, 95, 0.2);
  --status-fixed: #35D07F;
  --status-fixed-bg: rgba(53, 208, 127, 0.2);
  --status-neutral: #94A9C0;

  /* Convenient Aliases */
  --bg-backdrop: rgba(0, 0, 0, 0.7);
  --bg-surface-elevated: #0F3057;
  --text-primary: #F7F4EC;
  --text-secondary: #94A9C0;
  --category-issues: #FF5B5F;
  --category-amenities: #2F8CFF;
  --category-works: #35D07F;
  --category-rent: #A65CFF;
  --radius-full: 9999px;
  --transition-fast: 0.15s ease-out;

  /* Typography Families */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Type Scale */
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 0.92rem;
  --text-md: 1.05rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.85rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Elevation / Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.6);

  /* Layout Constants */
  --desktop-sidebar-width: 240px;
  --desktop-right-panel-width: 420px;
  --header-height: 64px;

  /* Z-Index Hierarchy (Strict Stacking Order) */
  --z-map: 1;
  --z-controls: 20;
  --z-topbar: 25;
  --z-bottom-sheet: 500;
  --z-drawer: 600;
  --z-wizard: 800;
  --z-modal: 1000;
  --z-toast: 2000;
}

:root {
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans: var(--font-body);
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Apni City Brand Design System Tokens */
  --navy-900: #071E36;
  --navy-800: #0B2545;
  --navy-700: #112E51;
  --navy-600: #1B406E;
  --navy-border: #183C66;
  --navy-border-subtle: #0F3057;

  --cream-100: #FFFFFF;
  --cream-200: #F7F4EC;
  --cream-300: #E6E1D3;
  --cream-muted: #94A9C0;
  
  --yellow-500: #FFC72C;
  --yellow-600: #E6B220;

  /* Category colors */
  --issue: #FF5B5F;
  --amenity: #2F8CFF;
  --work: #35D07F;
  --info: #A65CFF;
  --rent: #A65CFF;

  --open: #2F8CFF;
  --stale: #FFC72C;
  --resolved: #35D07F;

  /* Default theme mappings */
  --bg: #071E36;
  --fg: #F7F4EC;
  --card-bg: #0B2545;
  --card-header: #112E51;
  --border: #183C66;
  --border-subtle: #0F3057;
  --muted: #94A9C0;
  --muted-bg: #112E51;
  --input-bg: #0B2545;
  --input-border: #1B406E;
  --hover-bg: #112E51;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  --primary: #FFC72C;
  --primary-hover: #E6B220;
  --primary-text: #071E36;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}

button, input, select, textarea {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.hero-headline,
.cat-card-title,
.panel-main-heading,
.stat-value,
.city-dialog-title,
.filter-title,
.wizard-header-title,
.apni-city-brand-logo {
  font-family: var(--font-heading);
}

#root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.maplibregl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.maplibregl-canvas{position:absolute;left:0;top:0}.maplibregl-map:fullscreen{width:100%;height:100%}.maplibregl-ctrl-group button.maplibregl-ctrl-compass{touch-action:none}.maplibregl-canvas-container.maplibregl-interactive,.maplibregl-ctrl-group button.maplibregl-ctrl-compass{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer{cursor:pointer}.maplibregl-canvas-container.maplibregl-interactive:active,.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active{cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{position:absolute;pointer-events:none;z-index:2}.maplibregl-ctrl-top-left{top:0;left:0}.maplibregl-ctrl-top-right{top:0;right:0}.maplibregl-ctrl-bottom-left{bottom:0;left:0}.maplibregl-ctrl-bottom-right{right:0;bottom:0}.maplibregl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.maplibregl-ctrl-top-left .maplibregl-ctrl{margin:10px 0 0 10px;float:left}.maplibregl-ctrl-top-right .maplibregl-ctrl{margin:10px 10px 0 0;float:right}.maplibregl-ctrl-bottom-left .maplibregl-ctrl{margin:0 0 10px 10px;float:left}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0 10px 10px 0;float:right}.maplibregl-ctrl-group{border-radius:4px;background:#fff}.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (forced-colors:active){.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.maplibregl-ctrl-group button{width:29px;height:29px;display:block;padding:0;outline:none;border:0;box-sizing:border-box;background-color:transparent;cursor:pointer}.maplibregl-ctrl-group button+button{border-top:1px solid #ddd}.maplibregl-ctrl button .maplibregl-ctrl-icon{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:50%}@media (forced-colors:active){.maplibregl-ctrl-icon{background-color:transparent}.maplibregl-ctrl-group button+button{border-top:1px solid ButtonText}}.maplibregl-ctrl button::-moz-focus-inner{border:0;padding:0}.maplibregl-ctrl-attrib-button:focus,.maplibregl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl button:disabled{cursor:not-allowed}.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon{opacity:.25}@media (hover:hover){.maplibregl-ctrl button:not(:disabled):hover{background-color:rgba(0,0,0,.05)}}.maplibregl-ctrl button:not(:disabled):active{background-color:rgba(0,0,0,.05)}.maplibregl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.maplibregl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0}.maplibregl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px}.maplibregl-ctrl-group button:focus:only-child{border-radius:inherit}.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10%2013c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h9c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013z%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M14.5%208.5c-.75%200-1.5.75-1.5%201.5v3h-3c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h3v3c0%20.75.75%201.5%201.5%201.5S16%2019.75%2016%2019v-3h3c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-3v-3c0-.75-.75-1.5-1.5-1.5%22%2F%3E%3C%2Fsvg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10%2013c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h9c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013z%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M14.5%208.5c-.75%200-1.5.75-1.5%201.5v3h-3c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h3v3c0%20.75.75%201.5%201.5%201.5S16%2019.75%2016%2019v-3h3c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-3v-3c0-.75-.75-1.5-1.5-1.5%22%2F%3E%3C%2Fsvg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10%2013c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h9c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013z%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M14.5%208.5c-.75%200-1.5.75-1.5%201.5v3h-3c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h3v3c0%20.75.75%201.5%201.5%201.5S16%2019.75%2016%2019v-3h3c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-3v-3c0-.75-.75-1.5-1.5-1.5%22%2F%3E%3C%2Fsvg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M24%2016v5.5c0%201.75-.75%202.5-2.5%202.5H16v-1l3-1.5-4-5.5%201-1%205.5%204%201.5-3zM6%2016l1.5%203%205.5-4%201%201-4%205.5%203%201.5v1H7.5C5.75%2024%205%2023.25%205%2021.5V16zm7-11v1l-3%201.5%204%205.5-1%201-5.5-4L6%2013H5V7.5C5%205.75%205.75%205%207.5%205zm11%202.5c0-1.75-.75-2.5-2.5-2.5H16v1l3%201.5-4%205.5%201%201%205.5-4%201.5%203h1z%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M18.5%2016c-1.75%200-2.5.75-2.5%202.5V24h1l1.5-3%205.5%204%201-1-4-5.5%203-1.5v-1zM13%2018.5c0-1.75-.75-2.5-2.5-2.5H5v1l3%201.5L4%2024l1%201%205.5-4%201.5%203h1zm3-8c0%201.75.75%202.5%202.5%202.5H24v-1l-3-1.5L25%205l-1-1-5.5%204L17%205h-1zM10.5%2013c1.75%200%202.5-.75%202.5-2.5V5h-1l-1.5%203L5%204%204%205l4%205.5L5%2012v1z%22%2F%3E%3C%2Fsvg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M24%2016v5.5c0%201.75-.75%202.5-2.5%202.5H16v-1l3-1.5-4-5.5%201-1%205.5%204%201.5-3zM6%2016l1.5%203%205.5-4%201%201-4%205.5%203%201.5v1H7.5C5.75%2024%205%2023.25%205%2021.5V16zm7-11v1l-3%201.5%204%205.5-1%201-5.5-4L6%2013H5V7.5C5%205.75%205.75%205%207.5%205zm11%202.5c0-1.75-.75-2.5-2.5-2.5H16v1l3%201.5-4%205.5%201%201%205.5-4%201.5%203h1z%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M18.5%2016c-1.75%200-2.5.75-2.5%202.5V24h1l1.5-3%205.5%204%201-1-4-5.5%203-1.5v-1zM13%2018.5c0-1.75-.75-2.5-2.5-2.5H5v1l3%201.5L4%2024l1%201%205.5-4%201.5%203h1zm3-8c0%201.75.75%202.5%202.5%202.5H24v-1l-3-1.5L25%205l-1-1-5.5%204L17%205h-1zM10.5%2013c1.75%200%202.5-.75%202.5-2.5V5h-1l-1.5%203L5%204%204%205l4%205.5L5%2012v1z%22%2F%3E%3C%2Fsvg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M24%2016v5.5c0%201.75-.75%202.5-2.5%202.5H16v-1l3-1.5-4-5.5%201-1%205.5%204%201.5-3zM6%2016l1.5%203%205.5-4%201%201-4%205.5%203%201.5v1H7.5C5.75%2024%205%2023.25%205%2021.5V16zm7-11v1l-3%201.5%204%205.5-1%201-5.5-4L6%2013H5V7.5C5%205.75%205.75%205%207.5%205zm11%202.5c0-1.75-.75-2.5-2.5-2.5H16v1l3%201.5-4%205.5%201%201%205.5-4%201.5%203h1z%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M18.5%2016c-1.75%200-2.5.75-2.5%202.5V24h1l1.5-3%205.5%204%201-1-4-5.5%203-1.5v-1zM13%2018.5c0-1.75-.75-2.5-2.5-2.5H5v1l3%201.5L4%2024l1%201%205.5-4%201.5%203h1zm3-8c0%201.75.75%202.5%202.5%202.5H24v-1l-3-1.5L25%205l-1-1-5.5%204L17%205h-1zM10.5%2013c1.75%200%202.5-.75%202.5-2.5V5h-1l-1.5%203L5%204%204%205l4%205.5L5%2012v1z%22%2F%3E%3C%2Fsvg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22m10.5%2014%204-8%204%208z%22%2F%3E%3Cpath%20fill%3D%22%23ccc%22%20d%3D%22m10.5%2016%204%208%204-8z%22%2F%3E%3C%2Fsvg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22m10.5%2014%204-8%204%208z%22%2F%3E%3Cpath%20fill%3D%22%23ccc%22%20d%3D%22m10.5%2016%204%208%204-8z%22%2F%3E%3C%2Fsvg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22m10.5%2014%204-8%204%208z%22%2F%3E%3Cpath%20fill%3D%22%23ccc%22%20d%3D%22m10.5%2016%204%208%204-8z%22%2F%3E%3C%2Fsvg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-globe .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20viewBox%3D%220%200%2022%2022%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M17.5%2011c0%204.819-3.02%208.5-6.5%208.5S4.5%2015.819%204.5%2011%207.52%202.5%2011%202.5s6.5%203.681%206.5%208.5Z%22%2F%3E%3Cpath%20d%3D%22M13.5%2011c0%202.447-.331%204.64-.853%206.206-.262.785-.562%201.384-.872%201.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831%2015.64%208.5%2013.446%208.5%2011s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872%201.777.522%201.565.853%203.76.853%206.206Z%22%2F%3E%3Cpath%20d%3D%22M11%207.5c-1.909%200-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3%201.3%200%200%201-.224-.138q.07-.058.224-.138c.299-.151.763-.302%201.379-.434C7.378%205.666%209.091%205.5%2011%205.5s3.622.166%204.845.428c.616.132%201.08.283%201.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm0%209c-1.909%200-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3%201.3%200%200%201-.224-.138%201.3%201.3%200%200%201%20.224-.138c.299-.151.763-.302%201.379-.434C7.378%2014.666%209.091%2014.5%2011%2014.5s3.622.166%204.845.428c.616.132%201.08.283%201.379.434.105.053.177.1.224.138a1.3%201.3%200%200%201-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm0-4c-2.46%200-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5%201.5%200%200%201-.39-.272.3.3%200%200%201-.047-.064.3.3%200%200%201%20.048-.064c.066-.073.189-.167.389-.272.399-.21%201.009-.413%201.805-.59C6.328%209.722%208.54%209.5%2011%209.5s4.672.222%206.256.574c.795.177%201.405.38%201.804.59.2.105.323.2.39.272a.3.3%200%200%201%20.047.064.3.3%200%200%201-.048.064%201.4%201.4%200%200%201-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0%20.018v.002zm17.002.002v-.002zm0-.018v-.002z%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-globe-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20fill%3D%22none%22%20stroke%3D%22%2333b5e5%22%20viewBox%3D%220%200%2022%2022%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M17.5%2011c0%204.819-3.02%208.5-6.5%208.5S4.5%2015.819%204.5%2011%207.52%202.5%2011%202.5s6.5%203.681%206.5%208.5Z%22%2F%3E%3Cpath%20d%3D%22M13.5%2011c0%202.447-.331%204.64-.853%206.206-.262.785-.562%201.384-.872%201.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831%2015.64%208.5%2013.446%208.5%2011s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872%201.777.522%201.565.853%203.76.853%206.206Z%22%2F%3E%3Cpath%20d%3D%22M11%207.5c-1.909%200-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3%201.3%200%200%201-.224-.138q.07-.058.224-.138c.299-.151.763-.302%201.379-.434C7.378%205.666%209.091%205.5%2011%205.5s3.622.166%204.845.428c.616.132%201.08.283%201.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm0%209c-1.909%200-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3%201.3%200%200%201-.224-.138%201.3%201.3%200%200%201%20.224-.138c.299-.151.763-.302%201.379-.434C7.378%2014.666%209.091%2014.5%2011%2014.5s3.622.166%204.845.428c.616.132%201.08.283%201.379.434.105.053.177.1.224.138a1.3%201.3%200%200%201-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm0-4c-2.46%200-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5%201.5%200%200%201-.39-.272.3.3%200%200%201-.047-.064.3.3%200%200%201%20.048-.064c.066-.073.189-.167.389-.272.399-.21%201.009-.413%201.805-.59C6.328%209.722%208.54%209.5%2011%209.5s4.672.222%206.256.574c.795.177%201.405.38%201.804.59.2.105.323.2.39.272a.3.3%200%200%201%20.047.064.3.3%200%200%201-.048.064%201.4%201.4%200%200%201-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0%20.018v.002zm17.002.002v-.002zm0-.018v-.002z%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2022%2022%22%3E%3Cpath%20d%3D%22m1.754%2013.406%204.453-4.851%203.09%203.09%203.281%203.277.969-.969-3.309-3.312%203.844-4.121%206.148%206.886h1.082v-.855l-7.207-8.07-4.84%205.187L6.169%206.57l-5.48%205.965v.871ZM.688%2016.844h20.625v1.375H.688Zm0%200%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20fill%3D%22%2333b5e5%22%20viewBox%3D%220%200%2022%2022%22%3E%3Cpath%20d%3D%22m1.754%2013.406%204.453-4.851%203.09%203.09%203.281%203.277.969-.969-3.309-3.312%203.844-4.121%206.148%206.886h1.082v-.855l-7.207-8.07-4.84%205.187L6.169%206.57l-5.48%205.965v.871ZM.688%2016.844h20.625v1.375H.688Zm0%200%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23aaa%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20fill%3D%22red%22%20d%3D%22m14%205%201%201-9%209-1-1z%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%2333b5e5%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23e58978%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%2333b5e5%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23e54e33%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon{animation:maplibregl-spin 2s linear infinite}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23999%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20fill%3D%22red%22%20d%3D%22m14%205%201%201-9%209-1-1z%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%2333b5e5%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23e58978%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%2333b5e5%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23e54e33%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3C%2Fsvg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229%22%20height%3D%2229%22%20fill%3D%22%23666%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1m0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20fill%3D%22red%22%20d%3D%22m14%205%201%201-9%209-1-1z%22%2F%3E%3C%2Fsvg%3E")}}@keyframes maplibregl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.maplibregl-ctrl-logo{width:88px;height:23px;margin:0 0 -4px -4px;display:block;background-repeat:no-repeat;cursor:pointer;overflow:hidden;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2288%22%20height%3D%2223%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.4%22%20fill-rule%3D%22evenodd%22%20d%3D%22M17.408%2016.796h-1.827l2.501-12.095h.198l3.324%206.533.988%202.19.988-2.19%203.258-6.533h.181l2.6%2012.095h-1.81l-1.218-5.644-.362-1.71-.658%201.71-2.929%205.644h-.098l-2.914-5.644-.757-1.71-.345%201.71zm1.958-3.42-.726%203.663a1.255%201.255%200%200%201-1.232%201.011h-1.827a1.255%201.255%200%200%201-1.229-1.509l2.501-12.095a1.255%201.255%200%200%201%201.23-1.001h.197a1.25%201.25%200%200%201%201.12.685l3.19%206.273%203.125-6.263a1.25%201.25%200%200%201%201.123-.695h.181a1.255%201.255%200%200%201%201.227.991l1.443%206.71a5%205%200%200%201%20.314-.787l.009-.016a4.6%204.6%200%200%201%201.777-1.887c.782-.46%201.668-.667%202.611-.667a4.6%204.6%200%200%201%201.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255%201.255%200%200%201%201.212.925%201.255%201.255%200%200%201%201.212-.925h1.711c.284%200%20.545.094.755.252.613-.3%201.312-.45%202.075-.45%201.356%200%202.557.445%203.482%201.4q.47.48.763%201.064V4.701a1.255%201.255%200%200%201%201.255-1.255h1.86A1.255%201.255%200%200%201%2054.44%204.7v9.194h2.217c.19%200%20.37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42%202.42%200%200%201-.682-1.71c0-.665.267-1.253.735-1.7a2.45%202.45%200%200%201%201.722-.674%202.43%202.43%200%200%201%201.705.675q.318.302.504.683V4.7a1.255%201.255%200%200%201%201.255-1.255h1.744A1.255%201.255%200%200%201%2065.812%204.7v3.335a4.8%204.8%200%200%201%201.526-.246c.938%200%201.817.214%202.59.69a4.47%204.47%200%200%201%201.67%201.743v-.98a1.255%201.255%200%200%201%201.256-1.256h1.777c.233%200%20.451.064.639.174a3.4%203.4%200%200%201%201.567-.372c.346%200%20.861.02%201.285.232a1.25%201.25%200%200%201%20.689%201.004%204.7%204.7%200%200%201%20.853-.588c.795-.44%201.675-.647%202.61-.647%201.385%200%202.65.39%203.525%201.396.836.938%201.168%202.173%201.168%203.528q-.001.515-.056%201.051a1.255%201.255%200%200%201-.947%201.09l.408.952a1.255%201.255%200%200%201-.477%201.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06%200-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8%205.8%200%200%201-.548-2.512q0-.429.053-.843a1.3%201.3%200%200%201-.333-.086l-.166-.004c-.223%200-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255%201.255%200%200%201-1.256%201.256h-1.777a1.255%201.255%200%200%201-1.256-1.256V15.69l-.032.057a4.8%204.8%200%200%201-1.86%201.833%205.04%205.04%200%200%201-2.484.634%204.5%204.5%200%200%201-1.935-.424%201.25%201.25%200%200%201-.764.258h-1.71a1.255%201.255%200%200%201-1.256-1.255V7.687a2.4%202.4%200%200%201-.428.625c.253.23.412.561.412.93v7.553a1.255%201.255%200%200%201-1.256%201.255h-1.843a1.25%201.25%200%200%201-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255%201.255%200%200%201-1.256-1.255v-1.251l-.061.117a4.7%204.7%200%200%201-1.782%201.884%204.77%204.77%200%200%201-2.485.67%205.6%205.6%200%200%201-1.485-.188l.009%202.764a1.255%201.255%200%200%201-1.255%201.259h-1.729a1.255%201.255%200%200%201-1.255-1.255v-3.537a1.255%201.255%200%200%201-1.167.793h-1.679a1.25%201.25%200%200%201-.77-.263%204.5%204.5%200%200%201-1.945.429c-.885%200-1.724-.21-2.495-.632l-.017-.01a5%205%200%200%201-1.081-.836%201.255%201.255%200%200%201-1.254%201.312h-1.81a1.255%201.255%200%200%201-1.228-.99l-.782-3.625-2.044%203.939a1.25%201.25%200%200%201-1.115.676h-.098a1.25%201.25%200%200%201-1.116-.68l-2.061-3.994zM35.92%2016.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033%201.332h1.678V9.242h-1.694l-.033%201.267q-.133-.329-.526-.658l-.032-.028a3.2%203.2%200%200%200-.668-.428l-.27-.12a3.3%203.3%200%200%200-1.235-.23q-1.136-.001-1.974.493a3.36%203.36%200%200%200-1.3%201.382q-.445.89-.444%202.074%200%201.2.51%202.107a3.8%203.8%200%200%200%201.382%201.381%203.9%203.9%200%200%200%201.893.477q.795%200%201.455-.33zm-2.789-5.38q-.576.675-.575%201.762%200%201.102.559%201.794.576.675%201.645.675a2.25%202.25%200%200%200%20.934-.19%202.2%202.2%200%200%200%20.468-.29l.178-.161a2.2%202.2%200%200%200%20.397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2%202.2%200%200%200-.633-.709l-.13-.086-.047-.028a2.1%202.1%200%200%200-1.073-.285q-1.052%200-1.629.692zm2.316%202.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96%200%200%200-.353-.389.85.85%200%200%200-.464-.127c-.4%200-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945%200%20.506.122.801.27.99.097.11.266.224.68.224.303%200%20.504-.09.687-.269zm7.545%201.705a2.6%202.6%200%200%200%20.331.423q.319.33.755.548l.173.074q.65.255%201.49.255%201.02%200%201.844-.493a3.45%203.45%200%200%200%201.316-1.4q.493-.904.493-2.089%200-1.909-.988-2.913-.988-1.02-2.584-1.02-.898%200-1.575.347a3%203%200%200%200-.415.262l-.199.166a3.4%203.4%200%200%200-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296%201.119.297%201.07%200%201.645-.675.577-.69.576-1.762%200-1.119-.576-1.777-.558-.675-1.645-.675-.435%200-.835.16a2%202%200%200%200-.284.136%202%202%200%200%200-.363.254%202.2%202.2%200%200%200-.46.569l-.082.162a2.6%202.6%200%200%200-.213%201.072v.115q0%20.707.296%201.267l.135.211zm.964-.818a1.1%201.1%200%200%200%20.367.385.94.94%200%200%200%20.476.118c.423%200%20.59-.117.687-.23.159-.194.28-.478.28-.95%200-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1%201%200%200%200-.503.135l-.012.007a.86.86%200%200%200-.335.343c-.073.133-.132.324-.132.614v.115a1.4%201.4%200%200%200%20.14.66zm15.7-6.222q.347-.346.346-.856a1.05%201.05%200%200%200-.345-.79%201.18%201.18%200%200%200-.84-.329q-.51%200-.855.33a1.05%201.05%200%200%200-.346.79q0%20.51.346.855.345.346.856.346.51%200%20.839-.346zm4.337%209.314.033-1.332q.191.403.59.747l.098.081a4%204%200%200%200%20.316.224l.223.122a3.2%203.2%200%200%200%201.44.322%203.8%203.8%200%200%200%201.875-.477%203.5%203.5%200%200%200%201.382-1.366q.527-.89.526-2.09%200-1.184-.444-2.073a3.24%203.24%200%200%200-1.283-1.399q-.823-.51-1.942-.51a3.5%203.5%200%200%200-1.527.344l-.086.043-.165.09a3%203%200%200%200-.33.214q-.432.315-.656.707a2%202%200%200%200-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5%202.5%200%200%200%20.566.7q.117.098.245.18l.144.08a2.1%202.1%200%200%200%20.975.232q1.07%200%201.645-.675.576-.69.576-1.778%200-1.102-.576-1.777-.56-.691-1.645-.692a2.2%202.2%200%200%200-1.015.235q-.22.113-.415.282l-.15.142a2.1%202.1%200%200%200-.42.594q-.223.479-.223%201.1v.115q0%20.705.293%201.26zm2.616-.293c.157-.191.28-.479.28-.967%200-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87%200%200%200-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0%20.285.057.499.144.669a1.1%201.1%200%200%200%20.367.405c.137.082.28.123.455.123.423%200%20.59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493%200%20.642.099l.247-1.794q-.196-.099-.717-.099a2.3%202.3%200%200%200-.545.063%202%202%200%200%200-.411.148%202.2%202.2%200%200%200-.4.249%202.5%202.5%200%200%200-.485.499%202.7%202.7%200%200%200-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5%201.5%200%200%201%20.466-.636%202.5%202.5%200%200%201%20.399-.253%202%202%200%200%201%20.224-.099zm9.784%202.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46%203.46%200%200%200-1.4%201.382q-.493.906-.493%202.106%200%201.07.428%201.975.428.89%201.332%201.432.906.526%202.255.526.973%200%201.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954%200-1.497-.444a1.6%201.6%200%200%201-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1%201%200%200%200-.156-.176q-.46-.428-1.316-.428-.986%200-1.494.604-.379.45-.494%201.234zm-27.053%202.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m19.63%2011.151-.757-1.71-.345%201.71-1.12%205.644h-1.827L18.083%204.7h.197l3.325%206.533.988%202.19.988-2.19L26.839%204.7h.181l2.6%2012.095h-1.81l-1.218-5.644-.362-1.71-.658%201.71-2.93%205.644h-.098l-2.913-5.644zm14.836%205.81q-1.02%200-1.893-.478a3.8%203.8%200%200%201-1.381-1.382q-.51-.906-.51-2.106%200-1.185.444-2.074a3.36%203.36%200%200%201%201.3-1.382q.839-.494%201.974-.494a3.3%203.3%200%200%201%201.234.231%203.3%203.3%200%200%201%20.97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02%201.053a3.17%203.17%200%200%201-1.662.444zm.296-1.482q.938%200%201.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2%202.2%200%200%200-.807-.872%202.1%202.1%200%200%200-1.119-.313q-1.053%200-1.629.692-.575.675-.575%201.76%200%201.103.559%201.795.577.675%201.645.675zm6.521-6.237h1.711v1.4q.906-1.597%202.83-1.597%201.596%200%202.584%201.02.988%201.005.988%202.914%200%201.185-.493%202.09a3.46%203.46%200%200%201-1.316%201.399%203.5%203.5%200%200%201-1.844.493q-.954%200-1.662-.329a2.67%202.67%200%200%201-1.086-.97l.017%205.134h-1.728zm4.048%206.22q1.07%200%201.645-.674.577-.69.576-1.762%200-1.119-.576-1.777-.558-.675-1.645-.675-.592%200-1.12.296-.51.28-.822.823-.296.527-.296%201.234v.115q0%20.708.296%201.267.313.543.823.855.51.296%201.119.297z%22%2F%3E%3Cpath%20fill%3D%22%23e1e3e9%22%20d%3D%22M51.325%204.7h1.86v10.45h3.473v1.646h-5.333zm7.12%204.542h1.843v7.553h-1.843zm.905-1.415a1.16%201.16%200%200%201-.856-.346%201.17%201.17%200%200%201-.346-.856%201.05%201.05%200%200%201%20.346-.79q.346-.329.856-.329.494%200%20.839.33a1.05%201.05%200%200%201%20.345.79%201.16%201.16%200%200%201-.345.855q-.33.346-.84.346zm7.875%209.133a3.17%203.17%200%200%201-1.662-.444q-.723-.46-1.004-1.053l-.033%201.332h-1.71V4.701h1.743v4.657l-.082%201.283q.279-.658%201.086-1.119a3.5%203.5%200%200%201%201.778-.477q1.119%200%201.942.51a3.24%203.24%200%200%201%201.283%201.4q.445.888.444%202.072%200%201.201-.526%202.09a3.5%203.5%200%200%201-1.382%201.366%203.8%203.8%200%200%201-1.876.477zm-.296-1.481q1.069%200%201.645-.675.577-.69.577-1.778%200-1.102-.577-1.776-.56-.691-1.645-.692a2.12%202.12%200%200%200-1.58.659q-.642.641-.642%201.694v.115q0%20.71.296%201.267a2.4%202.4%200%200%200%20.807.872%202.1%202.1%200%200%200%201.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14%202.14%200%200%201%201.349-.46q.527%200%20.724.098l-.247%201.794q-.149-.099-.642-.099-.774%200-1.416.494-.626.493-.626%201.58v3.883h-1.777V9.242zm9.534%207.718q-1.35%200-2.255-.526-.904-.543-1.332-1.432a4.6%204.6%200%200%201-.428-1.975q0-1.2.493-2.106a3.46%203.46%200%200%201%201.4-1.382q.889-.495%202.007-.494%201.744%200%202.584.97.855.956.856%202.7%200%20.444-.05.92h-5.43q.18%201.005.708%201.45.542.443%201.497.443.79%200%201.3-.131a4%204%200%200%200%20.938-.362l.542%201.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728%200-1.991%201.86z%22%2F%3E%3Cpath%20d%3D%22M5.074%2015.948a.484.657%200%200%200-.486.659v1.84a.484.657%200%200%200%20.486.659h4.101a.484.657%200%200%200%20.486-.659v-1.84a.484.657%200%200%200-.486-.659zm3.56%201.16H5.617v.838h3.017z%22%20style%3D%22fill%3A%23fff%3Bfill-rule%3Aevenodd%3Bstroke-width%3A1.03600001%22%2F%3E%3Cg%20style%3D%22stroke-width%3A1.12603545%22%3E%3Cpath%20d%3D%22M-9.408-1.416c-3.833-.025-7.056%202.912-7.08%206.615-.02%203.08%201.653%204.832%203.107%206.268.903.892%201.721%201.74%202.32%202.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87%201.87%200%200%200-.362%201.121l-.011%201.877c-.003.402.104.787.347%201.125.244.338.688.653%201.23.656l4.142.028c.542.003.99-.306%201.238-.641a1.87%201.87%200%200%200%20.363-1.121l.012-1.875a1.87%201.87%200%200%200-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145%201.425-1.983%202.348-2.87%201.473-1.414%203.18-3.149%203.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006%201.1v.002c3.274.02%205.92%202.532%205.9%205.6-.017%202.706-1.39%204.026-2.863%205.44-1.034.994-2.118%202.033-2.814%203.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34%200%200%201-.226.084.34.34%200%200%201-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067%202.7-5.545%205.975-5.523m-.02%202.826c-1.62-.01-2.944%201.315-2.955%202.96-.01%201.646%201.295%202.988%202.916%202.999h.002c1.621.01%202.943-1.316%202.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005%201.1c1.017.006%201.829.83%201.822%201.89s-.83%201.874-1.848%201.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874%201.848-1.868m-2.155%2011.857%204.14.025c.271.002.49.305.487.676l-.013%201.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668%22%20style%3D%22color%3A%23000%3Bfont-style%3Anormal%3Bfont-variant%3Anormal%3Bfont-weight%3A400%3Bfont-stretch%3Anormal%3Bfont-size%3Amedium%3Bline-height%3Anormal%3Bfont-family%3Asans-serif%3Bfont-variant-ligatures%3Anormal%3Bfont-variant-position%3Anormal%3Bfont-variant-caps%3Anormal%3Bfont-variant-numeric%3Anormal%3Bfont-variant-alternates%3Anormal%3Bfont-feature-settings%3Anormal%3Btext-indent%3A0%3Btext-align%3Astart%3Btext-decoration%3Anone%3Btext-decoration-line%3Anone%3Btext-decoration-style%3Asolid%3Btext-decoration-color%3A%23000%3Bletter-spacing%3Anormal%3Bword-spacing%3Anormal%3Btext-transform%3Anone%3Bwriting-mode%3Alr-tb%3Bdirection%3Altr%3Btext-orientation%3Amixed%3Bdominant-baseline%3Aauto%3Bbaseline-shift%3Abaseline%3Btext-anchor%3Astart%3Bwhite-space%3Anormal%3Bshape-padding%3A0%3Bclip-rule%3Aevenodd%3Bdisplay%3Ainline%3Boverflow%3Avisible%3Bvisibility%3Avisible%3Bopacity%3A1%3Bisolation%3Aauto%3Bmix-blend-mode%3Anormal%3Bcolor-interpolation%3AsRGB%3Bcolor-interpolation-filters%3AlinearRGB%3Bsolid-color%3A%23000%3Bsolid-opacity%3A1%3Bvector-effect%3Anone%3Bfill%3A%23000%3Bfill-opacity%3A.4%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A2.47727823%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%3Bcolor-rendering%3Aauto%3Bimage-rendering%3Aauto%3Bshape-rendering%3Aauto%3Btext-rendering%3Aauto%22%20transform%3D%22translate(15.553%202.85)scale(.88807)%22%2F%3E%3Cpath%20d%3D%22M-9.415-.316C-12.69-.338-15.37%202.14-15.39%205.207c-.017%202.716%201.326%204.041%202.78%205.477%201.013%201%202.081%202.055%202.78%203.67l.092.076a.34.34%200%200%200%20.225.086.34.34%200%200%200%20.227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6%201.78-2.64%202.814-3.634%201.473-1.414%202.847-2.733%202.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057%208.784c1.621.011%202.944-1.315%202.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945%201.315-2.955%202.96s1.295%202.989%202.916%203%22%20style%3D%22clip-rule%3Aevenodd%3Bfill%3A%23e1e3e9%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A2.47727823%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A.4%22%20transform%3D%22translate(15.553%202.85)scale(.88807)%22%2F%3E%3Cpath%20d%3D%22M-11.594%2015.465c-.27-.002-.492.297-.494.668l-.012%201.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z%22%20style%3D%22clip-rule%3Aevenodd%3Bfill%3A%23fff%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A2.47727823%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A.4%22%20transform%3D%22translate(15.553%202.85)scale(.88807)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}a.maplibregl-ctrl-logo.maplibregl-compact{width:14px}@media (forced-colors:active){a.maplibregl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2288%22%20height%3D%2223%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.4%22%20fill-rule%3D%22evenodd%22%20d%3D%22M17.408%2016.796h-1.827l2.501-12.095h.198l3.324%206.533.988%202.19.988-2.19%203.258-6.533h.181l2.6%2012.095h-1.81l-1.218-5.644-.362-1.71-.658%201.71-2.929%205.644h-.098l-2.914-5.644-.757-1.71-.345%201.71zm1.958-3.42-.726%203.663a1.255%201.255%200%200%201-1.232%201.011h-1.827a1.255%201.255%200%200%201-1.229-1.509l2.501-12.095a1.255%201.255%200%200%201%201.23-1.001h.197a1.25%201.25%200%200%201%201.12.685l3.19%206.273%203.125-6.263a1.25%201.25%200%200%201%201.123-.695h.181a1.255%201.255%200%200%201%201.227.991l1.443%206.71a5%205%200%200%201%20.314-.787l.009-.016a4.6%204.6%200%200%201%201.777-1.887c.782-.46%201.668-.667%202.611-.667a4.6%204.6%200%200%201%201.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255%201.255%200%200%201%201.212.925%201.255%201.255%200%200%201%201.212-.925h1.711c.284%200%20.545.094.755.252.613-.3%201.312-.45%202.075-.45%201.356%200%202.557.445%203.482%201.4q.47.48.763%201.064V4.701a1.255%201.255%200%200%201%201.255-1.255h1.86A1.255%201.255%200%200%201%2054.44%204.7v9.194h2.217c.19%200%20.37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42%202.42%200%200%201-.682-1.71c0-.665.267-1.253.735-1.7a2.45%202.45%200%200%201%201.722-.674%202.43%202.43%200%200%201%201.705.675q.318.302.504.683V4.7a1.255%201.255%200%200%201%201.255-1.255h1.744A1.255%201.255%200%200%201%2065.812%204.7v3.335a4.8%204.8%200%200%201%201.526-.246c.938%200%201.817.214%202.59.69a4.47%204.47%200%200%201%201.67%201.743v-.98a1.255%201.255%200%200%201%201.256-1.256h1.777c.233%200%20.451.064.639.174a3.4%203.4%200%200%201%201.567-.372c.346%200%20.861.02%201.285.232a1.25%201.25%200%200%201%20.689%201.004%204.7%204.7%200%200%201%20.853-.588c.795-.44%201.675-.647%202.61-.647%201.385%200%202.65.39%203.525%201.396.836.938%201.168%202.173%201.168%203.528q-.001.515-.056%201.051a1.255%201.255%200%200%201-.947%201.09l.408.952a1.255%201.255%200%200%201-.477%201.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06%200-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8%205.8%200%200%201-.548-2.512q0-.429.053-.843a1.3%201.3%200%200%201-.333-.086l-.166-.004c-.223%200-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255%201.255%200%200%201-1.256%201.256h-1.777a1.255%201.255%200%200%201-1.256-1.256V15.69l-.032.057a4.8%204.8%200%200%201-1.86%201.833%205.04%205.04%200%200%201-2.484.634%204.5%204.5%200%200%201-1.935-.424%201.25%201.25%200%200%201-.764.258h-1.71a1.255%201.255%200%200%201-1.256-1.255V7.687a2.4%202.4%200%200%201-.428.625c.253.23.412.561.412.93v7.553a1.255%201.255%200%200%201-1.256%201.255h-1.843a1.25%201.25%200%200%201-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255%201.255%200%200%201-1.256-1.255v-1.251l-.061.117a4.7%204.7%200%200%201-1.782%201.884%204.77%204.77%200%200%201-2.485.67%205.6%205.6%200%200%201-1.485-.188l.009%202.764a1.255%201.255%200%200%201-1.255%201.259h-1.729a1.255%201.255%200%200%201-1.255-1.255v-3.537a1.255%201.255%200%200%201-1.167.793h-1.679a1.25%201.25%200%200%201-.77-.263%204.5%204.5%200%200%201-1.945.429c-.885%200-1.724-.21-2.495-.632l-.017-.01a5%205%200%200%201-1.081-.836%201.255%201.255%200%200%201-1.254%201.312h-1.81a1.255%201.255%200%200%201-1.228-.99l-.782-3.625-2.044%203.939a1.25%201.25%200%200%201-1.115.676h-.098a1.25%201.25%200%200%201-1.116-.68l-2.061-3.994zM35.92%2016.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033%201.332h1.678V9.242h-1.694l-.033%201.267q-.133-.329-.526-.658l-.032-.028a3.2%203.2%200%200%200-.668-.428l-.27-.12a3.3%203.3%200%200%200-1.235-.23q-1.136-.001-1.974.493a3.36%203.36%200%200%200-1.3%201.382q-.445.89-.444%202.074%200%201.2.51%202.107a3.8%203.8%200%200%200%201.382%201.381%203.9%203.9%200%200%200%201.893.477q.795%200%201.455-.33zm-2.789-5.38q-.576.675-.575%201.762%200%201.102.559%201.794.576.675%201.645.675a2.25%202.25%200%200%200%20.934-.19%202.2%202.2%200%200%200%20.468-.29l.178-.161a2.2%202.2%200%200%200%20.397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2%202.2%200%200%200-.633-.709l-.13-.086-.047-.028a2.1%202.1%200%200%200-1.073-.285q-1.052%200-1.629.692zm2.316%202.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96%200%200%200-.353-.389.85.85%200%200%200-.464-.127c-.4%200-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945%200%20.506.122.801.27.99.097.11.266.224.68.224.303%200%20.504-.09.687-.269zm7.545%201.705a2.6%202.6%200%200%200%20.331.423q.319.33.755.548l.173.074q.65.255%201.49.255%201.02%200%201.844-.493a3.45%203.45%200%200%200%201.316-1.4q.493-.904.493-2.089%200-1.909-.988-2.913-.988-1.02-2.584-1.02-.898%200-1.575.347a3%203%200%200%200-.415.262l-.199.166a3.4%203.4%200%200%200-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296%201.119.297%201.07%200%201.645-.675.577-.69.576-1.762%200-1.119-.576-1.777-.558-.675-1.645-.675-.435%200-.835.16a2%202%200%200%200-.284.136%202%202%200%200%200-.363.254%202.2%202.2%200%200%200-.46.569l-.082.162a2.6%202.6%200%200%200-.213%201.072v.115q0%20.707.296%201.267l.135.211zm.964-.818a1.1%201.1%200%200%200%20.367.385.94.94%200%200%200%20.476.118c.423%200%20.59-.117.687-.23.159-.194.28-.478.28-.95%200-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1%201%200%200%200-.503.135l-.012.007a.86.86%200%200%200-.335.343c-.073.133-.132.324-.132.614v.115a1.4%201.4%200%200%200%20.14.66zm15.7-6.222q.347-.346.346-.856a1.05%201.05%200%200%200-.345-.79%201.18%201.18%200%200%200-.84-.329q-.51%200-.855.33a1.05%201.05%200%200%200-.346.79q0%20.51.346.855.345.346.856.346.51%200%20.839-.346zm4.337%209.314.033-1.332q.191.403.59.747l.098.081a4%204%200%200%200%20.316.224l.223.122a3.2%203.2%200%200%200%201.44.322%203.8%203.8%200%200%200%201.875-.477%203.5%203.5%200%200%200%201.382-1.366q.527-.89.526-2.09%200-1.184-.444-2.073a3.24%203.24%200%200%200-1.283-1.399q-.823-.51-1.942-.51a3.5%203.5%200%200%200-1.527.344l-.086.043-.165.09a3%203%200%200%200-.33.214q-.432.315-.656.707a2%202%200%200%200-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5%202.5%200%200%200%20.566.7q.117.098.245.18l.144.08a2.1%202.1%200%200%200%20.975.232q1.07%200%201.645-.675.576-.69.576-1.778%200-1.102-.576-1.777-.56-.691-1.645-.692a2.2%202.2%200%200%200-1.015.235q-.22.113-.415.282l-.15.142a2.1%202.1%200%200%200-.42.594q-.223.479-.223%201.1v.115q0%20.705.293%201.26zm2.616-.293c.157-.191.28-.479.28-.967%200-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87%200%200%200-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0%20.285.057.499.144.669a1.1%201.1%200%200%200%20.367.405c.137.082.28.123.455.123.423%200%20.59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493%200%20.642.099l.247-1.794q-.196-.099-.717-.099a2.3%202.3%200%200%200-.545.063%202%202%200%200%200-.411.148%202.2%202.2%200%200%200-.4.249%202.5%202.5%200%200%200-.485.499%202.7%202.7%200%200%200-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5%201.5%200%200%201%20.466-.636%202.5%202.5%200%200%201%20.399-.253%202%202%200%200%201%20.224-.099zm9.784%202.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46%203.46%200%200%200-1.4%201.382q-.493.906-.493%202.106%200%201.07.428%201.975.428.89%201.332%201.432.906.526%202.255.526.973%200%201.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954%200-1.497-.444a1.6%201.6%200%200%201-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1%201%200%200%200-.156-.176q-.46-.428-1.316-.428-.986%200-1.494.604-.379.45-.494%201.234zm-27.053%202.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m19.63%2011.151-.757-1.71-.345%201.71-1.12%205.644h-1.827L18.083%204.7h.197l3.325%206.533.988%202.19.988-2.19L26.839%204.7h.181l2.6%2012.095h-1.81l-1.218-5.644-.362-1.71-.658%201.71-2.93%205.644h-.098l-2.913-5.644zm14.836%205.81q-1.02%200-1.893-.478a3.8%203.8%200%200%201-1.381-1.382q-.51-.906-.51-2.106%200-1.185.444-2.074a3.36%203.36%200%200%201%201.3-1.382q.839-.494%201.974-.494a3.3%203.3%200%200%201%201.234.231%203.3%203.3%200%200%201%20.97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02%201.053a3.17%203.17%200%200%201-1.662.444zm.296-1.482q.938%200%201.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2%202.2%200%200%200-.807-.872%202.1%202.1%200%200%200-1.119-.313q-1.053%200-1.629.692-.575.675-.575%201.76%200%201.103.559%201.795.577.675%201.645.675zm6.521-6.237h1.711v1.4q.906-1.597%202.83-1.597%201.596%200%202.584%201.02.988%201.005.988%202.914%200%201.185-.493%202.09a3.46%203.46%200%200%201-1.316%201.399%203.5%203.5%200%200%201-1.844.493q-.954%200-1.662-.329a2.67%202.67%200%200%201-1.086-.97l.017%205.134h-1.728zm4.048%206.22q1.07%200%201.645-.674.577-.69.576-1.762%200-1.119-.576-1.777-.558-.675-1.645-.675-.592%200-1.12.296-.51.28-.822.823-.296.527-.296%201.234v.115q0%20.708.296%201.267.313.543.823.855.51.296%201.119.297z%22%2F%3E%3Cpath%20fill%3D%22%23e1e3e9%22%20d%3D%22M51.325%204.7h1.86v10.45h3.473v1.646h-5.333zm7.12%204.542h1.843v7.553h-1.843zm.905-1.415a1.16%201.16%200%200%201-.856-.346%201.17%201.17%200%200%201-.346-.856%201.05%201.05%200%200%201%20.346-.79q.346-.329.856-.329.494%200%20.839.33a1.05%201.05%200%200%201%20.345.79%201.16%201.16%200%200%201-.345.855q-.33.346-.84.346zm7.875%209.133a3.17%203.17%200%200%201-1.662-.444q-.723-.46-1.004-1.053l-.033%201.332h-1.71V4.701h1.743v4.657l-.082%201.283q.279-.658%201.086-1.119a3.5%203.5%200%200%201%201.778-.477q1.119%200%201.942.51a3.24%203.24%200%200%201%201.283%201.4q.445.888.444%202.072%200%201.201-.526%202.09a3.5%203.5%200%200%201-1.382%201.366%203.8%203.8%200%200%201-1.876.477zm-.296-1.481q1.069%200%201.645-.675.577-.69.577-1.778%200-1.102-.577-1.776-.56-.691-1.645-.692a2.12%202.12%200%200%200-1.58.659q-.642.641-.642%201.694v.115q0%20.71.296%201.267a2.4%202.4%200%200%200%20.807.872%202.1%202.1%200%200%200%201.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14%202.14%200%200%201%201.349-.46q.527%200%20.724.098l-.247%201.794q-.149-.099-.642-.099-.774%200-1.416.494-.626.493-.626%201.58v3.883h-1.777V9.242zm9.534%207.718q-1.35%200-2.255-.526-.904-.543-1.332-1.432a4.6%204.6%200%200%201-.428-1.975q0-1.2.493-2.106a3.46%203.46%200%200%201%201.4-1.382q.889-.495%202.007-.494%201.744%200%202.584.97.855.956.856%202.7%200%20.444-.05.92h-5.43q.18%201.005.708%201.45.542.443%201.497.443.79%200%201.3-.131a4%204%200%200%200%20.938-.362l.542%201.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728%200-1.991%201.86z%22%2F%3E%3Cpath%20d%3D%22M5.074%2015.948a.484.657%200%200%200-.486.659v1.84a.484.657%200%200%200%20.486.659h4.101a.484.657%200%200%200%20.486-.659v-1.84a.484.657%200%200%200-.486-.659zm3.56%201.16H5.617v.838h3.017z%22%20style%3D%22fill%3A%23fff%3Bfill-rule%3Aevenodd%3Bstroke-width%3A1.03600001%22%2F%3E%3Cg%20style%3D%22stroke-width%3A1.12603545%22%3E%3Cpath%20d%3D%22M-9.408-1.416c-3.833-.025-7.056%202.912-7.08%206.615-.02%203.08%201.653%204.832%203.107%206.268.903.892%201.721%201.74%202.32%202.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87%201.87%200%200%200-.362%201.121l-.011%201.877c-.003.402.104.787.347%201.125.244.338.688.653%201.23.656l4.142.028c.542.003.99-.306%201.238-.641a1.87%201.87%200%200%200%20.363-1.121l.012-1.875a1.87%201.87%200%200%200-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145%201.425-1.983%202.348-2.87%201.473-1.414%203.18-3.149%203.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006%201.1v.002c3.274.02%205.92%202.532%205.9%205.6-.017%202.706-1.39%204.026-2.863%205.44-1.034.994-2.118%202.033-2.814%203.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34%200%200%201-.226.084.34.34%200%200%201-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067%202.7-5.545%205.975-5.523m-.02%202.826c-1.62-.01-2.944%201.315-2.955%202.96-.01%201.646%201.295%202.988%202.916%202.999h.002c1.621.01%202.943-1.316%202.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005%201.1c1.017.006%201.829.83%201.822%201.89s-.83%201.874-1.848%201.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874%201.848-1.868m-2.155%2011.857%204.14.025c.271.002.49.305.487.676l-.013%201.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668%22%20style%3D%22color%3A%23000%3Bfont-style%3Anormal%3Bfont-variant%3Anormal%3Bfont-weight%3A400%3Bfont-stretch%3Anormal%3Bfont-size%3Amedium%3Bline-height%3Anormal%3Bfont-family%3Asans-serif%3Bfont-variant-ligatures%3Anormal%3Bfont-variant-position%3Anormal%3Bfont-variant-caps%3Anormal%3Bfont-variant-numeric%3Anormal%3Bfont-variant-alternates%3Anormal%3Bfont-feature-settings%3Anormal%3Btext-indent%3A0%3Btext-align%3Astart%3Btext-decoration%3Anone%3Btext-decoration-line%3Anone%3Btext-decoration-style%3Asolid%3Btext-decoration-color%3A%23000%3Bletter-spacing%3Anormal%3Bword-spacing%3Anormal%3Btext-transform%3Anone%3Bwriting-mode%3Alr-tb%3Bdirection%3Altr%3Btext-orientation%3Amixed%3Bdominant-baseline%3Aauto%3Bbaseline-shift%3Abaseline%3Btext-anchor%3Astart%3Bwhite-space%3Anormal%3Bshape-padding%3A0%3Bclip-rule%3Aevenodd%3Bdisplay%3Ainline%3Boverflow%3Avisible%3Bvisibility%3Avisible%3Bopacity%3A1%3Bisolation%3Aauto%3Bmix-blend-mode%3Anormal%3Bcolor-interpolation%3AsRGB%3Bcolor-interpolation-filters%3AlinearRGB%3Bsolid-color%3A%23000%3Bsolid-opacity%3A1%3Bvector-effect%3Anone%3Bfill%3A%23000%3Bfill-opacity%3A.4%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A2.47727823%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%3Bcolor-rendering%3Aauto%3Bimage-rendering%3Aauto%3Bshape-rendering%3Aauto%3Btext-rendering%3Aauto%22%20transform%3D%22translate(15.553%202.85)scale(.88807)%22%2F%3E%3Cpath%20d%3D%22M-9.415-.316C-12.69-.338-15.37%202.14-15.39%205.207c-.017%202.716%201.326%204.041%202.78%205.477%201.013%201%202.081%202.055%202.78%203.67l.092.076a.34.34%200%200%200%20.225.086.34.34%200%200%200%20.227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6%201.78-2.64%202.814-3.634%201.473-1.414%202.847-2.733%202.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057%208.784c1.621.011%202.944-1.315%202.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945%201.315-2.955%202.96s1.295%202.989%202.916%203%22%20style%3D%22clip-rule%3Aevenodd%3Bfill%3A%23e1e3e9%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A2.47727823%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A.4%22%20transform%3D%22translate(15.553%202.85)scale(.88807)%22%2F%3E%3Cpath%20d%3D%22M-11.594%2015.465c-.27-.002-.492.297-.494.668l-.012%201.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z%22%20style%3D%22clip-rule%3Aevenodd%3Bfill%3A%23fff%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A2.47727823%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A.4%22%20transform%3D%22translate(15.553%202.85)scale(.88807)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2288%22%20height%3D%2223%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.4%22%20fill-rule%3D%22evenodd%22%20d%3D%22M17.408%2016.796h-1.827l2.501-12.095h.198l3.324%206.533.988%202.19.988-2.19%203.258-6.533h.181l2.6%2012.095h-1.81l-1.218-5.644-.362-1.71-.658%201.71-2.929%205.644h-.098l-2.914-5.644-.757-1.71-.345%201.71zm1.958-3.42-.726%203.663a1.255%201.255%200%200%201-1.232%201.011h-1.827a1.255%201.255%200%200%201-1.229-1.509l2.501-12.095a1.255%201.255%200%200%201%201.23-1.001h.197a1.25%201.25%200%200%201%201.12.685l3.19%206.273%203.125-6.263a1.25%201.25%200%200%201%201.123-.695h.181a1.255%201.255%200%200%201%201.227.991l1.443%206.71a5%205%200%200%201%20.314-.787l.009-.016a4.6%204.6%200%200%201%201.777-1.887c.782-.46%201.668-.667%202.611-.667a4.6%204.6%200%200%201%201.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255%201.255%200%200%201%201.212.925%201.255%201.255%200%200%201%201.212-.925h1.711c.284%200%20.545.094.755.252.613-.3%201.312-.45%202.075-.45%201.356%200%202.557.445%203.482%201.4q.47.48.763%201.064V4.701a1.255%201.255%200%200%201%201.255-1.255h1.86A1.255%201.255%200%200%201%2054.44%204.7v9.194h2.217c.19%200%20.37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42%202.42%200%200%201-.682-1.71c0-.665.267-1.253.735-1.7a2.45%202.45%200%200%201%201.722-.674%202.43%202.43%200%200%201%201.705.675q.318.302.504.683V4.7a1.255%201.255%200%200%201%201.255-1.255h1.744A1.255%201.255%200%200%201%2065.812%204.7v3.335a4.8%204.8%200%200%201%201.526-.246c.938%200%201.817.214%202.59.69a4.47%204.47%200%200%201%201.67%201.743v-.98a1.255%201.255%200%200%201%201.256-1.256h1.777c.233%200%20.451.064.639.174a3.4%203.4%200%200%201%201.567-.372c.346%200%20.861.02%201.285.232a1.25%201.25%200%200%201%20.689%201.004%204.7%204.7%200%200%201%20.853-.588c.795-.44%201.675-.647%202.61-.647%201.385%200%202.65.39%203.525%201.396.836.938%201.168%202.173%201.168%203.528q-.001.515-.056%201.051a1.255%201.255%200%200%201-.947%201.09l.408.952a1.255%201.255%200%200%201-.477%201.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06%200-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8%205.8%200%200%201-.548-2.512q0-.429.053-.843a1.3%201.3%200%200%201-.333-.086l-.166-.004c-.223%200-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255%201.255%200%200%201-1.256%201.256h-1.777a1.255%201.255%200%200%201-1.256-1.256V15.69l-.032.057a4.8%204.8%200%200%201-1.86%201.833%205.04%205.04%200%200%201-2.484.634%204.5%204.5%200%200%201-1.935-.424%201.25%201.25%200%200%201-.764.258h-1.71a1.255%201.255%200%200%201-1.256-1.255V7.687a2.4%202.4%200%200%201-.428.625c.253.23.412.561.412.93v7.553a1.255%201.255%200%200%201-1.256%201.255h-1.843a1.25%201.25%200%200%201-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255%201.255%200%200%201-1.256-1.255v-1.251l-.061.117a4.7%204.7%200%200%201-1.782%201.884%204.77%204.77%200%200%201-2.485.67%205.6%205.6%200%200%201-1.485-.188l.009%202.764a1.255%201.255%200%200%201-1.255%201.259h-1.729a1.255%201.255%200%200%201-1.255-1.255v-3.537a1.255%201.255%200%200%201-1.167.793h-1.679a1.25%201.25%200%200%201-.77-.263%204.5%204.5%200%200%201-1.945.429c-.885%200-1.724-.21-2.495-.632l-.017-.01a5%205%200%200%201-1.081-.836%201.255%201.255%200%200%201-1.254%201.312h-1.81a1.255%201.255%200%200%201-1.228-.99l-.782-3.625-2.044%203.939a1.25%201.25%200%200%201-1.115.676h-.098a1.25%201.25%200%200%201-1.116-.68l-2.061-3.994zM35.92%2016.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033%201.332h1.678V9.242h-1.694l-.033%201.267q-.133-.329-.526-.658l-.032-.028a3.2%203.2%200%200%200-.668-.428l-.27-.12a3.3%203.3%200%200%200-1.235-.23q-1.136-.001-1.974.493a3.36%203.36%200%200%200-1.3%201.382q-.445.89-.444%202.074%200%201.2.51%202.107a3.8%203.8%200%200%200%201.382%201.381%203.9%203.9%200%200%200%201.893.477q.795%200%201.455-.33zm-2.789-5.38q-.576.675-.575%201.762%200%201.102.559%201.794.576.675%201.645.675a2.25%202.25%200%200%200%20.934-.19%202.2%202.2%200%200%200%20.468-.29l.178-.161a2.2%202.2%200%200%200%20.397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2%202.2%200%200%200-.633-.709l-.13-.086-.047-.028a2.1%202.1%200%200%200-1.073-.285q-1.052%200-1.629.692zm2.316%202.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96%200%200%200-.353-.389.85.85%200%200%200-.464-.127c-.4%200-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945%200%20.506.122.801.27.99.097.11.266.224.68.224.303%200%20.504-.09.687-.269zm7.545%201.705a2.6%202.6%200%200%200%20.331.423q.319.33.755.548l.173.074q.65.255%201.49.255%201.02%200%201.844-.493a3.45%203.45%200%200%200%201.316-1.4q.493-.904.493-2.089%200-1.909-.988-2.913-.988-1.02-2.584-1.02-.898%200-1.575.347a3%203%200%200%200-.415.262l-.199.166a3.4%203.4%200%200%200-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296%201.119.297%201.07%200%201.645-.675.577-.69.576-1.762%200-1.119-.576-1.777-.558-.675-1.645-.675-.435%200-.835.16a2%202%200%200%200-.284.136%202%202%200%200%200-.363.254%202.2%202.2%200%200%200-.46.569l-.082.162a2.6%202.6%200%200%200-.213%201.072v.115q0%20.707.296%201.267l.135.211zm.964-.818a1.1%201.1%200%200%200%20.367.385.94.94%200%200%200%20.476.118c.423%200%20.59-.117.687-.23.159-.194.28-.478.28-.95%200-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1%201%200%200%200-.503.135l-.012.007a.86.86%200%200%200-.335.343c-.073.133-.132.324-.132.614v.115a1.4%201.4%200%200%200%20.14.66zm15.7-6.222q.347-.346.346-.856a1.05%201.05%200%200%200-.345-.79%201.18%201.18%200%200%200-.84-.329q-.51%200-.855.33a1.05%201.05%200%200%200-.346.79q0%20.51.346.855.345.346.856.346.51%200%20.839-.346zm4.337%209.314.033-1.332q.191.403.59.747l.098.081a4%204%200%200%200%20.316.224l.223.122a3.2%203.2%200%200%200%201.44.322%203.8%203.8%200%200%200%201.875-.477%203.5%203.5%200%200%200%201.382-1.366q.527-.89.526-2.09%200-1.184-.444-2.073a3.24%203.24%200%200%200-1.283-1.399q-.823-.51-1.942-.51a3.5%203.5%200%200%200-1.527.344l-.086.043-.165.09a3%203%200%200%200-.33.214q-.432.315-.656.707a2%202%200%200%200-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5%202.5%200%200%200%20.566.7q.117.098.245.18l.144.08a2.1%202.1%200%200%200%20.975.232q1.07%200%201.645-.675.576-.69.576-1.778%200-1.102-.576-1.777-.56-.691-1.645-.692a2.2%202.2%200%200%200-1.015.235q-.22.113-.415.282l-.15.142a2.1%202.1%200%200%200-.42.594q-.223.479-.223%201.1v.115q0%20.705.293%201.26zm2.616-.293c.157-.191.28-.479.28-.967%200-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87%200%200%200-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0%20.285.057.499.144.669a1.1%201.1%200%200%200%20.367.405c.137.082.28.123.455.123.423%200%20.59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493%200%20.642.099l.247-1.794q-.196-.099-.717-.099a2.3%202.3%200%200%200-.545.063%202%202%200%200%200-.411.148%202.2%202.2%200%200%200-.4.249%202.5%202.5%200%200%200-.485.499%202.7%202.7%200%200%200-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5%201.5%200%200%201%20.466-.636%202.5%202.5%200%200%201%20.399-.253%202%202%200%200%201%20.224-.099zm9.784%202.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46%203.46%200%200%200-1.4%201.382q-.493.906-.493%202.106%200%201.07.428%201.975.428.89%201.332%201.432.906.526%202.255.526.973%200%201.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954%200-1.497-.444a1.6%201.6%200%200%201-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1%201%200%200%200-.156-.176q-.46-.428-1.316-.428-.986%200-1.494.604-.379.45-.494%201.234zm-27.053%202.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m19.63%2011.151-.757-1.71-.345%201.71-1.12%205.644h-1.827L18.083%204.7h.197l3.325%206.533.988%202.19.988-2.19L26.839%204.7h.181l2.6%2012.095h-1.81l-1.218-5.644-.362-1.71-.658%201.71-2.93%205.644h-.098l-2.913-5.644zm14.836%205.81q-1.02%200-1.893-.478a3.8%203.8%200%200%201-1.381-1.382q-.51-.906-.51-2.106%200-1.185.444-2.074a3.36%203.36%200%200%201%201.3-1.382q.839-.494%201.974-.494a3.3%203.3%200%200%201%201.234.231%203.3%203.3%200%200%201%20.97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02%201.053a3.17%203.17%200%200%201-1.662.444zm.296-1.482q.938%200%201.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2%202.2%200%200%200-.807-.872%202.1%202.1%200%200%200-1.119-.313q-1.053%200-1.629.692-.575.675-.575%201.76%200%201.103.559%201.795.577.675%201.645.675zm6.521-6.237h1.711v1.4q.906-1.597%202.83-1.597%201.596%200%202.584%201.02.988%201.005.988%202.914%200%201.185-.493%202.09a3.46%203.46%200%200%201-1.316%201.399%203.5%203.5%200%200%201-1.844.493q-.954%200-1.662-.329a2.67%202.67%200%200%201-1.086-.97l.017%205.134h-1.728zm4.048%206.22q1.07%200%201.645-.674.577-.69.576-1.762%200-1.119-.576-1.777-.558-.675-1.645-.675-.592%200-1.12.296-.51.28-.822.823-.296.527-.296%201.234v.115q0%20.708.296%201.267.313.543.823.855.51.296%201.119.297z%22%2F%3E%3Cpath%20fill%3D%22%23e1e3e9%22%20d%3D%22M51.325%204.7h1.86v10.45h3.473v1.646h-5.333zm7.12%204.542h1.843v7.553h-1.843zm.905-1.415a1.16%201.16%200%200%201-.856-.346%201.17%201.17%200%200%201-.346-.856%201.05%201.05%200%200%201%20.346-.79q.346-.329.856-.329.494%200%20.839.33a1.05%201.05%200%200%201%20.345.79%201.16%201.16%200%200%201-.345.855q-.33.346-.84.346zm7.875%209.133a3.17%203.17%200%200%201-1.662-.444q-.723-.46-1.004-1.053l-.033%201.332h-1.71V4.701h1.743v4.657l-.082%201.283q.279-.658%201.086-1.119a3.5%203.5%200%200%201%201.778-.477q1.119%200%201.942.51a3.24%203.24%200%200%201%201.283%201.4q.445.888.444%202.072%200%201.201-.526%202.09a3.5%203.5%200%200%201-1.382%201.366%203.8%203.8%200%200%201-1.876.477zm-.296-1.481q1.069%200%201.645-.675.577-.69.577-1.778%200-1.102-.577-1.776-.56-.691-1.645-.692a2.12%202.12%200%200%200-1.58.659q-.642.641-.642%201.694v.115q0%20.71.296%201.267a2.4%202.4%200%200%200%20.807.872%202.1%202.1%200%200%200%201.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14%202.14%200%200%201%201.349-.46q.527%200%20.724.098l-.247%201.794q-.149-.099-.642-.099-.774%200-1.416.494-.626.493-.626%201.58v3.883h-1.777V9.242zm9.534%207.718q-1.35%200-2.255-.526-.904-.543-1.332-1.432a4.6%204.6%200%200%201-.428-1.975q0-1.2.493-2.106a3.46%203.46%200%200%201%201.4-1.382q.889-.495%202.007-.494%201.744%200%202.584.97.855.956.856%202.7%200%20.444-.05.92h-5.43q.18%201.005.708%201.45.542.443%201.497.443.79%200%201.3-.131a4%204%200%200%200%20.938-.362l.542%201.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728%200-1.991%201.86z%22%2F%3E%3Cpath%20d%3D%22M5.074%2015.948a.484.657%200%200%200-.486.659v1.84a.484.657%200%200%200%20.486.659h4.101a.484.657%200%200%200%20.486-.659v-1.84a.484.657%200%200%200-.486-.659zm3.56%201.16H5.617v.838h3.017z%22%20style%3D%22fill%3A%23fff%3Bfill-rule%3Aevenodd%3Bstroke-width%3A1.03600001%22%2F%3E%3Cg%20style%3D%22stroke-width%3A1.12603545%22%3E%3Cpath%20d%3D%22M-9.408-1.416c-3.833-.025-7.056%202.912-7.08%206.615-.02%203.08%201.653%204.832%203.107%206.268.903.892%201.721%201.74%202.32%202.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87%201.87%200%200%200-.362%201.121l-.011%201.877c-.003.402.104.787.347%201.125.244.338.688.653%201.23.656l4.142.028c.542.003.99-.306%201.238-.641a1.87%201.87%200%200%200%20.363-1.121l.012-1.875a1.87%201.87%200%200%200-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145%201.425-1.983%202.348-2.87%201.473-1.414%203.18-3.149%203.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006%201.1v.002c3.274.02%205.92%202.532%205.9%205.6-.017%202.706-1.39%204.026-2.863%205.44-1.034.994-2.118%202.033-2.814%203.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34%200%200%201-.226.084.34.34%200%200%201-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067%202.7-5.545%205.975-5.523m-.02%202.826c-1.62-.01-2.944%201.315-2.955%202.96-.01%201.646%201.295%202.988%202.916%202.999h.002c1.621.01%202.943-1.316%202.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005%201.1c1.017.006%201.829.83%201.822%201.89s-.83%201.874-1.848%201.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874%201.848-1.868m-2.155%2011.857%204.14.025c.271.002.49.305.487.676l-.013%201.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668%22%20style%3D%22color%3A%23000%3Bfont-style%3Anormal%3Bfont-variant%3Anormal%3Bfont-weight%3A400%3Bfont-stretch%3Anormal%3Bfont-size%3Amedium%3Bline-height%3Anormal%3Bfont-family%3Asans-serif%3Bfont-variant-ligatures%3Anormal%3Bfont-variant-position%3Anormal%3Bfont-variant-caps%3Anormal%3Bfont-variant-numeric%3Anormal%3Bfont-variant-alternates%3Anormal%3Bfont-feature-settings%3Anormal%3Btext-indent%3A0%3Btext-align%3Astart%3Btext-decoration%3Anone%3Btext-decoration-line%3Anone%3Btext-decoration-style%3Asolid%3Btext-decoration-color%3A%23000%3Bletter-spacing%3Anormal%3Bword-spacing%3Anormal%3Btext-transform%3Anone%3Bwriting-mode%3Alr-tb%3Bdirection%3Altr%3Btext-orientation%3Amixed%3Bdominant-baseline%3Aauto%3Bbaseline-shift%3Abaseline%3Btext-anchor%3Astart%3Bwhite-space%3Anormal%3Bshape-padding%3A0%3Bclip-rule%3Aevenodd%3Bdisplay%3Ainline%3Boverflow%3Avisible%3Bvisibility%3Avisible%3Bopacity%3A1%3Bisolation%3Aauto%3Bmix-blend-mode%3Anormal%3Bcolor-interpolation%3AsRGB%3Bcolor-interpolation-filters%3AlinearRGB%3Bsolid-color%3A%23000%3Bsolid-opacity%3A1%3Bvector-effect%3Anone%3Bfill%3A%23000%3Bfill-opacity%3A.4%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A2.47727823%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A0%3Bstroke-opacity%3A1%3Bcolor-rendering%3Aauto%3Bimage-rendering%3Aauto%3Bshape-rendering%3Aauto%3Btext-rendering%3Aauto%22%20transform%3D%22translate(15.553%202.85)scale(.88807)%22%2F%3E%3Cpath%20d%3D%22M-9.415-.316C-12.69-.338-15.37%202.14-15.39%205.207c-.017%202.716%201.326%204.041%202.78%205.477%201.013%201%202.081%202.055%202.78%203.67l.092.076a.34.34%200%200%200%20.225.086.34.34%200%200%200%20.227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6%201.78-2.64%202.814-3.634%201.473-1.414%202.847-2.733%202.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057%208.784c1.621.011%202.944-1.315%202.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945%201.315-2.955%202.96s1.295%202.989%202.916%203%22%20style%3D%22clip-rule%3Aevenodd%3Bfill%3A%23e1e3e9%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A2.47727823%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A.4%22%20transform%3D%22translate(15.553%202.85)scale(.88807)%22%2F%3E%3Cpath%20d%3D%22M-11.594%2015.465c-.27-.002-.492.297-.494.668l-.012%201.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z%22%20style%3D%22clip-rule%3Aevenodd%3Bfill%3A%23fff%3Bfill-opacity%3A1%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A2.47727823%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A.4%22%20transform%3D%22translate(15.553%202.85)scale(.88807)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}}.maplibregl-ctrl.maplibregl-ctrl-attrib{padding:0 5px;background-color:hsla(0,0%,100%,.5);margin:0}@media screen{.maplibregl-ctrl-attrib.maplibregl-compact{min-height:20px;padding:2px 24px 2px 0;margin:10px;position:relative;background-color:#fff;color:#000;border-radius:12px;box-sizing:content-box}.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact-show,.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 8px 2px 28px;border-radius:12px}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib-button{display:none;cursor:pointer;position:absolute;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E");background-color:hsla(0,0%,100%,.5);width:24px;height:24px;box-sizing:border-box;border-radius:12px;outline:none;top:0;right:0;border:0}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::-webkit-details-marker{display:none}.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button{left:0}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button{background-color:rgba(0,0,0,.05)}.maplibregl-ctrl-bottom-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;right:0}.maplibregl-ctrl-top-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{top:0;right:0}.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{top:0;left:0}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;left:0}}@media screen and (forced-colors:active){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E")}}@media screen and (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E")}}.maplibregl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}.maplibregl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.maplibregl-attrib-empty{display:none}.maplibregl-ctrl-scale{background-color:hsla(0,0%,100%,.75);font-size:10px;white-space:nowrap;border-color:#333;border-style:none solid solid;border-width:medium 2px 2px;padding:0 5px;color:#333;box-sizing:border-box}.maplibregl-popup{position:absolute;top:0;left:0;display:flex;will-change:transform;pointer-events:none}.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}.maplibregl-popup-anchor-left{flex-direction:row}.maplibregl-popup-anchor-right{flex-direction:row-reverse}.maplibregl-popup-tip{width:0;height:0;border:10px solid transparent;z-index:1}.maplibregl-popup-anchor-top .maplibregl-popup-tip{align-self:center;border-top:none;border-bottom-color:#fff}.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{align-self:flex-start;border-top:none;border-left:none;border-bottom-color:#fff}.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{align-self:flex-end;border-top:none;border-right:none;border-bottom-color:#fff}.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.maplibregl-popup-anchor-left .maplibregl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.maplibregl-popup-anchor-right .maplibregl-popup-tip{align-self:center;border-right:none;border-left-color:#fff}[dir=rtl] .maplibregl-popup-anchor-left{flex-direction:row-reverse}[dir=rtl] .maplibregl-popup-anchor-right{flex-direction:row}[dir=rtl] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip{align-self:flex-end}[dir=rtl] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip{align-self:flex-start}[dir=rtl] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{align-self:flex-end}[dir=rtl] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{align-self:flex-start}.maplibregl-popup-close-button{position:absolute;right:0;top:0;border:0;border-radius:0 3px 0 0;cursor:pointer;background-color:transparent}.maplibregl-popup-close-button:hover{background-color:rgba(0,0,0,.05)}.maplibregl-popup-content{position:relative;background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.1);padding:15px 10px;pointer-events:auto}.maplibregl-popup-anchor-top-left .maplibregl-popup-content{border-top-left-radius:0}.maplibregl-popup-anchor-top-right .maplibregl-popup-content{border-top-right-radius:0}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content{border-bottom-left-radius:0}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content{border-bottom-right-radius:0}.maplibregl-popup-track-pointer{display:none}.maplibregl-popup-track-pointer *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.maplibregl-map:hover .maplibregl-popup-track-pointer{display:flex}.maplibregl-map:active .maplibregl-popup-track-pointer{display:none}.maplibregl-marker{position:absolute;top:0;left:0;will-change:transform;transition:opacity .2s}.maplibregl-marker-draggable{cursor:grab}.maplibregl-user-location-dot,.maplibregl-user-location-dot:before{background-color:#1da1f2;width:15px;height:15px;border-radius:50%}.maplibregl-user-location-dot:before{content:"";position:absolute;animation:maplibregl-user-location-dot-pulse 2s infinite}.maplibregl-user-location-dot:after{border-radius:50%;border:2px solid #fff;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px;box-sizing:border-box;box-shadow:0 0 3px rgba(0,0,0,.35)}@media (prefers-reduced-motion:reduce){.maplibregl-user-location-dot:before{animation:none}}@keyframes maplibregl-user-location-dot-pulse{0%{transform:scale(1);opacity:1}70%{transform:scale(3);opacity:0}to{transform:scale(1);opacity:0}}.maplibregl-user-location-dot-stale{background-color:#aaa}.maplibregl-user-location-dot-stale:after{display:none}.maplibregl-user-location-accuracy-circle{background-color:#1da1f233;width:1px;height:1px;border-radius:100%}.maplibregl-crosshair,.maplibregl-crosshair .maplibregl-interactive,.maplibregl-crosshair .maplibregl-interactive:active{cursor:crosshair}.maplibregl-boxzoom{position:absolute;top:0;left:0;width:0;height:0;background:#fff;border:2px dotted #202020;opacity:.5}.maplibregl-cooperative-gesture-screen{background:rgba(0,0,0,.4);position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:#fff;padding:1rem;font-size:1.4em;line-height:1.2;opacity:0;pointer-events:none;transition:opacity 1s ease 1s;z-index:99999}.maplibregl-cooperative-gesture-screen.maplibregl-show{opacity:1;transition:opacity .05s}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:none}@media (hover:none),(pointer:coarse){.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message{display:none}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:block}}.maplibregl-pseudo-fullscreen{position:fixed!important;width:100%!important;height:100%!important;top:0!important;left:0!important;z-index:99999}.apni-city-root {
  display: block;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for modern mobile browsers */
  width: 100vw;
  overflow: hidden;
  position: relative;
  background-color: var(--bg);
  color: var(--fg);
}

/* =========================================================
   Floating Top Navigation Over Map
   ========================================================= */
.floating-top-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  pointer-events: none;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
  transition: opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 769px) {
  .floating-top-container.sidebar-open {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }
}

@media (max-width: 768px) {
  .floating-top-container.entity-open {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
  }
}

/* System Emergency / Broadcast Banner (§7.5 & §14.6) */
.system-broadcast-banner {
  pointer-events: auto;
  width: 100%;
  max-width: 680px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 4px 16px rgba(180, 83, 9, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  animation: bannerSlideDown 0.25s ease-out;
}

@keyframes bannerSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.broadcast-banner-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.broadcast-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.broadcast-text {
  word-break: break-word;
}

.broadcast-dismiss-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.broadcast-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Coming Soon / Under Maintenance Banner (§7.5 & §14.6 separate banner under mod control) */
.maintenance-status-banner {
  pointer-events: auto;
  width: 100%;
  max-width: 680px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 4px 16px rgba(3, 105, 161, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  animation: bannerSlideDown 0.25s ease-out;
}

[data-theme='dark'] .maintenance-status-banner {
  background: linear-gradient(135deg, #075985 0%, #0c4a6e 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.maintenance-banner-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.maintenance-banner-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.maintenance-banner-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.maintenance-banner-text {
  word-break: break-word;
}

.floating-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 680px;
}

/* Floating Search Bar & Dropdown */
.floating-search-wrapper {
  pointer-events: auto;
  position: relative;
  flex: 1;
  max-width: 480px;
  min-width: 140px;
}

.floating-search-box {
  display: flex;
  align-items: center;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--border);
  border-radius: 9999px;
  height: 42px;
  padding: 0 16px;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.floating-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25);
}

.search-icon {
  font-size: 0.95rem;
  opacity: 0.65;
}

.floating-search-input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 0.88rem;
  color: var(--fg);
  outline: none;
}

.floating-search-input::placeholder {
  color: var(--muted);
}

.search-clear-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-clear-btn:hover {
  color: var(--fg);
}

.floating-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
}

.search-result-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  color: var(--fg);
  transition: background-color 0.15s ease;
}

.search-result-item:hover {
  background: var(--hover-bg);
  color: var(--primary);
}

.result-pin {
  font-size: 1rem;
}

/* Floating Controls: Theme, User Details */
.floating-controls-group {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.floating-ctrl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--border);
  color: var(--fg);
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.floating-ctrl-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.ctrl-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.ctrl-label {
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.floating-ctrl-btn.user-btn.signed-in {
  border-color: rgba(16, 185, 129, 0.5);
  color: var(--fg);
}

/* Floating Category Filter Chips */
.floating-chips-row {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 2px 4px 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.floating-chips-row::-webkit-scrollbar {
  display: none;
}

.floating-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  transition: all 0.15s ease;
  user-select: none;
}

.floating-chip-btn:hover {
  background: var(--hover-bg);
  color: var(--fg);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.floating-chip-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.35);
}

.chip-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.chip-label {
  font-size: 0.8rem;
}

/* =========================================================
   Map Container & Custom Markers
   ========================================================= */
.map-canvas-container {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  flex: 1;
  width: 100%;
  height: 100%;
}

.map-view-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-canvas {
  width: 100%;
  height: 100%;
}

/* Custom Marker Pins */
.google-pin-marker {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  user-select: none;
  line-height: 0;
  will-change: transform;
  pointer-events: auto;
}

.google-pin-marker.selected {
  z-index: 25;
}

.google-draft-pin-marker {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: grab;
  user-select: none;
  line-height: 0;
  z-index: 1000;
  will-change: transform;
  pointer-events: auto;
}

.google-draft-pin-marker:active {
  cursor: grabbing;
}

.entity-pin {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  border: 2px solid #ffffff;
  position: relative;
  margin-bottom: 2px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.entity-marker-container:hover .entity-pin {
  transform: rotate(-45deg) scale(1.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.entity-marker-container.selected .entity-pin,
.entity-pin.selected {
  transform: rotate(-45deg) scale(1.28);
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.6), 0 8px 20px rgba(0, 0, 0, 0.45);
  z-index: 20;
}

.pin-icon {
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
}

.pin-icon svg,
.pin-icon .entity-svg-glyph {
  display: block;
  width: 15px;
  height: 15px;
}

.pin-warn-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0.85rem;
  transform: rotate(45deg);
}

.entity-pin.stale {
  border-style: dashed;
  opacity: 0.85;
}

.entity-pin.resolved {
  opacity: 0.65;
  filter: grayscale(0.4);
}

/* Dedicated Live GPS User Location Blue Marker */
.user-location-marker {
  position: relative;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 32;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-location-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #2563eb;
  border: 2.5px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.8), 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.user-location-pulse {
  position: absolute;
  width: 32px;
  height: 32px;
  background: rgba(37, 99, 235, 0.28);
  border: 1.5px solid rgba(37, 99, 235, 0.6);
  border-radius: 50%;
  animation: user-loc-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  z-index: 1;
}

@keyframes user-loc-pulse {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Step 3 Pointed Callout Draft Pin (anchored directly by MapLibre) */
.draft-pin-beacon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 38;
}

.draft-pin-beacon.pointed-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.draft-pin-callout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  color: var(--fg);
  border: 2px solid var(--primary);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(37, 99, 235, 0.25);
  animation: bounce-subtle 1.6s ease infinite;
}

.callout-icon {
  font-size: 1.15rem;
}

.callout-title {
  color: var(--primary);
  font-weight: 800;
}

.callout-loc {
  font-size: 0.72rem;
  font-family: monospace;
  color: var(--muted);
  border-left: 1px solid var(--border);
  padding-left: 8px;
}

.draft-pointer-stem {
  width: 2px;
  height: 24px;
  background: var(--primary);
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.9);
}

.draft-pin-target-dot {
  width: 10px;
  height: 10px;
  background: var(--primary);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 10px var(--primary);
  margin-top: -2px;
}

.draft-pin-pulse-ring {
  width: 32px;
  height: 12px;
  background: rgba(37, 99, 235, 0.45);
  border: 1.5px solid rgba(37, 99, 235, 0.85);
  border-radius: 50%;
  animation: beacon-pulse 1.6s ease-out infinite;
  margin-top: -6px;
}

@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes beacon-pulse {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.3); opacity: 0; }
}

/* Screen-center Precision Needle-Pin Crosshair */
.center-crosshair-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 35;
}

/* Ground bullseye placed at exact (0, 0) / (top: 50%, left: 50%) */
.crosshair-ground-target {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crosshair-center-dot {
  width: 6px;
  height: 6px;
  background: #ef4444;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.9);
  z-index: 2;
}

.crosshair-pulse-ring {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px dashed #ef4444;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.22);
  animation: pulse-ring 1.5s ease-out infinite;
  z-index: 1;
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.9; }
  60% { transform: scale(1.35); opacity: 0.3; }
  100% { transform: scale(0.8); opacity: 0.9; }
}

/* Needle Pin sits directly on (0, 0) with needle tip touching ground target */
.crosshair-needle-pin {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 34px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pin-hover 1.2s ease-in-out infinite alternate;
}

@keyframes pin-hover {
  0% { transform: translate(-50%, 0); }
  100% { transform: translate(-50%, -6px); }
}

.crosshair-svg {
  width: 34px;
  height: 42px;
  display: block;
}

.crosshair-pin-inner-icon {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.crosshair-tooltip {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}

/* =========================================================
   Map Legend & Symbol Guide Modal / Floating Drawer
   ========================================================= */
.legend-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

.legend-card {
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: scaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.legend-mobile-handle-bar {
  display: none;
  width: 100%;
  padding: 10px 0 2px 0;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  cursor: grab;
  touch-action: none;
}

.legend-handle-pill {
  width: 42px;
  height: 5px;
  border-radius: 9999px;
  background: var(--border);
  opacity: 0.85;
}

.legend-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
}

.legend-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.legend-header-icon {
  font-size: 1.5rem;
}

.legend-header-title h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.legend-header-title p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.legend-filter-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(37, 99, 235, 0.08);
  border-bottom: 1px solid rgba(37, 99, 235, 0.2);
  font-size: 0.82rem;
  color: var(--primary);
  font-weight: 600;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-status-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-clear-link {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.filter-clear-link:hover {
  color: #ef4444;
}

.filter-done-btn {
  background: var(--primary);
  color: #ffffff;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.filter-done-btn:hover {
  opacity: 0.9;
}

.legend-close-btn {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--muted);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.legend-close-btn:hover {
  background: var(--hover-bg);
  color: var(--fg);
}

.legend-body {
  padding: 16px 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.legend-section-title {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 800;
  margin: 0 0 10px;
}

.symbology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.symbology-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.symbology-sample {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.issue-sample { background: #ef4444; }
.amenity-sample { background: #3b82f6; }
.work-sample { background: #f59e0b; }
.info-sample { background: #8b5cf6; }

.stale-sample {
  background: #64748b;
  border-style: dashed;
}

.symbology-sample .sample-icon {
  transform: rotate(45deg);
  font-size: 0.85rem;
}

.user-loc-sample {
  width: 30px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sample-user-dot {
  width: 12px;
  height: 12px;
  background: #2563eb;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px #2563eb;
  z-index: 2;
}

.sample-user-pulse {
  position: absolute;
  width: 24px;
  height: 24px;
  background: rgba(37, 99, 235, 0.3);
  border-radius: 50%;
  animation: user-loc-pulse 2s infinite ease-out;
  z-index: 1;
}

.symbology-info {
  display: flex;
  flex-direction: column;
}

.symbology-info strong {
  font-size: 0.85rem;
  color: var(--fg);
}

.symbology-info span {
  font-size: 0.74rem;
  color: var(--muted);
}

.legend-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.legend-search-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.82rem;
  color: var(--fg);
  outline: none;
  width: 160px;
}

.legend-search-input:focus {
  border-color: var(--primary);
}

.legend-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.legend-tab {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.legend-tab:hover {
  background: var(--hover-bg);
  color: var(--fg);
}

.legend-tab.active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.legend-quick-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.legend-quick-btn {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.legend-quick-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
}

.legend-quick-btn.clear {
  color: #ef4444;
}

.legend-quick-btn.clear:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.legend-icons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.legend-icon-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.legend-icon-row:hover {
  background: var(--hover-bg);
}

.legend-icon-row.is-checked {
  background: rgba(37, 99, 235, 0.08);
  border-color: var(--primary);
}

.legend-item-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.legend-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.legend-icon-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.legend-icon-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-icon-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--fg);
}

.legend-severity-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
}

.legend-icon-desc {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   Floating Map Controls & FABs (Snapped to 20px right-rail grid)
   ========================================================= */
.floating-map-controls {
  position: absolute;
  right: 20px;
  bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 20;
}

.map-fab {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: all 0.15s ease;
  touch-action: manipulation;
  box-sizing: border-box;
}

.map-fab.locate,
.map-fab.tilt {
  width: 44px;
  height: 44px;
}

.map-fab:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.map-fab.add-report {
  height: 44px;
  padding: 0 20px;
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  border-radius: 9999px;
  gap: 7px;
  font-size: 0.92rem;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35);
}

.map-fab.add-report:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.add-plus {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}

.add-label {
  font-size: 0.9rem;
  font-weight: 700;
}

/* =========================================================
   MapLibre Controls (Top Right Desktop Grid)
   ========================================================= */
@media (min-width: 769px) {
  .maplibregl-ctrl-top-right {
    top: 70px !important;
    right: 20px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 15 !important;
  }

  .maplibregl-ctrl-group {
    background: var(--card-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .maplibregl-ctrl-group button {
    width: 38px !important;
    height: 38px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    transition: background-color 0.15s ease !important;
  }

  .maplibregl-ctrl-group button:last-child {
    border-bottom: none !important;
  }

  .maplibregl-ctrl-group button:hover {
    background: var(--hover-bg) !important;
  }

  [data-theme="dark"] .maplibregl-ctrl-icon,
  .dark .maplibregl-ctrl-icon {
    filter: invert(1) brightness(1.2);
  }
}

/* =========================================================
   Drawer / Side Panel Menu:
   - Laptop / Desktop (min-width: 769px): Docked left sidebar
   - Mobile (max-width: 768px): Bottom pull-up sheet (configured in media query)
   ========================================================= */

/* Desktop Docked Toggle Button */
.desktop-sidebar-toggle-btn {
  position: absolute;
  left: 20px;
  top: 16px;
  height: 42px;
  padding: 0 16px;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--border);
  color: var(--fg);
  border-radius: 9999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 26;
  font-size: 0.85rem;
  font-weight: 700;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
}

.desktop-sidebar-toggle-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.desktop-sidebar-toggle-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-24px);
}

.desktop-sidebar-toggle-btn .toggle-icon {
  font-size: 1rem;
}

.desktop-sidebar-toggle-btn .open-count-badge {
  background: rgba(37, 99, 235, 0.15);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.desktop-sidebar-toggle-btn .toggle-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fg);
}

/* Docked Left Sidebar on Desktop */
.bottom-sheet-drawer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: 100vh;
  height: 100dvh;
  background: var(--card-bg);
  color: var(--fg);
  border-radius: 0;
  border-right: 1.5px solid var(--border);
  border-top: none;
  border-bottom: none;
  border-left: none;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.18);
  z-index: 500;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.bottom-sheet-drawer.desktop-closed {
  transform: translateX(-100%);
  pointer-events: none;
}

.bottom-sheet-drawer.desktop-open {
  transform: translateX(0);
  pointer-events: auto;
}

.sheet-top-header {
  position: relative;
  width: 100%;
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  box-sizing: border-box;
  background: var(--card-bg);
  z-index: 10;
}

.desktop-sidebar-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg);
  display: inline-block;
}

.sheet-handle-zone {
  display: none;
}

.drawer-always-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s ease;
  position: static;
  transform: none;
}

.drawer-always-close-btn:hover {
  background: var(--hover-bg);
  color: var(--fg);
  border-color: var(--primary);
  transform: scale(1.08);
}

.sheet-handle-pill {
  width: 42px;
  height: 5px;
  background: var(--input-border);
  border-radius: 999px;
}

.sheet-list-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.sheet-peek-header {
  display: none; /* In desktop docked sidebar, top header displays title and count */
}

.peek-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fg);
}

.open-count-badge {
  background: rgba(37, 99, 235, 0.15);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.peek-toggle-indicator {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
}

.desktop-indicator {
  display: inline-flex;
  align-items: center;
}

.mobile-indicator {
  display: none !important;
}

.nearby-entities-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nearby-item-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.nearby-item-card:hover {
  border-color: var(--primary);
  background: var(--hover-bg);
}

.item-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.item-emoji {
  font-size: 1.3rem;
}

.item-content {
  flex: 1;
  min-width: 0;
}

.item-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.item-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--fg);
}

.status-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.status-tag.open {
  background: rgba(37, 99, 235, 0.15);
  color: var(--open);
}

.status-tag.stale {
  background: rgba(245, 158, 11, 0.15);
  color: var(--stale);
}

.status-tag.resolved {
  background: rgba(16, 185, 129, 0.15);
  color: var(--resolved);
}

.item-desc {
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-schedule-badge {
  font-size: 0.74rem;
  color: var(--primary);
  background: var(--muted-bg);
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 5px;
  display: inline-block;
  font-weight: 500;
}

/* =========================================================
   Entity Detail Sheet
   ========================================================= */
.entity-sheet-content {
  display: flex;
  flex-direction: column;
  padding: 4px 20px 24px;
  overflow-y: auto;
  gap: 14px;
  color: var(--fg);
  -webkit-overflow-scrolling: touch;
}

.entity-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.entity-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.entity-big-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.entity-category-pill {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.entity-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--fg);
}

.entity-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.status-pill.open {
  background: rgba(37, 99, 235, 0.15);
  color: var(--open);
}

.status-pill.stale {
  background: rgba(245, 158, 11, 0.15);
  color: var(--stale);
}

.status-pill.resolved {
  background: rgba(16, 185, 129, 0.15);
  color: var(--resolved);
}

.status-pill.info {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.sheet-close-btn {
  background: var(--input-bg);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.safety-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #ef4444;
}

.entity-meta-dates {
  background: var(--muted-bg);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
}

.meta-line {
  color: var(--fg);
  margin-bottom: 2px;
}

.meta-subline {
  color: var(--muted);
  font-size: 0.76rem;
}

.schedule-card {
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.schedule-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--fg);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.schedule-days-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schedule-day-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.day-name {
  font-weight: 700;
  width: 38px;
  color: var(--fg);
}

.day-time {
  font-weight: 600;
  color: var(--primary);
}

.day-median {
  font-size: 0.75rem;
  color: var(--muted);
}

.schedule-basis {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* Entity Address Bar */
.entity-address-bar {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: -6px;
  margin-bottom: 4px;
}

.entity-address-bar .address-pin-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.entity-address-bar .address-text {
  color: var(--fg);
}

/* Services / Facets Card (Plain text, clean badges) */
.entity-facets-card {
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.facets-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.facets-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.facet-text-chip {
  display: inline-flex;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* External Google Maps Navigation Button */
.entity-navigation-row {
  width: 100%;
}

.google-maps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: #2563eb;
  color: #ffffff !important;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
  transition: background 0.15s ease, transform 0.1s ease;
}

.google-maps-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.google-maps-btn .external-arrow {
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.9;
}

/* Reconciled Data Sources Provenance */
.entity-provenance-box {
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
}

.provenance-title {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}

.provenance-badges-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.provenance-chip {
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--fg);
  font-weight: 500;
  font-size: 0.76rem;
}

/* Entity Reported Attributes / Details Card */
.entity-reported-details-card {
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.details-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.details-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.coords-mini {
  font-size: 0.72rem;
  font-family: monospace;
  color: var(--muted);
  background: var(--card-bg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.details-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-attr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
}

.detail-attr-key {
  color: var(--muted);
  font-weight: 600;
}

.detail-attr-val {
  color: var(--fg);
  font-weight: 700;
}

.detail-attr-val.size-highlight {
  color: #ef4444;
}

.details-note-block {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--fg);
}

.details-note-block .note-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.details-note-block .note-text {
  font-style: italic;
}

/* Statistical Benchmark Card (Info / Rent) */
.benchmark-card {
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.benchmark-banner {
  display: flex;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  align-items: flex-start;
}

.benchmark-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.benchmark-banner strong {
  color: #8b5cf6;
  display: block;
  margin-bottom: 3px;
  font-size: 0.85rem;
}

.benchmark-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.benchmark-stat-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.benchmark-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.benchmark-stat-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--fg);
}

.benchmark-note {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.35;
  background: var(--card-bg);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.benchmark-cta-btn {
  background: #8b5cf6;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
  width: 100%;
}

.benchmark-cta-btn:hover {
  background: #7c3aed;
  transform: translateY(-1px);
}

.action-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.entity-action-btn {
  padding: 12px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.entity-action-btn.confirm {
  background: var(--primary);
  color: white;
}

.entity-action-btn.confirm:hover {
  background: var(--primary-hover);
}

.entity-action-btn.resolve {
  background: #10b981;
  color: white;
}

.entity-action-btn.resolve:hover {
  background: #059669;
}

.action-feedback-toast {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.comment-input-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-textarea {
  width: 100%;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--fg);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.85rem;
  resize: vertical;
  outline: none;
}

.comment-textarea:focus {
  border-color: var(--primary);
}

.toggle-note-btn,
.share-entity-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.toggle-note-btn:hover,
.share-entity-btn:hover {
  background: var(--hover-bg);
}

.timeline-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fg);
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-entry {
  display: flex;
  gap: 10px;
  font-size: 0.8rem;
  padding: 8px 12px;
  background: var(--muted-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.entry-dot {
  font-size: 0.9rem;
}

.entry-comment {
  font-style: italic;
  color: var(--fg);
  margin-top: 2px;
}

.entry-time {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Sheet Footer Utility Actions */
.sheet-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}

.utility-btn {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.utility-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
}

.utility-btn.note-btn {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.3);
  color: var(--primary);
  font-weight: 700;
}

.utility-btn.note-btn:hover {
  background: rgba(37, 99, 235, 0.15);
  border-color: var(--primary);
}

.utility-btn.flag {
  color: var(--muted);
  font-size: 0.78rem;
}

.utility-btn.flag:hover {
  color: #ef4444;
  border-color: #ef4444;
}

.utility-btn.mod-feedback-btn {
  color: var(--fg);
  font-size: 0.8rem;
}

.utility-btn.mod-feedback-btn:hover {
  border-color: var(--primary);
  background: var(--hover-bg);
}

.utility-btn.mod-feedback-btn.sent {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}

.mod-thumb-hint {
  font-size: 0.72rem;
  opacity: 0.85;
  background: var(--muted-bg);
  padding: 1px 4px;
  border-radius: 4px;
}

.comment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.comment-cancel-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
}

.comment-cancel-btn:hover {
  background: var(--hover-bg);
  color: var(--fg);
}

.comment-post-btn {
  background: var(--primary);
  border: none;
  color: white;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.comment-post-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.comment-post-btn:not(:disabled):hover {
  filter: brightness(1.1);
}

/* =========================================================
   Add Flow & Candidate Modals
   ========================================================= */
/* =========================================================
   Google Maps Precision Pin & Marker Styles (§14, §20)
   ========================================================= */
.google-pin-marker {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  user-select: none;
  line-height: 0;
  will-change: transform;
  pointer-events: auto;
}

.google-pin-marker.selected {
  z-index: 25;
}

.google-draft-pin-marker {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: grab;
  user-select: none;
  line-height: 0;
  z-index: 1000;
  will-change: transform;
  pointer-events: auto;
}

.google-draft-pin-marker:active {
  cursor: grabbing;
}

.google-pin-svg {
  filter: drop-shadow(0 2.5px 5px rgba(0, 0, 0, 0.35));
  display: block;
  overflow: visible;
}

.google-pin-marker:hover .google-pin-svg {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

.google-pin-warning-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.8rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.google-pin-warning-badge.compact {
  top: -6px;
  right: -6px;
  font-size: 0.65rem;
}

.google-pin-dot-svg {
  filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, 0.4));
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.google-pin-marker.tier-dot:hover .google-pin-dot-svg {
  transform: scale(1.4);
}

.google-pin-svg-compact {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.google-pin-marker.tier-compact:hover .google-pin-svg-compact {
  transform: scale(1.15);
}

.google-pin-pulse {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 14px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  background: rgba(37, 99, 235, 0.5);
  animation: googlePinPulse 1.8s infinite ease-out;
  pointer-events: none;
}

@keyframes googlePinPulse {
  0% {
    transform: translate(-50%, 50%) scale(0.8);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, 50%) scale(1.9);
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, 50%) scale(0.8);
    opacity: 0.9;
  }
}

/* =========================================================
   Unified Single Dialogue Box for Reporting (§15, §21, §22)
   ========================================================= */
.unified-dialogue-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1000;
  pointer-events: none;
  display: flex;
}

/* On Desktop: Docked floating panel on the right side so pin is fully visible on the map */
@media (min-width: 641px) {
  .unified-dialogue-overlay {
    justify-content: flex-end;
    align-items: stretch;
    padding: 72px 20px 20px 20px;
  }

  .unified-dialogue-card {
    pointer-events: auto;
    width: 440px;
    max-width: 440px;
    height: 100%;
    max-height: calc(100vh - 92px);
    background: var(--card-bg);
    color: var(--fg);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    animation: slideInRight 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* On Mobile: Bottom sheet covering bottom 50vh */
@media (max-width: 640px) {
  .unified-dialogue-overlay {
    background: transparent;
    pointer-events: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .unified-dialogue-card,
  .add-flow-card.unified-dialogue-card {
    pointer-events: auto;
    width: 100%;
    max-width: 100%;
    height: 50vh;
    max-height: 50vh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--fg);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: slideUpBottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideUpBottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.unified-dialogue-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.unified-dialogue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.dialogue-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dialogue-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--hover-bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.dialogue-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--fg);
  line-height: 1.2;
}

.dialogue-coords-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.dialogue-coords-badge {
  font-size: 0.75rem;
  font-family: monospace;
  font-weight: 600;
  color: var(--muted);
}

.btn-use-location-inline {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: var(--primary);
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-use-location-inline:hover {
  background: rgba(37, 99, 235, 0.2);
}

/* Scrollable Body */
.unified-dialogue-body {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

.unified-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.form-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-step-title {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Category Segmented Tabs */
.unified-category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 4px;
  flex-shrink: 0;
}

.unified-category-tabs::-webkit-scrollbar {
  display: none;
}

.unified-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  min-height: 38px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 9999px;
  border: 1.5px solid var(--border);
  background: var(--input-bg);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.unified-cat-tab:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.unified-cat-tab.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.unified-cat-tab .tab-label {
  display: inline-block;
  line-height: 1;
}

.unified-cat-tab .tab-count {
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.1);
  line-height: 1;
}

.unified-cat-tab.active .tab-count {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

/* Sub-type Search & Chips Grid */
.type-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  min-height: 38px;
  height: 38px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.type-search-bar:focus-within {
  border-color: var(--primary);
}

.search-icon {
  font-size: 0.85rem;
  opacity: 0.6;
}

.type-search-input {
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 0.84rem;
  flex: 1;
  outline: none;
}

.search-clear-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0 4px;
}

.unified-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  max-height: 165px;
  min-height: 90px;
  overflow-y: auto;
  padding: 2px;
  flex-shrink: 0;
}

.unified-type-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 42px;
  box-sizing: border-box;
  border-radius: 10px;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  color: var(--fg);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.unified-type-chip:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
}

.unified-type-chip.selected {
  background: rgba(37, 99, 235, 0.12);
  border-color: var(--primary);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.unified-type-chip .chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.unified-type-chip .chip-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.unified-type-chip .chip-warn {
  font-size: 0.75rem;
}

/* Dynamic Config Box */
.unified-config-box {
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.drag-tip-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--fg);
  flex-shrink: 0;
}

/* Unified Footer */
.unified-dialogue-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.unified-dialogue-footer .btn-cancel {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.unified-dialogue-footer .btn-cancel:hover {
  background: var(--hover-bg);
  color: var(--fg);
}

.unified-save-btn {
  background: var(--primary);
  color: #ffffff;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.unified-save-btn:hover {
  filter: brightness(1.08);
}

.unified-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Location Locked Banner inside Step 3 */
.location-locked-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.locked-icon {
  font-size: 1.2rem;
}

.locked-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.locked-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.locked-coords {
  font-size: 0.8rem;
  font-family: monospace;
  color: var(--fg);
  font-weight: 600;
}

.btn-change-pin {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-change-pin:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: var(--primary);
}

/* Rent Form Specific Fields */
.rent-form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-label.required::after {
  content: ' *';
  color: #ef4444;
}

.currency-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.currency-symbol {
  position: absolute;
  left: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  pointer-events: none;
}

.currency-input {
  padding-left: 32px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  border-radius: 8px;
  font-size: 0.88rem;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.add-flow-header,
.duplicate-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--card-header);
}

.duplicate-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 60 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.duplicate-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.duplicate-header-title h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
}

.duplicate-icon {
  font-size: 1.3rem;
}

.duplicate-picker-body {
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.duplicate-picker-desc {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}

.candidates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.candidate-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.15s ease;
}

.candidate-card:hover {
  border-color: var(--primary);
}

.candidate-dist {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg);
}

.candidate-reporters {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}

.btn-same-one {
  background: #10b981;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: filter 0.15s ease;
}

.btn-same-one:hover {
  filter: brightness(1.1);
}

.duplicate-actions-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.btn-different-one {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  color: var(--fg);
  padding: 11px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.btn-different-one:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--hover-bg);
}

.duplicate-actions-row .btn-cancel {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px;
  text-align: center;
}

.duplicate-actions-row .btn-cancel:hover {
  color: var(--fg);
}

.step-indicator {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fg);
}

.close-flow-btn {
  background: var(--input-bg);
  border: none;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.step-content {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}

.step-content.step-1 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px calc(24px + env(safe-area-inset-bottom, 0px)) 18px;
  gap: 14px;
}

/* Category Tabs Bar - Pinned at top of Step 1 */
.type-category-bar {
  flex-shrink: 0;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  z-index: 5;
}

.type-category-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.type-category-pills::-webkit-scrollbar {
  display: none;
}

.cat-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
  touch-action: manipulation;
  flex: 1 0 auto;
  justify-content: center;
}

.cat-pill-btn:hover {
  background: var(--hover-bg);
  color: var(--fg);
  border-color: var(--fg);
}

.cat-pill-btn.active {
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.cat-pill-count {
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 9999px;
  background: var(--border);
  color: var(--fg);
  font-weight: 700;
}

.cat-pill-btn.active .cat-pill-count {
  background: currentColor;
  color: var(--card-bg);
}

.type-category-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  overflow-x: auto;
}

.cat-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.cat-tab-btn.active {
  color: var(--fg);
}

.type-selection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.type-card-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  color: var(--fg);
  touch-action: manipulation;
}

.type-card-btn:hover {
  border-color: var(--primary);
  background: var(--hover-bg);
}

.type-card-btn.selected {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.15);
}

.type-card-icon {
  font-size: 1.4rem;
}

.type-card-name {
  font-size: 0.84rem;
  font-weight: 700;
  flex: 1;
}

.step-2-instructions,
.place-instructions {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--muted-bg);
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.84rem;
}

.place-emoji {
  font-size: 1.8rem;
  line-height: 1;
}

.place-text {
  flex: 1;
}

.place-text strong {
  display: block;
  font-size: 0.92rem;
  color: var(--fg);
  margin-bottom: 2px;
}

.place-text p {
  margin: 0 0 8px 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}

.coords-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-family: monospace;
  color: var(--primary);
  font-weight: 700;
}

.place-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.place-actions-row .btn-back {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background-color 0.15s ease;
}

.place-actions-row .btn-use-location {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.place-actions-row .btn-use-location:hover,
.place-actions-row .btn-back:hover {
  background: var(--hover-bg);
}

.place-actions-row .btn-primary {
  flex: 1;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.place-actions-row .btn-primary:hover {
  background: var(--primary-hover);
}

/* Choice Chips for Since When and Specific Attributes */
.chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.since-chip {
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.since-chip:hover {
  border-color: var(--primary);
  color: var(--fg);
  background: var(--hover-bg);
}

.since-chip.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.instr-icon {
  font-size: 1.5rem;
}

.flow-primary-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.15s ease;
  touch-action: manipulation;
}

.flow-primary-btn:hover {
  background: var(--primary-hover);
}

.flow-secondary-btn {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.flow-secondary-btn:hover {
  background: var(--hover-bg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fg);
}

.option-chips-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.option-chip {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.option-chip.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.form-input-text {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  padding: 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  outline: none;
}

.form-input-text:focus {
  border-color: var(--primary);
}



/* =========================================================
   Responsive Mobile Adjustments
   ========================================================= */
@media (max-width: 768px) {
  /* Hide MapLibre default top-right controls to avoid clashing with top bar */
  .maplibregl-ctrl-top-right {
    display: none !important;
  }

  .floating-top-container {
    padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 4px;
    gap: 6px;
    width: 100%;
  }

  .floating-top-row {
    gap: 6px;
    width: 100%;
    max-width: 100%;
  }

  .floating-search-wrapper {
    flex: 1;
    min-width: 0;
  }

  .floating-search-box {
    padding: 6px 12px;
    gap: 6px;
  }

  .floating-search-input {
    font-size: 16px; /* Prevents auto-zoom in iOS Safari */
  }

  .floating-controls-group {
    gap: 6px;
    flex-shrink: 0;
  }

  .floating-ctrl-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  .ctrl-label {
    display: none !important; /* Clean circular icon buttons on mobile */
  }

  .floating-chips-row {
    display: flex;
    align-items: center;
    justify-content: safe center;
    padding: 2px 6px 6px;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
    scroll-padding: 0 6px;
  }

  .floating-chips-row::-webkit-scrollbar {
    display: none;
  }

  .floating-chip-btn {
    height: 30px;
    padding: 0 8px;
    gap: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    flex-shrink: 0;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .chip-icon {
    font-size: 0.82rem;
    line-height: 1;
  }

  .chip-label {
    font-size: 0.74rem;
    white-space: nowrap;
  }

  /* Hide desktop-only elements on mobile */
  .desktop-sidebar-toggle-btn {
    display: none !important;
  }

  .desktop-sidebar-title {
    display: none !important;
  }

  .sheet-peek-header {
    display: flex !important;
  }

  /* Bottom sheet stays as native bottom pull-up sheet on phones */
  .bottom-sheet-drawer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
    border-top: 1.5px solid var(--border);
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
    z-index: 500 !important;
    padding-bottom: env(safe-area-inset-bottom);
    transition: height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: none !important;
    pointer-events: auto !important;
  }

  .bottom-sheet-drawer.peek {
    height: calc(265px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(265px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    max-height: unset;
  }

  .bottom-sheet-drawer.half,
  .bottom-sheet-drawer.has-selected-entity {
    height: calc(58vh + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(480px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(88dvh + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .bottom-sheet-drawer.full {
    height: calc(100dvh - 48px) !important;
    max-height: unset;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .sheet-top-header {
    position: relative;
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 44px 2px 14px;
    box-sizing: border-box;
    top: auto;
    right: auto;
  }

  .sheet-handle-zone {
    display: flex;
    width: 100%;
    padding: 6px 0;
    justify-content: center;
    align-items: center;
    cursor: grab;
    touch-action: pan-y;
  }

  .sheet-handle-pill {
    width: 42px;
    height: 5px;
    background: var(--input-border);
    border-radius: 999px;
  }

  .drawer-always-close-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    z-index: 10;
  }

  .sheet-peek-header {
    padding: 0 18px 8px;
    min-height: unset;
    cursor: pointer;
  }

  .desktop-indicator {
    display: none !important;
  }

  .mobile-indicator {
    display: inline-flex !important;
  }

  .floating-map-controls {
    bottom: calc(72px + env(safe-area-inset-bottom));
    right: 12px;
    z-index: 10;
  }

  .map-footer-triggers,
  .map-legal-trigger {
    right: auto !important;
    left: 12px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  /* Mobile Legend Drawer Bottom Sheet */
  .legend-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .legend-card.mobile-drawer-sheet {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    max-height: 86vh !important;
    animation: slide-up-mobile 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  .legend-mobile-handle-bar {
    display: flex !important;
  }
}


/* Ultra-compact screen adjustments (width <= 360px) */
@media (max-width: 360px) {
  .floating-chips-row {
    padding: 2px 4px 6px;
    gap: 4px;
  }

  .floating-chip-btn {
    height: 28px;
    padding: 0 6px;
    gap: 3px;
    font-size: 0.70rem;
  }

  .chip-icon {
    font-size: 0.76rem;
  }

  .chip-label {
    font-size: 0.70rem;
  }
}

/* Specific Phone Optimizations (width < 640px) */
@media (max-width: 640px) {
  .add-flow-overlay,
  .duplicate-picker-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .add-flow-card:not(.unified-dialogue-card),
  .duplicate-picker-card {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
    padding-bottom: 0;
    animation: slide-up-mobile 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  @keyframes slide-up-mobile {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .type-category-bar {
    padding: 8px 12px;
  }

  .type-category-pills {
    gap: 6px;
  }

  .cat-pill-btn {
    padding: 6px 10px;
    font-size: 0.78rem;
    gap: 5px;
  }

  .step-content.step-1 {
    padding: 12px 14px calc(28px + env(safe-area-inset-bottom, 0px)) 14px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .type-selection-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .type-card-btn {
    padding: 10px 10px;
    gap: 8px;
    min-height: 48px;
  }

  .type-card-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
  }

  .type-card-name {
    font-size: 0.8rem;
    line-height: 1.25;
    font-weight: 700;
  }

  .form-input-text,
  .comment-textarea {
    font-size: 16px;
  }
}

/* =========================================================
   Share Location Modal & Buttons
   ========================================================= */
.sheet-share-top-btn {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.sheet-share-top-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
  color: var(--primary);
}

.sheet-close-top-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: 2px;
}

.sheet-close-top-btn:hover {
  background: var(--hover-bg);
  color: var(--fg);
  border-color: var(--primary);
  transform: scale(1.08);
}

.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.share-modal-card {
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modal-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--card-header);
}

.share-modal-title {
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
}

.share-modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.share-entity-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.share-preview-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.share-preview-info {
  flex: 1;
}

.share-preview-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--fg);
}

.share-preview-coords {
  font-size: 0.76rem;
  color: var(--muted);
  font-family: var(--mono);
  margin-top: 2px;
}

.share-link-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.share-link-input {
  flex: 1;
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--fg);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: var(--mono);
  outline: none;
  text-overflow: ellipsis;
}

.share-copy-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.share-copy-btn:hover {
  background: var(--primary-hover);
}

.share-copy-btn.copied {
  background: #10b981;
}

.share-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.share-option-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.share-option-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.share-option-btn.whatsapp:hover {
  border-color: #25d366;
  color: #25d366;
}

.share-option-btn.gmaps:hover {
  border-color: #ea4335;
  color: #ea4335;
}

@media (max-width: 640px) {
  .add-flow-overlay.step-1-active,
  .add-flow-overlay.step-2-active {
    padding: 0 !important;
  }

  .add-flow-card.step-1-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    animation: slide-up-mobile 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .add-flow-card.step-2-card {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 86vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    animation: slide-up-mobile 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .step-content.step-2-details .place-actions-row {
    margin-bottom: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .place-actions-row {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .share-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .share-modal-card {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    animation: slide-up-mobile 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

}

/* =========================================================
   Legal & Privacy Disclaimers UI & Map Footer Triggers
   ========================================================= */
.map-footer-triggers {
  position: absolute;
  right: 12px;
  bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-legal-trigger,
.map-footer-btn {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.map-legal-trigger:hover,
.map-footer-btn:hover {
  background: var(--hover-bg);
  color: var(--fg);
  border-color: var(--primary);
}

.map-footer-btn.feedback-trigger {
  color: var(--fg);
  font-weight: 700;
}

.map-footer-btn.feedback-trigger:hover {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
}


/* Global Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeInOverlay 0.2s ease-out;
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-card {
  position: relative;
  background: var(--card-bg);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  max-width: 620px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100000;
}

/* Legal Modal Dialog */
.legal-modal-card {
  max-width: 620px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.legal-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--fg);
}

.modal-subtitle {
  font-size: 0.76rem;
  color: var(--muted);
}

.modal-close-btn {
  background: var(--input-bg);
  border: none;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  background: var(--hover-bg);
  color: var(--fg);
}

.legal-tabs-row {
  display: flex;
  gap: 8px;
  padding: 12px 20px 0;
  border-bottom: 1px solid var(--border);
  background: var(--muted-bg);
  overflow-x: auto;
}

.legal-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 8px 12px 10px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.legal-tab-btn:hover {
  color: var(--fg);
}

.legal-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.legal-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}

.legal-section h4 {
  margin: 16px 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fg);
}

.legal-section h4:first-child {
  margin-top: 0;
}

.legal-section p,
.legal-section li {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 8px;
}

.legal-section ul {
  padding-left: 20px;
  margin: 0 0 10px;
}

.legal-alert-box {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 0.84rem;
  line-height: 1.45;
}

.legal-alert-box.warning {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.legal-alert-box.warning p {
  color: #ef4444;
  margin: 4px 0 0;
}

.legal-alert-box.info {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: var(--primary);
}

.legal-alert-box.info p {
  color: var(--fg);
  margin: 4px 0 0;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--muted-bg);
}

.legal-footer-credit {
  font-size: 0.74rem;
  color: var(--muted);
}

.btn-primary-close {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-primary-close:hover {
  background: var(--primary-hover);
}

/* =========================================================
   Moderator & Admin Console Styles (§14.6)
   ========================================================= */
.floating-ctrl-btn.mod-btn {
  border-color: rgba(239, 68, 68, 0.4);
}

.floating-ctrl-btn.mod-btn:hover {
  border-color: rgba(239, 68, 68, 0.8);
  background: rgba(239, 68, 68, 0.08);
}

.mod-modal-card {
  max-width: 680px;
  width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.mod-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

.mod-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mod-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mod-section-header h4,
.mod-section h4 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--fg);
}

.mod-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.mod-refresh-btn {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mod-refresh-btn:hover {
  background: var(--hover-bg);
  border-color: var(--primary);
}

.mod-feedback-toast {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}

.mod-switches-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mod-switch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.switch-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.switch-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--fg);
}

.switch-status-pill {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
}

.switch-status-pill.enabled {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.switch-status-pill.disabled {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.switch-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}

.btn-toggle-switch {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-toggle-switch.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-toggle-switch.danger:hover {
  background: #ef4444;
  color: white;
}

.btn-toggle-switch.success {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.btn-toggle-switch.success:hover {
  background: #10b981;
  color: white;
}

.mod-banner-card {
  padding: 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banner-input-row {
  display: flex;
  gap: 8px;
}

.mod-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  font-size: 0.88rem;
  outline: none;
}

.mod-input:focus {
  border-color: var(--primary);
}

.btn-mod-primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn-mod-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-mod-secondary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-mod-secondary:hover {
  background: var(--hover-bg);
  color: var(--fg);
}

.btn-mod-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-mod-danger:hover {
  background: #ef4444;
  color: white;
}

.active-banner-preview {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--fg);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
}

.user-lookup-row {
  display: flex;
  gap: 8px;
}

.user-detail-card {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.user-handle {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--fg);
}

.user-id-code {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--muted);
}

.user-role-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--border);
  color: var(--fg);
}

.user-role-badge.moderator,
.user-role-badge.admin {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.user-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.stat-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
}

.stat-val {
  font-size: 1rem;
  font-weight: 800;
  color: var(--fg);
}

.banned-status-banner {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
}

.quick-entity-select-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quick-label {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 600;
}

.quick-entity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-entity-chip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-entity-chip:hover,
.quick-entity-chip.active {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
}

.recompute-result-card {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recompute-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recompute-json {
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  color: var(--fg);
}

.queue-empty-state {
  padding: 24px;
  text-align: center;
  background: var(--input-bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.88rem;
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue-item-card {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flag-reason-tag {
  font-weight: 700;
  font-size: 0.82rem;
  color: #ef4444;
}

.queue-time {
  font-size: 0.72rem;
  color: var(--muted);
}

.queue-item-body {
  font-size: 0.82rem;
  color: var(--fg);
}

.queue-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* =========================================================
   Moderator Feedback Modal & Controls
   ========================================================= */
.mod-feedback-overlay {
  z-index: 100010 !important;
}

.mod-feedback-card {
  max-width: 520px;
  width: 92vw;
  border-radius: 18px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mod-feedback-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

.mod-feedback-entity-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--muted-bg);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.mod-feedback-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mod-vote-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg);
}

.mod-vote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mod-vote-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--input-bg);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--fg);
}

.mod-vote-card:hover {
  transform: translateY(-1px);
}

.mod-vote-card.vote-up:hover,
.mod-vote-card.vote-up.active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15);
}

.mod-vote-card.vote-down:hover,
.mod-vote-card.vote-down.active {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.15);
}

.vote-emoji {
  font-size: 1.5rem;
  line-height: 1;
}

.vote-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vote-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--fg);
}

.vote-subtitle {
  font-size: 0.72rem;
  color: var(--muted);
}

.mod-reason-tags-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.04);
  border-radius: 10px;
  border: 1px dashed rgba(239, 68, 68, 0.25);
  animation: fadeInOverlay 0.15s ease-out;
}

.mod-reason-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ef4444;
}

.mod-reason-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mod-reason-pill {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.12s ease;
}

.mod-reason-pill:hover,
.mod-reason-pill.active {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.mod-comment-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mod-comment-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mod-comment-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fg);
}

.optional-hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.75rem;
}

.mod-char-count {
  font-size: 0.72rem;
  color: var(--muted);
}

.mod-textarea {
  width: 100%;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--fg);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  min-height: 70px;
  box-sizing: border-box;
}

.mod-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.mod-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.mod-feedback-submit-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.mod-feedback-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mod-feedback-submit-btn:not(:disabled):hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.mod-feedback-success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  gap: 10px;
}

.mod-success-badge {
  font-size: 2.5rem;
  line-height: 1;
}

.mod-feedback-success-state h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #10b981;
}

.mod-feedback-success-state p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  max-width: 360px;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .mod-vote-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Generic Feedback Modal Styles (Feedback to Developer)
   ========================================================= */
.generic-feedback-overlay {
  z-index: 100020 !important;
}

.generic-feedback-card {
  max-width: 560px;
  width: 92vw;
  border-radius: 20px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.feedback-modal-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.generic-feedback-body {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

.generic-feedback-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-vote-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feedback-section-heading {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg);
}

.feedback-vote-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.feedback-thumb-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--input-bg);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--fg);
}

.feedback-thumb-card:hover {
  transform: translateY(-1px);
}

.feedback-thumb-card.up:hover,
.feedback-thumb-card.up.selected {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.18);
}

.feedback-thumb-card.down:hover,
.feedback-thumb-card.down.selected {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.18);
}

.thumb-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.thumb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.thumb-main {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg);
}

.thumb-sub {
  font-size: 0.72rem;
  color: var(--muted);
}

.feedback-tags-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeInOverlay 0.15s ease-out;
}

.feedback-tags-heading {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.feedback-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feedback-tag-chip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.12s ease;
}

.feedback-tag-chip:hover {
  border-color: var(--primary);
  background: var(--hover-bg);
}

.feedback-tag-chip.active.up {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.feedback-tag-chip.active.down {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.feedback-comment-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feedback-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedback-comment-label,
.feedback-contact-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fg);
}

.feedback-optional-badge {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}

.feedback-char-count {
  font-size: 0.72rem;
  color: var(--muted);
}

.generic-feedback-textarea {
  width: 100%;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--fg);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  min-height: 80px;
  box-sizing: border-box;
}

.generic-feedback-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.feedback-contact-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.generic-feedback-contact-input {
  width: 100%;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--fg);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  outline: none;
  box-sizing: border-box;
}

.generic-feedback-contact-input:focus {
  border-color: var(--primary);
}

.generic-feedback-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.generic-feedback-submit-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.generic-feedback-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.generic-feedback-submit-btn:not(:disabled):hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.feedback-success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 16px;
  text-align: center;
  gap: 12px;
}

.feedback-success-emoji {
  font-size: 3rem;
  line-height: 1;
}

.feedback-success-state h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #10b981;
}

.feedback-success-state p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 400px;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .feedback-vote-cards-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Report Thank You Blurb with Cat Thumbs Up
   ========================================================= */
.thank-you-blurb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 100040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeInOverlay 0.2s ease-out;
}

.thank-you-blurb-card {
  position: relative;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  max-width: 420px;
  width: 90vw;
  padding: 26px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  animation: blurb-pop-bounce 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes blurb-pop-bounce {
  0% {
    transform: scale(0.85) translateY(16px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.blurb-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.15s ease;
}

.blurb-close-btn:hover {
  background: var(--hover-bg);
  color: var(--fg);
}

.blurb-icon-badge {
  font-size: 2.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blurb-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.blurb-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--fg);
  margin: 0;
}

.blurb-message {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.blurb-action-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 4px;
}

.blurb-action-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

/* =========================================================
   Static Full-Page Maintenance Screen (Matching bg-sample design)
   ========================================================= */
.maintenance-page {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #071E36;
  color: #F7F4EC;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: clamp(2.5rem, 8vw, 6rem) clamp(1.75rem, 7vw, 5rem);
  z-index: 1000000;
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
}

.maintenance-top-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 900px;
}

.maintenance-chai-heading {
  margin: 0;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.8rem, 8.5vw, 6.2rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #FFC72C;
}

.maintenance-custom-message {
  margin: 1.5rem 0 0 0;
  text-align: left;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  color: #F7F4EC;
  line-height: 1.5;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 10px 16px;
}

.maintenance-bottom-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  align-self: flex-end;
}

.maintenance-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.maintenance-brand-wordmark .wordmark-text {
  font-size: clamp(2.2rem, 7vw, 4.5rem) !important;
  font-weight: 900 !important;
  color: #F7F4EC !important;
  letter-spacing: -0.02em !important;
}

.maintenance-brand-slogan {
  text-align: right;
  margin-top: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, 3vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #F7F4EC;
}

@media (max-width: 640px) {
  .maintenance-page {
    padding: 2.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px)) 1.5rem;
  }
}











/* =========================================================
   Redesigned Top Bar & Triple-Purpose Hamburger Drawer
   ========================================================= */

.top-nav-root {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  pointer-events: none;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Active Filter Floating Pill */
.active-filter-floating-bar {
  pointer-events: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  color: var(--fg);
  border: 1.5px solid var(--primary);
  border-radius: 9999px;
  padding: 6px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  font-size: 0.82rem;
  animation: filterPillSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes filterPillSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.filter-pill-label {
  color: var(--fg);
}

.filter-pill-label strong {
  color: var(--primary);
}

.filter-pill-clear-btn {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: none;
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s ease, transform 0.1s ease;
}

.filter-pill-clear-btn:hover {
  background: rgba(239, 68, 68, 0.22);
  transform: scale(1.05);
}

.top-center-spacer {
  flex: 1;
  pointer-events: none;
}

/* Floating circle button for Hamburger & Search */
.top-circle-btn {
  pointer-events: auto;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--fg);
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.top-circle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  border-color: var(--primary);
}

.top-circle-btn:active {
  transform: translateY(0) scale(0.95);
}

.top-circle-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.hamburger-icon {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 700;
}

.search-icon-symbol {
  font-size: 1.05rem;
  line-height: 1;
}

/* Badge on Hamburger */
.top-circle-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9999px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.top-filter-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid var(--card-bg);
}

/* Expandable Search Input */
.top-search-container {
  pointer-events: auto;
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.top-search-expanded {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  color: var(--fg);
  border: 1.5px solid var(--border);
  border-radius: 9999px;
  padding: 0 8px 0 14px;
  height: 44px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  width: min(340px, calc(100vw - 90px));
  animation: searchExpand 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes searchExpand {
  from { width: 44px; opacity: 0; }
  to { width: min(340px, calc(100vw - 90px)); opacity: 1; }
}

.top-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 0.88rem;
  outline: none;
  min-width: 0;
}

.search-inner-clear,
.top-search-close-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.top-search-close-btn:hover {
  background: var(--hover-bg);
  color: var(--fg);
}

/* Autocomplete Dropdown under search */
.top-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

.top-search-result-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  font-size: 0.84rem;
  line-height: 1.35;
  transition: background 0.15s ease;
}

.top-search-result-item:hover {
  background: var(--hover-bg);
}

.top-search-result-item:last-child {
  border-bottom: none;
}

/* Drawer Backdrop & Panel */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  animation: drawerFadeIn 0.2s ease-out;
}

@keyframes drawerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.drawer-panel {
  width: 400px;
  max-width: 90vw;
  height: 100%;
  background: var(--card-bg);
  color: var(--fg);
  border-right: 1px solid var(--border);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: slideDrawerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes slideDrawerIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.drawer-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.drawer-header-icon {
  font-size: 1.5rem;
}

.drawer-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
  color: var(--fg);
  line-height: 1.2;
}

.drawer-subtitle {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 2px 0 0;
  font-weight: 600;
}

.drawer-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--hover-bg);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.15s ease;
}

.drawer-close-btn:hover {
  background: var(--card-bg);
  color: var(--fg);
  border-color: var(--primary);
}

.drawer-filter-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(37, 99, 235, 0.08);
  border-bottom: 1px solid rgba(37, 99, 235, 0.2);
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 600;
  flex-shrink: 0;
}

.drawer-clear-filter-btn {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.drawer-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 8px;
  padding: 0 12px;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  height: 36px;
  flex-shrink: 0;
}

.drawer-search-wrap:focus-within {
  border-color: var(--primary);
}

.drawer-search-icon {
  font-size: 0.85rem;
  opacity: 0.6;
}

.drawer-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 0.82rem;
  outline: none;
}

.drawer-search-clear {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
}

.drawer-category-pills {
  display: flex;
  gap: 6px;
  padding: 4px 16px 10px;
  overflow-x: auto;
  flex-shrink: 0;
}

.drawer-cat-pill {
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.drawer-cat-pill.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.drawer-content-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-overflow-scrolling: touch;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.drawer-section-header h3 {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0;
}

.section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.section-dot.active-dot {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.section-dot.zero-dot {
  background: var(--muted);
  opacity: 0.5;
}

.section-action-link {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.drawer-type-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-type-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  transition: all 0.15s ease;
  overflow: hidden;
}

.drawer-type-item:hover {
  border-color: rgba(37, 99, 235, 0.4);
}

.drawer-type-item.is-filtered {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.04);
}

.drawer-type-item.inactive-item {
  opacity: 0.75;
}

.drawer-type-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.drawer-type-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.drawer-type-info {
  flex: 1;
  min-width: 0;
}

.drawer-type-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.drawer-type-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg);
}

.drawer-count-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  min-width: 20px;
  text-align: center;
}

.drawer-count-badge.active {
  background: var(--primary);
  color: #ffffff;
}

.drawer-count-badge.zero {
  background: var(--hover-bg);
  color: var(--muted);
  border: 1px solid var(--border);
}

.drawer-type-category {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
}

.drawer-type-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.drawer-filter-toggle {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--input-bg);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawer-filter-toggle.checked {
  background: var(--primary);
  border-color: var(--primary);
}

.drawer-expand-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.65rem;
  padding: 4px;
  transition: transform 0.18s ease;
}

.drawer-expand-btn.open {
  transform: rotate(180deg);
}

/* Sub-list of individual entities */
.drawer-entity-sublist {
  background: var(--hover-bg);
  border-top: 1px solid var(--border);
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-entity-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawer-entity-card:hover {
  border-color: var(--primary);
  transform: translateX(2px);
}

.entity-card-main {
  display: flex;
  align-items: center;
  gap: 6px;
}

.entity-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
}

.entity-status-dot[data-status="stale"] {
  background: #d97706;
}

.entity-status-dot[data-status="resolved"] {
  background: #6b7280;
}

.entity-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--muted);
}

.entity-view-link {
  color: var(--primary);
  font-weight: 700;
}

.drawer-empty-hint {
  padding: 16px;
  background: var(--hover-bg);
  border: 1px dashed var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.drawer-empty-hint .sub-hint {
  font-size: 0.72rem;
  opacity: 0.8;
}


/* =========================================================
   APNI.CITY REDESIGN SYSTEM - DESKTOP & MOBILE STYLES
   ========================================================= */

/* Brand & Global Variables */
:root {
  --brand-navy: #071E36;
  --surface-navy: #0B2545;
  --surface-card: #112E51;
  --surface-hover: #163A64;
  --border-navy: #183C66;
  --border-subtle: #123052;
  
  --brand-yellow: #FFC72C;
  --brand-yellow-hover: #E5B224;
  --brand-yellow-text: #071E36;

  --text-cream: #F7F4EC;
  --text-muted: #94A9C0;
  --text-dim: #647B95;

  --cat-issue: #FF5B5F;
  --cat-amenity: #2F8CFF;
  --cat-work: #35D07F;
  --cat-rent: #A65CFF;
}

/* ---------------------------------------------------------
   1. DESKTOP SIDEBAR NAVIGATION
   --------------------------------------------------------- */
.desktop-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    height: 100%;
    background-color: var(--brand-navy);
    border-right: 1px solid var(--border-navy);
    padding: 24px 16px;
    flex-shrink: 0;
    z-index: 30;
    box-sizing: border-box;
  }
}

.sidebar-brand-wrap {
  margin-bottom: 32px;
  padding: 6px 12px;
}

.sidebar-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #FFFFFF;
}

/* =========================================================
   Official Brand Wordmark: apni.city
   ========================================================= */
.apni-city-brand-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  line-height: 1;
  user-select: none;
  text-decoration: none;
}

.apni-city-brand-logo .brand-word-apni {
  color: #FFFFFF;
  font-weight: 800;
}

.apni-city-brand-logo .brand-word-dot {
  color: #FFC72C;
  font-weight: 900;
  margin: 0 1px;
}

.apni-city-brand-logo .brand-word-city {
  color: #FFFFFF;
  font-weight: 800;
}

.apni-city-brand-logo.sm {
  font-size: 1.15rem;
}

.apni-city-brand-logo.md {
  font-size: 1.5rem;
}

.apni-city-brand-logo.lg {
  font-size: 1.95rem;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  width: 100%;
}

.sidebar-nav-item:hover {
  background-color: var(--surface-navy);
  color: var(--text-cream);
}

.sidebar-nav-item.active {
  background-color: rgba(255, 199, 44, 0.12);
  color: var(--brand-yellow);
  font-weight: 600;
}

.nav-icon {
  font-size: 1.15rem;
  width: 22px;
  text-align: center;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.sidebar-city-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.sidebar-city-card:hover {
  border-color: var(--brand-yellow);
}

.city-info-col {
  display: flex;
  flex-direction: column;
}

.city-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.city-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-cream);
}

.city-chevron {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.sidebar-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-dim);
  padding-left: 4px;
}

.meta-badge {
  color: var(--brand-yellow);
}

/* ---------------------------------------------------------
   2. DASHBOARD PAGE (SURFACE 1)
   --------------------------------------------------------- */
.dashboard-layout {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--brand-navy);
  color: var(--text-cream);
  overflow: hidden;
  box-sizing: border-box;
}

.dashboard-content {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px 40px 60px;
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 1023px) {
  .dashboard-content {
    padding: 16px 16px 40px;
  }
}

.mobile-dashboard-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

@media (max-width: 1023px) {
  .mobile-dashboard-header {
    display: flex;
  }
}

.mobile-brand-pill {
  display: flex;
  align-items: center;
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 1.05rem;
}

.mobile-city-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  color: var(--text-cream);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}

.dashboard-hero {
  margin-bottom: 40px;
}

.hero-text-block {
  max-width: 760px;
}

.city-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(47, 140, 255, 0.12);
  border: 1px solid rgba(47, 140, 255, 0.3);
  color: var(--cat-amenity);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.15s ease;
}

.city-badge-pill:hover {
  background-color: rgba(47, 140, 255, 0.2);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--cat-work);
  box-shadow: 0 0 6px var(--cat-work);
}

.hero-headline {
  font-family: var(--font-heading), sans-serif;
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 16px;
}

@media (max-width: 768px) {
  .hero-headline {
    font-size: 2rem;
  }
}

.accent-city {
  color: var(--brand-yellow);
}

.hero-description {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 28px;
}

.hero-search-form {
  display: flex;
  align-items: center;
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  border-radius: 14px;
  padding: 6px 8px 6px 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  margin-bottom: 24px;
  max-width: 680px;
}

.search-form-icon {
  font-size: 1.15rem;
  margin-right: 10px;
}

.hero-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-cream);
  font-size: 1rem;
  outline: none;
}

.hero-search-input::placeholder {
  color: var(--text-dim);
}

.hero-search-btn {
  background-color: var(--brand-yellow);
  color: var(--brand-yellow-text);
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.hero-search-btn:hover {
  background-color: var(--brand-yellow-hover);
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (max-width: 640px) {
  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }
}

.hero-btn {
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.btn-primary-yellow {
  background-color: var(--brand-yellow);
  color: var(--brand-yellow-text);
  border: none;
  box-shadow: 0 4px 14px rgba(255, 199, 44, 0.3);
}

.btn-primary-yellow:hover {
  background-color: var(--brand-yellow-hover);
  transform: translateY(-1px);
}

.btn-glass-secondary {
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  color: var(--text-cream);
}

.btn-glass-secondary:hover {
  background-color: var(--surface-card);
  border-color: var(--text-muted);
}

/* Category Quick Cards */
.dashboard-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.section-subtext {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.category-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.cat-card {
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  border-radius: 16px;
  padding: 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.cat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cat-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-icon-box.issue-theme {
  background-color: rgba(255, 91, 95, 0.12);
  border: 1px solid rgba(255, 91, 95, 0.3);
}

.cat-icon-box.amenity-theme {
  background-color: rgba(47, 140, 255, 0.12);
  border: 1px solid rgba(47, 140, 255, 0.3);
}

.cat-icon-box.work-theme {
  background-color: rgba(53, 208, 127, 0.12);
  border: 1px solid rgba(53, 208, 127, 0.3);
}

.cat-icon-box.rent-theme {
  background-color: rgba(166, 92, 255, 0.12);
  border: 1px solid rgba(166, 92, 255, 0.3);
}

.cat-stat-badge {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background-color: var(--surface-card);
  color: var(--text-cream);
}

.cat-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.cat-card-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 18px;
  flex: 1;
}

.cat-card-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-yellow);
}

/* Stats Two Column Grid */
.stats-two-column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.stats-box {
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  border-radius: 16px;
  padding: 24px;
}

.stats-box-header {
  margin-bottom: 20px;
}

.stats-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.stats-badge.success {
  background-color: rgba(53, 208, 127, 0.12);
  color: var(--cat-work);
}

.stats-badge.warning {
  background-color: rgba(255, 91, 95, 0.12);
  color: var(--cat-issue);
}

.stats-box-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.stats-row-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stat-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background-color: var(--surface-card);
  border-radius: 10px;
}

.stat-metric-label {
  font-size: 0.92rem;
  color: var(--text-cream);
}

.stat-metric-num {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-cream);
}

.stat-metric-num.alert-red {
  color: var(--cat-issue);
}

.stat-metric-num.alert-orange {
  color: #FFA500;
}

/* Popular Tags */
.tags-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 28px;
}

.section-mini-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--text-muted);
}

.tags-flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.popular-tag-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  color: var(--text-cream);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.popular-tag-btn:hover {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
  background-color: rgba(255, 199, 44, 0.08);
}

.tag-hash {
  color: var(--brand-yellow);
  font-weight: 700;
}

/* ---------------------------------------------------------
   3. MAP EXPLORER PAGE (SURFACE 2)
   --------------------------------------------------------- */
.map-page-layout {
  display: flex;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: var(--brand-navy);
  color: var(--text-cream);
  overflow: hidden;
  position: relative;
}

.map-page-center {
  flex: 1;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Top Floating Bar Over Map */
.map-top-bar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.map-top-bar > * {
  pointer-events: auto;
}

.mobile-home-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  background-color: rgba(7, 30, 54, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-navy);
  border-radius: 20px;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}

.mobile-home-pill:hover {
  transform: scale(1.05);
}

.map-search-wrapper {
  flex: 1;
  max-width: 420px;
  position: relative;
  display: flex;
  align-items: center;
  background-color: rgba(7, 30, 54, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 0 12px;
  height: 44px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.map-search-icon {
  margin-right: 8px;
  font-size: 1rem;
}

.map-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-cream);
  font-size: 0.92rem;
  outline: none;
}

.search-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.search-dropdown-menu {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 0.15s ease;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background-color: var(--surface-card);
}

.item-text {
  display: flex;
  flex-direction: column;
}

.item-primary {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-cream);
}

.item-secondary {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* Category Filter Pills */
.map-category-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(7, 30, 54, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-navy);
  padding: 4px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}



.pill-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pill-btn:hover {
  color: var(--text-cream);
  background-color: rgba(255, 255, 255, 0.05);
}

.pill-btn.active {
  background-color: var(--surface-card);
  color: var(--text-cream);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.cat-dot.issue-dot {
  background-color: var(--cat-issue);
}

.cat-dot.amenity-dot {
  background-color: var(--cat-amenity);
}

.cat-dot.work-dot {
  background-color: var(--cat-work);
}

.cat-dot.rent-dot {
  background-color: var(--cat-rent);
}

.map-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  background-color: rgba(7, 30, 54, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  color: var(--text-cream);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.map-filter-btn:hover {
  background-color: var(--surface-navy);
}

/* Map Canvas Container Area */
.map-container-area {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.map-floating-actions {
  position: absolute;
  right: 18px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 15;
}

@media (max-width: 1023px) {
  .map-floating-actions {
    bottom: calc(280px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .fab-report-mobile {
    display: none !important;
  }
}

.fab-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: rgba(7, 30, 54, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-navy);
  color: var(--text-cream);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  transition: all 0.15s ease;
}

.fab-btn:hover {
  transform: scale(1.05);
  border-color: var(--text-muted);
}

.fab-btn.fab-locate {
  background-color: #FFFFFF !important;
  color: #071E36 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.fab-btn.fab-locate:hover {
  background-color: #F7F4EC !important;
  transform: scale(1.06) !important;
}

.fab-btn.fab-locate:active {
  transform: scale(0.94) !important;
  background-color: #E2DDD0 !important;
}

.fab-btn.fab-locate.available {
  border-color: #2F8CFF !important;
  color: #2F8CFF !important;
  box-shadow: 0 4px 14px rgba(47, 140, 255, 0.4) !important;
}

.fab-btn.fab-locate.loading {
  opacity: 0.75;
  cursor: wait !important;
  pointer-events: none;
}

.fab-btn.fab-locate.loading svg {
  animation: spin-locate 1s linear infinite;
}

@keyframes spin-locate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.fab-report-mobile {
  display: none;
  background-color: var(--brand-yellow);
  color: var(--brand-yellow-text);
  border: none;
  width: auto;
  padding: 0 18px;
  height: 48px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 0.95rem;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(255, 199, 44, 0.4);
}

@media (max-width: 1023px) {
  .fab-report-mobile {
    display: flex;
  }
}

.map-subtle-footer {
  position: absolute;
  bottom: 12px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-dim);
  z-index: 10;
  background-color: rgba(7, 30, 54, 0.7);
  padding: 4px 10px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.footer-link-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
}

.footer-link-btn:hover {
  color: var(--text-cream);
}

.footer-sep {
  opacity: 0.4;
}

/* ---------------------------------------------------------
   4. DESKTOP RIGHT PANEL (380px)
   --------------------------------------------------------- */
.desktop-right-panel {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-right-panel {
    display: flex;
    flex-direction: column;
    width: 380px;
    height: 100%;
    background-color: var(--surface-navy);
    border-left: 1px solid var(--border-navy);
    flex-shrink: 0;
    z-index: 25;
    box-sizing: border-box;
  }
}

.panel-list-view,
.panel-detail-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.panel-list-header {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border-navy);
}

.list-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-area-label {
  font-size: 0.75rem;
  color: var(--brand-yellow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: block;
}

.panel-main-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2px 0 0;
}

.btn-report-pill {
  background-color: var(--brand-yellow);
  color: var(--brand-yellow-text);
  border: none;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-report-pill:hover {
  transform: scale(1.04);
}

.panel-cat-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--brand-navy);
  padding: 3px;
  border-radius: 10px;
}

.panel-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
}

.panel-tab.active {
  background-color: var(--surface-card);
  color: var(--text-cream);
}

.panel-card-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.entity-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.entity-pulse-card {
  display: flex;
  gap: 12px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.entity-pulse-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.card-icon-bubble {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-icon-bubble.cat-issue {
  background-color: rgba(255, 91, 95, 0.12);
  border: 1px solid rgba(255, 91, 95, 0.3);
}

.card-icon-bubble.cat-amenity {
  background-color: rgba(47, 140, 255, 0.12);
  border: 1px solid rgba(47, 140, 255, 0.3);
}

.card-icon-bubble.cat-public_work {
  background-color: rgba(53, 208, 127, 0.12);
  border: 1px solid rgba(53, 208, 127, 0.3);
}

.card-icon-bubble.cat-info {
  background-color: rgba(166, 92, 255, 0.12);
  border: 1px solid rgba(166, 92, 255, 0.3);
}

.card-info-col {
  flex: 1;
  min-width: 0;
}

.card-top-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.card-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pill.mini {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 12px;
}

.status-pill.open {
  background-color: rgba(47, 140, 255, 0.15);
  color: var(--cat-amenity);
}

.status-pill.resolved {
  background-color: rgba(53, 208, 127, 0.15);
  color: var(--cat-work);
}

.card-snippet {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.confirmations-count {
  color: var(--text-muted);
  font-weight: 600;
}

/* Detail View Styles */
.detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-navy);
}

.btn-back-link {
  background: transparent;
  border: none;
  color: var(--brand-yellow);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.detail-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.detail-hero {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.detail-icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.detail-icon-wrap.cat-issue {
  background-color: rgba(255, 91, 95, 0.15);
  border: 1px solid rgba(255, 91, 95, 0.35);
}

.detail-icon-wrap.cat-amenity {
  background-color: rgba(47, 140, 255, 0.15);
  border: 1px solid rgba(47, 140, 255, 0.35);
}

.detail-icon-wrap.cat-public_work {
  background-color: rgba(53, 208, 127, 0.15);
  border: 1px solid rgba(53, 208, 127, 0.35);
}

.detail-icon-wrap.cat-info {
  background-color: rgba(166, 92, 255, 0.15);
  border: 1px solid rgba(166, 92, 255, 0.35);
}

.detail-category-badge {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.detail-entity-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 2px 0 6px;
}

.detail-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator-dot.open {
  background-color: var(--cat-amenity);
}

.status-indicator-dot.resolved {
  background-color: var(--cat-work);
}

.detail-section {
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}

.section-mini-heading {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

.detail-body-text {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  color: var(--text-cream);
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.meta-grid-item {
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 10px;
  padding: 12px;
}

.meta-item-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.meta-item-val {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-cream);
}

.detail-actions-card {
  background-color: var(--brand-navy);
  border: 1px solid var(--border-navy);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

.actions-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-cream);
  display: block;
  margin-bottom: 12px;
}

.action-buttons-row {
  display: flex;
  gap: 10px;
}

.btn-action-verify,
.btn-action-resolve {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.btn-action-verify {
  background-color: rgba(47, 140, 255, 0.15);
  color: var(--cat-amenity);
  border: 1px solid rgba(47, 140, 255, 0.35);
}

.btn-action-verify:hover {
  background-color: rgba(47, 140, 255, 0.25);
}

.btn-action-resolve {
  background-color: rgba(53, 208, 127, 0.15);
  color: var(--cat-work);
  border: 1px solid rgba(53, 208, 127, 0.35);
}

.btn-action-resolve:hover {
  background-color: rgba(53, 208, 127, 0.25);
}

/* Timeline */
.detail-timeline-section {
  padding-top: 10px;
}

.timeline-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
  position: relative;
  padding-left: 16px;
  border-left: 2px solid var(--border-subtle);
}

.timeline-item {
  position: relative;
}

.timeline-marker {
  position: absolute;
  left: -21px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--brand-yellow);
}

.timeline-desc {
  font-size: 0.88rem;
  color: var(--text-cream);
  display: block;
}

.timeline-time {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ---------------------------------------------------------
   5. 4-STEP REPORT WIZARD (SURFACE 3)
   --------------------------------------------------------- */
.report-wizard-container {
  position: fixed;
  z-index: 60;
}

/* Desktop Slide-Over */
@media (min-width: 1024px) {
  .report-wizard-container {
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    background-color: var(--surface-navy);
    border-left: 1px solid var(--border-navy);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
  }
}

/* Mobile Full Modal */
@media (max-width: 1023px) {
  .report-wizard-container {
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-end;
  }

  .report-wizard-container .wizard-card {
    width: 100%;
    max-height: 90vh;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}

.wizard-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--surface-navy);
}

.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border-navy);
}

.wizard-step-tracker {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wizard-back-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
}

.wizard-step-label {
  font-size: 0.72rem;
  color: var(--brand-yellow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}

.wizard-step-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 2px 0 0;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.modal-close-btn:hover {
  color: var(--text-cream);
}

.wizard-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Step: Category Choice (What would you like to add? - 7.png Screen 7) */
.category-choice-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cat-choice-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 16px;
  padding: 18px 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  width: 100%;
}

.cat-choice-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-yellow);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.cat-choice-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.cat-choice-icon-box.issue-bg {
  background-color: rgba(255, 91, 95, 0.15);
  border: 1px solid rgba(255, 91, 95, 0.3);
  color: var(--cat-issue);
}

.cat-choice-icon-box.amenity-bg {
  background-color: rgba(47, 140, 255, 0.15);
  border: 1px solid rgba(47, 140, 255, 0.3);
  color: var(--cat-amenity);
}

.cat-choice-icon-box.rent-bg {
  background-color: rgba(166, 92, 255, 0.15);
  border: 1px solid rgba(166, 92, 255, 0.3);
  color: var(--cat-rent);
}

.cat-choice-info {
  flex: 1;
}

.cat-choice-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-cream);
  font-family: var(--font-heading);
}

.cat-choice-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.cat-choice-arrow {
  font-size: 1.25rem;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}

.cat-choice-card:hover .cat-choice-arrow {
  color: var(--brand-yellow);
  transform: translateX(3px);
}

.form-input-field {
  width: 100%;
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  border-radius: 10px;
  color: var(--text-cream);
  padding: 10px 14px;
  font-size: 0.95rem;
  box-sizing: border-box;
}

.form-input-field:focus {
  outline: none;
  border-color: var(--brand-yellow);
}

.selected-type-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Step 1 Location */
.location-pin-preview {
  position: relative;
  height: 180px;
  background-color: var(--brand-navy);
  border: 1px dashed var(--border-navy);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.pin-target-crosshair {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.crosshair-ring {
  width: 48px;
  height: 48px;
  border: 2px dashed var(--brand-yellow);
  border-radius: 50%;
  animation: spin 12s linear infinite;
}

.crosshair-pin {
  position: absolute;
  font-size: 2rem;
  top: -8px;
}

.location-tooltip {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.location-info-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

.coords-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.coords-label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.coords-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-cream);
}

.location-hint-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.full-width {
  width: 100%;
}

/* Step 2 Category & 3x3 Grid */
.report-category-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 20px;
}

.report-cat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  color: var(--text-muted);
  padding: 8px 4px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.report-cat-btn.active.issue {
  background-color: rgba(255, 91, 95, 0.15);
  border-color: var(--cat-issue);
  color: var(--text-cream);
}

.report-cat-btn.active.amenity {
  background-color: rgba(47, 140, 255, 0.15);
  border-color: var(--cat-amenity);
  color: var(--text-cream);
}

.report-cat-btn.active.work {
  background-color: rgba(53, 208, 127, 0.15);
  border-color: var(--cat-work);
  color: var(--text-cream);
}

.report-cat-btn.active.rent {
  background-color: rgba(166, 92, 255, 0.15);
  border-color: var(--cat-rent);
  color: var(--text-cream);
}

.report-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.type-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 14px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 94px;
}

.type-tile:hover {
  border-color: var(--brand-yellow);
  transform: translateY(-2px);
}

.type-tile.selected {
  border-color: var(--brand-yellow);
  background-color: rgba(255, 199, 44, 0.08);
}

.type-tile-icon-box {
  margin-bottom: 8px;
}

.type-tile-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-cream);
  text-align: center;
  line-height: 1.25;
}

/* Step 3 Details */
.selected-type-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 20px;
}

.selected-type-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.selected-type-cat {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
}

.btn-change-type {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--brand-yellow);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.form-field-group {
  margin-bottom: 20px;
}

.form-field-label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.form-textarea {
  width: 100%;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 10px;
  color: var(--text-cream);
  padding: 12px;
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}

.form-textarea:focus {
  border-color: var(--brand-yellow);
}

.char-count {
  display: block;
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 4px;
}

.segmented-selector {
  display: flex;
  background-color: var(--brand-navy);
  padding: 4px;
  border-radius: 10px;
  gap: 4px;
}

.segment-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 7px;
  cursor: pointer;
}

.segment-btn.active.minor {
  background-color: rgba(53, 208, 127, 0.2);
  color: var(--cat-work);
}

.segment-btn.active.moderate {
  background-color: rgba(255, 199, 44, 0.2);
  color: var(--brand-yellow);
}

.segment-btn.active.severe {
  background-color: rgba(255, 91, 95, 0.2);
  color: var(--cat-issue);
}

.since-pill-row {
  display: flex;
  gap: 8px;
}

.since-pill {
  flex: 1;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  color: var(--text-muted);
  padding: 8px 0;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.since-pill.active {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
  background-color: rgba(255, 199, 44, 0.08);
}

.submit-btn {
  margin-top: 10px;
}

/* Step 4 Success */
.step-success {
  text-align: center;
  padding: 20px 10px;
}

.success-icon-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(53, 208, 127, 0.15);
  border: 2px solid var(--cat-work);
  color: var(--cat-work);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.success-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.success-message {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 28px;
}

.success-next-steps {
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  margin-bottom: 28px;
}

.next-steps-heading {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 12px;
}

.step-item {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.step-item:last-child {
  margin-bottom: 0;
}

.step-bullet {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--brand-yellow);
  color: var(--brand-yellow-text);
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-item p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   6. CITY SWITCHER MODAL & ABOUT MODAL
   --------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.city-switcher-modal,
.about-modal-dialog {
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-navy);
}

.modal-header h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
}

.modal-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.city-search-box {
  display: flex;
  align-items: center;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  margin: 20px 24px 10px;
  padding: 0 14px;
  height: 44px;
}

.city-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-cream);
  font-size: 0.95rem;
  outline: none;
}

.city-popular-section,
.city-search-results {
  padding: 10px 24px 24px;
  max-height: 380px;
  overflow-y: auto;
}

.section-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.city-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.city-card:hover {
  border-color: var(--brand-yellow);
}

.city-card.active {
  border-color: var(--brand-yellow);
  background-color: rgba(255, 199, 44, 0.08);
}

.city-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-cream);
  display: block;
}

.city-card-state {
  font-size: 0.72rem;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}

.city-active-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-yellow);
  margin-top: 6px;
}

.city-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.city-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 10px;
  padding: 12px;
  color: var(--text-cream);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.city-result-item:hover {
  border-color: var(--brand-yellow);
}

.city-result-name {
  font-size: 0.95rem;
  font-weight: 600;
  display: block;
}

.city-result-state {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* About Modal Body */
.about-brand-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo-pill {
  background-color: var(--brand-navy);
  border: 1px solid var(--border-navy);
  border-radius: 8px;
  padding: 4px 8px;
  font-weight: 800;
  font-size: 0.9rem;
}

.about-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: 480px;
}

.about-section {
  margin-bottom: 24px;
}

.about-section h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--brand-yellow);
}

.about-section p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 10px;
}

.about-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

.about-feat-item {
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 14px;
}

.feat-icon {
  font-size: 1.25rem;
  margin-bottom: 6px;
  display: block;
}

.about-feat-item h5 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-cream);
}

.about-feat-item p {
  font-size: 0.82rem;
  margin: 0;
}

.small-text {
  font-size: 0.78rem !important;
  color: var(--text-dim) !important;
}

.about-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-navy);
  display: flex;
  justify-content: flex-end;
}

/* ---------------------------------------------------------
   7. FILTER DRAWER SHEET
   --------------------------------------------------------- */
.filter-drawer-sheet {
  background-color: var(--surface-navy);
  border: 1px solid var(--border-navy);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 640px) {
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .filter-drawer-sheet {
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.sheet-handle {
  width: 36px;
  height: 4px;
  background-color: var(--border-navy);
  border-radius: 2px;
  margin: 10px auto 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-navy);
}

.drawer-header h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}

.drawer-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.drawer-content {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: 420px;
}

.filter-section {
  margin-bottom: 22px;
}

.filter-section-title {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 12px;
}

.filter-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
}

.filter-toggle-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.toggle-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-cream);
  display: block;
}

.toggle-desc {
  font-size: 0.75rem;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}

.toggle-switch {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-yellow);
  cursor: pointer;
}

.status-pill-selector {
  display: flex;
  background-color: var(--brand-navy);
  padding: 4px;
  border-radius: 10px;
  gap: 4px;
}

.status-pill {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
}

.status-pill.active {
  background-color: var(--surface-card);
  color: var(--brand-yellow);
}

.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border-navy);
}

.btn-text-reset {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-text-reset:hover {
  color: var(--cat-issue);
}


/* =========================================================
   DESKTOP MAP WORKSPACE LAYOUT & TOOLBAR (§Pass 10)
   ========================================================= */
.desktop-reopen-panel-fab {
  display: none;
}

@media (min-width: 1024px) {
  .bottom-sheet-drawer {
    display: none !important;
  }
  .mobile-home-pill {
    display: none !important;
  }
  .desktop-sidebar {
    display: flex !important;
  }

  .map-page-center {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
  }

  .map-top-bar {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  .map-top-bar-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }

  .map-search-wrapper {
    width: 320px !important;
    max-width: calc(100vw - 660px) !important;
    min-width: 220px !important;
    height: 42px !important;
    background-color: rgba(7, 30, 54, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-navy) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  }

  .map-filter-btn {
    height: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(7, 30, 54, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-navy) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    pointer-events: auto !important;
  }

  .map-category-pills {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px !important;
    margin: 0 !important;
    pointer-events: auto !important;
    background-color: rgba(7, 30, 54, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-navy) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .desktop-reopen-panel-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    height: 42px;
    padding: 0 16px;
    background-color: rgba(7, 30, 54, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-navy);
    border-radius: 12px;
    color: var(--text-cream);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
  }

  .desktop-reopen-panel-fab:hover {
    background-color: var(--surface-card);
    border-color: var(--brand-yellow);
    color: #FFFFFF;
    transform: translateY(-1px);
  }
}

@media (max-width: 1023px) {
  .desktop-sidebar {
    display: none !important;
  }
  .desktop-right-panel {
    display: none !important;
  }
  .mobile-home-pill {
    display: flex !important;
  }
}


/* Mobile Responsiveness Polish */
@media (max-width: 640px) {
  .hero-headline {
    font-size: 1.65rem !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }
  .hero-description {
    font-size: 0.95rem !important;
    margin-bottom: 20px !important;
  }
  .hero-search-form {
    padding: 4px 6px 4px 10px !important;
    margin-bottom: 18px !important;
  }
  .hero-search-input {
    font-size: 0.88rem !important;
  }
  .hero-search-btn {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }
  .mobile-dashboard-header {
    gap: 8px;
  }
  .mobile-city-selector {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* Mobile Map Top Bar Fit */
@media (max-width: 640px) {
  .map-top-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    gap: 8px !important;
    pointer-events: none;
  }
  .map-top-bar-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    pointer-events: auto;
  }
  .mobile-home-pill {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    pointer-events: auto !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
  .map-search-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 40px !important;
    max-width: none !important;
    padding: 0 10px !important;
    overflow: hidden !important;
  }
  .map-search-input {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 0.85rem !important;
  }
  .map-category-pills {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    padding: 2px 0 4px !important;
    gap: 8px !important;
    scrollbar-width: none;
    pointer-events: auto !important;
  }
  .active-filter-bar {
    pointer-events: auto !important;
  }
  .map-category-pills::-webkit-scrollbar {
    display: none;
  }
  .map-filter-btn {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .map-filter-btn .filter-label {
    display: none !important;
  }
  .map-filter-btn .filter-icon {
    font-size: 1.15rem !important;
    margin: 0 !important;
  }
}



/* Hero two-column layout */
.hero-grid-two-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.hero-text-block {
  flex: 1;
  max-width: 620px;
}

.hero-skyline-illustration {
  width: 380px;
  max-width: 40%;
  flex-shrink: 0;
}

.skyline-svg {
  width: 100%;
  height: auto;
}

@media (max-width: 1023px) {
  .hero-skyline-illustration {
    display: none;
  }
}


/* Report Wizard Stepper Row Styles */
.wizard-stepper-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.stepper-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
}

.stepper-chip.active {
  color: var(--brand-yellow);
}

.stepper-chip.completed {
  color: var(--text-cream);
}

.stepper-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--surface-card);
  border: 1px solid var(--border-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.stepper-chip.active .stepper-num {
  background-color: var(--brand-yellow);
  color: var(--brand-yellow-text);
  border-color: var(--brand-yellow);
  font-weight: 700;
}

.stepper-line {
  flex: 1;
  height: 1px;
  background-color: var(--border-subtle);
  min-width: 12px;
}


/* Wizard Header Layout Structure */
.wizard-header {
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--border-navy);
}

.wizard-top-nav-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.wizard-main-title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  margin: 0 0 10px !important;
}

/* ==========================================================================
   MOCKUP-FAITHFUL PASS: DASHBOARD, FILTER DRAWER & AREA VIEW STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DASHBOARD RESPONSIVE SPLIT (7.png Screen 1 vs 15.png Screen 1)
   -------------------------------------------------------------------------- */
.mobile-dashboard-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 0 48px;
  overflow-x: hidden;
}

.desktop-dashboard-container {
  display: none;
}

@media (min-width: 1024px) {
  .mobile-dashboard-container {
    display: none !important;
  }
  .desktop-dashboard-container {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 40px 64px;
    gap: 28px;
  }
}

/* --- Mobile Dashboard (7.png Screen 1) --- */
.mobile-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}

.mobile-brand-wrap {
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-city-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-full);
  padding: 5px 10px;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.mobile-city-selector:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mobile-city-selector .chevron {
  font-size: 0.75rem;
  opacity: 0.7;
}

.mobile-dashboard-tagline {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 16px 0;
}

.mobile-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.mobile-search-form .search-form-icon {
  position: absolute;
  left: 14px;
  font-size: 0.95rem;
  opacity: 0.6;
  pointer-events: none;
}

.mobile-search-input {
  width: 100%;
  height: 48px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-lg);
  padding: 0 16px 0 42px;
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.mobile-search-input:focus {
  border-color: var(--brand-yellow);
}

/* 3 Mobile Category Pill Cards (7.png Screen 1) */
.mobile-category-cards-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}

.mobile-cat-pill-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: 16px;
  background: rgba(14, 38, 64, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-navy);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.mobile-cat-pill-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(18, 48, 80, 0.85);
}

.mobile-cat-pill-card:active {
  transform: scale(0.97);
}

.cat-issues-pill,
.cat-amenities-pill,
.cat-rent-pill {
  background: rgba(14, 38, 64, 0.7);
}

.mobile-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.mobile-cat-icon.red-icon {
  background: rgba(255, 91, 95, 0.16);
  color: var(--category-issues);
}

.mobile-cat-icon.blue-icon {
  background: rgba(47, 140, 255, 0.16);
  color: var(--category-amenities);
}

.mobile-cat-icon.purple-icon {
  background: rgba(166, 92, 255, 0.16);
  color: var(--category-rent);
}

.cat-currency-glyph {
  position: static !important;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--category-rent);
  line-height: 1;
}

.mobile-cat-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Mobile Metrics Section (Good to know / Needs attention) */
.mobile-metrics-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.section-title.title-good-to-know {
  color: var(--category-works) !important; /* Approved Green #35D07F */
}

.section-title.title-needs-attention {
  color: var(--category-issues) !important; /* Approved Red/Coral #FF5B5F */
}

.section-link-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.section-link-btn:hover {
  color: var(--brand-yellow);
}

.metrics-cards-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mini-metric-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  background: rgba(14, 38, 64, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-navy);
  border-radius: 14px;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.mini-metric-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(18, 48, 80, 0.85);
}

.mini-metric-card:active {
  transform: scale(0.97);
}

.metric-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.green-wrap {
  background: rgba(53, 208, 127, 0.16);
  color: var(--category-works);
}

.blue-wrap {
  background: rgba(47, 140, 255, 0.16);
  color: var(--category-amenities);
}

.purple-wrap {
  background: rgba(166, 92, 255, 0.16);
  color: var(--category-rent);
}

.coral-wrap {
  background: rgba(255, 91, 95, 0.16);
  color: var(--category-issues);
}

.orange-wrap {
  background: rgba(255, 153, 0, 0.16);
  color: #ff9900;
}

.gray-wrap {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.metric-text-group {
  display: flex;
  flex-direction: column;
}

.metric-value-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.metric-sub-label {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Skeleton Loading State (§3) */
.mini-metric-card.skeleton-card {
  min-height: 82px;
  justify-content: center;
  gap: 8px;
  cursor: default;
}

.skeleton-line {
  height: 18px;
  width: 50%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  animation: pulseSkeleton 1.2s infinite ease-in-out;
}

.skeleton-line-sm {
  height: 12px;
  width: 75%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  animation: pulseSkeleton 1.2s infinite ease-in-out;
}

@keyframes pulseSkeleton {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* Intentional Empty State Notice (§3) */
.city-empty-state-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 38, 64, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 24px;
}

.empty-city-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.empty-city-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.empty-city-text strong {
  font-size: 0.88rem;
  color: var(--text-primary);
}

.empty-city-text p {
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin: 0;
}

.empty-city-report-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 20px;
}

/* Popular in City Container (§7) */
.mobile-popular-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  background: rgba(14, 38, 64, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-navy);
  border-radius: 16px;
  padding: 16px 14px;
}

.mobile-popular-section .section-title {
  margin-bottom: 4px;
}

.popular-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.popular-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.popular-pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.mobile-footer-spacing {
  margin-top: 20px;
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* --- Desktop Dashboard (15.png Screen 1) --- */
.desktop-top-search-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.desktop-search-form {
  position: relative;
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
}

.desktop-search-form .search-form-icon {
  position: absolute;
  left: 16px;
  font-size: 1rem;
  opacity: 0.6;
  pointer-events: none;
}

.desktop-search-input {
  width: 100%;
  height: 48px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-lg);
  padding: 0 20px 0 46px;
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.desktop-search-input:focus {
  border-color: var(--brand-yellow);
}

.desktop-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(14, 43, 77, 0.6) 0%, rgba(7, 30, 54, 0.9) 100%);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-xl);
  padding: 40px 48px;
  overflow: hidden;
}

.hero-text-side {
  max-width: 520px;
}

.hero-main-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0 0 14px 0;
}

.hero-highlight {
  color: var(--brand-yellow);
}

.hero-subtext {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.hero-cta-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
}

.desktop-hero-btn {
  height: 44px;
  padding: 0 22px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.hero-graphic-side {
  width: 380px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-city-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-navy);
}

.showing-city-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.showing-city-text strong {
  color: var(--text-primary);
}

.desktop-change-city-btn {
  background: none;
  border: none;
  color: var(--category-amenities);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.desktop-stats-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.desktop-stats-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}

.card-top-header {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 20px 0;
}

.card-metric-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metric-duo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: rgba(7, 30, 54, 0.4);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.metric-duo-row:hover {
  transform: translateX(4px);
  border-color: var(--border-subtle);
}

.icon-square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
}

.green-square {
  background: rgba(53, 208, 127, 0.15);
  color: var(--category-works);
}

.purple-square {
  background: rgba(168, 85, 247, 0.15);
  color: var(--category-rent);
}

.red-square {
  background: rgba(255, 107, 74, 0.15);
  color: var(--category-issues);
}

.blue-square {
  background: rgba(47, 140, 255, 0.15);
  color: var(--category-amenities);
}

.metric-text-col {
  display: flex;
  flex-direction: column;
}

.metric-huge-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

.metric-huge-num.alert-red {
  color: var(--category-issues);
}

.metric-label-muted {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.desktop-common-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-title-small {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.desktop-common-pills-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.desktop-common-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.desktop-common-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-subtle);
}

.desktop-common-pill.more-pill {
  color: var(--brand-yellow);
}

.desktop-footer-spacing {
  margin-top: 24px;
}


/* --------------------------------------------------------------------------
   2. FILTER DRAWER STYLES (7.png Screen 5 & 15.png Screen 3)
   -------------------------------------------------------------------------- */
.filter-drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--bg-backdrop);
  z-index: 600;
  display: flex;
  justify-content: flex-end;
  animation: fadeIn 0.2s ease-out;
}

.filter-drawer-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 380px;
  height: 100%;
  background-color: var(--surface-navy);
  border-left: 1px solid var(--border-navy);
  box-shadow: var(--shadow-xl);
  animation: slideInRight 0.25s ease-out;
}

@media (max-width: 640px) {
  .filter-drawer-backdrop {
    align-items: flex-end;
  }
  .filter-drawer-container {
    max-width: 100%;
    height: 82vh;
    border-left: none;
    border-top: 1px solid var(--border-navy);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation: slideUpMobile 0.25s ease-out;
  }
}

.filter-drawer-handle-zone {
  display: none;
  justify-content: center;
  padding: 10px 0 4px;
}

@media (max-width: 640px) {
  .filter-drawer-handle-zone {
    display: flex;
  }
}

.filter-drawer-handle {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--border-navy);
}

.filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-navy);
}

.filter-header-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.filter-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.filter-reset-btn {
  background: none;
  border: none;
  color: var(--brand-yellow);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.filter-close-icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.filter-category-tabs-bar {
  display: flex;
  border-bottom: 1px solid var(--border-navy);
  padding: 0 16px;
}

.filter-category-tab {
  flex: 1;
  padding: 12px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-category-tab.active {
  color: var(--brand-yellow);
  border-bottom-color: var(--brand-yellow);
}

.filter-bulk-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-surface-elevated);
  border-bottom: 1px solid var(--border-navy);
  flex-shrink: 0;
}

.filter-selection-counter {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.filter-bulk-toggle-btn {
  background: none;
  border: none;
  color: var(--brand-yellow);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background var(--transition-fast);
}

.filter-bulk-toggle-btn:hover {
  background: rgba(255, 199, 44, 0.1);
}

.filter-toggle-items-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 12px 16px calc(80px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-toggle-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.toggle-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-icon-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

.issue-bubble {
  background: rgba(255, 107, 74, 0.15);
  color: var(--category-issues);
}

.amenity-bubble {
  background: rgba(47, 140, 255, 0.15);
  color: var(--category-amenities);
}

.info-bubble {
  background: rgba(168, 85, 247, 0.15);
  color: var(--category-rent);
}

.toggle-item-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.toggle-item-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle-item-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* Custom iOS style toggle switch */
.custom-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--border-navy);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.custom-toggle-switch.checked {
  background-color: var(--category-amenities);
}

.custom-toggle-switch .switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: #ffffff;
  transition: transform var(--transition-fast);
}

.custom-toggle-switch.checked .switch-thumb {
  transform: translateX(20px);
}

.filter-drawer-sticky-cta {
  padding: 16px 20px;
  border-top: 1px solid var(--border-navy);
  background-color: var(--surface-navy);
}

.full-width-cta {
  width: 100%;
  height: 48px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   3. BOTTOM SHEET EXPLORE & AREA VIEW (7.png Screen 2 & Screen 4)
   -------------------------------------------------------------------------- */
.sheet-area-view-block,
.sheet-explore-block {
  display: flex;
  flex-direction: column;
  padding: 4px 16px 16px;
  gap: 12px;
}

.area-title-row,
.explore-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.area-heading-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.area-main-name,
.explore-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.area-distance-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.explore-change-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.area-summary-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.sheet-stats-trio-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sheet-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.sheet-stat-box:hover {
  transform: translateY(-2px);
  border-color: var(--border-subtle);
}

.sheet-stat-box.red-stat .stat-huge-num {
  color: var(--category-issues) !important;
}

.sheet-stat-box.blue-stat .stat-huge-num {
  color: var(--category-amenities) !important;
}

.sheet-stat-box.purple-stat .stat-huge-num {
  color: var(--category-rent) !important;
}

.sheet-stat-box .stat-huge-num {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}

.sheet-stat-box .stat-sub-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 3px;
  white-space: nowrap;
}

/* Top Issues Mini Grid (7.png Screen 4) */
.sheet-top-issues-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top-issues-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-issues-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.top-issues-view-all {
  background: none;
  border: none;
  color: var(--brand-yellow);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.top-issues-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.top-issue-mini-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.top-issue-mini-chip:hover {
  border-color: var(--category-issues);
}

.chip-badge-num {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--category-issues);
}

.chip-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-sticky-cta-wrap {
  margin-top: 4px;
}

/* Animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideUpMobile {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}


/* --------------------------------------------------------------------------
   LEGAL FOOTER STYLES (Matching 7.png Screen 1 & 15.png Screen 1)
   -------------------------------------------------------------------------- */
.app-legal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0 24px;
  width: 100%;
  box-sizing: border-box;
}

.legal-link-btn {
  background: none !important;
  border: none !important;
  color: var(--text-secondary) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  padding: 0 !important;
  transition: color var(--transition-fast);
  outline: none;
}

.legal-link-btn:hover {
  color: var(--brand-yellow) !important;
}

.footer-bullet {
  color: var(--border-navy);
  font-size: 0.75rem;
}

.feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.feedback-icon {
  font-size: 0.85rem;
}


/* --------------------------------------------------------------------------
   ISSUE DETAIL PANEL STYLES (7.png Screen 6 & 15.png Screen 4)
   -------------------------------------------------------------------------- */
.issue-detail-panel {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 32px;
  gap: 16px;
  overflow-y: auto;
  color: var(--text-primary);
  background-color: var(--surface-navy);
}

.detail-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.detail-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.detail-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(255, 91, 95, 0.16);
  color: var(--cat-issue);
  flex-shrink: 0;
}

.detail-entity-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 2px 0;
}

.detail-meta-line {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.detail-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.detail-close-btn:hover {
  color: var(--text-primary);
}

.detail-address-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-md);
}

.address-pin-icon {
  font-size: 1.1rem;
}

.address-text-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.address-primary {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.address-secondary {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.detail-description-box {
  padding: 14px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-md);
}

.description-text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
  font-style: italic;
}

.detail-external-map-link {
  display: flex;
}

.external-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.external-map-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-subtle);
}

.external-arrow {
  color: var(--category-amenities);
}

/* Status Timeline */
.detail-status-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.timeline-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding-left: 20px;
}

.timeline-list::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background-color: var(--border-navy);
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.timeline-marker {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  border: 2px solid var(--surface-navy);
}

.timeline-marker.issue-dot {
  background-color: var(--cat-issue);
}

.timeline-marker.confirmed-dot {
  background-color: var(--cat-work);
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline-event {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

.timeline-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* Moderation Actions */
.detail-moderation-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-navy);
}

.moderation-prompt {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.moderation-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.btn-still-issue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  background-color: rgba(255, 91, 95, 0.12);
  border: 1px solid var(--cat-issue);
  border-radius: var(--radius-md);
  color: var(--cat-issue);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-still-issue:hover {
  background-color: rgba(255, 91, 95, 0.22);
}

.btn-its-fixed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  background-color: rgba(53, 208, 127, 0.12);
  border: 1px solid var(--cat-work);
  border-radius: var(--radius-md);
  color: var(--cat-work);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-its-fixed:hover {
  background-color: rgba(53, 208, 127, 0.22);
}

.detail-threshold-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0 0 0;
}

/* Type-aware Entity Detail Content Styles */
.entity-detail-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  color: var(--text-primary);
  background-color: var(--surface-navy);
}

.desktop-detail-panel {
  padding: 20px;
  background-color: transparent;
}

.entity-type-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-icon-box.cat-amenity {
  background: rgba(53, 129, 223, 0.16);
  color: var(--category-amenities, #3581DF);
}

.detail-icon-box.cat-work {
  background: rgba(54, 141, 92, 0.16);
  color: var(--category-works, #368D5C);
}

.detail-icon-box.cat-rent {
  background: rgba(127, 86, 217, 0.16);
  color: var(--category-rent, #7F56D9);
}

.amenity-broad-category-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3581DF;
  margin-bottom: 2px;
}

.amenity-facets-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius-md);
}

.amenity-facets-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.amenity-facets-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.amenity-detail-facet-chip {
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(53, 129, 223, 0.15);
  border: 1px solid rgba(53, 129, 223, 0.35);
  color: #F7F4EC;
  font-size: 0.82rem;
  font-weight: 600;
}

.work-category-badge-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #368D5C;
  margin-bottom: 2px;
}

.work-active-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(54, 141, 92, 0.15);
  border: 1px solid rgba(54, 141, 92, 0.4);
  color: #368D5C;
  font-size: 0.78rem;
  font-weight: 700;
}

.rent-category-badge-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7F56D9;
  margin-bottom: 2px;
}

.rent-amount-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 16px;
  background: rgba(127, 86, 217, 0.18);
  border: 1px solid rgba(127, 86, 217, 0.45);
  color: #F7F4EC;
  font-size: 0.95rem;
  font-weight: 800;
}

.detail-section-subhead {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.rent-furnishing-row {
  display: flex;
}

.furnishing-tag {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-navy);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}

/* =========================================================
   Active Filter Dismiss Bar (§7)
   ========================================================= */
.active-filter-bar {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  gap: 8px;
  z-index: 10;
}

.active-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 199, 44, 0.15);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}

.active-filter-clear-btn {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 2px;
  border-radius: 50%;
  transition: opacity 0.15s ease;
}

.active-filter-clear-btn:hover {
  opacity: 0.75;
}

/* =========================================================
   Search Results Overlay View (§6, Mockup 7.png Screen 3)
   ========================================================= */
.search-results-overlay-view {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #071E36 !important;
  z-index: 1200 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fadeIn 0.15s ease-out;
}

.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.search-query-badge {
  color: var(--accent);
  font-weight: 700;
}

.search-category-tabs-bar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  flex-shrink: 0;
}
.search-category-tabs-bar::-webkit-scrollbar {
  display: none;
}

.search-tab-pill {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.search-tab-pill.active {
  background: var(--accent);
  color: var(--bg-main);
  border-color: var(--accent);
}

.search-results-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

.search-no-results {
  padding: 24px 16px;
  color: var(--text-secondary, #94A3B8);
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
}

.search-result-row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.15s ease;
}

.search-result-row-item:hover,
.search-result-row-item:active {
  background: rgba(255, 255, 255, 0.05);
}

.search-pin-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.search-result-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.result-primary-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-secondary-name {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-chevron-arrow {
  color: var(--text-muted);
  font-size: 1.2rem;
  margin-left: auto;
  padding-left: 8px;
}

.search-place-type-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-weight: 600;
}

.search-row-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* =========================================================
   Report Wizard Floating Elements & Stepper (§9)
   ========================================================= */
.floating-pin-prompt-banner {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--accent);
  color: var(--text-main);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 600;
  font-size: 0.88rem;
  font-weight: 600;
  pointer-events: none;
  animation: slide-down 0.2s ease-out;
}

.desktop-stepper-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 640px) {
  .desktop-stepper-header {
    display: none !important;
  }
}

.stepper-step-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.stepper-step-pill.active {
  background: var(--accent);
  color: var(--bg-main);
}

.rent-privacy-reassurance-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: #d8b4fe;
  line-height: 1.4;
  margin-bottom: 16px;
}

/* =========================================================
   Desktop Place Detail Meta Table (§5, Mockup 15.png)
   ========================================================= */
.detail-meta-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 16px 0;
}

.meta-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
}

.meta-label {
  color: var(--text-muted);
}

.meta-value {
  color: var(--text-main);
  font-weight: 600;
}

.btn-action-issue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  background-color: rgba(255, 91, 95, 0.12);
  border: 1px solid var(--cat-issue);
  border-radius: var(--radius-md);
  color: var(--cat-issue);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  flex: 1;
  transition: all var(--transition-fast);
}

.btn-action-issue:hover {
  background-color: rgba(255, 91, 95, 0.22);
}

.btn-action-resolve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  background-color: rgba(53, 208, 127, 0.12);
  border: 1px solid var(--cat-work);
  border-radius: var(--radius-md);
  color: var(--cat-work);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  flex: 1;
  transition: all var(--transition-fast);
}

.btn-action-resolve:hover {
  background-color: rgba(53, 208, 127, 0.22);
}

/* =========================================================
   REPORTING FLOW (Matches 7.png Screens 7-12)
   ========================================================= */

/* Floating prompt banner over map during location pin step (Screen 9) */
.floating-pin-prompt-banner {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  background: rgba(7, 30, 54, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-navy);
  color: var(--text-primary);
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: fadeIn 0.2s ease-out;
}

/* Main Reporting Drawer / Sheet Container */
.report-flow-drawer {
  position: fixed;
  z-index: 600;
  background-color: #071E36;
  border: 1px solid var(--border-navy);
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  animation: slideUpMobile 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Mobile: Bottom Sheet Presentation */
@media (max-width: 1023px) {
  .report-flow-drawer {
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 20px 20px 0 0;
    max-height: 86dvh;
    height: 86dvh;
    overflow: hidden;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }

  /* Location step on mobile: compact bottom card showing map behind it */
  .report-flow-drawer.step-location {
    height: auto;
    max-height: 260px;
    background: rgba(7, 30, 54, 0.96);
    backdrop-filter: blur(12px);
  }

  .desktop-stepper-header {
    display: none !important;
  }
}

/* Desktop: Slide-over Drawer Presentation */
@media (min-width: 1024px) {
  .report-flow-drawer {
    top: 0;
    right: 0;
    width: 440px;
    height: 100vh;
    border-left: 1px solid var(--border-navy);
    border-radius: 0;
    overflow: hidden;
    animation: slideInRight 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

.report-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Top Navigation / Action Bar */
.report-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 8px;
  flex-shrink: 0;
}

.btn-drawer-back {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all var(--transition-fast);
}

.btn-drawer-back:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.btn-drawer-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.4rem;
  font-weight: 400;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 8px;
  line-height: 1;
  transition: all var(--transition-fast);
}

.btn-drawer-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

/* Desktop Stepper Header */
.desktop-stepper-header {
  padding: 6px 20px 14px;
  border-bottom: 1px solid var(--border-navy);
  flex-shrink: 0;
}

.desktop-stepper-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 10px;
}

.desktop-stepper-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stepper-node {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.stepper-node.active {
  color: var(--brand-yellow);
}

.stepper-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}

.stepper-node.active .stepper-circle {
  background: var(--brand-yellow);
  color: #071E36;
}

.stepper-connector {
  flex: 1;
  height: 1px;
  background: var(--border-navy);
}

/* Scrollable Drawer Body */
.report-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 12px 18px 20px;
  display: flex;
  flex-direction: column;
}

.step-main-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 16px;
}

/* STEP 1: Location Action Box (Screen 9) */
.location-action-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  margin-bottom: 16px;
}

.location-icon-bubble {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 199, 44, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.location-text-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-action-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.location-action-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.35;
}

.coords-readout {
  font-size: 0.76rem;
  font-family: var(--font-mono);
  color: var(--brand-yellow);
  margin-top: 2px;
}

/* STEP 2: Category Options List (Screen 7) */
.category-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.category-choice-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 16px;
  background: rgba(14, 38, 64, 0.7);
  border: 1px solid var(--border-navy);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.category-choice-item:hover {
  background: rgba(18, 48, 80, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.category-choice-item:active {
  transform: scale(0.98);
}

.cat-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cat-icon-badge.issue-badge {
  background: rgba(255, 91, 95, 0.16);
  color: var(--category-issues);
}

.cat-icon-badge.amenity-badge {
  background: rgba(47, 140, 255, 0.16);
  color: var(--category-amenities);
}

.cat-icon-badge.rent-badge {
  background: rgba(166, 92, 255, 0.16);
  color: var(--category-rent);
}

.cat-currency-mark {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--category-rent);
}

.cat-choice-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cat-choice-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cat-choice-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.cat-choice-chevron {
  font-size: 1.5rem;
  color: var(--text-secondary);
  padding-right: 4px;
}

/* STEP 3: Subtypes Tiles Grid (Screen 8) */
.subtypes-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.subtype-tile-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 6px;
  border-radius: 14px;
  background: rgba(14, 38, 64, 0.7);
  border: 1px solid var(--border-navy);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.subtype-tile-btn:hover {
  background: rgba(18, 48, 80, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.subtype-tile-btn:active,
.subtype-tile-btn.selected {
  border-color: var(--brand-yellow);
  background: rgba(255, 199, 44, 0.12);
}

.tile-icon-box {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

/* STEP 4: Details & Rent Form (Screen 10 & Screen 12) */
.selected-subtype-pill-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(14, 38, 64, 0.7);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  margin-bottom: 16px;
}

.subtype-pill-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.subtype-pill-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.subtype-change-link {
  background: none;
  border: none;
  color: var(--brand-yellow);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
}

.rent-privacy-reassurance-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 199, 44, 0.12);
  border: 1px solid rgba(255, 199, 44, 0.3);
  border-radius: 12px;
  margin-bottom: 16px;
}

.reassurance-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.reassurance-text {
  font-size: 0.78rem;
  color: var(--brand-yellow);
  font-weight: 500;
  line-height: 1.35;
}

.segmented-selector {
  display: flex;
  background: rgba(14, 38, 64, 0.8);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  margin-top: 6px;
  margin-bottom: 16px;
}

.segment-btn {
  flex: 1;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.segment-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

.segment-btn.active.minor {
  background: rgba(53, 208, 127, 0.2);
  color: var(--category-works);
}

.segment-btn.active.moderate {
  background: rgba(255, 153, 0, 0.2);
  color: #ff9900;
}

.segment-btn.active.severe {
  background: rgba(255, 91, 95, 0.2);
  color: var(--category-issues);
}

.form-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-field-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.field-hint-sub {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.form-input,
.form-textarea {
  background: rgba(14, 38, 64, 0.7);
  border: 1px solid var(--border-navy);
  border-radius: 12px;
  color: var(--text-primary);
  padding: 10px 14px;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--brand-yellow);
}

.textarea-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.char-counter {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.location-save-notice {
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.35;
}

.report-bottom-cta-wrap {
  margin-top: auto;
  padding-top: 12px;
}

/* STEP 5: Success Screen (Screen 11) */
.step-success-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 0;
}

.success-badge-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--category-works);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(53, 208, 127, 0.4);
  margin-bottom: 14px;
}

.success-check {
  font-size: 2rem;
  color: #071E36;
  font-weight: 900;
}

.success-heading {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.success-subheading {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

.success-next-steps-card {
  width: 100%;
  background: rgba(14, 38, 64, 0.7);
  border: 1px solid var(--border-navy);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  margin-bottom: 24px;
}

.next-steps-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.next-step-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.next-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

.next-step-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.success-actions-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-secondary-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid var(--border-navy);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-secondary-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}



/* ==========================================================================
   MANDATORY MOBILE FIX PASS #2 / TAXONOMY V2 STYLES
   ========================================================================== */

/* 1. Brand Wordmark (Single continuous textmark with tight natural kerning) */
.apni-city-brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  user-select: none;
  text-decoration: none;
  line-height: 1;
}

.apni-city-brand-wordmark .wordmark-text {
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  color: #F7F4EC;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.apni-city-brand-wordmark.sm .wordmark-text {
  font-size: 1.15rem;
}

.apni-city-brand-wordmark.md .wordmark-text {
  font-size: 1.35rem;
}

.apni-city-brand-wordmark.lg .wordmark-text {
  font-size: 1.65rem;
}

.apni-city-brand-wordmark .brand-dot {
  color: #FFC72C;
  font-weight: 800;
  margin: 0;
  padding: 0;
  display: inline;
}

/* 2. Rent Property Types Horizontal Scroll (Defect 8 & 12) */
.rent-property-types-scroll {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding: 4px 2px 8px 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rent-property-types-scroll::-webkit-scrollbar {
  display: none;
}

.property-chip-btn {
  flex-shrink: 0;
  padding: 9px 16px;
  background: var(--bg-surface-elevated, #0A2744);
  border: 1px solid var(--border-navy, #1B3B60);
  border-radius: 20px;
  color: var(--text-secondary, #A0B3C6);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.property-chip-btn:hover {
  border-color: #A65CFF;
  color: #F7F4EC;
}

.property-chip-btn.active {
  background: #A65CFF;
  border-color: #A65CFF;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(166, 92, 255, 0.4);
}

/* 3. Filter Drawer Safe Scrolling (Defect 6) */
.filter-toggle-items-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 12px 16px calc(90px + env(safe-area-inset-bottom, 16px)) !important;
}

/* 4. Amenity Facet Selection Chips (Part B & C) */
.amenity-facets-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 16px;
}

.facets-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.facets-section-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
}

.amenity-facets-selection-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.amenity-facet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-surface-elevated, #0A2744);
  border: 1px solid var(--border-navy, #1B3B60);
  border-radius: 20px;
  color: var(--text-secondary, #A0B3C6);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.amenity-facet-chip:hover {
  border-color: #2F8CFF;
  color: #F7F4EC;
}

/* Amenity blue family for all amenity selected states */
.amenity-facet-chip.selected {
  background: #2F8CFF;
  border-color: #2F8CFF;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(47, 140, 255, 0.35);
}

/* 5. Confirmation Screen Details */
.confirmation-details-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--bg-surface-elevated, #0A2744);
  border: 1px solid var(--border-navy, #1B3B60);
  border-radius: 14px;
  margin: 12px 0 18px;
}

.confirm-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.confirm-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.confirm-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #7E94A8);
}

.confirm-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.confirm-change-btn {
  background: none;
  border: none;
  color: var(--brand-yellow);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}



/* 7. Around Area Quad Stats Grid (Part C #2) */
.sheet-stats-quad-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.sheet-stat-box-quad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 2px;
  background: var(--bg-surface-elevated, #0A2744);
  border: 1px solid var(--border-navy, #1B3B60);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.sheet-stat-box-quad .stat-huge-num {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}

.sheet-stat-box-quad.red-stat .stat-huge-num { color: #FF5B5F; }
.sheet-stat-box-quad.blue-stat .stat-huge-num { color: #2F8CFF; }
.sheet-stat-box-quad.green-stat .stat-huge-num { color: #35D07F; }
.sheet-stat-box-quad.purple-stat .stat-huge-num { color: #A65CFF; }

.sheet-stat-box-quad .stat-sub-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary, #A0B3C6);
  margin-top: 4px;
  white-space: nowrap;
}

/* 8. Geolocation feedback toast */
.geo-feedback-toast {
  position: relative;
  align-self: center;
  margin-top: 8px;
  background: rgba(7, 30, 54, 0.95);
  border: 1px solid var(--border-navy, #1B3B60);
  border-radius: 20px;
  padding: 8px 18px;
  color: #F7F4EC;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  cursor: pointer;
  z-index: 1200;
  max-width: calc(100% - 32px);
  text-align: center;
  animation: fadeIn 0.2s ease-out;
}

.list-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 8px;
  width: 100%;
  box-sizing: border-box;
}

.btn-load-more {
  background: var(--bg-surface-elevated, #0A2744);
  color: var(--brand-yellow, #FFC72C);
  border: 1px solid var(--border-navy, #1B3B60);
  border-radius: var(--radius-md, 8px);
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-load-more:hover {
  background: rgba(255, 199, 44, 0.12);
  border-color: var(--brand-yellow, #FFC72C);
}

/* 9. Read-only and Posting Disabled UI Styles */
.sheet-read-only-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 199, 44, 0.08);
  border: 1px solid rgba(255, 199, 44, 0.25);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  width: 100%;
  box-sizing: border-box;
}

.sheet-read-only-banner .read-only-icon {
  font-size: 1.25rem;
}

.sheet-read-only-banner .read-only-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sheet-read-only-banner .read-only-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-yellow);
}

.sheet-read-only-banner .read-only-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.fab-btn.fab-report-mobile.read-only {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 199, 44, 0.35);
  color: var(--brand-yellow);
  cursor: default;
  opacity: 0.85;
}

.read-only-lock-icon {
  font-size: 0.95rem;
}

/* 10. Amenity Moderation Buttons (Defect 2) */
.btn-amenity-removed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #F87171;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-amenity-removed:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: #EF4444;
}

.btn-amenity-present {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #16A34A;
  border: 1px solid #22C55E;
  color: #FFFFFF;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}
.btn-amenity-present:hover {
  background: #15803D;
  border-color: #4ADE80;
}

/* 11. Read-only Disabled Report CTA */
.btn-primary-report.btn-report-disabled,
.empty-city-report-btn.btn-report-disabled,
.desktop-hero-btn.btn-report-disabled,
.sidebar-nav-item.btn-report-disabled {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 199, 44, 0.25) !important;
  color: #94A3B8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.75;
}
.btn-primary-report.btn-report-disabled .btn-report-text,
.sidebar-nav-item.btn-report-disabled .nav-label {
  color: #94A3B8 !important;
}

/* Issue-Specific Structured Details (Pass #6) */
.issue-field-group {
  margin-top: 14px;
}
.issue-field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary, #94A3B8);
  margin-bottom: 8px;
}
.field-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 8px;
}
.field-chip-btn {
  background: var(--bg-surface-elevated, #0A2744);
  border: 1px solid var(--border-navy, #1B3B60);
  color: var(--text-primary, #F7F4EC);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}
.field-chip-btn:hover {
  background: #13395F;
  border-color: #2F8CFF;
}
.field-chip-btn.active {
  background: rgba(255, 199, 44, 0.15);
  border-color: var(--brand-yellow, #FFC72C);
  color: var(--brand-yellow, #FFC72C);
  font-weight: 600;
}
.detail-structured-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 0.8rem;
  color: #E2E8F0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-right: 6px;
  margin-bottom: 6px;
}
.detail-structured-chip .chip-label {
  color: #94A3B8;
  font-size: 0.75rem;
}
.detail-structured-chip .chip-val {
  font-weight: 600;
  color: #F8FAFC;
}

/* 12. Power Cut Timing Selector (Defect 1) */
.timing-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.timing-option-chip {
  background: var(--bg-surface-elevated, #0A2744);
  border: 1px solid var(--border-navy, #1B3B60);
  color: var(--text-primary, #F7F4EC);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}
.timing-option-chip:hover {
  background: #13395F;
  border-color: #2F8CFF;
}
.timing-option-chip.active {
  background: rgba(255, 199, 44, 0.15);
  border-color: var(--brand-yellow, #FFC72C);
  color: var(--brand-yellow, #FFC72C);
  font-weight: 700;
}

/* 13. Duplicate Detection & Support Screen (Defect 6 & 7) */
.step-duplicate-check-view, .step-supported-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 8px;
}
.dup-search-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.dup-search-icon-circle.dup-issue {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.dup-search-icon-circle.dup-amenity {
  background: rgba(59, 130, 246, 0.15);
  color: #3B82F6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.dup-search-icon-circle.dup-work {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.dup-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary, #F7F4EC);
  margin: 0 0 4px;
}
.dup-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary, #A0B3C6);
  margin: 0 0 16px;
  line-height: 1.4;
  max-width: 320px;
}
.duplicate-candidates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 16px;
  text-align: left;
}
.duplicate-candidate-card {
  background: var(--bg-surface-elevated, #0A2744);
  border: 1.5px solid var(--border-navy, #1B3B60);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.duplicate-candidate-card:hover {
  border-color: #2F8CFF;
}
.duplicate-candidate-card.selected {
  border-color: var(--brand-yellow, #FFC72C);
  background: rgba(255, 199, 44, 0.05);
  box-shadow: 0 0 12px rgba(255, 199, 44, 0.12);
}
.duplicate-candidate-card.supported-highlight-card {
  width: 100%;
  border-color: #22C55E;
  background: rgba(34, 197, 94, 0.06);
  margin: 16px 0;
}
.dup-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dup-card-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dup-card-icon-box.cat-issue {
  background: rgba(239, 68, 68, 0.18);
  color: #EF4444;
}
.dup-card-icon-box.cat-amenity {
  background: rgba(59, 130, 246, 0.18);
  color: #3B82F6;
}
.dup-card-icon-box.cat-public_work {
  background: rgba(34, 197, 94, 0.18);
  color: #22C55E;
}
.dup-card-main-info {
  flex: 1;
  min-width: 0;
}
.dup-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dup-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #F7F4EC);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dup-card-chevron {
  font-size: 1.2rem;
  color: var(--text-secondary, #A0B3C6);
  line-height: 1;
}
.dup-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.dup-status-pill {
  font-size: 0.68rem;
  font-weight: 700;
  border: 1px solid #EF4444;
  color: #EF4444;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.2;
}
.dup-distance-text {
  font-size: 0.78rem;
  color: var(--text-secondary, #A0B3C6);
}
.dup-card-address-line {
  font-size: 0.8rem;
  color: var(--text-secondary, #A0B3C6);
  margin-top: 6px;
}
.dup-card-facets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.dup-facet-tag {
  font-size: 0.72rem;
  background: rgba(255, 199, 44, 0.12);
  border: 1px solid rgba(255, 199, 44, 0.25);
  color: var(--brand-yellow, #FFC72C);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
}
.dup-card-excerpt {
  font-size: 0.8rem;
  color: #D1D5DB;
  font-style: italic;
  margin: 6px 0 0;
  line-height: 1.3;
}
.dup-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.dup-confirmations-text {
  font-size: 0.78rem;
  color: var(--text-secondary, #A0B3C6);
  font-weight: 600;
}
.dup-plus-one-badge {
  background: #14532D;
  color: #4ADE80;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}
.dup-actions-bottom-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.btn-secondary-dark {
  background: rgba(11, 34, 56, 0.8);
  border: 1.5px solid var(--border-navy, #1B3B60);
  color: var(--text-primary, #F7F4EC);
  padding: 12px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}
.btn-secondary-dark:hover {
  background: #13395F;
  border-color: #2F8CFF;
}
.support-green-circle {
  background: #16A34A !important;
  color: white !important;
}
.turnstile-submit-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #94A3B8;
  margin-top: 8px;
  text-align: center;
}