/* ============================================================
   Echame Gas — app.css  (design system, replaces Bootstrap)
   Single dependency-free stylesheet. ~15KB, no CDN.
   ============================================================ */

/* ---------- Self-hosted variable font (latin, 48KB, 1 file) ---------- */
@font-face {
    font-family: 'InterVar';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/inter-var-latin.woff2?v=f11d729b') format('woff2');
}

/* ---------- Tokens (light) — precision-instrument palette ---------- */
:root {
    --paper: #FAFAF7;
    --primary-white: #FFFFFF;
    --light-gray: #F4F3EF;
    --medium-gray: #E4E2DC;
    --dark-gray: #6B6F76;
    --text-primary: #14171A;
    --text-secondary: #2A2E33;
    --text-muted: #6B6F76;

    --accent-blue: #1B4B8F;
    --accent-green: #0E7A46;
    --accent-blue-light: #EBEFF6;
    --accent-green-light: #E7F2EC;
    --accent-red: #C0331B;
    --accent-amber: #B26A00;

    --glass-bg: #FFFFFF;
    --glass-border: #E4E2DC;
    --glass-shadow: 0 1px 2px rgba(20, 23, 26, 0.05);

    --font-primary: 'InterVar', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'InterVar', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;

    --shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.05);
    --shadow-md: 0 2px 8px rgba(20, 23, 26, 0.08);
    --shadow-lg: 0 6px 20px rgba(20, 23, 26, 0.12);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-primary);
    background: var(--paper);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

