/* Refuelia — clean, minimal, easy to scan. One typeface, soft edges, calm color. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink: #10201a;
  --ink-soft: #5a6b62;
  --paper: #f8faf9;
  --paper-2: #eef2f0;
  --paper-3: #ffffff;
  --amber: #f59e0b;
  --amber-deep: #b45309;
  --brand: #0e9f6e;
  --brand-deep: #0a7c54;
  --green: #0e9f6e;
  --green-soft: #e2f4ec;
  --red: #dc4a3d;
  --red-soft: #fbe9e7;
  --navy: #0f1b2d;
  --line: #e7ece9;
  --shadow-color: rgba(16,32,26,.11);
  --shadow: 0 1px 2px rgba(16,32,26,.04), 0 20px 44px -22px var(--shadow-color);
  --shadow-sm: 0 1px 2px rgba(16,32,26,.04), 0 10px 24px -16px var(--shadow-color);
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1120px;
  color-scheme: light;
}

html[data-theme="dark"]{
  --ink: #eaf1ed;
  --ink-soft: #96a69c;
  --paper: #0d1311;
  --paper-2: #141c19;
  --paper-3: #16201c;
  --amber: #fbbf24;
  --amber-deep: #fcd34d;
  --brand: #34d399;
  --brand-deep: #6ee7b7;
  --green: #34d399;
  --green-soft: rgba(52,211,153,.15);
  --red: #f87171;
  --red-soft: rgba(248,113,113,.15);
  --navy: #0a1119;
  --line: #24312c;
  --shadow-color: rgba(0,0,0,.5);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 44px -22px var(--shadow-color);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 10px 24px -16px var(--shadow-color);
  color-scheme: dark;
}
html{ transition: color-scheme .2s; scroll-behavior: smooth; }
body{ transition: background-color .2s ease, color .2s ease; }

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

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
}
h1 em, h2 em, h3 em{ font-style: normal; font-weight: 800; color: var(--brand-deep); }

p{ margin: 0 0 1em; }
a{ color: inherit; }
img,svg{ max-width:100%; display:block; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.mono{ font-family: 'IBM Plex Mono', monospace; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px; font-weight:600; letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
}
.tag.green{ background: var(--green-soft); color: var(--green); }
.tag.red{ background: var(--red-soft); color: var(--red); }
.tag.amber{ background: rgba(255,122,47,.12); color: var(--amber-deep); }

/* ---------- nav ---------- */
.site-nav{
  position: sticky; top:0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 68px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size: 19px;
  text-decoration:none; color: var(--ink);
}
.brand .mark{ width: 26px; height: 26px; flex-shrink:0; }

.nav-right{ display:flex; align-items:center; gap:10px; min-width:0; }
.nav-links{
  display:flex; align-items:center; gap: 18px;
  list-style:none; margin:0; padding:0;
  min-width:0;
}
.nav-links a{
  text-decoration:none; font-weight: 500; font-size: 14px;
  color: var(--ink-soft);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active{ color: var(--ink); border-color: var(--brand); }
.nav-cta{
  font-weight:600 !important; color: #fff !important;
  background: var(--ink); border-radius: 999px;
  padding: 8px 16px !important;
  white-space: nowrap;
}
html[data-theme="dark"] .nav-cta{ color: var(--ink) !important; background: var(--brand); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:8px; width:38px; height:38px; flex-shrink:0; cursor:pointer; }
.nav-toggle span{ display:block; width:16px; height:2px; background:var(--ink); margin:4px auto; }

/* Drawer-only items: hidden on desktop, shown inside the mobile slide-in panel. */
.nav-drawer-head, .nav-drawer-cta{ display:none; }

@media (max-width: 1320px){
  /* The nav's backdrop-filter creates a containing block that traps the
     position:fixed drawer inside the 68px bar (drawer collapses to the header
     only, esp. on iOS Safari). Drop it here and lift the bar above the
     backdrop so the drawer anchors to the viewport and sits on top. */
  .site-nav{ z-index:1301; backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper); }
  /* Mobile menu = a tidy slide-in panel from the right, not a full-screen sheet. */
  .nav-links{
    position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(88vw, 340px);
    background: var(--paper); border-left:1px solid var(--line);
    box-shadow:-10px 0 44px rgba(20,23,28,.20);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:16px 20px calc(20px + env(safe-area-inset-bottom));
    gap:0;
    transform:translateX(100%); transition:transform .28s cubic-bezier(.32,.72,0,1);
    display:flex; z-index:1300; overflow-y:auto; overscroll-behavior:contain;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
  .nav-links a{ display:block; width:100%; padding:13px 4px; font-size:16px; border-bottom:1px solid var(--line); }
  .nav-links a:hover, .nav-links a.active{ border-color:var(--line); color:var(--brand-deep); }
  .nav-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:2px 0 12px; margin-bottom:4px; border-bottom:1px solid var(--line); }
  .nav-drawer-head span{ font-weight:800; font-size:15px; color:var(--ink); }
  .nav-close{ background:var(--paper-2); border:none; width:34px; height:34px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; color:var(--ink); }
  .nav-drawer-cta{ display:block; margin-top:16px; border:none !important; }
  .nav-drawer-cta a.btn{ display:block; text-align:center; border-bottom:none; }
  .nav-contact-li{ margin-top:8px; border:none !important; }
  .nav-contact-li a{ border-bottom:none; }
  .nav-contact-li .nav-cta{ display:block; text-align:center; color:#fff !important; }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(15,20,18,.5); z-index:1290; opacity:0; transition:opacity .28s ease; }
  .nav-backdrop.show{ opacity:1; }
  body.nav-open{ overflow:hidden; }
}

/* Below the hamburger breakpoint the top bar only has room for the logo +
   theme/lang/menu controls (the rest of nav-links, including the "Join the
   waitlist" CTA, is already tucked into the dropdown). Keep that trio from
   crowding the logo on narrow phones by shrinking the lang pill to
   icon-only and tightening gaps, rather than changing what's shown. */
@media (max-width: 480px){
  .site-nav .wrap{ padding-left:16px; padding-right:16px; }
  .nav-right{ gap:6px; }
  .brand{ font-size:16px; gap:7px; }
  .lang-btn{ padding:8px; gap:0; }
  .lang-btn .code{ display:none; }
  .theme-toggle, .nav-toggle{ width:34px; height:34px; }
}

/* ---------- theme + lang toggles ---------- */
.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex-shrink:0; color: var(--ink-soft);
  background: transparent; border:1px solid var(--line); border-radius:999px;
  cursor:pointer;
}
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

