:root{
    --main-color:#284f4c;
    --main-color-dark:#1a3634;
    --main-color-tint:#e4edec;
    --main-color-tint-border:#c3d6d4;
    --box-bg:#eef5ee;
    --box-border:#0001;
    --ink:#1c1c1e;
    --card-bg:#ffffffee;
    --safe-t:env(safe-area-inset-top,0px);
    --safe-b:env(safe-area-inset-bottom,0px);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{
    margin:0; padding:0; height:100%;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--ink);
    overscroll-behavior:none;
  }
  #app{
    position:fixed; inset:0;
    display:flex; flex-direction:column;
  }

  /* ---- Loading splash screen ---- */
  #splashScreen{
    position:fixed; inset:0; z-index:9999;
    background:var(--main-color-dark);
    overflow:hidden;
    transition:background-color .5s ease;
  }
  #splashScreen.shrink{
    background-color:transparent;
  }
  #splashInner{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    transform-origin:50% 50%;
    transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .6s ease .1s;
  }
  #splashScreen img{
    width:100%; height:100%; object-fit:cover;
  }
  #splashSpinner{
    display:none;
    position:absolute; left:39%; top:73.5%; transform:translateY(-50%);
    width:57%; max-width:220px; height:5px;
    background:#ffffff33;
    border-radius:6px;
    overflow:hidden;
  }
  #splashProgressFill{
    height:100%; width:0%;
    background:#fff; border-radius:6px;
    transition:width .2s ease-out;
  }
  #splashScreen.hidden{
    opacity:0; pointer-events:none;
    transition:opacity .2s ease .7s;
  }
  #splashScreen.shrink #splashInner{
    transform:translate(-130%, 6%) rotate(-22deg) scale(0.9);
    opacity:0;
  }

  /* ---- Top area: map ---- */
  #mapSection{
    position:relative;
    flex:22 1 0;
    min-height:0;
    overflow:hidden;
  }
  #map{
    position:absolute; inset:0;
    background:#dfeef5;
  }
  .leaflet-control-attribution{ font-size:9px; }
  .stop-weather{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; color:#47635f; font-size:12px;}
  .stop-weather i{font-size:15px; color:#7d8b93; width:16px; text-align:center;}
  .stop-weather i.fa-sun{color:#d18a34;}
  .stop-weather i.fa-cloud-sun{color:#c18b42;}
  .stop-weather i.fa-cloud-rain{color:#3f82ad;}
  .stop-weather i.fa-snowflake{color:#62a8c7;}
  .stop-weather i.fa-smog{color:#7c858b;}
  .stop-weather i.fa-cloud-bolt{color:#8966a8;}
  .stop-weather strong{font-size:13px; color:var(--ink);}
  .stop-weather small{width:100%; color:#71827f; font-size:10px;}

  #topbar{
    position:absolute; top:0; left:0; right:0;
    padding:calc(var(--safe-t) + 10px) 16px 12px;
    background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,0));
    color:#fff;
    z-index:500;
    pointer-events:none;
  }
  #topbar h1{ display:none; }
  #topbar p{
    margin:2px 0 0; font-size:clamp(10px,3vw,12px); opacity:.9;
    text-shadow:0 1px 4px rgba(0,0,0,.5);
  }

  #pageHeader{
    flex:0 0 auto;
    padding:calc(var(--safe-t) + 10px) 16px 10px;
    background:#fff;
    text-align:center;
  }
  #pageHeader h1{
    margin:0; color:var(--main-color); font-weight:800;
    font-size:clamp(16px,4.6vw,20px); line-height:1.25;
  }

  /* Floating map controls (playback) - always over the map, independent of tabs */
  #fabs{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:600;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .fab{
    width:44px; height:44px;
    border-radius:50%;
    border:none;
    background:#fff;
    color:var(--main-color-dark);
    font-size:17px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,.3);
    cursor:pointer;
  }
  .fab.primary{ background:var(--main-color); color:#fff; width:50px; height:50px; font-size:19px; }
  .fab.on{ background:var(--main-color-dark); color:#fff; }
  .fab:active{ transform:scale(.94); }

  /* Play/pause/replay icons drawn with CSS instead of emoji */
  .icon-pause, .icon-play, .icon-replay{ display:inline-block; }
  .icon-pause{
    width:14px; height:16px;
    background:
      linear-gradient(currentColor,currentColor) left/4px 100% no-repeat,
      linear-gradient(currentColor,currentColor) right/4px 100% no-repeat;
  }
  .icon-play{
    width:0; height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:14px solid currentColor;
    margin-left:2px;
  }
  .icon-replay{
    width:16px; height:16px;
    border:2px solid currentColor;
    border-radius:50%;
    border-right-color:transparent;
    position:relative;
  }
  .icon-replay::after{
    content:'';
    position:absolute;
    top:-2px; right:1px;
    width:0; height:0;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:5px solid currentColor;
    transform:rotate(45deg);
  }

  /* Scooter marker */
  .scooter-icon{
    width:clamp(48px,13.2vw,96px);
    position:relative;
    /* Anchor the BOTTOM-CENTER of the icon to the marker's lat/lng point
       (the route line) instead of the middle - works at any responsive size
       because it's percentage-based rather than a fixed pixel offset. */
    transform:translate(-50%,-100%);
    transform-origin:50% 100%;
  }
  .scooter-bump{
    filter:drop-shadow(0 5px 5px rgba(0,0,0,.4));
    animation:scooterBump .5s ease-in-out infinite;
    animation-play-state:paused;
    transform-origin:50% 100%;
  }
  .scooter-icon.moving .scooter-bump{ animation-play-state:running; }
  @keyframes scooterBump{
    0%   { transform:translateY(0)     rotate(0deg); }
    22%  { transform:translateY(-3px)  rotate(-2.5deg); }
    50%  { transform:translateY(-0.5px) rotate(0.5deg); }
    74%  { transform:translateY(-2px)  rotate(2deg); }
    100% { transform:translateY(0)     rotate(0deg); }
  }
  /* !important needed: Leaflet's own ".leaflet-container .leaflet-marker-pane img"
     rule has higher specificity and forces width:auto on marker images. */
  #scooterEl img{ width:100% !important; max-width:100% !important; height:auto !important; display:block; }
  .scooter-icon.flip img{ transform:scaleX(-1); }
  .scooter-icon img{ transition:transform .3s ease; transform-origin:center; }
  .city-tip{
    background:var(--card-bg);
    border:1px solid #0002;
    border-radius:8px;
    padding:1px 7px;
    font-size:10px;
    font-weight:600;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
  }
  .city-tip.active{
    background:var(--main-color);
    color:#fff;
    border-color:var(--main-color-dark);
  }
  .city-tip.planned{
    border:1px dashed var(--main-color);
    color:var(--main-color-dark);
  }
  .leaflet-interactive{ cursor:pointer; }

  /* ---- Bottom half: fixed-size content area (not resizable) ---- */
  #contentSection{
    position:relative;
    flex:75 1 0;
    display:flex;
    flex-direction:column;
    background:var(--card-bg);
    min-height:0;
    box-shadow:0 -6px 12px -6px rgba(0,0,0,.25);
    z-index:1;
  }
  #tabPanels{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
  }
  .tab-panel{
    position:absolute; inset:0;
    padding:14px 18px;
    overflow-y:auto;
    display:none;
  }
  .tab-panel.active{ display:block; }

  #loc-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  #location-now{ font-weight:800; font-size:clamp(15px,4vw,18px); }
  #km-label{ font-size:11px; color:#666; white-space:nowrap; }
  #location-info{ font-size:13px; color:#444; margin:4px 0 10px; }
  .progress-track{
    background:#0001; border-radius:8px; height:8px; overflow:hidden; margin-bottom:12px;
  }
  .progress-fill{
    height:100%; width:0%;
    background:linear-gradient(90deg,var(--main-color-dark),var(--main-color));
    transition:width .2s linear;
  }
  #chips{
    display:flex; gap:6px; overflow-x:auto; padding-bottom:6px;
    scrollbar-width:none;
  }
  #chips::-webkit-scrollbar{ display:none; }
  #chips button{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    border:1px solid #0002;
    background:#fff;
    border-radius:12px;
    padding:6px 12px;
    font-size:12px;
    font-weight:600;
    color:#444;
    line-height:1.3;
  }
  #chips button .chip-time{
    font-size:9.5px;
    font-weight:500;
    color:#888;
  }
  #chips button.active{
    background:var(--main-color); color:#fff; border-color:var(--main-color-dark);
  }
  #chips button.active .chip-time{
    color:var(--main-color-tint);
  }

  #tab-status .quote{
    color:#444; font-size:12.5px;
    background:var(--box-bg); border:1px solid var(--box-border);
    border-radius:12px; padding:14px 16px; margin:14px 0 12px;
  }
  #tab-status .whatsapp{ font-size:12px; color:#2c6b3f; }
  .planned-heading{ margin-top:18px !important; }
  #tab-status .sub{ font-size:12.5px; color:#666; margin:0 0 12px; }

  .impressum-heading{ font-size:17px; font-weight:800; margin:18px 0 4px; color:var(--main-color-dark); }
  #tab-about h3.impressum-heading{ margin-top:14px; }
  #tab-about p{ font-size:13px; line-height:1.5; }
  #tab-about a{ color:var(--main-color); }
  .fun-facts{
    display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:14px 0;
  }
  .fun-fact{
    background:var(--box-bg); border:1px solid var(--box-border); border-radius:12px;
    padding:10px 4px; text-align:center;
  }
  .fun-fact .fact-emoji{ font-size:18px; display:block; margin-bottom:4px; }
  .icon-scooter{ width:1em; height:1em; vertical-align:-0.1em; }
  .fun-fact .fact-value{ font-weight:800; font-size:13px; color:var(--main-color-dark); display:block; }
  .fun-fact .fact-label{ font-size:9px; color:#777; line-height:1.2; }
  .whatsapp-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--main-color); color:#fff; font-weight:700; font-size:14px;
    border-radius:12px; padding:10px 16px; text-decoration:none; border:none;
    cursor:pointer; margin:12px 0;
  }
  .whatsapp-btn:active{ background:var(--main-color-dark); }

  /* Suggest & vote tab content (inline, part of the fixed bottom area) */
  #tab-suggest h2{ font-size:22px; color:var(--main-color-dark); margin:0 0 4px; }
  #tab-earn h2{ font-size:22px; color:var(--main-color-dark); margin:0 0 4px; }
  #tab-status h2{ font-size:22px; color:var(--main-color-dark); margin:0 0 4px; }
  .suggest-sub{ font-size:12.5px; color:#666; margin:0 0 12px; }
  #guestbookForm{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
  #guestbookForm input, #guestbookForm textarea{
    width:100%; border:1px solid #0002; border-radius:12px; padding:11px 13px;
    font:inherit; font-size:14px; resize:vertical;
  }
  #guestbookForm textarea{ min-height:88px; }
  #guestbookForm button{ align-self:flex-start; border:0; border-radius:10px; padding:10px 16px; background:var(--main-color); color:#fff; font-weight:800; cursor:pointer; }
  #guestbookForm button:disabled{ opacity:.55; cursor:wait; }
  .guestbook-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
  .guestbook-entry{ position:relative; background:var(--box-bg); border:1px solid var(--box-border); border-radius:12px; padding:11px 12px; }
  .guestbook-entry.is-pending{ background:#fff4bf; border-color:#e5c94f; opacity:1; }
  .guestbook-entry.is-rejected{ order:999; opacity:.6; }
  .guestbook-entry-head{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
  .guestbook-entry-head strong{ font-size:14px; }
  .guestbook-entry-head time{ color:#777; font-size:10px; white-space:nowrap; }
  .guestbook-entry p{ margin:6px 0 0; font-size:13px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
  .guestbook-entry .poll-moderation-actions{ margin-top:8px; justify-content:flex-end; }
  #suggestList, #earnList{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
  .suggest-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--box-bg); border:1px solid var(--box-border); border-radius:12px;
    padding:10px 12px;
  }
  .suggest-item .name{ flex:1 1 auto; min-width:0; order:1; font-weight:700; font-size:14px; }
  .suggest-item .meta{ font-size:11px; color:#777; }
  .suggest-item.confirmed{ background:var(--main-color-tint); border-color:var(--main-color-tint-border); }
  .suggest-item.confirmed .meta{ color:var(--main-color-dark); font-weight:700; }
  .suggest-item.is-unpublished,
  .fun-fact.is-unpublished,
  .name-item.is-unpublished,
  .link-item.is-unpublished{ opacity:.6; }
  .suggest-item.is-pending{ background:#fff4bf; border-color:#e5c94f; opacity:1; }
  .suggest-item.is-pending .pending-label{ border-color:#c79c00; color:#805f00; background:#ffe58a; }
  .suggest-item.is-rejected{ order:999; }
  .suggest-item.moderation-fly-in{ position:relative; z-index:2; will-change:transform,opacity; }
  .suggest-item .confirmed-date{
    display:inline-block; margin-left:8px;
    background:var(--main-color); color:#fff; font-weight:800; font-size:10.5px;
    border-radius:8px; padding:2px 7px; vertical-align:middle;
  }
  .poll-moderation-actions{ display:flex; gap:4px; flex:0 0 auto; order:2; }
  .pending-label{ display:inline-block; margin-left:6px; padding:2px 5px; border:1px solid #d84a4a66; border-radius:4px; color:#a33; font-size:10px; font-weight:700; vertical-align:middle; }
  .poll-moderation-btn{
    border:0; border-radius:7px; padding:5px 7px; color:#fff; font-size:10px;
    font-weight:800; cursor:pointer; white-space:nowrap;
  }
  .poll-moderation-btn.approve{ background:#287347; }
  .poll-moderation-btn.reject{ background:#a33; }
  .poll-moderation-btn.guestbook-delete-btn{ background:#b42318; }
  .poll-moderation-btn:disabled{ opacity:.55; cursor:wait; }
  .suggest-vote{
    display:flex; align-items:center; gap:6px; flex:0 0 auto;
    border:none; background:#ddd; color:#666; font-weight:700;
    border-radius:20px; padding:6px 12px; font-size:12px; cursor:pointer;
    min-width:56px; justify-content:center; min-height:32px; order:3;
  }
  .suggest-vote.voted{ background:var(--main-color); color:#fff; gap:0; padding:8px 12px; }
  .suggest-vote:active{ transform:scale(.95); }
  #suggestForm{ display:flex; gap:8px; margin-bottom:16px; }
  #suggestInput{
    flex:1; border:1px solid #0002; border-radius:12px; padding:14px 16px; font-size:14px;
    min-width:0;
  }
  #suggestForm button{
    border:none; background:var(--main-color-dark); color:#fff; font-weight:700;
    border-radius:12px; padding:0 20px; font-size:13px; cursor:pointer;
  }
  #earnForm{ display:flex; gap:8px; margin-bottom:16px; }
  #earnInput{
    flex:1; border:1px solid #0002; border-radius:12px; padding:14px 16px; font-size:14px;
    min-width:0;
  }
  #earnForm button{
    border:none; background:var(--main-color-dark); color:#fff; font-weight:700;
    border-radius:12px; padding:0 20px; font-size:13px; cursor:pointer;
  }
  .place-autocomplete{ position:relative; flex:1; min-width:0; }
  .place-autocomplete input{ width:100%; box-sizing:border-box; }
  .place-suggestions{
    position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20; overflow:hidden;
    background:#fff; border:1px solid #d8ddda; border-radius:10px;
    box-shadow:0 8px 20px #17221d1a;
  }
  .place-suggestions button{
    display:block; width:100%; padding:11px 13px; border:0; border-bottom:1px solid #edf0ee;
    background:#fff; color:#25302b; text-align:left; font-size:12px; line-height:1.35;
    cursor:pointer; transition:background-color .15s ease, color .15s ease;
  }
  .place-suggestions button:last-child{ border-bottom:0; }
  .place-suggestions button:hover,
  .place-suggestions button:focus-visible{ background:#f3f5f4; color:#111815; outline:none; }
  .suggest-error{ font-size:12px; color:#a33; margin:-10px 0 14px; min-height:14px; }
  .suggest-error.success{
    display:block; color:#215b34; background:#e5f3e8; border:1px solid #9bc9a7;
    border-radius:10px; padding:10px 12px; margin:0 0 14px; font-weight:700;
  }

  .suggest-success-modal[hidden]{ display:none; }
  .suggest-success-modal{
    position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
    padding:24px; isolation:isolate;
  }
  .suggest-success-backdrop{
    position:absolute; inset:0; background:#10201dcc; backdrop-filter:blur(3px);
    cursor:pointer;
  }
  .suggest-success-card{
    position:relative; width:min(100%, 440px); overflow:hidden; display:flex; align-items:center;
    background:#fff; border:1px solid #fff; border-radius:20px; box-shadow:0 20px 60px #10201d66;
    animation:suggest-modal-in .25s ease-out both;
  }
  .suggest-success-card > img{
    order:2; width:150px; height:185px; flex:0 0 150px; object-fit:cover; object-position:center top;
    align-self:flex-end; margin-top:20px;
  }
  .suggest-success-copy{ order:1; flex:1; padding:30px 18px 30px 30px; }
  .suggest-success-check{
    display:grid; place-items:center; width:30px; height:30px; margin-bottom:8px;
    color:#fff; background:var(--main-color); border-radius:50%; font-size:14px;
  }
  .suggest-success-copy h2{ margin:0 0 5px; color:var(--main-color-dark); font-size:24px; }
  .suggest-success-copy p{ margin:0; color:#41504a; font-size:13px; line-height:1.45; }
  .suggest-success-close{
    position:absolute; top:9px; right:9px; z-index:1; width:32px; height:32px;
    border:0; border-radius:50%; color:#55625c; background:#eef2ef; cursor:pointer;
  }
  .suggest-success-close:hover{ background:#e1e9e4; color:#17221d; }
  .suggest-success-progress{
    position:absolute; left:0; right:0; bottom:0; height:6px; background:#dfe9e2;
  }
  .suggest-success-progress span{
    display:block; width:100%; height:100%; background:var(--main-color);
    transform-origin:right center; transform:scaleX(1);
  }
  @keyframes suggest-modal-in{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
  @keyframes suggest-modal-progress{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
  @media (max-width:700px){
    #mapSection{ flex:0 0 160px; }
    #contentSection{ flex:1 1 0; }
  }
  @media (max-width:420px){
    .suggest-success-card > img{ width:112px; flex-basis:112px; height:155px; }
    .suggest-success-copy{ padding-left:22px; padding-right:12px; }
  }

  /* ---- Fixed bottom navigation bar ---- */
  #bottomNav{
    flex:0 0 auto;
    display:flex;
    background:#fff;
    border-top:1px solid #0001;
    padding:4px 1px calc(var(--safe-b) + 4px);
    overflow:hidden;
  }
  .nav-btn{
    flex:1 1 0;
    min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px;
    border:none; background:transparent;
    padding:6px 0 5px;
    font-size:8.5px; font-weight:700;
    color:#8a8a8e;
      text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .nav-btn + .nav-btn{ border-left:1px solid #0001; }
  .nav-btn .nav-icon{
    font-size:16px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    width:24px; height:24px;
      text-decoration:none;
    position:relative;
  }
  @media (max-width:700px){
    #bottomNav{ padding-top:2px; padding-bottom:calc(var(--safe-b) + 2px); }
    .nav-btn{ padding:5px 0 4px; font-size:8px; }
    .nav-btn .nav-icon{ width:23px; height:23px; font-size:16px; }
  }
  .nav-pending-badge{
    position:absolute; top:-5px; right:-9px; z-index:1;
    display:flex; align-items:center; justify-content:center;
    min-width:15px; height:15px; padding:0 3px; box-sizing:border-box;
    border-radius:999px; background:#d84a4a; color:#fff;
    font-size:9px; line-height:1; font-weight:800;
  }
  .nav-btn.active{ color:var(--main-color-dark); }
  .nav-btn.active .nav-icon{
    background:var(--main-color-tint); border-radius:8px;
  }
  .nav-btn .nav-dot{
    display:none;
    position:absolute;
    margin-left:14px; margin-top:-20px;
    width:7px; height:7px; border-radius:50%;
    background:var(--main-color);
  }
  #whatsappContactFab{
    position:absolute; right:12px; bottom:calc(var(--safe-b) + 66px); z-index:700;
    text-decoration:none;
  }
  #whatsappContactFab:hover{ background:#eef4f0; }

  /* Sponsoren & Unterstützer tab */
  #tab-sponsors h2{ font-size:22px; color:var(--main-color-dark); margin:0 0 4px; }
  #tab-sponsors h3{ font-size:13px; color:var(--ink); margin:16px 0 8px; }
  #tab-sponsors .sub{ font-size:12.5px; color:#666; margin:0 0 12px; }
  .name-list{ display:flex; flex-direction:column; gap:8px; }
  .name-item{
    display:flex; align-items:center; gap:10px;
    background:var(--box-bg); border:1px solid var(--box-border); border-radius:12px;
    padding:14px 16px;
    font-weight:700; font-size:13.5px;
  }
  .name-item .icon{ font-size:17px; }
  .name-item{ justify-content:space-between; }
  .name-item span{ overflow:hidden; text-overflow:ellipsis; }
  .name-item .sponsor-link{
    font-size:11.5px; font-weight:700; color:var(--main-color-dark);
    text-decoration:none; white-space:nowrap; flex:0 0 auto;
  }
  .sponsor-card-link{ display:block; color:inherit; text-decoration:none; }
  .sponsor-item{ flex-direction:column; align-items:stretch; gap:4px; }
  .sponsor-item .sponsor-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .sponsor-item .sponsor-name{ font-weight:700; font-size:13.5px; }
  .sponsor-item .sponsor-desc{ font-weight:500; font-size:11.5px; color:#666; }
  .press-item{ flex-direction:column; align-items:stretch; gap:4px; }
  .press-item .sponsor-top{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
  .press-item .sponsor-name{ font-weight:700; font-size:13.5px; }
  .press-item .sponsor-link{ order:-1; }
  .press-item .sponsor-desc{ font-weight:500; font-size:11.5px; color:#666; }
  .supporter-item{ flex-direction:column; align-items:stretch; gap:8px; }
  .supporter-item .supporter-name{ font-weight:700; font-size:13.5px; }
  .supporter-item .supporter-location{ font-weight:500; font-size:11.5px; color:#666; margin-left:6px; }
  .support-tags{ display:flex; flex-wrap:wrap; gap:6px; }
  .support-tag{
    display:inline-flex; align-items:center; gap:5px;
    background:var(--main-color-tint); border:1px solid var(--main-color-tint-border);
    color:var(--main-color-dark); border-radius:999px;
    padding:3px 10px; font-size:11px; font-weight:700;
  }
  .support-tag i{ font-size:10.5px; }
  .planned-item{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .stop-badges{ display:flex; align-items:center; gap:4px; flex:0 0 auto; margin-left:auto; }
  .planned-item .stop-date{
    flex:0 0 auto;
    background:var(--main-color); color:#fff; font-weight:800; font-size:11.5px;
    border-radius:10px; padding:6px 10px; min-width:50px; text-align:center;
  }
  .planned-item .stop-date span{ display:block; font-size:10.5px; font-weight:600; opacity:.9; }
  .planned-item.is-past .stop-date{ background:#9a9a9a; }
  .planned-item.is-current .stop-date{ background:var(--main-color); color:#fff; }
  .planned-item .stop-info{ flex:1; min-width:0; font-size:13px; line-height:1.35; }
  .planned-item .stop-loc{ display:block; min-width:0; font-size:14.5px; font-weight:800; color:var(--ink); margin-bottom:4px; }
  .planned-item .stop-loc i{ font-size:12px; color:#777; }
  .planned-item .stop-info p{ margin:0; color:#555; }
  .planned-item .planned-status{
    background:#e7efe9; color:var(--main-color-dark); font-weight:800; font-size:11.5px;
    border:1px solid #c4d8c9; border-radius:8px; padding:3px 7px;
  }
  .planned-item.is-past{ opacity:1; color:#777; }
  .planned-item.is-past .stop-loc{ color:#777; }
  .planned-item.is-past .stop-loc i,
  .planned-item.is-past .stop-info p{ color:#888; }
  .planned-item.is-current{ opacity:1; }
  .planned-item.is-current .stop-loc{ color:var(--main-color-dark); }
  .planned-item.is-current .stop-loc i{ color:var(--main-color); }
  .planned-item:not(.is-current){ opacity:1; color:#777; }
  .planned-item:not(.is-current){ background:#f0f0f0; border-color:#d6d6d6; }
  .planned-item:not(.is-current) .stop-date{ background:#9a9a9a; }
  .planned-item:not(.is-current) .stop-loc{ color:#777; }
  .planned-item:not(.is-current) .stop-loc i,
  .planned-item:not(.is-current) .stop-info p{ color:#888; }
  .planned-item:not(.is-current) .planned-status{ background:#eee; color:#777; border-color:#ccc; }
  .planned-item:not(.is-past){ background:var(--box-bg); border-color:var(--box-border); color:var(--ink); }
  .planned-item:not(.is-past) .stop-date{ background:var(--main-color); color:#fff; }
  .planned-item:not(.is-past) .stop-loc{ color:var(--main-color-dark); }
  .planned-item:not(.is-past) .stop-loc i{ color:var(--main-color); }
  .planned-item:not(.is-past) .stop-info p{ color:#555; }
  .planned-item:not(.is-past) .planned-status{ background:#e7efe9; color:var(--main-color-dark); border-color:#c4d8c9; }
  .today-marker{
    display:flex; align-items:center; gap:10px;
    margin:2px 0; color:var(--main-color-dark);
    font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  }
  .today-marker::before, .today-marker::after{
    content:''; flex:1 1 auto; height:2px;
    background:var(--main-color);
  }
  .thanks-note{
    font-size:12.5px; color:#444; background:var(--box-bg); border:1px solid var(--box-border);
    border-radius:12px; padding:14px 16px; margin:0 0 16px 0;
  }

  /* Events tab */
  #tab-events h2{ font-size:22px; color:var(--main-color-dark); margin:0 0 4px; }
  #tab-events .sub{ font-size:12.5px; color:#666; margin:0 0 14px; }
  .event-group-heading{ font-size:14px; color:#555; margin:14px 0 8px; font-weight:800; }
  .event-group-heading:first-of-type{ margin-top:0; }
  .events-note{ margin:14px 0 0 !important; }
  .event-list{ display:flex; flex-direction:column; gap:10px; }
  .event-item{
    display:flex; gap:12px;
    background:var(--box-bg); border:1px solid var(--box-border); border-radius:12px;
    padding:14px 16px;
  }
  .event-item.is-past,
  .event-item.is-unpublished{ opacity:.6; }
  .event-item.is-past .event-date,
  .event-item.is-unpublished .event-date{ background:#9a9a9a; }
  .event-date{
    flex:0 0 auto;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:var(--main-color); color:#fff; font-weight:800; font-size:13px;
    border-radius:10px; padding:6px 10px; min-width:50px; text-align:center;
  }
  .event-date span{ font-size:10.5px; font-weight:600; opacity:.9; }
  .event-info{ flex:1; font-size:13px; line-height:1.35; }
  .event-info strong{ display:block; font-size:14.5px; color:var(--ink); margin-bottom:2px; }
  .event-info .event-loc{ display:block; font-size:11.5px; color:#777; margin-bottom:4px; }
  .event-info p{ margin:0; color:#555; }
  .event-item .poll-moderation-actions{ align-self:flex-start; }

  /* Social media tab */
  #tab-social h2{ font-size:22px; color:var(--main-color-dark); margin:0 0 4px; }
  #tab-social .sub{ font-size:12.5px; color:#666; margin:0 0 14px; }
  .link-list{ display:flex; flex-direction:column; gap:6px; }
  .link-item{
    display:flex; align-items:center; gap:9px;
    background:var(--box-bg); border:1px solid var(--box-border); border-radius:12px;
    padding:10px 12px;
    text-decoration:none; color:var(--ink);
  }
  .link-item:active{ background:#dcebdc; }
  .link-item a{ display:contents; color:inherit; text-decoration:inherit; }
  .link-item .link-icon{ font-size:19px; flex:0 0 auto; }
  .link-item .link-text{ flex:1; font-size:12px; line-height:1.25; }
  .link-item .link-text strong{ display:block; font-size:13px; }
  .link-item .link-arrow{ font-size:16px; color:#999; }

  /* ---- Desktop: boxed/phone-frame layout instead of full browser width ---- */
  @media (min-width:701px){
    html,body{
      background:#e4ede4;
    }
    #app{
      position:relative;
      inset:auto;
      width:100%;
      max-width:460px;
      height:min(94vh,900px);
      margin:3vh auto;
      border-radius:28px;
      overflow:hidden;
      box-shadow:0 24px 60px rgba(0,0,0,.35), 0 0 0 8px #17171a;
    }
    #mapSection{ flex:0 0 140px; }
    #scooterEl{
      width:48px;
      transform:translate(-50%,-68%);
    }
    #contentSection{ flex:1 1 0; }
    #splashScreen{
      position:absolute;
      inset:auto;
      top:3vh; left:50%;
      transform:translateX(-50%);
      width:100%;
      max-width:460px;
      height:min(94vh,900px);
      border-radius:28px;
      overflow:hidden;
    }
  }