a { color: var(--accent-blue); text-decoration: none; }
a:hover { color: #357ABD; }

hr { border: 0; border-top: 1px solid var(--medium-gray); }

h1, h2, h3, h4, h5, h6 { line-height: 1.3; font-weight: 600; }

*:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

.main-content { min-height: calc(100vh - 200px); padding-top: var(--spacing-md); }

/* Icon base: every FontAwesome <i> becomes a current-color CSS mask.
   No icon font, no webfont download — ~3KB of inline SVG data-URIs. */
.fa, .fas, .fab {
    display: inline-block;
    width: 1em; height: 1em;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* ---------- Icon set (CSS masks — no webfont) ---------- */
.fa-gas-pump{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h8a2 2 0 0 1 2 2v14H3V5a2 2 0 0 1 2-2zm1 3v5h6V6H6zm9 3h1.6l2.4 3v6.5a1.75 1.75 0 0 1-3.5 0V14h-2v-2h2V9zM3 20h12v1.5H3V20z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-home{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9 8h-3v9h-4v-6h-4v6H6v-9H3l9-8z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-newspaper{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a1 1 0 0 1 1-1zm2 4v2h7V8H6zm0 4v2h7v-2H6zm9-4v6h4V8h-4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-info-circle{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-envelope{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2V5zm10 7.2L4.2 7v10h15.6V7L12 12z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-exclamation-triangle{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-7h-2v5h2V9z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-clock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 11h-5v-2h3V6h2v7z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-check-circle{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1.2 13.6l6-6-1.4-1.4-4.6 4.6-2.2-2.2-1.4 1.4 3.6 3.6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2L5.3 12l-1.4 1.4 5.6 5.6L21.4 6.4 20 5 9.5 16.2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-chevron-right{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.6L15.4 12 9 18.4 7.6 17l5-5-5-5L9 5.6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-chevron-left{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5.6L8.6 12l6.4 6.4 1.4-1.4-5-5 5-5L15 5.6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-chevron-down{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.6 9L12 15.4 18.4 9 17 7.6l-5 5-5-5L5.6 9z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-right-left{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h11.2l-2.6-2.6L17 3l5 5-5 5-1.4-1.4L18.2 9H7V7zm10 10H5.8l2.6 2.6L7 21l-5-5 5-5 1.4 1.4L5.8 15H17v2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-arrow-right{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2h12.2l-4.6-4.6L13 5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-arrow-up{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l7 7-1.4 1.4-4.6-4.6V20h-2V7.8L6.4 12.4 5 11l7-7z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-map-marker-alt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 9.5A2.5 2.5 0 1 0 12 6a2.5 2.5 0 0 0 0 5.5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-location-dot{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 9.5A2.5 2.5 0 1 0 12 6a2.5 2.5 0 0 0 0 5.5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-location-crosshairs{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v3.06A7 7 0 0 1 18.94 11H22v2h-3.06A7 7 0 0 1 13 18.94V22h-2v-3.06A7 7 0 0 1 5.06 13H2v-2h3.06A7 7 0 0 1 11 5.06V2zm1 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-map-marked-alt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4l6-2 6 2 6-2v16l-6 2-6-2-6 2V4zm6 0v14m6-14v14' fill-rule='evenodd' clip-rule='evenodd' style='mix-blend-mode:normal'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-route{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm14 12a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM7 8h6a5 5 0 0 1 5 5v1h-2v-1a3 3 0 0 0-3-3H7V8z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-directions{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l10 10-10 10L2 12 12 2zm1 4.8L9 10.8h2.5V14H8.8l4.2 4.2 4.2-4.2h-3.5v-3.2H13V6.8z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-search{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 1 1 0 14c-1.6 0-3-.5-4.2-1.4L3 18.2 1.8 17l2.8-2.8A7 7 0 0 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-lock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 1 5 5v3h3v12H4V10h3V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v3h6V7a3 3 0 0 0-3-3z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-dollar-sign{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2h-2v3.1C8.7 5.4 7 6.9 7 9.2c0 2.4 2 3.4 4.5 4 2.4.5 3 .9 3 1.9 0 1-.9 1.6-2.2 1.6-1.4 0-2.4-.7-2.6-2H7.6c.2 2.1 1.6 3.5 3.4 3.9V22h2v-2.1c2.2-.3 3.9-1.7 3.9-3.9 0-2.6-2.1-3.5-4.6-4.1-2.3-.6-2.9-1-2.9-1.9 0-1 .9-1.7 2.3-1.7 1.3 0 2.2.7 2.4 1.7h2.1c-.2-2-1.5-3.4-3.2-3.8V2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-paper-plane{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2v7z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-calendar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3V2zM5 10v9h14v-9H5zm2 2h4v4H7v-4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-calendar-alt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3V2zM5 10v9h14v-9H5zm2 2h4v4H7v-4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-chart-bar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h2v16h16v2H3V3zm4 10h3v6H7v-6zm5-6h3v12h-3V7zm5 4h3v8h-3v-8z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-chart-line{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h2v16h16v2H3V3zm4 10l4-4 3 3 5.3-5.3 1.4 1.4L14 12.4l-3-3-4.4 4.2L5.4 13z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-spinner{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 1 9 9h-3a6 6 0 0 0-6-6V3z'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-share-alt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2a3 3 0 1 1-2.9 3.7L8.9 9.4a3 3 0 0 1 0 5.2l5.3 3.7A3 3 0 1 1 13 20c0-.4.1-.8.2-1.1L8 15.2a3 3 0 1 1 0-6.4l5.2-3.7A3 3 0 1 1 17 2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-shield-alt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3zm0 4l-5 2v3.5c0 3.1 2 5.8 5 6.9 3-1.1 5-3.8 5-6.9V8l-5-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-book-open{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-1.6-1.3-4-2-8-2v15c4 0 6.4.7 8 2 1.6-1.3 4-2 8-2V3c-4 0-6.4.7-8 2zm-1 12.2c-1.6-.9-3.5-1.3-5-1.4V5.1c2.1.1 3.8.6 5 1.5v10.6zm2 0V6.6c1.2-.9 2.9-1.4 5-1.5v10.7c-1.5.1-3.4.5-5 1.4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-book{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zm0 16a1 1 0 0 0-1 1c0 .6.4 1 1 1h12v-2H6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-heart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S4 15 4 9.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 8 3.5C20 15 12 21 12 21z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-comments{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3v-3H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm14 6h2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-1v3l-4-3h-3v-1h3a3 3 0 0 0 3-3v-2h-2v-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-mobile-alt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 1h8a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 3v14h8V4H8zm4 16.2a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-github{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.7C6.7 19.9 6.1 18 6.1 18c-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .9.1-.7.4-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.2-.4-1.2.1-2.6 0 0 .8-.3 2.7 1a9.4 9.4 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.6.6.7 1 1.6 1 2.7 0 3.9-2.4 4.7-4.6 5 .3.3.7.9.7 1.9V21c0 .3.2.6.7.5A10 10 0 0 0 12 2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-linkedin-in{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM3 9h4v12H3V9zm7 0h3.8v1.7A4.3 4.3 0 0 1 16.6 9c3 0 4.4 2 4.4 5.4V21h-4v-6c0-1.7-.6-2.8-2-2.8s-2 1-2 2.8v6h-4V9z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-twitter{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 5.9c-.7.3-1.5.6-2.3.7a4 4 0 0 0 1.8-2.2c-.8.5-1.7.8-2.6 1a4 4 0 0 0-6.9 3.7A11.4 11.4 0 0 1 3.7 4.9a4 4 0 0 0 1.2 5.3c-.6 0-1.2-.2-1.8-.5v.1a4 4 0 0 0 3.2 3.9 4 4 0 0 1-1.8.1 4 4 0 0 0 3.7 2.8A8 8 0 0 1 2 18.4a11.4 11.4 0 0 0 6.2 1.8c7.4 0 11.4-6.1 11.4-11.4v-.5c.8-.6 1.5-1.3 2-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-facebook-f{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5h3v-3h-3a4 4 0 0 0-4 4v2H8v3h2v7h3v-7h2.5l.5-3H13v-2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-whatsapp{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm5.2 13.6c-.2.6-1.2 1.2-1.7 1.2-.4.1-1 .1-1.6-.1a13.4 13.4 0 0 1-5.9-5.1c-.6-1-.9-2-.6-2.7.2-.5.8-1.3 1.3-1.4h.7c.2 0 .4.1.6.5l.8 1.7c.1.2 0 .4-.1.6l-.6.7c-.2.2-.2.4-.1.7a9 9 0 0 0 4 3.4c.3.1.5.1.7-.1l.8-1c.2-.3.4-.3.7-.2l1.7.8c.3.2.4.4.4.6v.1z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-user-circle{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm0 8.5c3.1 0 5.6 1.5 6.5 3.2A8 8 0 0 1 12 20a8 8 0 0 1-6.5-3.3c.9-1.7 3.4-3.2 6.5-3.2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-user-edit{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 1 9.5 13.1l-3.2-3.2a2.5 2.5 0 0 0-3.5 0l-.8.8V12a3.5 3.5 0 1 0-3.5 3.5h1.7l-2 2H12A10 10 0 0 1 12 2zm0 8.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm6.4 4.6l3.5 3.5-4.2 4.2-3.5-3.5 4.2-4.2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-link{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1 1 0 0 1 0-1.4l3-3a3 3 0 0 1 4.2 4.2l-1.5 1.5-1.4-1.4 1.5-1.5a1 1 0 0 0-1.4-1.4l-3 3a1 1 0 0 1-1.4 0zm2.8-2.8a1 1 0 0 1 0 1.4l-3 3a3 3 0 0 1-4.2-4.2l1.5-1.5 1.4 1.4-1.5 1.5a1 1 0 0 0 1.4 1.4l3-3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-flag-checkered{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h2v18H5V3zm4 0h11l-2.5 3.5L20 10h-3l2-3-2-3h-6v2h5l-1.5 2H9V7H5V5h4V3zm0 7h6l-1.5 2H9v-2zm6 0h5l-2 3h-4.5L15 10zm-6 4h8l-2 3H9v-3z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-moon{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 13.2A9 9 0 1 1 10.8 3 7 7 0 0 0 21 13.2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-sun{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM1 11h3v2H1v-2zm19 0h3v2h-3v-2zM4 5.4L5.4 4l2.1 2.1-1.4 1.4L4 5.4zm12.5 12.5l1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1zM18.6 4L20 5.4l-2.1 2.1-1.4-1.4L18.6 4zM5.4 18.6l1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-copyright{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 4.5c-2.2 0-3.8 1.4-3.8 3.4v4.2c0 2 1.6 3.4 3.8 3.4s3.8-1.4 3.8-3.4h-2.2c0 .8-.7 1.3-1.6 1.3s-1.6-.5-1.6-1.3V9.9c0-.8.7-1.3 1.6-1.3s1.6.5 1.6 1.3h2.2c0-2-1.6-3.4-3.8-3.4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-fire{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.3 2c.4 3-1.6 4.2-1.6 6.2 0 0-1.7-1.1-2-2.2C8 7.2 6 9 6 11.7a6 6 0 0 0 12 0c0-4.6-3.4-5.2-4.7-9.7z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-star{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17l-6.1 3.6 1.4-6.8L2.2 9.1l6.9-.8L12 2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-sort{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 21V9H4l4-5 4 5H9v12H7zm8-18v12h3l-4 5-4-5h3V3h2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-th-large{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-code{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 6.4L3.4 12l5.2 5.6 1.5-1.4L6.2 12l3.9-4.2-1.6-1.4zm6.8 0l-1.5 1.4 3.9 4.2-3.9 4.2 1.5 1.4L20.6 12l-5.2-5.6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-file-contract{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l5 5v15H6V2zm7 1.5V8h4.5L13 3.5zM8 12h8v1.5H8V12zm0 4h8v1.5H8V16z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-list{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h2v2H4V5zm4 0h13v2H8V5zM4 11h2v2H4v-2zm4 0h13v2H8v-2zM4 17h2v2H4v-2zm4 0h13v2H8v-2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-road{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h3.5L9 21H6L4 3zm12.5 0H20l-2 18h-3l1.5-18zM11 4h2l.4 5h-2.8L11 3zm-.6 8h3.2l-.4 6h-2.4l-.4-6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-history{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 1-9 9H1l4-4 4 4H5.1A7 7 0 1 0 12 5c-1.9 0-3.7.8-5 2L5.6 5.6A9 9 0 0 1 12 3zm1 4v5.6l4 2.4-.8 1.3L11 13.4V7h2z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-expand-arrows-alt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h6v2H7.4l3.3 3.3-1.4 1.4L6 7.4V10H4V4zm10 0h6v6h-2V7.4l-3.3 3.3-1.4-1.4L16.6 6H14V4zM4 14h2v2.6l3.3-3.3 1.4 1.4L7.4 18H10v2H4v-6zm12 0h2v-2.6l-3.3 3.3-1.4-1.4 3.3-3.3H14v-2h6v6h-2v-2.6z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-folder{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-eye{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c5 0 9 4.5 10 7-1 2.5-5 7-10 7S3 14.5 2 12c1-2.5 5-7 10-7zm0 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}
.fa-tags{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12l8-8h9a1 1 0 0 1 1 1v9l-8 8-10-10zm12.5-6a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5z'/%3E%3C/svg%3E");-webkit-mask-image:var(--m);mask-image:var(--m)}

/* ================= UTILITIES (Bootstrap subset used by templates) ==== */

.container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; }

.row { display: flex; flex-wrap: wrap; margin-inline: -0.5rem; }
.row > * { padding-inline: 0.5rem; width: 100%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .text-md-end { text-align: right; }
}
@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .mb-lg-0 { margin-bottom: 0 !important; }
}

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-between { justify-content: space-between; }
.justify-content-start { justify-content: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.ms-auto { margin-left: auto; }
.gap-1 { gap: 0.25rem; }
.gap-3 { gap: 1rem; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.text-md-end { text-align: left; }
.list-unstyled { list-style: none; padding-left: 0; }
.text-decoration-none { text-decoration: none !important; }

.fw-bold { font-weight: 700; }
.fs-5 { font-size: 1.25rem; }
.fw-normal { font-weight: 400; }

.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.my-4 { margin-block: 1.5rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--accent-blue) !important; }
.text-success { color: var(--accent-green) !important; }
.text-info { color: var(--accent-blue) !important; }
.text-danger { color: var(--accent-red) !important; }
.text-dark { color: var(--text-primary) !important; }

/* ---- badge ---- */
.badge {
  display: inline-block; padding: 0.35em 0.65em;
  font-size: 0.75em; font-weight: 600; line-height: 1;
  border-radius: 50rem; vertical-align: middle;
}
.bg-primary { background: var(--accent-blue) !important; color: #fff !important; }
.bg-info { background: #17a2b8 !important; color: #fff !important; }
.bg-success { background: var(--accent-green) !important; color: #fff !important; }
.bg-warning { background: #ffc107 !important; color: #212529 !important; }
.bg-secondary { background: var(--dark-gray) !important; color: #fff !important; }
.bg-danger { background: #dc3545 !important; color: #fff !important; }
.bg-white { background: var(--primary-white) !important; }

/* ---- alert ---- */
.alert { padding: 0.9rem 1.1rem; border-radius: var(--radius-md); border: 1px solid transparent; margin-bottom: 1rem; }
.alert-info { background: var(--accent-blue-light); border-color: rgba(27,75,143,.35); color: var(--text-primary); }
.alert-success { background: var(--accent-green-light); border-color: rgba(14,122,70,.35); color: var(--text-primary); }
.alert-danger { background: #fdecea; border-color: rgba(220,53,69,.4); color: #7f1d1d; }
.alert-warning { background: #fff8e1; border-color: rgba(255,193,7,.5); color: #665318; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.6rem 1.2rem; border: 1px solid transparent; border-radius: var(--radius-md);
  font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: all .2s ease; }
.btn-primary { background: var(--text-primary); color: #fff; }
.btn-primary:hover { background: var(--accent-green); }
.btn-lg { padding: 0.9rem 1.8rem; font-size: 1.05rem; }
.btn-link { background: none; border: 0; color: var(--text-secondary); cursor: pointer; }
.btn-close { width: 1em; height: 1em; border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.25rem; line-height: 1; }
.btn-close::before { content: '\00d7'; }

/* ---- forms ---- */
.form-label { display: inline-block; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.35rem; font-size: 0.9rem; }
.form-control, .form-select { display: block; width: 100%;
  border: 1px solid var(--medium-gray); border-radius: var(--radius-md);
  padding: 0.7rem 1rem; font-size: 0.95rem; font-family: inherit;
  background: var(--primary-white); color: var(--text-primary); transition: border-color .2s ease, box-shadow .2s ease; }
.form-select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236C757D' stroke-width='2' stroke-linecap='round' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 16px;
  padding-right: 2.4rem; }
textarea.form-control { resize: vertical; }
.form-control:focus, .form-select:focus { border-color: var(--accent-green); box-shadow: 0 0 0 3px var(--accent-green-light); outline: none; }
.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check-input { width: 1.05em; height: 1.05em; accent-color: var(--accent-green); flex-shrink: 0; }
.form-text { font-size: 0.82rem; }

/* ================= NAVBAR ================= */
.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center;
  background: var(--primary-white) !important;
  border-bottom: 1px solid var(--medium-gray);
  box-shadow: none !important; }
.sticky-top { position: sticky; top: 0; z-index: 1030; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.navbar > .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.navbar-brand { font-family: var(--font-secondary); font-weight: 700; font-size: 1.15rem;
  color: var(--text-primary) !important; text-decoration: none; display: inline-flex; align-items: center; }
.navbar-brand:hover { color: var(--accent-blue) !important; }
.navbar-brand .fas { font-size: 1.5rem; }
.navbar-nav { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.nav-item { list-style: none; }
.nav-link { display: inline-flex; align-items: center; font-weight: 500; color: var(--text-secondary) !important;
  padding: 0.5rem 1rem; border-radius: var(--radius-md); transition: all 0.2s ease; }
.nav-link:hover { color: var(--accent-blue) !important; background: var(--accent-blue-light); }
.navbar-toggler { border: 2px solid var(--medium-gray); padding: 0.35rem 0.6rem; border-radius: var(--radius-md);
  background: none; cursor: pointer; }
.navbar-toggler:hover { border-color: var(--accent-blue); background: var(--accent-blue-light); }
.navbar-toggler-icon { display: block; width: 1.4em; height: 1.4em; background-color: var(--text-primary);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center/contain no-repeat; }
.collapse { display: none; }
.collapse.show { display: block; }
.navbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.navbar-cta { padding: 0.4rem 0.75rem; font-size: 0.8rem; gap: 0.35rem; white-space: nowrap; }
.nav-link.active { color: var(--accent-blue) !important; background: var(--accent-blue-light); }

/* ---- navbar dropdowns ---- */
.nav-item.dropdown { position: relative; }
.nav-link.dropdown-toggle { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 0.9rem; }
.dd-caret { font-size: 0.6rem; margin-left: 0.15rem; transition: transform 0.15s ease; }
.dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 280px;
  background: var(--primary-white); border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.4rem;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 1040; }
.dropdown-menu-end { left: auto; right: 0; }
.dropdown-item { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md); color: var(--text-secondary); text-align: left; }
.dropdown-item:hover { background: var(--accent-blue-light); color: var(--accent-blue); }
.dropdown-item .fas { margin-top: 0.15rem; color: var(--text-muted); }
.dropdown-item:hover .fas { color: var(--accent-blue); }
.dd-title { display: block; font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.dd-desc { display: block; font-size: 0.78rem; color: var(--text-muted); line-height: 1.35; }
.dd-label { display: block; padding: 0.5rem 0.7rem 0.25rem; font-size: 0.68rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.nav-item.dropdown.open > .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 992px) {
  .nav-item.dropdown:hover > .dropdown-menu,
  .nav-item.dropdown:focus-within > .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-item.dropdown:hover .dd-caret,
  .nav-item.dropdown:focus-within .dd-caret,
  .nav-item.dropdown.open .dd-caret { transform: rotate(180deg); }
  .dropdown-menu::before { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px; }
}
@media (max-width: 991.98px) {
  .navbar-brand { order: 1; }
  .navbar-actions { order: 2; margin-left: auto; }
  .navbar-collapse { order: 3; flex-basis: 100%; background: var(--primary-white); border: 1px solid var(--medium-gray);
    border-radius: var(--radius-lg); padding: var(--spacing-md); margin-top: var(--spacing-sm);
    box-shadow: var(--shadow-md); width: 100%; }
  .navbar-nav { width: 100%; }
  .navbar-nav .nav-link { width: 100%; justify-content: center; }
  .navbar-cta { display: none; }
  .nav-item.dropdown { width: 100%; }
  .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; min-width: 0; padding: 0 0 0.25rem; display: none; }
  .nav-item.dropdown.open > .dropdown-menu { display: block; }
  .dropdown-item { padding: 0.5rem 0.7rem; }
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse { display: flex !important; order: 2; flex: 1 1 auto; }
  .navbar-expand-lg .navbar-nav { flex-direction: row; margin-left: 1rem; align-items: center; }
  .navbar-actions { order: 3; margin-left: auto; }
  .navbar-expand-lg .navbar-toggler { display: none; }
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--accent-blue-light); border-color: var(--accent-blue); }

/* ================= FOOTER ================= */
footer { background: var(--primary-white) !important; border-top: 1px solid var(--medium-gray);
  padding: var(--spacing-lg) 0; margin-top: var(--spacing-xl); }
footer h5, footer h6 { font-family: var(--font-secondary); }
footer a { transition: all 0.2s ease; }
footer a:hover { color: var(--accent-blue) !important; }
footer .list-unstyled li a { padding: 0.25rem 0; display: inline-block; }
footer .list-unstyled li a:hover { padding-left: 0.5rem; }
footer .d-flex.gap-3 a { width: 35px; height: 35px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--light-gray); border: 1px solid var(--medium-gray);
  border-radius: var(--radius-md); }
footer .d-flex.gap-3 a:hover { background: var(--accent-blue-light); }
footer hr { opacity: 0.5; }
@media (max-width: 768px) {
  footer { text-align: center; }
  footer .d-flex.gap-3 { justify-content: center; }
}

/* ================= MODAL (dependency-free) ================= */
.modal { display: none; position: fixed; inset: 0; z-index: 1080; overflow-y: auto;
  background: rgba(0,0,0,0.5); padding: 0.5rem; }
.modal.show { display: flex; align-items: flex-start; justify-content: center; }
.modal.show .modal-content { animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.fade { opacity: 1; }
.modal-dialog { width: 100%; max-width: 560px; margin: 1.75rem auto; }
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); display: flex; flex-direction: column; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-content { background: var(--primary-white); border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { background: var(--primary-white);
  border-bottom: 1px solid var(--medium-gray); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--spacing-md); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-family: var(--font-secondary); font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: var(--spacing-xs); }
.modal-body { padding: var(--spacing-lg); color: var(--text-secondary); line-height: 1.6; }
.modal-footer { background: var(--light-gray); border-top: 1px solid var(--medium-gray);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--spacing-md); }
body.modal-open { overflow: hidden; }

/* ================= PAGE COMPONENTS ================= */
.content-container { max-width: 800px; margin: 0 auto; padding: var(--spacing-lg); }
.content-card { background: var(--primary-white); border-radius: var(--radius-lg);
  border: 1px solid var(--medium-gray);
  padding: var(--spacing-xl); margin-bottom: var(--spacing-md); }
.content-title { font-family: var(--font-secondary); font-weight: 700; font-size: 2rem;
  color: var(--text-primary); margin-bottom: var(--spacing-md); }
.content-body { font-size: 1.05rem; line-height: 1.8; color: var(--text-secondary); }
.content-body p { margin-bottom: var(--spacing-md); }
.content-body ul, .content-body ol { margin-bottom: var(--spacing-md); padding-left: var(--spacing-lg); }
.content-body li { margin-bottom: var(--spacing-xs); }
.content-body h2 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.4rem;
  color: var(--text-primary); margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); }
.content-body h3 { font-family: var(--font-secondary); font-weight: 600; font-size: 1.2rem;
  color: var(--text-primary); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); }

.glass-card { background: var(--primary-white); border-radius: var(--radius-lg);
  border: 1px solid var(--medium-gray);
  padding: var(--spacing-lg); margin-bottom: var(--spacing-md); }

.header-section { text-align: left; max-width: 720px; }
.header-title { font-family: var(--font-secondary); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--text-primary);
  letter-spacing: -0.02em; }
.header-subtitle { font-size: clamp(0.95rem, 1.6vw, 1.1rem); color: var(--text-muted); font-weight: 400; margin-top: 0.35rem; }
.main-container { padding: var(--spacing-md) 0; }
.search-title { font-family: var(--font-secondary); font-weight: 600; font-size: 1.25rem;
  color: var(--text-primary); margin-bottom: var(--spacing-md); }
.search-card { position: relative; top: 0; z-index: 100; }

.btn-modern { border: 1px solid transparent; border-radius: var(--radius-md); padding: 0.65rem 1.25rem;
  font-weight: 600; font-size: 0.9rem; font-family: inherit; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  display: inline-flex; align-items: center;
  justify-content: center; gap: var(--spacing-xs); }
.btn-primary-modern { background: var(--text-primary); color: var(--paper); }
.btn-primary-modern:hover { background: var(--accent-green); color: #fff; }
.btn-success-modern { background: var(--accent-green); color: #fff; }
.btn-success-modern:hover { background: #0B6238; }
.btn-outline-modern { background: transparent; border: 1px solid var(--medium-gray); color: var(--text-secondary); }
.btn-outline-modern:hover { border-color: var(--text-primary); color: var(--text-primary); background: transparent; }
.btn-outline-modern.active { background: var(--text-primary); border-color: var(--text-primary); color: var(--paper); }
.btn-group-modern .btn-modern { border-radius: 0; }
.btn-group-modern .btn-modern:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.btn-group-modern .btn-modern:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.location-btn { width: 100%; position: relative; overflow: hidden; }
.location-status { font-size: 0.85rem; margin-top: var(--spacing-xs); padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm); background: var(--light-gray);
  border-left: 3px solid var(--accent-blue); }

/* Map */
#map { height: 450px; border-radius: var(--radius-lg); border: 1px solid var(--medium-gray);
  margin-bottom: var(--spacing-md); overflow: hidden; }
.user-location-marker { background: none; border: 0; }

/* Stats */
.stats-item { text-align: center; padding: var(--spacing-sm); }
.stats-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.stats-value { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Loading / no results */
.loading, .no-results { text-align: center; padding: var(--spacing-xl); color: var(--text-muted); }
.spinner { width: 50px; height: 50px; border: 4px solid var(--medium-gray);
  border-top: 4px solid var(--accent-green); border-radius: 50%;
  animation: spin 1s linear infinite; margin: 0 auto var(--spacing-md); }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.no-results .fas { font-size: 3rem; color: var(--medium-gray); margin-bottom: var(--spacing-md); }
.results-count { background: var(--light-gray); color: var(--text-secondary);
  border: 1px solid var(--medium-gray); padding: 0.3rem 0.75rem; border-radius: 999px;
  font-weight: 600; font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* ================= STATION CARDS (route planner + list fallback) ================= */
.station-card { background: var(--primary-white); border-radius: var(--radius-lg);
  padding: var(--spacing-md); margin-bottom: var(--spacing-sm);
  border: 1px solid var(--medium-gray); cursor: pointer; position: relative;
  overflow: hidden; transition: border-color 0.15s ease; }
.station-card:hover { border-color: var(--dark-gray); }
.station-name { font-family: var(--font-secondary); font-weight: 600; font-size: 1.1rem;
  color: var(--text-primary); margin-bottom: var(--spacing-xs); }
.station-address { color: var(--text-muted); font-size: 0.9rem;
  margin-bottom: var(--spacing-sm); line-height: 1.4; }
.station-address .fas { color: var(--accent-blue); margin-right: var(--spacing-xs); }

.price-badge { display: inline-block; padding: 0.3rem 0.6rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.7rem; margin: 0.15rem;
  background: var(--light-gray); color: var(--text-secondary); border: 1px solid var(--medium-gray);
  font-variant-numeric: tabular-nums; }
.price-badge.regular { color: var(--accent-green); }
.price-badge.premium { color: var(--accent-amber); }
.price-badge.diesel { color: var(--text-secondary); }
.price-badge.default { color: var(--accent-blue); }

.distance-badge { display: inline-block; background: var(--light-gray); border: 1px solid var(--medium-gray);
  color: var(--text-secondary); padding: 0.3rem 0.65rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.8rem; margin-bottom: var(--spacing-xs);
  font-variant-numeric: tabular-nums; }
.fuel-price { font-family: var(--font-secondary); font-weight: 700; font-size: 1.25rem;
  color: var(--accent-green); font-variant-numeric: tabular-nums; }
.quick-actions { display: flex; gap: 0.4rem; }
.quick-action-btn { padding: 0.45rem 0.8rem; border-radius: var(--radius-md); font-size: 0.8rem;
  font-weight: 600; transition: background 0.15s ease; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem; }
.btn-navigate { background: var(--text-primary); color: var(--primary-white); }
.btn-navigate:hover { background: var(--accent-green); color: #fff; }
.btn-map { background: var(--light-gray); color: var(--text-secondary); border: 1px solid var(--medium-gray); }
.btn-map:hover { border-color: var(--text-primary); color: var(--text-primary); }
.btn-details { background: var(--accent-blue-light); color: var(--accent-blue); }
.btn-details:hover { background: var(--accent-blue); color: #fff; }
.btn-report { background: transparent; border: 1px solid var(--medium-gray); color: var(--text-muted); }
.btn-report:hover { border-color: var(--accent-amber); color: var(--accent-amber); }

.station-name-btn { background: none; border: 0; padding: 0; font-family: var(--font-secondary);
  font-size: 1.1rem; font-weight: 600; color: var(--text-primary); cursor: pointer; text-align: left; }
.station-name-btn:hover { color: var(--accent-blue); }

.station-detail-meta p { margin-bottom: 0.3rem; }
.detail-section-title { font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin: 1rem 0 0.5rem; }
.detail-price-list { border: 1px solid var(--medium-gray); border-radius: var(--radius-md); overflow: hidden; }
.detail-price-row { display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem 0.8rem; background: var(--primary-white);
  border-bottom: 1px solid var(--light-gray); }
.detail-price-row:last-child { border-bottom: 0; }
.detail-price-row strong { font-variant-numeric: tabular-nums; }
.station-modal-actions { gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

.no-results .btn-modern { margin-top: var(--spacing-sm); }

.offline-container { text-align: center; padding-top: var(--spacing-xl); }
.offline-icon { font-size: 4rem; color: var(--accent-amber); }
.offline-list { list-style: none; padding: 0; margin: var(--spacing-sm) 0; }
.offline-list li { margin-bottom: 0.5rem; }
.offline-list a { display: inline-block; padding: 0.5rem 0.75rem; background: var(--primary-white);
  border: 1px solid var(--medium-gray); border-radius: var(--radius-md); }
.offline-list a:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.offline-actions { margin-top: var(--spacing-lg); }

/* ================= PRECISION UI COMPONENTS ================= */
.eyebrow { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.4rem; }

.hero { padding: var(--spacing-lg) 0 var(--spacing-sm); }
.hero-actions { margin-top: var(--spacing-md); }
.cta-main { background: var(--accent-green); color: #fff; font-weight: 700;
  font-size: 1rem; padding: 0.9rem 1.5rem; }
.cta-main:hover { background: #0B6238; color: #fff; }
.cta-main:active { background: #095230; }
.cta-note { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted); }

.fuel-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.fuel-tabs .btn-modern { padding: 0.45rem 0.85rem; font-size: 0.85rem; }

.stats-strip { display: flex; align-items: stretch; padding: var(--spacing-sm) var(--spacing-md); }
.stats-strip .stat { flex: 1; text-align: center; padding: 0.25rem 0.5rem; }
.stats-strip .stat + .stat { border-left: 1px solid var(--medium-gray); }
.stat-label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted); }
.stat-value { display: block; font-size: 1.35rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-primary); }
.stat-value.save { color: var(--accent-green); }
.stat-value.spend { color: var(--accent-red); }

/* Ranked result rows */
.result-row { display: flex; gap: var(--spacing-sm); background: var(--primary-white);
  border: 1px solid var(--medium-gray); border-radius: var(--radius-lg);
  padding: var(--spacing-sm) var(--spacing-md); margin-bottom: 0.6rem;
  transition: border-color 0.15s ease; }
.result-row:hover { border-color: var(--dark-gray); }
.result-row.rank-first { border-color: var(--accent-green); }
.rank-chip { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--radius-sm); background: var(--light-gray);
  border: 1px solid var(--medium-gray); font-weight: 700; font-size: 0.85rem;
  font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.rank-first .rank-chip { background: var(--accent-green); border-color: var(--accent-green); color: #fff; }
.result-info { flex: 1; min-width: 0; }
.result-info .station-name { margin-bottom: 0.1rem; }
.result-prices { margin-top: 0.4rem; display: flex; flex-wrap: wrap; align-items: center; }
.delta-chip { display: inline-block; margin-left: 0.25rem; padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.delta-chip.save { background: var(--accent-green-light); color: var(--accent-green); }
.delta-chip.spend { background: rgba(192, 51, 27, 0.08); color: var(--accent-red); }
.result-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: 0.4rem; text-align: right; }
.dist-chip { display: inline-block; background: var(--light-gray); border: 1px solid var(--medium-gray);
  color: var(--text-secondary); border-radius: 999px; padding: 0.2rem 0.6rem;
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-main { font-family: var(--font-secondary); font-size: 1.45rem; font-weight: 800;
  color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rank-first .price-main { color: var(--accent-green); }
.price-main.na { color: var(--text-muted); font-weight: 600; }
.muted-note { color: var(--text-muted); }
.result-side .quick-action-btn { padding: 0.4rem 0.7rem; }

.icon-btn { width: 38px; height: 38px; padding: 0; justify-content: center;
  border-radius: 999px; border: 1px solid var(--medium-gray); background: transparent;
  color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; }
.icon-btn:hover { border-color: var(--text-primary); color: var(--text-primary); background: var(--light-gray); }

.location-status.is-ok { background: var(--accent-green-light); border-left-color: var(--accent-green); }
.location-status.is-warn { background: var(--light-gray); border-left-color: var(--accent-amber); }
.location-status.is-error { background: rgba(192, 51, 27, 0.08); border-left-color: var(--accent-red); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: 0.5rem; top: -3.5rem; z-index: 1100;
  background: var(--text-primary); color: var(--paper); padding: 0.6rem 1rem;
  border-radius: var(--radius-md); font-weight: 600; transition: top 0.15s ease; }
.skip-link:focus { top: 0.5rem; color: var(--paper); }

@media (max-width: 640px) {
  .hero { padding-top: var(--spacing-md); }
  .result-row { flex-wrap: wrap; }
  .result-side { width: 100%; flex-direction: row; align-items: center;
    justify-content: space-between; text-align: left; }
  .price-main { font-size: 1.3rem; }
}

/* ================= DARK MODE ================= */
[data-theme="dark"] {
  --paper: #0F1114;
  --primary-white: #16181C;
  --light-gray: #1D2024;
  --medium-gray: #2A2E33;
  --dark-gray: #9A9EA6;
  --text-primary: #E8E6E1;
  --text-secondary: #C9C7C1;
  --text-muted: #9A9EA6;
  --accent-blue: #7BA7E0;
  --accent-green: #3DD68C;
  --accent-blue-light: #1B2430;
  --accent-green-light: #14261C;
  --accent-red: #F16A50;
  --accent-amber: #E8A33D;
  --glass-bg: #16181C;
  --glass-border: #2A2E33;
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] body { background: var(--paper); }
[data-theme="dark"] .navbar { background: var(--primary-white) !important; }
[data-theme="dark"] .modal-header { background: var(--primary-white); }
[data-theme="dark"] .modal-footer { background: var(--light-gray); }
[data-theme="dark"] .alert-info { background: var(--accent-blue-light); border-color: var(--accent-blue); }
[data-theme="dark"] .alert-success { background: var(--accent-green-light); border-color: var(--accent-green); }
[data-theme="dark"] .alert-danger { background: rgba(241,106,80,0.12); border-color: var(--accent-red); }
[data-theme="dark"] .alert-warning { background: rgba(232,163,61,0.12); border-color: var(--accent-amber); color: #E8C48A; }
[data-theme="dark"] .station-card { background: var(--light-gray); border-color: var(--medium-gray); }
[data-theme="dark"] .article-card { background: var(--light-gray); border-color: var(--medium-gray); }
[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.85) invert(1) hue-rotate(180deg) contrast(0.9); }
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--light-gray); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--medium-gray); border-radius: 5px; }

/* Theme swap: only animate while .theme-transition is present (set by JS
   for 300ms on toggle) — never on every element by default. */
.theme-transition *, .theme-transition *::before, .theme-transition *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  .main-container { padding: var(--spacing-xs) 0; }
  .header-section { padding: var(--spacing-md) 0; margin-bottom: var(--spacing-md); }
  .search-card { padding: var(--spacing-md); }
  #map { height: 300px; }
  .station-card { padding: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
  .station-name { font-size: 1rem; }
  .station-address { font-size: 0.85rem; }
  .quick-actions { flex-wrap: wrap; margin-top: var(--spacing-xs); }
  .quick-action-btn { flex: 1; min-width: 100px; justify-content: center; font-size: 0.8rem; padding: 0.6rem 0.8rem; }
  .price-badge { font-size: 0.75rem; padding: 0.3rem 0.6rem; margin: 0.2rem; }
  .content-container { padding: var(--spacing-md); }
  .content-card { padding: var(--spacing-md); }
  .content-title { font-size: 1.5rem; }
  .modal-body { padding: var(--spacing-md); }
  .modal-header { padding: var(--spacing-sm) var(--spacing-md); }
}
@media (max-width: 480px) {
  .header-title { font-size: 1.5rem; }
  .header-subtitle { font-size: 0.9rem; }
  .search-card { padding: var(--spacing-sm); }
  #map { height: 250px; }
  .station-card { padding: 0.75rem; }
}

/* Performance: drop expensive blur effects on small screens and when the
   user opts out of transparency effects at the OS level. */
@media (max-width: 768px), (prefers-reduced-transparency: reduce) {
  .glass-card, .navbar, footer, .content-card, .modal-content {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .glass-card { background: var(--primary-white); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Touch devices: no hover lift, give tap feedback instead */
@media (hover: none) {
  .station-card:hover, .btn-modern:hover { transform: none; }
  .station-card:active { transform: scale(0.98); }
  .btn-modern:active { transform: scale(0.97); }
}

/* ================= STATE + ONE-OFF UTILITIES (CSP: style-src 'self') =====
   Inline style attributes are no longer used in templates: element state is
   a class, decoration is a utility. JS reading/writing .style is still fine
   under CSP, but these keep markup and behavior consistent. */
.is-hidden { display: none !important; }

.u-text-center { text-align: center; }
.u-pad-top-xl { padding-top: var(--spacing-xl); }
.u-mt-sm { margin-top: var(--spacing-sm); }
.u-mt-lg { margin-top: var(--spacing-lg); }
.u-ml-sm { margin-left: 0.5rem; }
.u-mb-sm { margin-bottom: var(--spacing-sm); }
.u-mb-md { margin-bottom: var(--spacing-md); }
.u-accent { color: var(--accent-blue); }
.u-error-code { font-size: 5rem; font-weight: 700; color: var(--accent-blue); line-height: 1; }
.icon-5rem { font-size: 5rem; }
.u-hero-icon { font-size: 5rem; color: rgba(255, 255, 255, 0.8); }
.icon-3rem { font-size: 3rem; }
.icon-2-5rem { font-size: 2.5rem; }
.hp-field { position: absolute; left: -9999px; }

/* Map dot markers (divIcon HTML can't carry inline styles under CSP) */
.user-location-dot { background: var(--accent-blue); width: 20px; height: 20px;
  border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.route-dot { width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.route-dot--origin { background: #0E7A46; }
.route-dot--destination { background: #C0331B; }

/* Leaflet popup action buttons (were inline-styled before the CSP cleanup) */
.map-popup-actions { display: flex; gap: 8px; margin-top: 6px; }
.map-popup-btn { display: inline-block; padding: 5px 10px; border-radius: var(--radius-sm);
  color: #fff; text-decoration: none; font-weight: 600; font-size: 0.8rem; }
.map-popup-btn:hover { color: #fff; filter: brightness(0.95); }
.map-popup-btn--details { background: var(--accent-blue); }
.map-popup-btn--navigate { background: var(--accent-green); }
.map-popup-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

/* Result skeletons (perceived performance while a search is in flight) */
.skeleton-row { display: flex; gap: var(--spacing-sm); background: var(--primary-white);
  border: 1px solid var(--medium-gray); border-radius: var(--radius-lg);
  padding: var(--spacing-sm) var(--spacing-md); margin-bottom: 0.6rem; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.sk { display: block; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--light-gray) 25%, var(--medium-gray) 37%, var(--light-gray) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
.sk-rank { width: 30px; height: 30px; flex-shrink: 0; }
.sk-title { height: 1rem; width: 60%; }
.sk-line { height: 0.8rem; width: 85%; }
.sk-chips { height: 0.9rem; width: 45%; }
.sk-price { width: 90px; height: 1.6rem; margin-left: auto; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Savings summary + restored-results banner */
.savings-banner { display: flex; align-items: center; gap: var(--spacing-xs);
  background: var(--accent-green-light); border: 1px solid rgba(14, 122, 70, 0.35);
  border-radius: var(--radius-md); padding: 0.7rem 1rem; margin-bottom: var(--spacing-sm);
  font-size: 0.92rem; color: var(--text-primary); }
.savings-banner .fas { color: var(--accent-green); }
.results-banner { display: flex; justify-content: space-between; align-items: center;
  gap: var(--spacing-sm); background: var(--accent-blue-light);
  border: 1px solid rgba(27, 75, 143, 0.35); border-radius: var(--radius-md);
  padding: 0.55rem 0.9rem; margin-bottom: var(--spacing-sm);
  font-size: 0.85rem; color: var(--text-secondary); }
[data-theme="dark"] .savings-banner { border-color: var(--accent-green); }
[data-theme="dark"] .results-banner { border-color: var(--accent-blue); }