.lang-switch{ position:relative; margin-left: 2px; }
.lang-btn{
  display:flex; align-items:center; gap:6px; color: var(--ink-soft);
  background: transparent; border:1px solid var(--line); border-radius:999px;
  padding: 8px 12px; font-family:'IBM Plex Mono'; font-size:11px; font-weight:600;
  cursor:pointer; text-transform:uppercase; letter-spacing:.03em;
}
.lang-btn svg{ width:14px; height:14px; }
.lang-menu{
  display:none; position:absolute; right:0; top:calc(100% + 8px);
  background: var(--paper-3); border:1px solid var(--line); border-radius:12px;
  box-shadow: var(--shadow); width:264px; max-width:92vw; z-index:200; overflow:hidden;
  flex-direction:column; max-height:min(65vh, 460px);
}
.lang-menu.open{ display:flex; }
.lang-search-wrap{ padding:10px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.lang-search{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:9px;
  background: var(--paper); color: var(--ink); font-family:'Inter'; font-size:14px;
}
.lang-search::placeholder{ color: var(--ink-soft); }
.lang-search:focus{ outline:none; border-color: var(--brand); }
.lang-scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; flex:1 1 auto; padding:4px 0 6px; }
.lang-group-label{
  font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color: var(--ink-soft); margin:9px 14px 3px;
}
.lang-menu button{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:10px; padding:9px 14px; background:none; border:none; text-align:left;
  font-family:'Inter'; font-size:14px; font-weight:500; cursor:pointer; color: var(--ink);
}
.lang-menu button:hover{ background: var(--paper-2); }
.lang-menu button .code{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-soft); }
.lang-menu button.active{ color: var(--brand-deep); font-weight:700; }
.lang-noresult{ padding:14px; text-align:center; color: var(--ink-soft); font-size:13px; }
@media (max-width:760px){
  .lang-menu{ position:fixed; right:10px; left:auto; top:62px; width:min(300px, 92vw); max-height:70vh; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter'; font-weight:600; font-size:15px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--paper-2);
  text-decoration:none; color: var(--ink);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active{ transform: translateY(0); box-shadow: none; }
.btn.primary{ background: var(--ink); color:#fff; }
.btn.primary:hover{ background: #000; }
html[data-theme="dark"] .btn.primary{ background: var(--brand); color: #06231a; }
html[data-theme="dark"] .btn.primary:hover{ background: var(--brand-deep); }
.btn.dark{ background: var(--navy); color: #fff; }
.btn.ghost{ background: transparent; border-color: var(--line); box-shadow:none; }
.btn.ghost:hover{ background: var(--paper-2); border-color: var(--ink-soft); }
.btn.block{ width:100%; }

:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- hero ---------- */
.hero{ padding: 88px 0 56px; }
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center;
}
.eyebrow{
  display:inline-block; font-family:'IBM Plex Mono'; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color: var(--brand-deep);
  margin-bottom: 16px;
}
.hero h1{ font-size: clamp(32px, 4.6vw, 54px); }
.hero .lede{ font-size: 18px; color: var(--ink-soft); max-width: 46ch; }
.hero-actions{ display:flex; gap:12px; margin-top: 28px; flex-wrap:wrap; align-items:center; }
.hero-note{ font-size: 13px; color: var(--ink-soft); margin-top:14px; }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
}

/* ---------- mock map ---------- */
.map-card{
  position:relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy);
  box-shadow: var(--shadow);
  overflow:hidden;
  aspect-ratio: 4/3.3;
}
.map-card svg{ width:100%; height:100%; display:block; }
.map-card #hero-live-map{ width:100%; height:100%; }
.map-topbar{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 14px;
  background: rgba(12,15,20,.55);
  color:#fff; font-family:'IBM Plex Mono'; font-size:11px;
  z-index:401; /* above Leaflet's own panes (z-index up to ~400) */
}
.map-topbar a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); }
.map-topbar a:hover{ border-color:#fff; }
.dot-live{ width:8px; height:8px; border-radius:50%; background:#3ddc84; display:inline-block; margin-right:6px; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse{ 0%{opacity:1;} 50%{opacity:.6;} 100%{opacity:1;} }
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }

.pin{ cursor:default; }
.pin circle.ring{ opacity:.3; }
.pin-label{ font-family:'IBM Plex Mono'; font-size: 9px; fill:#fff; font-weight:600; }
.legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.legend i.g{ background: var(--green); } .legend i.r{ background: var(--red); } .legend i.a{ background: var(--amber); } .legend i.b{ background:#4a8fe7; } .legend i.gray{ background: var(--ink-soft); }
.status-example-card{ position:relative; }
.status-example-card .example-badge{
  position:absolute; top:14px; right:14px; font-family:'IBM Plex Mono'; font-size:9.5px; text-transform:uppercase;
  letter-spacing:.05em; color: var(--ink-soft); background: var(--paper-2); border-radius:999px; padding:3px 9px;
}

/* ---------- sections ---------- */
section{ padding: 76px 0; }
.section-head{ max-width: 620px; margin-bottom: 40px; }
.section-head .eyebrow{ margin-bottom: 10px; }
.strip{ background: var(--paper-2); }
.strip-dark{ background: var(--navy); color: #fff; }
.strip-dark h2, .strip-dark h3{ color:#fff; }
.strip-dark .eyebrow{ color: var(--brand); }

.grid{ display:grid; gap: 20px; }
.grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.grid.cols-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 860px){
  .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr; }
}

.card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-3);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.card h3{ font-size: 19px; margin-bottom:8px; }
.card .icon{ width:32px; height:32px; margin-bottom: 16px; }
.card p{ color: var(--ink-soft); font-size: 15px; margin-bottom:0; }

.quote{
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height:1.45; max-width: 760px;
  color: var(--ink);
}
.quote cite{ display:block; font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-size:13px; margin-top:18px; color: var(--ink-soft); }

.note{
  font-family:'IBM Plex Mono'; font-size: 12.5px; color: var(--ink-soft);
  padding-top:10px; margin-top: 10px;
}

/* ---------- annotated example record (how-it-works.html) ---------- */
.example-record .example-record-label{ color:#8996ad; font-size:13px; margin-bottom:16px; }
.example-field{ padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.example-field:last-of-type{ border-bottom:none; }
.example-field .ef-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.example-field .ef-key{ font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#8996ad; flex-shrink:0; }
.example-field .ef-val{ font-family:'IBM Plex Mono'; font-size:14px; color:#fff; font-weight:600; text-align:right; }
.example-field .ef-why{ font-size:12.5px; color:#a9b3c6; margin:6px 0 0; font-style:italic; }
.example-record-footer{ font-size:13.5px; color:#cdd6e4; margin:16px 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); }

table.data{ width:100%; border-collapse: collapse; font-size:15px; }
table.data th, table.data td{ border-bottom: 1px solid var(--line); padding: 12px 14px; text-align:left; vertical-align:top; }
table.data th{ font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-soft); font-weight:600; }
table.data td.num{ font-family:'IBM Plex Mono'; }
.table-scroll{ overflow-x:auto; }

.timeline{ position:relative; padding-left: 24px; border-left: 1px solid var(--line); }
.timeline .step{ position:relative; padding-bottom: 34px; }
.timeline .step:last-child{ padding-bottom:0; }
.timeline .step::before{
  content:""; position:absolute; left:-29px; top:4px;
  width:9px; height:9px; border-radius:50%;
  background: var(--brand);
}
.timeline .step .when{ font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; color: var(--brand-deep); font-weight:600; }

.badge-sticker{
  display:inline-block;
  background: var(--green-soft); color: var(--brand-deep); border-radius: 999px;
  padding: 6px 14px; font-weight:600; font-size:12.5px;
}

.avail-scale{ display:flex; align-items:center; gap:0; height: 8px; border-radius:999px; overflow:hidden; max-width:280px; background: var(--paper-2); }
.avail-scale div{ height:100%; }

.form-card{
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-3);
  padding: 32px; box-shadow: var(--shadow);
}
.form-row{ margin-bottom: 16px; }
.form-row label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding: 11px 14px; border:1px solid var(--line); border-radius:8px;
  font-family:'Inter'; font-size:15px; background: var(--paper); color: var(--ink);
}
.form-row textarea{ min-height: 110px; resize: vertical; }
.form-success{
  display:none; border:1px solid var(--green); background: var(--green-soft);
  border-radius:10px; padding:16px 18px; font-weight:600; margin-top: 14px; color: var(--green);
}
.form-success.show{ display:block; }

/* ---------- footer ---------- */
footer{ border-top: 1px solid var(--line); background: var(--paper-2); color: var(--ink); padding: 48px 0 28px; }
footer .foot-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr; gap: 30px; }
footer .foot-grid ul{ list-style:none; margin:0; padding:0; }
footer .foot-grid ul li{ margin:0 0 7px; }
footer .foot-grid h4{ margin:0 0 12px; font-size:13px; }
@media (max-width: 1080px){ footer .foot-grid{ grid-template-columns: 1fr 1fr 1fr; } footer .foot-about{ grid-column: 1 / -1; } }
footer h4{ color: var(--ink); font-family:'Inter'; font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; font-weight:700; }
footer a{ color: var(--ink-soft); text-decoration:none; }
footer a:hover{ color: var(--ink); text-decoration:underline; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
footer .foot-bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color: var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width: 860px){ footer .foot-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- misc page bits ---------- */
.page-header{ padding: 56px 0 24px; }
.page-header .eyebrow{ margin-bottom: 10px; }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }

.stat .num{ font-weight:800; font-size: 36px; color: var(--brand-deep); }
.stat .label{ font-size:14px; color: var(--ink-soft); }

ul.check{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
ul.check li{ padding-left: 28px; position:relative; color: var(--ink-soft); }
ul.check li::before{ content:"✓"; position:absolute; left:0; top:0; color: var(--green); font-weight:800; }

.person-note{
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin: 24px 0;
  background: var(--paper-3);
}
.person-note .pnote-mark{ font-size:22px; font-weight:800; color: var(--brand-deep); flex-shrink:0; }

/* ---------- live map page ---------- */
.map-page-header{ padding: 32px 0 18px; }
.map-shell{
  display:grid; grid-template-columns: 320px 1fr;
  border-top: 1px solid var(--line);
  height: calc(100vh - 68px - 90px);
  min-height: 480px;
}
#live-map{ width:100%; height:100%; background:#dfe6ee; }
/* This #live-map rule must come BEFORE the mobile media query below —
   otherwise it wins the cascade on small screens (equal specificity, later
   source order) and overrides the 62vh mobile height with height:100% of a
   height:auto parent, which collapses the map to 0px. That was the real
   cause of "map doesn't work on mobile": the map wasn't broken, it was
   invisible. */
@media (max-width: 900px){
  .map-shell{ grid-template-columns: 1fr; height:auto; }
  .map-sidebar{ order:2; }
  #live-map{ height: 62vh; order:1; }
  /* On mobile the sidebar no longer scrolls on its own (the whole page
     does), so .map-search's sticky position is relative to the viewport,
     not the sidebar box — offset it below the sticky site-nav (68px) so
     the two don't overlap. */
  .map-search{ top: 68px; }
}
.map-sidebar{
  border-right: 1px solid var(--line);
  background: var(--paper-3);
  padding: 22px;
  overflow-y:auto;
}
.map-sidebar h3{ font-size:16px; margin-bottom:10px; }
.map-search{
  display:flex; gap:8px; margin-bottom:16px;
  position: sticky; top:0; z-index:5; background: var(--paper-3);
  padding:10px 0 8px; margin-top:-10px;
}
.map-search input{
  flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  font-family:'Inter'; font-size:14px; background: var(--paper); color: var(--ink);
}
.map-search button{
  border:1px solid var(--line); background: var(--paper-2); border-radius:8px; padding:0 12px; cursor:pointer;
}
.map-filters{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.filter-label{ font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 6px; }
.map-check{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; cursor:pointer; }
.map-check input{ width:17px; height:17px; accent-color: var(--brand); }
.map-legend-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
.map-legend-row .swatch{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.map-status{ font-family:'IBM Plex Mono'; font-size:11.5px; color: var(--ink-soft); padding-top:12px; margin-top:16px; }
.map-disclaimer{
  font-size:13px; color: var(--ink-soft); background: var(--paper-2);
  border-radius:10px; padding:14px; margin-bottom:18px;
}
.mode-tabs{ display:flex; gap:6px; margin-bottom:18px; background: var(--paper-2); padding:4px; border-radius:10px; }
.mode-tab{
  flex:1; padding:8px 10px; border:none; border-radius:8px;
  background: transparent; font-family:'Inter'; font-weight:600; font-size:13px; cursor:pointer;
  color: var(--ink-soft);
}
.mode-tab.active{ background: var(--paper-3); color: var(--ink); box-shadow: var(--shadow-sm); }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.route-chip, .priority-btn, .explore-fuel-chip, .report-fuel-chip, .report-queue-chip, .range-unit-chip, .range-style-chip, .explore-open-toggle, .explore-connector-chip, .explore-queue-chip, .explore-fuel-available-toggle, .explore-sort-chip{
  padding:7px 13px; border:1px solid var(--line); border-radius:999px;
  background: var(--paper-3); font-family:'Inter'; font-weight:500; font-size:12.5px; cursor:pointer;
  color: var(--ink-soft);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.route-chip:active, .priority-btn:active, .explore-fuel-chip:active, .report-fuel-chip:active, .report-queue-chip:active, .range-unit-chip:active, .range-style-chip:active, .explore-open-toggle:active, .explore-connector-chip:active, .explore-queue-chip:active, .explore-fuel-available-toggle:active, .explore-sort-chip:active{ transform: scale(.96); }
.route-chip.active, .explore-fuel-chip.active, .report-fuel-chip.active, .report-queue-chip.active, .range-unit-chip.active, .range-style-chip.active, .explore-open-toggle.active, .explore-connector-chip.active, .explore-queue-chip.active, .explore-fuel-available-toggle.active, .explore-sort-chip.active{ background: var(--green-soft); border-color: var(--green); color: var(--green); }
.priority-btn.active{ background: var(--ink); border-color: var(--ink); color: #fff; }
html[data-theme="dark"] .priority-btn.active{ background: var(--brand); border-color: var(--brand); color: var(--ink); }
.report-block, .review-block{ border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }

/* ---------- range calculator / saved stations ---------- */
.range-calc{ border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.range-calc-body, .saved-stations-body{ animation: panelFadeIn .2s ease; }
.range-calc-km{ font-size:20px; font-weight:800; margin:0; color: var(--brand-deep); }
.saved-stations-body{ margin-top:10px; }
.saved-station-goto:hover{ color: var(--brand-deep); }
.saved-station-remove{ color: var(--ink-soft); }
.saved-station-remove:hover{ color: var(--busy, #E0483C); }
.popup-actions .btn{ font-weight:600; }
.explore-result-item{ font-family:'Inter'; }

/* ---------- purposeful motion ---------- */
.mode-tab{ transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.theme-toggle svg{ transition: opacity .15s ease; }
.theme-toggle.spin svg{ animation: toggleSpin .35s ease; }
@keyframes toggleSpin{ from{ transform: rotate(-90deg) scale(.55); opacity:.3; } to{ transform: rotate(0) scale(1); opacity:1; } }
.panel-anim{ animation: panelFadeIn .25s ease; }
@keyframes panelFadeIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform: translateY(0); } }

/* Skeleton placeholders — shown only while a real request is in flight,
   never implies specific data. Replaced the moment real results arrive. */
.skeleton-card{ pointer-events:none; }
.skeleton-line{
  border-radius:5px; background: linear-gradient(90deg, var(--paper-2) 25%, var(--line) 50%, var(--paper-2) 75%);
  background-size: 200% 100%; animation: skeletonPulse 1.4s ease-in-out infinite;
}
@keyframes skeletonPulse{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }

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

.pin-badge{
  position: relative;
  width:28px; height:28px; border-radius:50% 50% 50% 4px;
  display:flex; align-items:center; justify-content:center;
  transform: rotate(45deg); box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.pin-badge svg{ transform: rotate(-45deg); width:14px; height:14px; }
.pin-badge.fuel{ background: var(--amber); }
.pin-badge.ev{ background:#4a8fe7; }
.pin-badge.dim{ opacity:.55; }

/* Status dot: a small honest signal on top of the fuel/EV pin, driven only
   by real opening_hours data (never fabricated). Gray = no signal at all. */
.pin-status{
  position:absolute; top:-4px; right:-4px; width:10px; height:10px;
  border-radius:50%; border:2px solid var(--paper-3);
  transform: rotate(-45deg); box-shadow: 0 0 0 1px rgba(20,23,28,.3);
}
.pin-status.g{ background: var(--green); }
.pin-status.y{ background: var(--amber); }
.pin-status.r{ background: var(--red); }
.pin-status.gray{ background: var(--ink-soft); }

.search-area-btn{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  z-index:401; background: var(--ink); color:#fff;
  border:none; border-radius:999px; padding:9px 18px; font-weight:600; font-size:13px;
  box-shadow: var(--shadow); cursor:pointer; display:none;
}
.search-area-btn.show{ display:block; }
.map-zoom-hint{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  z-index:401; background: var(--paper-3); border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; font-size:13px; font-weight:500; box-shadow: var(--shadow-sm); color: var(--ink);
}
.leaflet-popup-content-wrapper{ border-radius:10px; box-shadow: var(--shadow); background: var(--paper-3); color: var(--ink); }
.leaflet-popup-tip{ background: var(--paper-3); }
.popup-card{ font-family:'Inter'; min-width:200px; }
.popup-card h4{ font-size:15px; font-weight:700; margin:0 0 6px; }
.popup-card .ptag{ display:inline-block; font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; background:var(--paper-2); border-radius:999px; padding:2px 8px; margin:0 4px 4px 0; color: var(--ink-soft); }
.popup-card p{ margin:4px 0; font-size:13px; color:var(--ink-soft); }
.popup-card a{ font-size:12px; font-weight:600; text-decoration:underline; }
html[data-theme="dark"] #live-map .leaflet-tile-pane{ filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92); }

.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large{
  background: rgba(255,122,47,.25) !important;
}
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div{
  background: var(--amber) !important; border:none !important;
  color: #fff !important; font-weight:700 !important; font-family:'IBM Plex Mono';
}

.busy-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.busy-dot.quiet{ background: var(--green); }
.busy-dot.moderate{ background: var(--amber); }
.busy-dot.busy{ background: var(--red); }
.busy-dot.unknown{ background: var(--ink-soft); }

/* ---------- cookie consent banner ---------- */
.cookie-banner{
  position: fixed; left:0; right:0; bottom:0; z-index: 500;
  background: var(--paper-3); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
  animation: panelFadeIn .25s ease;
}
.cookie-banner-inner{
  max-width: var(--max); margin:0 auto; padding: 16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.cookie-banner-inner p{ margin:0; font-size:13px; color: var(--ink-soft); max-width:60ch; }
.cookie-banner-inner a{ text-decoration:underline; color: var(--ink); font-weight:600; }
.cookie-banner-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-banner-actions .btn{ padding:9px 16px; font-size:13px; }
@media (max-width:640px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; }
  .cookie-banner-actions{ justify-content:stretch; }
  .cookie-banner-actions .btn{ flex:1; }
}

/* Guide cards (homepage + guides index) */
a.guide-link{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
a.guide-link h3{ color: var(--ink); }
a.guide-link p{ flex:1; }
.guide-more{ display:inline-block; margin-top:14px; font-size:14px; font-weight:600; color: var(--brand-deep); }
a.guide-link:hover .guide-more{ text-decoration:underline; }
.guide-all{ background: var(--navy); border-color: var(--ink); }
.guide-all h3, .guide-all .guide-more{ color:#fff; }
.guide-all p{ color:#cdd6e4; }

/* Long-form article / legal-style prose */
.article{ max-width: 720px; margin: 0 auto; }
.article p, .article li{ color: var(--ink-soft); font-size: 16.5px; line-height: 1.75; }
.article h2{ font-size: clamp(22px,3vw,28px); margin: 34px 0 12px; }
.article h3{ font-size: 19px; margin: 24px 0 8px; }
.article ul, .article ol{ margin: 12px 0 12px 20px; }
.article li{ margin-bottom: 8px; }
.article .lede{ font-size: 19px; color: var(--ink); }
.article a{ color: var(--brand-deep); }
.article .callout{
  border-left: 3px solid var(--brand);
  background: var(--paper-3);
  padding: 16px 18px; border-radius: 8px; margin: 22px 0;
}
.article .callout p{ margin:0; font-size:15.5px; }
.breadcrumb{ font-size:13px; color: var(--ink-soft); margin-bottom: 10px; }
.breadcrumb a{ color: var(--ink-soft); }
.breadcrumb a:hover{ color: var(--brand-deep); }
.article-meta{ font-size:13px; color: var(--ink-soft); margin: 6px 0 24px; }
.related-guides{ max-width:720px; margin: 40px auto 0; padding-top: 24px; border-top:1px solid var(--line); }
.related-guides h4{ font-size:14px; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-soft); margin-bottom:12px; }
.related-guides ul{ list-style:none; margin:0; padding:0; }
.related-guides li{ margin-bottom:8px; }
.related-guides a{ color: var(--brand-deep); font-weight:600; text-decoration:none; }
.related-guides a:hover{ text-decoration:underline; }

/* Station profile — report form */
.report-form{ display:flex; flex-direction:column; gap:12px; }
.report-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.report-label{ font-size:14px; font-weight:600; margin-right:4px; min-width:96px; }
.chip{
  display:inline-block; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background: var(--paper-3); color: var(--ink);
  font:inherit; font-size:14px; cursor:pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover{ border-color: var(--brand); }
.chip.active{ background: var(--green-soft); border-color: var(--green); color: var(--green); font-weight:600; }
#station-map{ border-radius: var(--radius); }
.leaflet-container{ font: inherit; }

/* ============================================================
   HOMEPAGE 2.0 — animated dashboard, funnel, motion
   ============================================================ */

/* Reveal-on-scroll — progressive enhancement. Content is VISIBLE by default;
   JS adds .pre to hide it only when it can also reveal it. So if JS fails or
   is absent, nothing is ever stuck invisible. */
.reveal{ transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.reveal.pre{ opacity:0; transform: translateY(22px); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* Animated hero dashboard */
.hero-2{ padding: clamp(28px,5vw,64px) 0 clamp(20px,4vw,44px); overflow:hidden; }
.hero-2 .hero-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px,4vw,56px); align-items:center; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px; }
.hero-badges span{ font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--paper-3); border:1px solid var(--line); border-radius:999px; padding:6px 12px; }

.dash{
  background: var(--navy); border-radius: 20px; padding: 16px;
  box-shadow: 0 30px 60px -30px rgba(12,18,32,.7), 0 2px 0 rgba(255,255,255,.04) inset;
  border:1px solid #0e1626; position:relative;
}
.dash-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 14px; }
.dash-live{ display:flex; align-items:center; gap:8px; color:#cdd6e4; font-size:13px; font-weight:600; }
.pulse-dot{ width:9px; height:9px; border-radius:50%; background:#28c76f; position:relative; }
.pulse-dot::after{ content:''; position:absolute; inset:-5px; border-radius:50%; background:#28c76f; opacity:.5; animation: pulse 1.8s ease-out infinite; }
@keyframes pulse{ 0%{ transform:scale(.6); opacity:.6; } 70%{ transform:scale(1.8); opacity:0; } 100%{ opacity:0; } }
.dash-time{ color:#8493ab; font-size:12px; font-variant-numeric: tabular-nums; }

.dash-feature{ background:#1c2c48; border:1px solid #26385a; border-radius:14px; padding:16px; position:relative; overflow:hidden; }
.dash-feature .df-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.status-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.status-dot.ok{ background:#28c76f; box-shadow:0 0 0 4px rgba(40,199,111,.18); }
.status-dot.warn{ background:#ff9f43; box-shadow:0 0 0 4px rgba(255,159,67,.18); }
.status-dot.bad{ background:#ea5455; box-shadow:0 0 0 4px rgba(234,84,85,.18); }
.df-status{ color:#e7ecf5; font-size:13px; font-weight:700; }
.df-name{ color:#fff; font-size:18px; font-weight:700; margin:2px 0 2px; display:flex; align-items:center; gap:8px; }
.df-ev{ font-size:10px; font-weight:800; letter-spacing:.04em; color:#0f1a2e; background:#7be0a6; border-radius:5px; padding:2px 6px; }
.df-place{ color:#8493ab; font-size:13px; margin-bottom:10px; }
.df-fuels{ display:flex; flex-wrap:wrap; gap:6px; }
.df-fuels span{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:#cdd6e4; background:#0f1a2e; border:1px solid #26385a; border-radius:999px; padding:3px 9px; }
.dash-badge{ color:#8493ab; font-size:11px; font-family:'IBM Plex Mono', monospace; background:#0f1a2e; border:1px solid #26385a; border-radius:999px; padding:3px 9px; }
.df-meta{ color:#8493ab; font-size:12.5px; }
.df-price{ position:absolute; top:14px; right:14px; text-align:right; }
.df-price b{ color:#fff; font-size:19px; font-variant-numeric:tabular-nums; }
.df-price span{ display:block; color:#8493ab; font-size:11px; }
.fuelbar{ height:7px; border-radius:6px; background:#0f1a2e; margin-top:12px; overflow:hidden; }
.fuelbar > i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#28c76f,#7be0a6); width:0; transition: width 1.1s cubic-bezier(.22,1,.36,1); }
.dash-feature.swap{ animation: cardIn .5s ease; }
@keyframes cardIn{ from{ opacity:0; transform: translateY(10px) scale(.99);} to{opacity:1; transform:none;} }

.dash-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin:12px 0; }
.dash-stat{ background:#141f34; border:1px solid #22314e; border-radius:12px; padding:10px 12px; }
.dash-stat b{ color:#fff; font-size:18px; font-variant-numeric:tabular-nums; display:block; }
.dash-stat span{ color:#8493ab; font-size:11px; }

.ticker{ background:#141f34; border:1px solid #22314e; border-radius:12px; padding:8px 12px; height:104px; overflow:hidden; position:relative; }
.ticker-track > div{ display:flex; align-items:center; gap:8px; padding:7px 0; color:#cdd6e4; font-size:12.5px; border-bottom:1px solid #1e2c46; }
.ticker-track > div:last-child{ border-bottom:0; }
.ti-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.ticker-track > div b{ color:#fff; font-weight:600; }
.ticker-track > div .ago{ margin-left:auto; color:#6b7c98; font-size:11px; white-space:nowrap; }
@keyframes tickerUp{ from{ transform: translateY(0);} to{ transform: translateY(-38px);} }

.dash-cta{ display:block; text-align:center; margin-top:12px; background:var(--brand); color:#fff; font-weight:700; font-size:14px; padding:12px; border-radius:12px; text-decoration:none; transition: filter .2s ease, transform .2s ease; }
.dash-cta:hover{ filter:brightness(1.06); transform: translateY(-1px); }

/* Stat counters band */
.statband{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; text-align:center; }
.statband .num{ font-size: clamp(30px,4.5vw,48px); font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.statband .lbl{ color:var(--ink-soft); font-size:14px; margin-top:2px; }

/* Live activity + explore cards */
.act-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; position:relative; }
.act-card .act-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12.5px; font-weight:700; }
.act-card h3{ margin:2px 0 4px; }
.act-card .act-more{ margin-top:auto; padding-top:12px; font-weight:600; font-size:13.5px; color:var(--brand-deep); }
.act-card:hover .act-more{ text-decoration:underline; }
.mini-row{ display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 0; border-top:1px solid var(--line); }
.mini-row:first-of-type{ border-top:0; }
.mini-row .grow{ flex:1; color:var(--ink); }
.mini-row .muted{ color:var(--ink-soft); font-size:12px; }

/* vs comparison */
.vs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vs-col{ border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--paper-3); }
.vs-col.win{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; }
.vs-col h3{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.vs-col ul{ list-style:none; margin:0; padding:0; }
.vs-col li{ display:flex; gap:10px; padding:8px 0; font-size:14.5px; color:var(--ink-soft); border-top:1px solid var(--line); }
.vs-col li:first-child{ border-top:0; }
.vs-col li svg{ flex:none; margin-top:2px; }

/* Explore chip grid */
.explore-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.explore-grid a{ display:block; text-align:center; padding:16px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper-3); text-decoration:none; color:var(--ink); font-weight:600; font-size:14px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.explore-grid a:hover{ transform: translateY(-3px); border-color:var(--brand); box-shadow:var(--shadow-sm); }
.explore-grid a small{ display:block; color:var(--ink-soft); font-weight:500; font-size:12px; margin-top:3px; }

/* Skeleton shimmer */
.skel{ position:relative; overflow:hidden; background:var(--paper-2); border-radius:8px; }
.skel::after{ content:''; position:absolute; inset:0; transform: translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer{ 100%{ transform: translateX(100%);} }

/* Count-up hover lift on any .card */
.lift{ transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.lift:hover{ transform: translateY(-5px); box-shadow: var(--shadow); }

@media (max-width: 860px){
  .hero-2 .hero-grid{ grid-template-columns:1fr; }
  .statband{ grid-template-columns: repeat(2,1fr); gap:16px 20px; }
  .vs-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .pulse-dot::after, .ticker-track{ animation:none !important; }
  .skel::after, .map-skeleton::after{ animation:none !important; }
}

/* Live-map loading skeleton — map area is never an empty box */
.map-skeleton{
  position:absolute; inset:0; z-index:450; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:#dfe6ee; transition: opacity .5s ease;
}
html[data-theme="dark"] .map-skeleton{ background:#0f1a2e; }
.map-skeleton::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation: shimmer 1.5s infinite; }
html[data-theme="dark"] .map-skeleton::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); }
.map-skeleton.hidden{ opacity:0; pointer-events:none; }
.map-skeleton .skel-pulse{ width:46px; height:46px; border-radius:50%; background:var(--brand); position:relative; z-index:1; opacity:.9; }
.map-skeleton .skel-pulse::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--brand); animation: pulse 1.6s ease-out infinite; }
.map-skeleton .skel-label{ z-index:1; color:var(--ink-soft); font-size:13.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
html[data-theme="dark"] .map-skeleton .skel-label{ color:#8493ab; }

/* ---------- cookie settings modal + re-open link ---------- */
.cookie-modal-overlay{ position:fixed; inset:0; z-index:300; background:rgba(10,16,14,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; }
.cookie-modal{ background:var(--paper-3); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); max-width:520px; width:100%; padding:26px; box-shadow:var(--shadow); position:relative; max-height:90vh; overflow-y:auto; }
.cookie-modal h3{ margin:0 0 8px; font-size:20px; }
.cookie-modal-x{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color:var(--ink-soft); }
.cookie-row{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); }
.cookie-row input[type=checkbox]{ width:20px; height:20px; margin-top:3px; accent-color:var(--brand); flex-shrink:0; }
.cookie-modal-actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.cookie-modal-actions .btn{ flex:1; }
.cookie-settings-link{ cursor:pointer; }

/* ---------- back-to-top button ---------- */
.back-to-top{ position:fixed; right:20px; bottom:20px; z-index:150; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--paper-3); color:var(--ink); box-shadow:var(--shadow-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .2s ease, transform .2s ease, background-color .2s ease; }
.back-to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.back-to-top svg{ width:20px; height:20px; }
@media (max-width:640px){ .back-to-top{ right:14px; bottom:78px; } }

/* ---------- country picker ---------- */
.cp-search-wrap{ position:relative; margin-bottom:16px; }
.cp-search-ic{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-soft); pointer-events:none; }
.cp-search{ width:100%; padding:13px 14px 13px 42px; border:1px solid var(--line); border-radius:12px; background:var(--paper-3); color:var(--ink); font:inherit; font-size:15px; }
.cp-search:focus{ outline:none; border-color:var(--brand); }
.cp-block{ margin-bottom:14px; }
.cp-pop-row{ display:flex; flex-wrap:wrap; gap:8px; }
.cp-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--paper-3); text-decoration:none; color:var(--ink); font-size:14px; font-weight:500; transition:border-color .15s ease, background-color .15s ease; }
.cp-chip:hover{ border-color:var(--brand); background:var(--green-soft); }
.cp-chip.cp-all{ font-weight:700; color:var(--brand-deep); }
.cp-flag{ width:24px; height:18px; border-radius:3px; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 1px rgba(16,32,26,.08); display:inline-block; }
.cp-cont{ border-top:1px solid var(--line); }
.cp-cont-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 2px; background:none; border:none; cursor:pointer; font:inherit; font-size:16px; font-weight:700; color:var(--ink); text-align:left; }
.cp-count{ font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--paper-2); border-radius:999px; padding:2px 8px; margin-left:6px; }
.cp-chev{ width:20px; height:20px; color:var(--ink-soft); transition:transform .2s ease; flex-shrink:0; }
.cp-cont.open .cp-chev{ transform:rotate(180deg); }
.cp-cont-body{ display:none; padding:0 0 14px; }
.cp-cont.open .cp-cont-body{ display:block; }
.cp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:2px 12px; }
.cp-item{ display:flex; align-items:center; gap:9px; padding:8px 8px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:14px; }
.cp-item:hover{ background:var(--paper-2); color:var(--brand-deep); }
.cp-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- mobile bottom navigation (app feel) ---------- */
.mobile-nav{ display:none; }
@media (max-width:760px){
  .mobile-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:160;
    background:color-mix(in srgb, var(--paper-3) 96%, transparent); backdrop-filter:blur(10px);
    border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    transition:transform .28s ease;
  }
  .mobile-nav a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 2px; text-decoration:none; color:var(--ink-soft); font-size:10.5px; font-weight:600; background:none; border:none; cursor:pointer; font-family:inherit; }
  .mobile-nav a.active{ color:var(--brand-deep); }
  .mobile-nav svg{ width:22px; height:22px; }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .back-to-top{ bottom:78px; }
  /* Hide the bottom bar when a station sheet is expanded full-screen, so it
     never overlaps the card, its comment form, or the send buttons. */
  body.sheet-full .mobile-nav{ transform:translateY(110%); }
  /* bigger touch targets + sticky map search on phones */
  .btn{ padding:14px 22px; }
  .map-search{ position:sticky; top:0; }
}

/* ---------- map: floating "my location" button ---------- */
.map-fab{
  position:absolute; right:16px; bottom:20px; z-index:500;
  width:52px; height:52px; border-radius:50%;
  background:var(--paper-3); border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--brand-deep); transition:background-color .15s ease, color .15s ease, transform .1s ease;
}
.map-fab:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.map-fab:active{ transform:scale(.94); }
.map-fab.locating{ animation:fabspin 1s linear infinite; }
@keyframes fabspin{ to{ transform:rotate(360deg); } }
@media (max-width:760px){ .map-fab{ bottom:16px; right:14px; width:56px; height:56px; } }
/* Fade the locate / search-area buttons out while the sheet covers them. */
.map-canvas-wrap.sheet-open .map-fab,
.map-canvas-wrap.sheet-open .search-area-btn{ opacity:0; pointer-events:none; transition:opacity .2s ease; }

/* ---------- station bottom sheet (Google-Maps-style, 3 snap states) ---------- */
.map-canvas-wrap{ position:relative; overflow:hidden; }
.station-sheet{ position:absolute; inset:0; z-index:1100; pointer-events:none; }
.sheet-panel{
  position:absolute; left:0; right:0; bottom:0;
  height:92%; max-height:780px;
  display:flex; flex-direction:column;
  background:var(--paper-3); color:var(--ink);
  border-radius:20px 20px 0 0;
  box-shadow:0 -12px 46px rgba(20,23,28,.24);
  transform:translateY(110%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
  will-change:transform; pointer-events:auto; overscroll-behavior:contain;
}
.station-sheet.dragging .sheet-panel{ transition:none; }
html[data-theme="dark"] .sheet-panel{ box-shadow:0 -12px 46px rgba(0,0,0,.5); border-top:1px solid var(--line); }
.sheet-grab{ padding:9px 0 5px; display:flex; justify-content:center; cursor:grab; flex:0 0 auto; touch-action:none; }
.sheet-grab:active{ cursor:grabbing; }
.sheet-grab-bar{ width:42px; height:5px; border-radius:3px; background:var(--line); transition:background-color .15s ease; }
.sheet-grab:hover .sheet-grab-bar{ background:var(--ink-soft); }
.sheet-close{
  position:absolute; top:8px; right:12px; width:32px; height:32px; border-radius:50%;
  border:none; background:var(--paper-2); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.sheet-close:hover{ background:var(--line); }
.sheet-head{ padding:0 18px 8px; flex:0 0 auto; cursor:grab; touch-action:none; }
.sheet-title{ margin:0; font-size:18px; font-weight:800; line-height:1.22; padding-right:38px; color:var(--ink); }
.sheet-sub{ margin:3px 0 0; font-size:13px; color:var(--ink-soft); }
.sheet-meta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; }
.sheet-rating{ font-size:14px; font-weight:800; color:var(--ink); }
.sheet-rating .star{ color:#f5a623; }
.sheet-rating .rating-count{ color:var(--ink-soft); font-weight:600; }
.sheet-rating .rating-src{ color:var(--ink-soft); font-weight:500; font-size:11px; }
.sheet-weather{ font-size:13.5px; font-weight:700; color:var(--ink); }
.sheet-weather .wx-sub{ color:var(--ink-soft); font-weight:500; font-size:12px; }
.station-rating{ font-size:15px; font-weight:800; color:var(--ink); margin:6px 0 0; }
.station-rating .star{ color:#f5a623; }
.station-rating .rating-count, .station-rating .rating-src{ color:var(--ink-soft); font-weight:500; font-size:12px; }
.station-weather{ font-size:14px; font-weight:700; color:var(--ink); margin:4px 0 0; }
.station-weather .wx-sub{ color:var(--ink-soft); font-weight:500; font-size:12px; }
/* Trip cost summary (route planner) */
.trip-summary{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.trip-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:4px 0; font-size:14px; color:var(--ink-soft); }
.trip-row b{ color:var(--ink); font-weight:700; font-family:'IBM Plex Mono', monospace; }
.trip-row.big{ border-top:1px solid var(--line); margin-top:4px; padding-top:8px; font-size:15px; }
.trip-row.big b{ font-size:18px; color:var(--brand-deep); }
.sheet-actions{ display:flex; gap:8px; padding:4px 14px 12px; flex:0 0 auto; border-bottom:1px solid var(--line); }
.sheet-act{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 4px; border:1px solid var(--line); border-radius:13px;
  background:var(--paper-3); color:var(--ink); font-size:11px; font-weight:700; cursor:pointer;
  transition:background-color .14s ease, transform .1s ease;
}
.sheet-act svg{ width:20px; height:20px; }
.sheet-act:hover{ background:var(--paper-2); }
.sheet-act:active{ transform:scale(.95); }
.sheet-act.primary{ flex:1.55; background:var(--brand); border-color:var(--brand); color:#fff; }
.sheet-act.primary:hover{ background:var(--brand-deep); }
html[data-theme="dark"] .sheet-act.primary{ color:#06231a; }
.sheet-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 18px 30px; overscroll-behavior:contain; }
.sheet-body .popup-card{ min-width:0; }
.sheet-fav{
  position:absolute; top:8px; right:50px; width:32px; height:32px; border-radius:50%;
  border:none; background:var(--paper-2); color:var(--ink-soft); cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center; transition:background-color .14s ease, color .14s ease, transform .1s ease;
}
.sheet-fav svg{ width:18px; height:18px; }
.sheet-fav:hover{ background:var(--line); }
.sheet-fav:active{ transform:scale(.9); }
.sheet-fav.saved{ color:#e0245e; }
.sheet-fav.saved svg path{ fill:#e0245e; stroke:#e0245e; }

/* Community status + community prices cards inside the sheet */
.community-block{ margin-bottom:4px; }
.cstat-card, .cprice-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:10px; }
.cstat-title{ font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 7px; }
.cstat-row{ display:flex; align-items:center; gap:11px; }
.cstat-big{ font-size:24px; font-weight:800; color:var(--ink); display:flex; align-items:center; line-height:1; }
.cstat-big .busy-dot{ width:11px; height:11px; margin-right:8px; }
.cstat-lbl{ font-size:12.5px; color:var(--ink-soft); line-height:1.3; }
.cstat-sub{ color:var(--ink-soft); font-size:11px; }
.cstat-meta{ font-size:11.5px; color:var(--ink-soft); margin:6px 0 0; }
.cstat-empty{ font-size:12.5px; color:var(--ink-soft); margin:0; }
.cprice-list{ display:flex; flex-direction:column; gap:5px; }
.cprice-item{ display:flex; align-items:baseline; gap:8px; font-size:13px; }
.cprice-fuel-lbl{ font-weight:600; min-width:76px; color:var(--ink); }
.cprice-val{ font-family:'IBM Plex Mono'; font-weight:700; color:var(--brand-deep); }
.cprice-age{ font-size:11px; color:var(--ink-soft); margin-left:auto; }

/* ---------- auth (Sign in with Google) ---------- */
.auth-slot{ position:relative; display:flex; align-items:center; }
.auth-signin-btn{
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; font-family:'Inter'; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
  transition:background-color .14s ease, border-color .14s ease;
}
.auth-signin-btn:hover{ background:var(--paper-2); border-color:var(--brand); }
.auth-avatar-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--paper-2);
  overflow:hidden; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
}
.auth-avatar-btn img{ width:100%; height:100%; object-fit:cover; }
.auth-initial{ font-weight:800; color:var(--brand-deep); font-size:15px; }
.auth-menu{
  position:absolute; right:0; top:calc(100% + 10px); width:244px;
  background:var(--paper-3); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  z-index:220; padding:13px;
}
.auth-menu-head{ display:flex; gap:10px; align-items:center; }
.auth-menu-head img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.auth-name{ margin:0; font-size:14px; font-weight:700; color:var(--ink); }
.auth-email{ margin:1px 0 0; font-size:12px; color:var(--ink-soft); word-break:break-all; }
.auth-stats{ display:flex; gap:6px; margin:13px 0; text-align:center; }
.auth-stats > div{ flex:1; background:var(--paper-2); border-radius:9px; padding:8px 4px; font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }
.auth-stats > div span{ display:block; font-size:17px; font-weight:800; color:var(--ink); margin-bottom:2px; }
.auth-signout{ width:100%; padding:9px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink); font-weight:600; font-size:13px; cursor:pointer; }
.auth-signout:hover{ background:var(--paper-2); }
.auth-delete{ width:100%; padding:8px; margin-top:6px; border:none; background:none; color:#c0392b; font-weight:600; font-size:12px; cursor:pointer; }
.auth-delete:hover{ text-decoration:underline; }
.auth-signin-pop{
  position:fixed; width:284px; max-width:92vw; background:var(--paper-3); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); z-index:400; padding:16px;
}
.auth-pop-title{ margin:0 0 12px; font-size:15px; font-weight:800; color:var(--ink); }
.auth-gbtn{ display:flex; justify-content:center; min-height:44px; }
.auth-pop-note{ margin:12px 0 0; font-size:11.5px; color:var(--ink-soft); line-height:1.45; }
@media (max-width:760px){ .auth-menu{ position:fixed; right:10px; top:60px; } }

/* Save-this-place button (country / city pages) + saved-places widget */
.fav-place-btn{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  padding:9px 15px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper-3); color:var(--ink); font-family:'Inter'; font-size:13px; font-weight:600;
  cursor:pointer; transition:background-color .14s ease, color .14s ease, border-color .14s ease;
}
.fav-place-btn:hover{ background:var(--paper-2); }
.fav-place-btn.saved{ background:var(--brand); border-color:var(--brand); color:#fff; }
html[data-theme="dark"] .fav-place-btn.saved{ color:#06231a; }
.fav-place-btn.saved svg path{ fill:currentColor; }
.saved-places-fab{
  position:fixed; left:18px; bottom:22px; z-index:250;
  display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:999px;
  background:var(--paper-3); border:1px solid var(--line); box-shadow:var(--shadow);
  color:var(--brand-deep); font-family:'Inter'; font-size:13px; font-weight:700; cursor:pointer;
}
.saved-places-fab:hover{ background:var(--paper-2); }
.saved-places-panel{
  position:fixed; left:18px; bottom:70px; z-index:250; width:min(280px, 88vw);
  background:var(--paper-3); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:10px; max-height:60vh; overflow-y:auto;
}
.saved-places-panel .sp-title{ font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:2px 6px 8px; }
.saved-places-panel .sp-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 4px; }
.saved-places-panel .sp-item a{ flex:1; padding:7px 6px; font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; border-radius:8px; }
.saved-places-panel .sp-item a:hover{ background:var(--paper-2); }
.saved-places-panel .sp-remove{ background:none; border:none; color:var(--ink-soft); font-size:18px; line-height:1; cursor:pointer; padding:4px 6px; }
@media (max-width:760px){
  .saved-places-fab{ bottom:76px; }
  .saved-places-panel{ bottom:124px; }
}

/* Combined Saved panel (bottom-nav "Saved") */
.saved-sheet{ position:fixed; inset:0; z-index:1250; background:rgba(15,20,18,.42); display:flex; align-items:flex-end; }
.saved-sheet-inner{ background:var(--paper-3); width:100%; max-height:72vh; overflow-y:auto; border-radius:16px 16px 0 0; padding:14px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -12px 44px rgba(0,0,0,.24); }
.saved-sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.saved-sheet-head span{ font-weight:800; font-size:16px; color:var(--ink); }
.saved-sheet-x{ background:var(--paper-2); border:none; width:32px; height:32px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; color:var(--ink); }
.saved-sheet .sp-title{ font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:12px 0 4px; }
.saved-sheet .sp-item a{ display:block; padding:11px 8px; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; border-radius:8px; }
.saved-sheet .sp-item a:hover{ background:var(--paper-2); }
@media (min-width:761px){ .saved-sheet{ align-items:center; justify-content:center; } .saved-sheet-inner{ max-width:420px; border-radius:16px; } }

/* ---------- FAQ page ---------- */
.faq-wrap{ max-width:820px; }
.faq-cat{ font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-deep); margin:30px 0 10px; }
.faq-cat:first-child{ margin-top:0; }
.faq-item{ border:1px solid var(--line); border-radius:12px; background:var(--paper-3); margin-bottom:10px; overflow:hidden; }
.faq-item summary{ list-style:none; cursor:pointer; padding:15px 46px 15px 16px; font-weight:700; font-size:15.5px; color:var(--ink); position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:var(--ink-soft); line-height:1; }
.faq-item[open] summary::after{ content:'−'; }
.faq-item summary:hover{ background:var(--paper-2); }
.faq-item p{ margin:0; padding:0 16px 16px; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.faq-item p a{ color:var(--brand-deep); font-weight:600; }
@media (prefers-reduced-motion: reduce){ .sheet-panel{ transition:none; } }
@media (max-width:760px){
  .sheet-panel{ height:94%; max-height:none; }
  .sheet-act{ font-size:10.5px; }
}

/* ---------- live community feed ---------- */
.feed-list{ border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-3); overflow:hidden; box-shadow:var(--shadow-sm); max-width:620px; }
.feed-item{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-top:1px solid var(--line); }
.feed-item:first-child{ border-top:none; }
.feed-item[data-new="1"]{ animation:feedin .45s ease; }
.feed-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.feed-dot.ok{ background:#28c76f; } .feed-dot.warn{ background:#ff9f43; } .feed-dot.bad{ background:#ea5455; }
.feed-body{ flex:1; min-width:0; }
.feed-body b{ display:block; font-size:14px; font-weight:600; }
.feed-body span{ font-size:13px; color:var(--ink-soft); }
.feed-ago{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); white-space:nowrap; }
@keyframes feedin{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---- Sign in to contribute (gate modal) + profile menu links ---- */
.auth-gate-back{
  position:fixed; inset:0; z-index:1400; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(10,15,25,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.auth-gate{
  width:100%; max-width:360px; background:var(--paper-3,#fff); color:var(--ink);
  border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.35);
  padding:22px 20px; text-align:center;
}
.auth-gate-title{ margin:0 0 6px; font-size:18px; font-weight:800; }
.auth-gate-msg{ margin:0 0 16px; font-size:14px; line-height:1.5; color:var(--ink-soft); }
.auth-gate .auth-gbtn{ display:flex; justify-content:center; min-height:44px; margin-bottom:6px; }
.auth-gate-cancel{
  display:inline-block; margin:8px auto 0; padding:9px 18px; border:1px solid var(--line);
  border-radius:10px; background:transparent; color:var(--ink-soft); font-size:13px; font-weight:600; cursor:pointer;
}
.auth-gate-cancel:hover{ background:var(--paper); color:var(--ink); }
.auth-menu-links{ display:flex; flex-direction:column; margin:6px 0 4px; }
.auth-menu-links a{
  display:block; padding:9px 8px; border-radius:8px; font-size:13.5px; color:var(--ink);
  text-decoration:none; text-align:left;
}
.auth-menu-links a:hover{ background:var(--paper); }

/* ---- Account / profile page ---- */
.acc-card{ background:var(--paper-2,var(--paper)); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:18px; }
.acc-card h3{ margin:0 0 12px; font-size:16px; }
.acc-head{ display:flex; align-items:center; gap:16px; }
.acc-avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:var(--paper-3,#e9eef5); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:26px; color:var(--ink); }
.acc-avatar img{ width:100%; height:100%; object-fit:cover; }
.acc-avatar-initial{ background:linear-gradient(135deg,#1F8F5F,#0e9f6e); color:#fff; }
.acc-stats{ display:flex; gap:14px; flex-wrap:wrap; }
.acc-stats > div{ flex:1 1 120px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; }
.acc-stats b{ display:block; font-size:26px; font-weight:800; color:var(--ink); }
.acc-stats span{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.acc-saved{ list-style:none; margin:0; padding:0; }
.acc-saved li{ padding:7px 0; border-bottom:1px solid var(--line); }
.acc-saved li:last-child{ border-bottom:none; }
.acc-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn.danger{ background:#C8402F; color:#fff; border:1px solid #C8402F; }
.btn.danger:hover{ background:#a5331f; border-color:#a5331f; }

/* sign-in status / error message */
.auth-msg{ margin:10px 0 0; font-size:12.5px; line-height:1.45; }

/* ---- Rewards & levels page ---- */
.rw-table{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:14px 0; }
.rw-row{ display:flex; justify-content:space-between; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line); font-size:14.5px; }
.rw-row:last-child{ border-bottom:none; }
.rw-row.rw-head{ background:var(--paper-2,var(--paper)); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
.rw-row span:last-child{ font-weight:800; color:#1F8F5F; white-space:nowrap; }
.rw-levels{ display:grid; gap:14px; margin:16px 0; }
@media (min-width:640px){ .rw-levels{ grid-template-columns:1fr 1fr; } }
.rw-level{ border:1px solid var(--line); border-radius:14px; padding:16px 18px; background:var(--paper-2,var(--paper)); position:relative; }
.rw-level h3{ margin:0 0 2px; font-size:17px; }
.rw-level .rw-range{ display:inline-block; font-size:12.5px; font-weight:800; color:#1F8F5F; margin-bottom:8px; }
.rw-level p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.5; }

/* ---- Profile level + progress ---- */
.acc-level-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.acc-level-name{ font-size:20px; font-weight:800; margin:0; }
.acc-level-next{ font-size:13px; color:var(--ink-soft); }
.acc-progress{ height:10px; border-radius:6px; background:var(--paper-3,#e9eef5); overflow:hidden; margin:10px 0 4px; }
.acc-progress > div{ height:100%; background:linear-gradient(90deg,#1F8F5F,#0e9f6e); border-radius:6px; transition:width .5s ease; }

.auth-level{ margin:2px 0 0; font-size:12px; font-weight:700; color:#1F8F5F; }