@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Fraunces:ital,wght@0,700;0,900;1,700&display=swap');

/* ═══════════════════════ DESIGN TOKENS ═══════════════════════ */
:root {
  --g900:#0d2b1e;--g800:#1a4731;--g700:#21623f;--g600:#2d7a52;--g500:#3a9068;
  --g400:#52b082;--g300:#7ecba1;--g200:#b7e4c7;--g100:#dff2e9;--g50:#f2faf5;
  --white:#ffffff;
  --s50:#f8fafc;--s100:#f1f5f9;--s200:#e2e8f0;--s300:#cbd5e1;
  --s400:#94a3b8;--s500:#64748b;--s700:#334155;--s900:#0f172a;

  /* layout */
  --panel-w: 380px;
  --hdr-h:   56px;
  --mob-hdr: 52px;      /* mobile top bar height */
  --drawer-peek: 64px;  /* how much of drawer peeks on mobile */

  /* decoration */
  --r-lg:20px;--r-md:12px;--r-sm:8px;--r-xs:6px;
  --sh-panel:8px 0 48px rgba(0,0,0,.22);
  --sh-float:0 12px 48px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
  --sh-card:0 4px 20px rgba(13,43,30,.12);
  --tr:.2s cubic-bezier(.4,0,.2,1);

  --font-ui:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-d:'Fraunces',Georgia,serif;
}

/* ═══════════════════════ RESET ═══════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{font-family:var(--font-ui);color:var(--s900);background:var(--g100);
     -webkit-tap-highlight-color:transparent;}

/* ═══════════════════════ MAP ═══════════════════════ */
#map-root{position:fixed;inset:0;z-index:0;}

/* ═══════════════════════ LEAFLET OVERRIDES ═══════════════════════ */
.leaflet-control-zoom{
  border:none!important;
  box-shadow:var(--sh-card)!important;
  border-radius:var(--r-md)!important;
  overflow:hidden;
  margin-left:calc(var(--panel-w) + 16px)!important;
  margin-top:calc(var(--hdr-h) + 14px)!important;
}
.leaflet-control-zoom a{
  background:white!important;color:var(--g800)!important;border:none!important;
  border-bottom:1px solid var(--s100)!important;
  font-size:16px!important;line-height:30px!important;
  width:34px!important;height:34px!important;transition:background var(--tr)!important;
}
.leaflet-control-zoom a:last-child{border-bottom:none!important;}
.leaflet-control-zoom a:hover{background:var(--g50)!important;color:var(--g600)!important;}
.leaflet-control-attribution{
  background:rgba(255,255,255,.82)!important;backdrop-filter:blur(6px);
  border-radius:6px 0 0 0!important;font-size:.65rem!important;color:var(--s500)!important;
}
.leaflet-popup-content-wrapper{
  border-radius:var(--r-lg)!important;box-shadow:var(--sh-float)!important;
  border:none!important;padding:0!important;overflow:hidden;
}
.leaflet-popup-content{margin:0!important;}
.leaflet-popup-tip{background:white!important;}

/* ═══════════════════════ POPUP ═══════════════════════ */
.popup-inner{padding:14px 16px;}
.popup-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  background:var(--g600);color:white;border-radius:50%;font-size:.68rem;font-weight:700;margin-bottom:6px;}
.popup-title{font-family:var(--font-d);font-size:1rem;color:var(--g800);font-weight:700;line-height:1.25;}
.popup-desc{font-size:.77rem;color:var(--s500);margin-top:5px;line-height:1.55;}
.popup-coords{font-size:.68rem;color:var(--g500);margin-top:8px;font-family:'Courier New',monospace;
  display:flex;align-items:center;gap:4px;}

/* ═══════════════════════ DESKTOP HEADER BAR ═══════════════════════ */
.map-header{
  position:fixed;top:0;left:var(--panel-w);right:0;height:var(--hdr-h);z-index:500;
  background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 20px rgba(0,0,0,.05);
}
.hdr-left{display:flex;align-items:center;gap:12px;}
.hdr-dot{width:10px;height:10px;background:var(--g500);border-radius:50%;
  box-shadow:0 0 0 3px var(--g100);animation:pulse 2.5s ease-in-out infinite;}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px var(--g100);}
  50%{box-shadow:0 0 0 7px rgba(58,144,104,.12);}
}
.hdr-title{font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--g800);letter-spacing:-.02em;}
.hdr-sub{font-size:.69rem;color:var(--s400);margin-top:1px;letter-spacing:.01em;}
.hdr-right{display:flex;align-items:center;gap:8px;}
.hdr-chip{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--g50);
  border:1px solid var(--g200);border-radius:20px;font-size:.71rem;font-weight:600;color:var(--g700);}

/* ═══════════════════════ MOBILE TOP BAR ═══════════════════════ */
.mob-bar{
  display:none;
  position:fixed;top:0;left:0;right:0;height:var(--mob-hdr);z-index:700;
  background:var(--g800);
  padding:0 14px;
  align-items:center;justify-content:space-between;
  box-shadow:0 2px 16px rgba(0,0,0,.25);
}
.mob-brand{display:flex;align-items:center;gap:9px;}
.mob-brand-icon{width:34px;height:34px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:9px;display:flex;align-items:center;justify-content:center;}
.mob-brand-text h1{font-family:var(--font-d);font-size:.9rem;color:white;font-weight:700;line-height:1.2;}
.mob-brand-text p{font-size:.6rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.04em;}
.mob-actions{display:flex;align-items:center;gap:8px;}
/* Drawer toggle button */
.mob-drawer-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:white;cursor:pointer;transition:background var(--tr);
  -webkit-tap-highlight-color:transparent;
}
.mob-drawer-btn:active{background:rgba(255,255,255,.22);}
/* Locate button in mobile bar */
.mob-loc-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:white;cursor:pointer;transition:background var(--tr);
}
.mob-loc-btn.located{background:rgba(37,99,235,.3);border-color:rgba(37,99,235,.5);}

/* ═══════════════════════ LANDMARK MARKERS ═══════════════════════ */
/* Small emoji icon marker */
.lm-marker{
  width:28px;height:28px;
  background:rgba(15,23,42,.72);
  border:1.5px solid rgba(255,255,255,.35);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.lm-marker:hover{background:rgba(15,23,42,.92);transform:scale(1.12);}
.lm-emoji{font-size:14px;line-height:1;user-select:none;}

/* Permanent tooltip label beside the marker */
.lm-label{
  background:rgba(15,23,42,.78)!important;
  border:none!important;
  border-radius:6px!important;
  color:rgba(255,255,255,.92)!important;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;
  font-size:.62rem!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
  padding:3px 7px!important;
  white-space:nowrap!important;
  box-shadow:0 2px 8px rgba(0,0,0,.4)!important;
  backdrop-filter:blur(6px)!important;
  pointer-events:none!important;
}
/* Remove the default leaflet tooltip arrow */
.lm-label::before{display:none!important;}
/* Desktop header help button */
.hdr-help-btn{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--g100);border:1.5px solid var(--g200);
  color:var(--g700);cursor:pointer;
  font-weight:800;font-size:.85rem;font-family:var(--font-ui);
  transition:background var(--tr),border-color var(--tr),transform var(--tr);
  flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  line-height:1;
}
.hdr-help-btn:hover{background:var(--g200);border-color:var(--g300);transform:scale(1.08);}
.hdr-help-btn:active{transform:scale(.95);}

/* ═══════════════════════ MOBILE HAMBURGER MENU ═══════════════════════ */
.mob-menu-wrap{position:relative;}
.mob-menu-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:white;cursor:pointer;transition:background var(--tr);
  -webkit-tap-highlight-color:transparent;
}
.mob-menu-btn:active,
.mob-menu-btn[aria-expanded="true"]{background:rgba(255,255,255,.26);}

.mob-menu-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;left:auto;
  min-width:178px;
  background:#fff;border-radius:var(--r-md);
  box-shadow:var(--sh-float);
  border:1px solid var(--s200);
  padding:6px;
  opacity:0;transform:translateY(-6px) scale(.97);
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
  z-index:710;
}
.mob-menu-dropdown.show{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
}
.mob-menu-item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 10px;border-radius:var(--r-xs);
  background:none;border:none;text-decoration:none;
  font-family:var(--font-ui);font-size:.83rem;font-weight:600;
  color:var(--s700);cursor:pointer;text-align:left;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s;
}
.mob-menu-item:active,
.mob-menu-item:hover{background:var(--g50);}
.mob-menu-item-icon{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;border-radius:6px;
  background:var(--g100);color:var(--g700);
}
.mob-menu-item-icon--help{font-weight:800;font-size:.85rem;line-height:1;}

/* ═══════════════════════ HELP MODAL ═══════════════════════ */
.help-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  z-index:1000;
  opacity:0;transition:opacity .25s ease;
}
.help-backdrop.show{display:block;opacity:1;}

.help-modal{
  display:none;
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-46%);
  width:min(560px, calc(100vw - 32px));
  max-height:calc(100vh - 80px);
  z-index:1001;
  background:white;
  border-radius:var(--r-lg);
  box-shadow:0 24px 80px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.12);
  overflow:hidden;
  flex-direction:column;
  opacity:0;
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.help-modal.show{
  display:flex;opacity:1;
  transform:translate(-50%,-50%);
}

/* Modal header */
.help-modal-hdr{
  background:linear-gradient(135deg,var(--g900) 0%,var(--g700) 60%,var(--g600) 100%);
  padding:18px 20px 16px;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-shrink:0;
}
.help-modal-title-row{display:flex;align-items:center;gap:12px;}
.help-modal-icon{
  width:40px;height:40px;flex-shrink:0;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.help-modal-title{
  font-family:var(--font-d);font-size:1.05rem;font-weight:700;
  color:white;line-height:1.25;
}
.help-modal-subtitle{
  font-size:.65rem;color:rgba(255,255,255,.55);
  text-transform:uppercase;letter-spacing:.05em;margin-top:3px;
}
.help-close-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex-shrink:0;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:8px;color:rgba(255,255,255,.8);
  cursor:pointer;transition:background var(--tr);
  -webkit-tap-highlight-color:transparent;
}
.help-close-btn:hover{background:rgba(255,255,255,.2);}
.help-close-btn:active{background:rgba(255,255,255,.28);}

/* Modal scrollable body */
.help-modal-body{
  overflow-y:auto;padding:20px 20px 24px;
  display:flex;flex-direction:column;gap:16px;
  scrollbar-width:thin;scrollbar-color:var(--s300) transparent;
}
.help-modal-body::-webkit-scrollbar{width:4px;}
.help-modal-body::-webkit-scrollbar-thumb{background:var(--s300);border-radius:4px;}

/* Each step section */
.help-section{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px;
  background:var(--s50);
  border:1px solid var(--s100);
  border-radius:var(--r-md);
  transition:border-color var(--tr);
}
.help-section:hover{border-color:var(--g200);}
.help-section-badge{
  flex-shrink:0;width:28px;height:28px;
  background:linear-gradient(135deg,var(--g700),var(--g500));
  color:white;border-radius:8px;
  font-size:.65rem;font-weight:800;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);
  box-shadow:0 2px 8px rgba(45,122,82,.3);
}
.help-section-content{flex:1;min-width:0;}
.help-section-title{
  font-size:.82rem;font-weight:700;color:var(--g800);
  margin-bottom:5px;line-height:1.3;
}
.help-section-desc{
  font-size:.76rem;color:var(--s500);line-height:1.65;
}
.help-section-desc strong{color:var(--g700);font-weight:700;}
.help-list{
  margin:7px 0 0 14px;
  display:flex;flex-direction:column;gap:5px;
}
.help-list li{
  font-size:.75rem;color:var(--s500);line-height:1.55;
}
.help-list li strong{color:var(--g700);font-weight:700;}

/* Tip callout at the bottom */
.help-tip{
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 14px;
  background:var(--g50);border:1px solid var(--g200);
  border-left:3px solid var(--g400);
  border-radius:var(--r-sm);
  font-size:.74rem;color:var(--g700);line-height:1.6;
}
.help-tip svg{flex-shrink:0;margin-top:2px;}
.help-tip strong{font-weight:700;}

/* Mobile adjustments for the modal */
@media(max-width:767px){
  .help-modal{
    top:auto;left:0;right:0;bottom:0;
    transform:translateY(6px);
    width:100%;
    max-height:88vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
  .help-modal.show{transform:translateY(0);}
  .help-modal-hdr{padding:14px 16px 12px;}
  .help-modal-icon{width:34px;height:34px;}
  .help-modal-title{font-size:.95rem;}
  .help-modal-body{padding:14px 14px 28px;gap:12px;}
  .help-section{padding:12px;}
  .help-section-title{font-size:.8rem;}
  .help-section-desc{font-size:.74rem;}
}

/* ═══════════════════════ SIDE PANEL (desktop) ═══════════════════════ */
.side-panel{
  position:fixed;top:0;left:0;bottom:0;width:var(--panel-w);z-index:600;
  background:var(--white);box-shadow:var(--sh-panel);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform var(--tr);
}

/* Panel header */
.panel-hdr{
  background:linear-gradient(160deg,var(--g900) 0%,var(--g700) 60%,var(--g600) 100%);
  padding:20px 20px 18px;flex-shrink:0;position:relative;overflow:hidden;
}
.panel-hdr::after{content:'';position:absolute;bottom:-30px;right:-30px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none;}
.panel-logo-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.panel-logo-icon{width:44px;height:44px;flex-shrink:0;background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.2);border-radius:12px;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.panel-logo-text h2{font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:white;line-height:1.25;letter-spacing:-.01em;}
.panel-logo-text p{font-size:.67rem;color:rgba(255,255,255,.55);margin-top:2px;letter-spacing:.04em;text-transform:uppercase;}
.panel-desc{font-size:.75rem;color:rgba(255,255,255,.72);line-height:1.6;}
.panel-desc strong{color:rgba(255,255,255,.95);font-weight:600;}

/* GPS locate bar */
.loc-bar{padding:10px 14px;background:var(--s50);border-bottom:1px solid var(--s100);flex-shrink:0;display:flex;align-items:center;gap:10px;}
.loc-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 12px;
  background:white;border:1.5px solid var(--s200);border-radius:var(--r-md);
  font-family:var(--font-ui);font-size:.8rem;font-weight:600;color:var(--s700);
  cursor:pointer;transition:all var(--tr);-webkit-tap-highlight-color:transparent;}
.loc-btn:hover{border-color:var(--g400);color:var(--g700);background:var(--g50);}
.loc-btn.located{background:var(--g50);border-color:var(--g400);color:var(--g700);}
.loc-btn.locating{opacity:.7;cursor:wait;}
.loc-status{font-size:.7rem;color:var(--s500);line-height:1.4;flex:1;}
.loc-status.ok{color:var(--g600);font-weight:600;}
.loc-status.err{color:#dc2626;}

/* Search */
.panel-search{padding:14px 14px 10px;background:var(--s50);border-bottom:1px solid var(--s100);flex-shrink:0;}
.search-field{position:relative;}
.search-field svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none;}
.search-field input{width:100%;padding:9px 12px 9px 36px;background:white;border:1.5px solid var(--s200);
  border-radius:var(--r-md);font-family:var(--font-ui);font-size:.83rem;color:var(--s900);
  outline:none;transition:border-color var(--tr),box-shadow var(--tr);}
.search-field input::placeholder{color:var(--s400);}
.search-field input:focus{border-color:var(--g400);box-shadow:0 0 0 3px rgba(58,144,104,.1);}
.meta-row{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding:0 2px;}
.meta-count{font-size:.73rem;color:var(--s500);}
.meta-count strong{color:var(--g700);font-weight:700;}
.btn-sel-all{background:none;border:none;font-family:var(--font-ui);font-size:.73rem;font-weight:600;
  color:var(--g600);cursor:pointer;padding:0;transition:color var(--tr);}
.btn-sel-all:hover{color:var(--g800);}

/* Spots list */
.spots-list{flex:1;overflow-y:auto;padding:12px;scrollbar-width:thin;scrollbar-color:var(--s200) transparent;height:0;min-height:0;}
.spots-list::-webkit-scrollbar{width:3px;}
.spots-list::-webkit-scrollbar-thumb{background:var(--s200);border-radius:2px;}

.spot-card{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:var(--r-md);
  border:1.5px solid transparent;cursor:pointer;transition:all var(--tr);margin-bottom:6px;
  background:var(--s50);user-select:none;position:relative;-webkit-tap-highlight-color:transparent;}
.spot-card:hover{background:var(--g50);border-color:var(--g200);}
.spot-card.selected{background:var(--g50);border-color:var(--g400);box-shadow:0 0 0 1px var(--g300) inset,var(--sh-card);}
.spot-check{width:20px;height:20px;min-width:20px;border-radius:var(--r-xs);border:2px solid var(--s300);
  background:white;display:flex;align-items:center;justify-content:center;
  transition:all var(--tr);margin-top:1px;flex-shrink:0;}
.spot-card.selected .spot-check{background:var(--g600);border-color:var(--g600);}
.spot-check svg{opacity:0;transform:scale(.5);transition:all var(--tr);}
.spot-card.selected .spot-check svg{opacity:1;transform:scale(1);}
.spot-idx{position:absolute;right:10px;top:10px;width:18px;height:18px;background:var(--g700);
  color:white;border-radius:50%;font-size:.6rem;font-weight:800;display:none;align-items:center;justify-content:center;}
.spot-card.selected .spot-idx{display:flex;}
.spot-body{flex:1;min-width:0;}
.spot-name{font-size:.86rem;font-weight:700;color:var(--g800);line-height:1.3;}
.spot-desc{font-size:.72rem;color:var(--s500);margin-top:3px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.spot-coord{font-size:.65rem;color:var(--g500);margin-top:5px;font-family:'Courier New',monospace;display:flex;align-items:center;gap:3px;}
.empty-state{text-align:center;padding:48px 20px;color:var(--s400);}
.empty-state svg{margin-bottom:12px;opacity:.5;}
.empty-state p{font-size:.85rem;line-height:1.6;}

/* Panel footer */
.panel-foot{padding:14px 16px;background:white;border-top:1px solid var(--s100);flex-shrink:0;}
.sel-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.sel-label{font-size:.75rem;color:var(--s500);}
.sel-label strong{color:var(--g800);font-weight:700;}
.sel-clear{background:none;border:none;font-family:var(--font-ui);font-size:.72rem;
  color:var(--s400);cursor:pointer;padding:0;transition:color var(--tr);}
.sel-clear:hover{color:#e53e3e;}

.btn-optimize{width:100%;padding:13px 16px;
  background:linear-gradient(135deg,var(--g900) 0%,var(--g600) 100%);color:white;border:none;
  border-radius:var(--r-md);font-family:var(--font-ui);font-size:.86rem;font-weight:700;
  cursor:pointer;transition:all var(--tr);
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 20px rgba(13,43,30,.35);letter-spacing:.01em;
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;}
.btn-optimize::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);}
.btn-optimize:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 32px rgba(13,43,30,.45);}
.btn-optimize:active:not(:disabled){transform:translateY(0);}
.btn-optimize:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none;}

/* GA progress */
.ga-box{display:none;margin-top:12px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-md);padding:10px 12px;}
.ga-box.show{display:block;}
.ga-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
.ga-top span{font-size:.71rem;font-weight:600;color:var(--g700);}
.ga-gen{font-size:.68rem;color:var(--g500);font-family:monospace;}
.ga-track{height:5px;background:var(--g200);border-radius:3px;overflow:hidden;}
.ga-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--g600),var(--g300));border-radius:3px;transition:width .08s linear;}
.ga-status{font-size:.69rem;color:var(--g600);margin-top:6px;font-weight:500;}
.ga-step{font-size:.67rem;color:var(--g500);margin-top:3px;font-family:'Courier New',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ═══════════════════════ ROUTE MODE SELECTOR ═══════════════════════ */
/* Sits above the action button, same rhythm as sel-info row */
.route-mode-selector{
  display:flex;gap:6px;margin-bottom:10px;
}
/* Each option looks like a mini version of the loc-btn / spot-card —
   same border weight (1.5px), same radius (--r-md), same bg (white) */
.mode-radio{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  padding:9px 10px;border-radius:var(--r-md);
  border:1.5px solid var(--s200);background:white;
  transition:all var(--tr);
}
.mode-radio:has(input:checked){
  background:var(--g50);border-color:var(--g400);
  box-shadow:0 0 0 1px var(--g300) inset;
}
.mode-radio:hover:not(:has(input:checked)){border-color:var(--g300);background:var(--g50);}
.mode-radio input[type="radio"]{
  width:15px;height:15px;cursor:pointer;accent-color:var(--g600);flex-shrink:0;
}
.mode-radio .radio-label{
  font-family:var(--font-ui);font-size:.75rem;font-weight:600;color:var(--s700);
  white-space:nowrap;
}
.mode-radio:has(input:checked) .radio-label{color:var(--g800);font-weight:700;}

/* ═══════════════════════ MANUAL ROUTING SECTION ═══════════════════════ */
/* Mirrors the structure of the ga-box (info box below the action button) */
.manual-route-section{
  display:flex;flex-direction:column;gap:8px;flex-shrink:0;
}
/* Hint line — same style as ga-status */
.manual-desc{
  font-size:.69rem;font-weight:500;color:var(--g600);
  margin:0;line-height:1.5;
  display:flex;align-items:center;gap:5px;
}
.manual-desc::before{
  content:'';display:inline-block;width:6px;height:6px;
  background:var(--g400);border-radius:50%;flex-shrink:0;
}

/* Ordering list — mirrors .spots-list anatomy:
   same bg (--s50), same border (1px --s200→ here 1px --s200 for subtlety),
   same scrollbar styling */
.manual-ordering-list{
  list-style:none;padding:6px;
  background:var(--s50);border:1px solid var(--s200);
  border-radius:var(--r-md);
  height:152px;max-height:152px;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px;
  scrollbar-width:thin;scrollbar-color:var(--s300) transparent;
  flex-shrink:0;
}
.manual-ordering-list::-webkit-scrollbar{width:3px;}
.manual-ordering-list::-webkit-scrollbar-thumb{background:var(--s300);border-radius:2px;}

/* Each row mirrors .spot-card exactly:
   same padding, same border treatment, same hover/active colors */
.manual-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 11px;
  background:white;border:1.5px solid transparent;
  border-radius:var(--r-sm);
  cursor:move;transition:all var(--tr);
  user-select:none;-webkit-tap-highlight-color:transparent;
  touch-action:none;
}
.manual-item:hover{background:var(--g50);border-color:var(--g200);}
.manual-item.dragging{
  opacity:.45;background:var(--g100);
  border-color:var(--g400);box-shadow:var(--sh-card);
}
.manual-item.drag-over{
  background:var(--g50);border-color:var(--g400);
  box-shadow:0 0 0 2px var(--g300) inset;
}

/* Drag handle — inherits --g500 / --g600 like spot-coord icons */
.manual-drag-handle{
  width:16px;height:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--s300);cursor:grab;transition:color var(--tr);
}
.manual-item:hover .manual-drag-handle{color:var(--g500);}
.manual-drag-handle:active{cursor:grabbing;color:var(--g600);}

/* Sequence badge — identical to .spot-idx / .stop-n */
.manual-item-num{
  width:20px;height:20px;flex-shrink:0;
  background:var(--g700);color:white;border-radius:50%;
  font-size:.6rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* Name text — identical to .spot-name */
.manual-item-name{
  flex:1;min-width:0;
  font-size:.84rem;font-weight:600;color:var(--g800);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Manual route button — identical to .btn-optimize in every detail */
.btn-manual-route{
  width:100%;padding:13px 16px;
  background:linear-gradient(135deg,var(--g900) 0%,var(--g600) 100%);
  color:white;border:none;border-radius:var(--r-md);
  font-family:var(--font-ui);font-size:.86rem;font-weight:700;
  cursor:pointer;transition:all var(--tr);
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 20px rgba(13,43,30,.35);letter-spacing:.01em;
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;
}
.btn-manual-route::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);
}
.btn-manual-route:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(13,43,30,.45);
}
.btn-manual-route:active:not(:disabled){transform:translateY(0);}
.btn-manual-route:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none;}

/* Empty state — mirrors .empty-state in the spots list */
.manual-empty-state{
  list-style:none;padding:20px 12px;
  text-align:center;
  font-size:.75rem;color:var(--s400);line-height:1.6;
}
.manual-empty-state::before{
  content:'';display:block;width:28px;height:28px;margin:0 auto 8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Cline x1='9' y1='12' x2='15' y2='12'/%3E%3Cline x1='9' y1='16' x2='13' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.5;
}

/* Touch drag clone (injected by JS) — no visual class needed, styled inline */

/* ═══════════════════════ MANUAL MODE — SIDEBAR REDESIGN ═══════════════════════ */

/* The manual body replaces the spots-list area when in manual mode */
.manual-sidebar-body{
  display:none;flex-direction:column;flex:1;overflow:hidden;
}
.manual-sidebar-body.active{display:flex;}

/* Header strip inside the manual sidebar body — same rhythm as panel-search */
.manual-sidebar-hdr{
  padding:12px 14px 10px;
  background:var(--s50);
  border-bottom:1px solid var(--s100);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.manual-sidebar-title{
  font-size:.78rem;font-weight:700;color:var(--g800);
  display:flex;align-items:center;gap:6px;
}
.manual-sidebar-title svg{flex-shrink:0;color:var(--g600);}
.manual-sidebar-count{
  font-size:.68rem;font-weight:600;color:var(--s400);
  background:var(--s100);border-radius:10px;padding:2px 8px;
  white-space:nowrap;
}

/* "+ Add Spot" button — outlined secondary style */
.btn-add-spot{
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;
  background:white;
  border:1.5px solid var(--g400);
  border-radius:var(--r-md);
  font-family:var(--font-ui);font-size:.77rem;font-weight:700;
  color:var(--g700);cursor:pointer;
  transition:all var(--tr);
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
  flex-shrink:0;
}
.btn-add-spot:hover{background:var(--g50);border-color:var(--g600);color:var(--g800);}
.btn-add-spot:active{transform:scale(.97);}

/* The draggable list area — fills available space */
.manual-route-list{
  flex:1;overflow-y:auto;padding:10px 12px;
  scrollbar-width:thin;scrollbar-color:var(--s200) transparent;
  display:flex;flex-direction:column;gap:6px;
}
.manual-route-list::-webkit-scrollbar{width:3px;}
.manual-route-list::-webkit-scrollbar-thumb{background:var(--s200);border-radius:2px;}

/* Empty state for the manual list */
.manual-list-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px 20px;color:var(--s400);
}
.manual-list-empty svg{opacity:.4;margin-bottom:12px;}
.manual-list-empty p{font-size:.82rem;line-height:1.6;}
.manual-list-empty strong{color:var(--g600);}

/* Each route item — extends manual-item with a remove button */
.route-item{
  display:flex;align-items:center;gap:9px;
  padding:10px 11px;
  background:var(--g50);border:1.5px solid var(--g200);
  border-radius:var(--r-md);
  cursor:move;transition:all var(--tr);
  user-select:none;-webkit-tap-highlight-color:transparent;
  touch-action:none;
  position:relative;
}
.route-item:hover{background:var(--g100);border-color:var(--g400);}
.route-item.dragging{
  opacity:.4;background:var(--g100);
  border-color:var(--g500);box-shadow:var(--sh-card);
}
.route-item.drag-over{
  background:var(--g100);border-color:var(--g500);
  box-shadow:0 0 0 2px var(--g300) inset;
}

.route-item-drag{
  width:14px;height:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--s300);cursor:grab;transition:color var(--tr);
}
.route-item:hover .route-item-drag{color:var(--g500);}
.route-item-drag:active{cursor:grabbing;}

.route-item-num{
  width:22px;height:22px;flex-shrink:0;
  background:var(--g700);color:white;border-radius:50%;
  font-size:.62rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

.route-item-name{
  flex:1;min-width:0;
  font-size:.84rem;font-weight:600;color:var(--g800);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.route-item-remove{
  width:22px;height:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;
  color:var(--s300);cursor:pointer;
  border-radius:var(--r-xs);
  transition:all var(--tr);
  -webkit-tap-highlight-color:transparent;
  padding:0;
}
.route-item-remove:hover{background:rgba(220,38,38,.08);color:#dc2626;}

/* ── ADD SPOT SHEET (slides up over spots-list content) ── */
.add-spot-sheet{
  position:absolute;
  inset:0;
  background:white;
  z-index:10;
  display:none;
  flex-direction:column;
  overflow:hidden;
  animation:slideUpSheet .22s cubic-bezier(.4,0,.2,1);
}
.add-spot-sheet.open{display:flex;}
@keyframes slideUpSheet{
  from{transform:translateY(12px);opacity:.6;}
  to{transform:translateY(0);opacity:1;}
}

.add-spot-sheet-hdr{
  padding:12px 14px;
  background:var(--s50);
  border-bottom:1px solid var(--s100);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
}
.add-spot-sheet-title{
  font-size:.8rem;font-weight:700;color:var(--g800);
  display:flex;align-items:center;gap:6px;
}

.btn-sheet-close{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  background:var(--s100);border:none;border-radius:var(--r-xs);
  color:var(--s500);cursor:pointer;
  transition:background var(--tr);
  -webkit-tap-highlight-color:transparent;
}
.btn-sheet-close:hover{background:var(--s200);color:var(--s900);}

.add-spot-sheet-search{
  padding:10px 12px 8px;
  background:var(--s50);
  border-bottom:1px solid var(--s100);
  flex-shrink:0;
}

.add-spot-list{
  flex:1;overflow-y:auto;padding:10px 12px;
  display:flex;flex-direction:column;gap:6px;
  scrollbar-width:thin;scrollbar-color:var(--s200) transparent;
}
.add-spot-list::-webkit-scrollbar{width:3px;}
.add-spot-list::-webkit-scrollbar-thumb{background:var(--s200);border-radius:2px;}

/* Spot row inside the picker sheet — same anatomy as spot-card but no checkbox */
.sheet-spot-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:var(--r-md);
  border:1.5px solid var(--s100);
  background:var(--s50);
  cursor:pointer;
  transition:all var(--tr);
  -webkit-tap-highlight-color:transparent;
}
.sheet-spot-row:hover{background:var(--g50);border-color:var(--g300);}
.sheet-spot-row.in-route{
  background:var(--g50);border-color:var(--g300);
  cursor:default;opacity:.55;
}

.sheet-spot-icon{
  width:28px;height:28px;flex-shrink:0;
  background:var(--g100);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--g600);
}
.sheet-spot-row.in-route .sheet-spot-icon{background:var(--g200);}

.sheet-spot-name{
  flex:1;min-width:0;
  font-size:.84rem;font-weight:600;color:var(--g800);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sheet-spot-tag{
  font-size:.62rem;font-weight:700;color:var(--g600);
  background:var(--g100);border-radius:8px;padding:2px 7px;
  white-space:nowrap;flex-shrink:0;
}
.sheet-spot-row.in-route .sheet-spot-tag{color:var(--s400);background:var(--s100);}

/* ── Wrap the spots-list and manual-sidebar-body in a position:relative container ── */
.panel-body-wrap{
  flex:1;overflow:hidden;display:flex;flex-direction:column;position:relative;
}

/* Hint text when list is populated — replaces the old manual-desc */
.manual-hint{
  display:flex;align-items:center;gap:5px;
  font-size:.68rem;font-weight:500;color:var(--s400);
  padding:0 2px;
}
.manual-hint::before{
  content:'';display:inline-block;width:5px;height:5px;
  background:var(--g400);border-radius:50%;flex-shrink:0;
}

/* ═══════════════════════ COMPARISON OVERLAY (beside panel, above ribbon) ═══════════════════════ */
/* Floats above the result ribbon, left-anchored to where panel ends */
.comparison-overlay{
  position:fixed;
  left:var(--panel-w);
  bottom:96px; /* sits right on top of the ribbon (ribbon height) */
  width:260px;
  z-index:481; /* must be above ribbon (480) */
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--g200);
  border-radius:var(--r-md) var(--r-md) 0 0;
  box-shadow:-4px -4px 24px rgba(0,0,0,.1);
  padding:12px 14px 10px;
  /* Hidden by default — JS sets display:block */
}

/* Dismiss button: desktop hidden, mobile only */
.ribbon-dismiss{display:none;}

/* Header row — identical to .ga-top */
.comparison-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.comparison-title{
  font-size:.71rem;font-weight:600;color:var(--g700);
}
.comparison-badge{
  font-size:.62rem;font-weight:700;color:var(--g500);
  font-family:monospace;letter-spacing:.02em;
  background:var(--g100);border-radius:10px;padding:2px 7px;
}

/* Two-column stat grid — mirrors ribbon-stat anatomy */
.comparison-grid{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:8px;margin-bottom:8px;
}
.comparison-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.comparison-label{
  font-size:.63rem;font-weight:600;color:var(--g600);
  text-align:center;line-height:1.3;text-transform:uppercase;letter-spacing:.04em;
}
/* Value uses --font-d like ribbon-stat-val */
.comparison-value{
  font-family:var(--font-d);font-size:1.25rem;font-weight:700;
  color:var(--g900);line-height:1;
}
.comparison-unit{
  font-size:.6rem;font-weight:600;color:var(--g500);
  text-transform:uppercase;letter-spacing:.06em;
}
/* Divider — same as .ribbon-div */
.comparison-divider{
  width:1px;height:48px;background:var(--g200);
}

/* Hint (shown when no optimised route yet) — matches loc-status.ok style */
.comparison-hint{
  font-size:.69rem;color:var(--g600);line-height:1.5;
  display:flex;align-items:flex-start;gap:6px;
  padding:8px 10px;background:white;
  border-radius:var(--r-sm);border-left:2px solid var(--g300);
}
.comparison-hint svg{flex-shrink:0;margin-top:1px;color:var(--g400);}
.comparison-hint strong{color:var(--g700);font-weight:700;}

/* Result strip — mirrors ga-status / ga-step compound look */
.comparison-result{
  font-size:.69rem;color:var(--g700);line-height:1.55;
  padding:7px 10px;background:white;
  border-radius:var(--r-sm);font-weight:500;
  border-left:2px solid var(--g400);
  text-align:center;
}
.comparison-result strong{font-weight:700;}
.comparison-result.efficient-optimized{
  border-left-color:var(--g600);background:white;color:var(--g700);
}
.comparison-result.efficient-manual{
  border-left-color:var(--g500);background:var(--g50);color:var(--g800);
}
.comparison-result.equal{
  border-left-color:var(--g400);background:white;color:var(--g600);
}

/* When ribbon is NOT shown, overlay should not appear either */
.comparison-overlay.ribbon-hidden{
  display:none!important;
}


/* ═══════════════════════ RESULT RIBBON ═══════════════════════ */
.result-ribbon{
  position:fixed;bottom:0;left:var(--panel-w);right:0;
  height:96px;z-index:480;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  /* No overflow set here — ribbon-inner handles it */
}
.result-ribbon.show{transform:translateY(0);}
.ribbon-inner{
  position:absolute;inset:0;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.9);
  box-shadow:0 -8px 32px rgba(0,0,0,.1);
  display:flex;align-items:center;padding:0 20px;gap:14px;
  /* overflow:hidden on x establishes scroll context for ribbon-stops;
     visible on y so box-shadows aren't clipped */
  overflow-x:hidden;overflow-y:visible;
}
.ribbon-stat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;background:var(--g800);border-radius:var(--r-md);
  padding:10px 16px;color:white;min-width:108px;gap:2px;
}
.ribbon-stat-val{font-family:var(--font-d);font-size:1.3rem;font-weight:700;line-height:1;}
.ribbon-stat-lbl{font-size:.6rem;opacity:.65;text-transform:uppercase;letter-spacing:.08em;}
.ribbon-div{width:1px;height:52px;background:var(--s200);flex-shrink:0;}
.ribbon-label{
  font-family:var(--font-d);font-size:.78rem;font-weight:700;color:var(--g800);
  display:flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap;
}
/* The stops list wrapper with nav buttons */
.ribbon-stops-wrap{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
}
/* The stops list — must scroll horizontally */
.ribbon-stops{
  flex:1;
  min-width:0;        /* critical: lets flex item shrink below content size */
  display:flex;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  list-style:none;
  padding:6px 0;
  gap:0;
  /* Show a thin scrollbar so users know it's scrollable */
  scrollbar-width:thin;
  scrollbar-color:var(--g400) var(--g100);
}
.ribbon-stops::-webkit-scrollbar{height:4px;}
.ribbon-stops::-webkit-scrollbar-thumb{background:var(--g400);border-radius:4px;}
.ribbon-stops::-webkit-scrollbar-track{background:var(--g100);border-radius:4px;}
.ribbon-stop{display:flex;align-items:center;flex-shrink:0;}
.stop-pill{
  display:flex;align-items:center;gap:6px;
  background:var(--g50);border:1px solid var(--g200);
  border-radius:20px;padding:5px 10px;white-space:nowrap;
}
.stop-n{
  width:18px;height:18px;background:var(--g600);color:white;border-radius:50%;
  font-size:.6rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stop-lbl{font-size:.75rem;font-weight:600;color:var(--g800);}
.stop-arrow{width:20px;text-align:center;color:var(--g300);font-size:10px;flex-shrink:0;}
.ribbon-road-note{
  font-size:.68rem;color:var(--s500);padding:0 4px;white-space:nowrap;
  flex-shrink:0;display:flex;align-items:center;gap:4px;
}

/* ═══════════════════════ LOCATION / GPS ═══════════════════════ */
@keyframes spin{to{transform:rotate(360deg);}}
.spin{animation:spin .9s linear infinite;transform-origin:center;}

.user-loc-pulse{
  width:20px;height:20px;background:#2563eb;border-radius:50%;border:3px solid white;
  box-shadow:0 0 0 4px rgba(37,99,235,.25),0 4px 12px rgba(0,0,0,.2);
  animation:locPulse 2s ease-in-out infinite;
}
@keyframes locPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(37,99,235,.25),0 4px 12px rgba(0,0,0,.2);}
  50%{box-shadow:0 0 0 10px rgba(37,99,235,.08),0 4px 12px rgba(0,0,0,.2);}
}

/* ═══════════════════════ TOAST ═══════════════════════ */
.map-toast{
  position:fixed;top:calc(var(--hdr-h) + 12px);right:16px;z-index:900;
  background:white;border-radius:var(--r-md);padding:10px 14px;
  box-shadow:var(--sh-float);border-left:3px solid var(--g500);
  font-size:.8rem;font-weight:500;color:var(--s700);max-width:280px;
  display:flex;align-items:center;gap:8px;
  animation:toastIn .25s ease;pointer-events:none;
}
.map-toast.warn{border-color:#d97706;}
.map-toast.err{border-color:#dc2626;}
@keyframes toastIn{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}

/* ═══════════════════════ DRAWER HANDLE (mobile) ═══════════════════════ */
.drawer-handle{
  display:none;width:100%;padding:10px 0 6px;background:white;
  flex-shrink:0;cursor:grab;touch-action:none;
  border-bottom:1px solid var(--s100);
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  user-select:none;-webkit-user-select:none;
}
.drawer-handle:active{cursor:grabbing;}
.drawer-pill{width:36px;height:4px;background:var(--s300);border-radius:2px;transition:background var(--tr);}
.drawer-handle:active .drawer-pill{background:var(--g400);}
.drawer-label{font-size:.65rem;color:var(--s400);font-weight:600;letter-spacing:.06em;text-transform:uppercase;}

/* ═══════════════════════ DRAG HINT INDICATOR ═══════════════════════ */
.drag-hint{
  display:none;position:absolute;bottom:calc(var(--drawer-peek) + 8px);left:50%;
  transform:translateX(-50%);z-index:660;
  background:rgba(26,71,49,.9);color:white;border-radius:20px;
  padding:7px 14px;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  animation:hintBounce 1.8s ease-in-out 1.2s 2 forwards;
  pointer-events:none;opacity:0;
}
@keyframes hintBounce{
  0%{opacity:0;transform:translateX(-50%) translateY(6px);}
  20%{opacity:1;transform:translateX(-50%) translateY(0);}
  80%{opacity:1;transform:translateX(-50%) translateY(0);}
  100%{opacity:0;transform:translateX(-50%) translateY(-4px);}
}

/* ═══════════════════════ FIRST ATTRACTION BADGE ═══════════════════════ */
.spot-card.start-first{
  border-color:#f59e0b;
  background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);
  box-shadow:0 0 0 2px rgba(245,158,11,.2),var(--sh-card);
}
.spot-card.start-first .spot-check{
  background:#f59e0b;border-color:#f59e0b;
}
.first-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:white;border-radius:12px;padding:2px 8px;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  margin-top:5px;box-shadow:0 2px 6px rgba(217,119,6,.35);
}
.first-badge svg{flex-shrink:0;}

/* Map marker "START HERE" label */
.marker-start-label{
  position:absolute;
  left:50%;top:-26px;transform:translateX(-50%);
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:white;white-space:nowrap;
  font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:8px;
  box-shadow:0 2px 10px rgba(217,119,6,.5);
  pointer-events:none;
}
.marker-start-label::after{
  content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:#d97706;border-bottom:none;
}

/* Ribbon "first stop" highlight */
.stop-pill.first-stop{
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border-color:#f59e0b;
  box-shadow:0 0 0 1px rgba(245,158,11,.3);
}
.stop-pill.first-stop .stop-n{background:#f59e0b;}
.stop-first-tag{font-size:.52rem;font-weight:800;color:#d97706;text-transform:uppercase;letter-spacing:.06em;}

/* ═══════════════════════ MOBILE OVERLAY SCRIM ═══════════════════════ */
.mob-scrim{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:599;
  backdrop-filter:blur(2px);opacity:0;transition:opacity .3s;pointer-events:none;
}
.mob-scrim.show{opacity:1;pointer-events:auto;}

/* ═══════════════════════ RESPONSIVE BREAKPOINTS ═══════════════════════ */

/* ── TABLET (768–1023px): narrower panel ── */
@media(min-width:768px) and (max-width:1023px){
  :root{ --panel-w:320px; }
  .panel-desc{display:none;}
  .panel-logo-text h2{font-size:.95rem;}
  .hdr-sub{display:none;}
  .hdr-chip:last-child{display:none;}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE (<768px) — complete bottom-sheet layout
   Z-index layers (low→high):
     map(0) → mob-bar(700) → scrim(599) →
     side-panel drawer(620) → result-ribbon(630) → comparison(635)
   The drawer stops ABOVE the ribbon so they never overlap.
══════════════════════════════════════════════════════════════ */
@media(max-width:767px){

  /* ── CSS custom prop for ribbon height so drawer can respect it ── */
  :root{
    --mob-hdr: 52px;
    --mob-ribbon-h: 130px;   /* height of result ribbon when shown   */
    --mob-ribbon-gap: 8px;   /* breathing room between drawer & ribbon */
  }

  /* ── Hide desktop chrome ── */
  .map-header{display:none;}
  .mob-bar{display:flex;}

  /* ── Zoom control: below mob-bar, left-aligned ── */
  .leaflet-control-zoom{
    margin-left:12px!important;
    margin-top:calc(var(--mob-hdr) + 12px)!important;
  }

  /* ── Scrim ── */
  .mob-scrim{display:block;}

  /* ══ SIDE PANEL — slides up as a bottom sheet ══
     • Hidden by default (JS also sets display:none)
     • When open: fills space between mob-bar top and ribbon bottom
     • bottom is dynamic: JS sets it to ribbon height when ribbon is visible,
       otherwise 0.  We provide the CSS default here.              */
  .side-panel{
    position:fixed;
    top:var(--mob-hdr);
    left:0;right:0;
    bottom:0;           /* JS overrides to ribbon height when ribbon shown */
    width:100%;
    height:auto;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:0 -8px 40px rgba(0,0,0,.22);
    transform:translateY(110%);
    transition:transform .35s cubic-bezier(.4,0,.2,1),
               bottom    .35s cubic-bezier(.4,0,.2,1);
    z-index:620;
    will-change:transform;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .side-panel.drawer-open{
    transform:translateY(0);
  }

  /* ── Drawer handle — show it on mobile ── */
  .drawer-handle{
    display:flex;
    width:100%;
    padding:10px 0 6px;
    background:white;
    flex-shrink:0;
    cursor:pointer;
    touch-action:none;
    border-bottom:1px solid var(--s100);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    user-select:none;
    -webkit-user-select:none;
  }
  .drawer-pill{width:36px;height:4px;background:var(--s300);border-radius:2px;}
  .drawer-label{font-size:.65rem;color:var(--s400);font-weight:600;letter-spacing:.06em;text-transform:uppercase;}

  /* ── Panel header: compact on mobile ── */
  .panel-hdr{padding:12px 16px 10px;}
  .panel-logo-row{margin-bottom:6px;}
  .panel-desc{display:none;}          /* hide description blurb on mobile */
  .panel-logo-icon{width:36px;height:36px;}
  .panel-logo-text h2{font-size:.92rem;}

  /* ── Hide desktop-only bars ── */
  .loc-bar{display:none;}
  #locStatusWrap{display:none!important;}

  /* ── Search bar ── */
  .panel-search{padding:10px 12px 8px;}

  /* ── Spots list: scrollable, fills remaining space ── */
  .spots-list{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* ── Bigger touch targets ── */
  .spot-card{padding:12px 12px;margin-bottom:6px;}
  .spot-check{width:24px;height:24px;min-width:24px;}
  .spot-name{font-size:.88rem;}
  .spot-desc{display:none;}
  .spot-coord{font-size:.67rem;}
  .btn-sel-all{font-size:.78rem;padding:3px 0;}

  /* ── Panel footer: compact column layout ── */
  .panel-foot{
    padding:10px 12px 12px;
    gap:7px;
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    background:white;
    border-top:1px solid var(--s100);
  }
  .sel-info{margin-bottom:0;}
  .route-mode-selector{margin-bottom:0;gap:5px;}

  /* Route mode radios: smaller on mobile */
  .mode-radio{padding:8px 6px;}
  .radio-label{font-size:.71rem;}

  /* Optimize / Manual-route buttons */
  .btn-optimize{padding:13px 14px;font-size:.82rem;}
  .btn-manual-route{padding:13px 14px;font-size:.82rem;}

  /* Manual ordering list: fixed 3-spot height */
  .manual-ordering-list{height:120px;max-height:120px;flex-shrink:0;}

  /* GA progress box */
  .ga-box{margin-top:6px;}

  /* ══ RESULT RIBBON — docked at very bottom, always above drawer ══ */
  .result-ribbon{
    position:fixed;
    left:0;right:0;
    bottom:0;
    height:auto;
    z-index:630;
    transform:translateY(110%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .result-ribbon.show{
    transform:translateY(0);
  }

  /* ribbon inner: vertical stack, compact */
  .ribbon-inner{
    position:relative;
    inset:unset;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    padding:10px 14px 14px;
    gap:6px;
    overflow-x:hidden;
    overflow-y:auto;
    max-height:80vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-top:2px solid var(--g200);
  }

  /* Drag handle pill at top of ribbon */
  .ribbon-inner::before{
    content:'';
    display:block;
    width:32px;height:4px;
    background:var(--s300);
    border-radius:2px;
    margin:0 auto 4px;
    flex-shrink:0;
  }

  /* top row: stat chip + label side by side */
  .ribbon-top-row{
    display:flex;align-items:center;gap:8px;
    flex-shrink:0;
  }
  .ribbon-div{display:none;}
  .ribbon-stat{
    min-width:unset;
    padding:7px 12px;
    flex-direction:row;gap:6px;
    align-items:center;
    flex-shrink:0;
  }
  .ribbon-stat-val{font-size:1rem;}
  .ribbon-stat-lbl{font-size:.56rem;}
  .ribbon-label{font-size:.77rem;}

  /* Stops: horizontal scroll row */
  .ribbon-stops-wrap{overflow:hidden;}
  .ribbon-stops{
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    padding:2px 0 4px;
    gap:0;
  }
  .ribbon-stops::-webkit-scrollbar{display:none;}
  .stop-pill{padding:5px 9px;}
  .stop-lbl{font-size:.72rem;}
  .ribbon-road-note{font-size:.67rem;white-space:normal;line-height:1.4;}

  /* Close / dismiss button inside ribbon on mobile */
  .ribbon-dismiss{
    position:absolute;top:10px;right:12px;
    width:26px;height:26px;
    background:var(--s100);border:none;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--s500);
    font-size:14px;line-height:1;
    -webkit-tap-highlight-color:transparent;
  }
  .ribbon-dismiss:active{background:var(--s200);}

  /* ══ COMPARISON OVERLAY — floats above ribbon ══ */
  .comparison-overlay{
    position:fixed;
    left:0;right:0;
    bottom:0;           /* JS will set bottom = ribbon height */
    width:100%;
    z-index:635;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:0 -4px 24px rgba(0,0,0,.14);
    transform:translateY(110%);
    transition:transform .35s cubic-bezier(.4,0,.2,1),
               bottom    .35s cubic-bezier(.4,0,.2,1);
  }
  /* JS sets display:block — we intercept and animate */
  .comparison-overlay[style*="display: block"],
  .comparison-overlay[style*="display:block"]{
    transform:translateY(0);
  }

  /* ── Toast: above ribbon when ribbon is hidden, safe spot otherwise ── */
  .map-toast{
    top:auto;
    bottom:calc(var(--mob-hdr) + 8px);
    right:12px;left:12px;
    max-width:none;
  }

  /* When ribbon is visible, toast stays above it */
  .result-ribbon.show ~ #toastBox .map-toast{
    bottom:calc(var(--mob-ribbon-h) + 8px);
  }
}

/* ── SMALL MOBILE (<400px) ── */
@media(max-width:399px){
  .mob-brand-text p{display:none;}
  .hdr-chip{display:none;}
  .ribbon-stat{min-width:80px;padding:6px 10px;}
  .ribbon-stat-val{font-size:.95rem;}
  .panel-foot{padding:8px 10px 10px;}
}

/* ═══════════════════════════════════════════════════════════════
   USER PILL — shown in mobile top bar (logged-in name / Guest)
═══════════════════════════════════════════════════════════════ */
.mob-user-pill {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px 5px 8px;
  border-radius:20px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.9);
  font-family:var(--font-ui);
  font-size:.7rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  max-width:110px;
  overflow:hidden;
  transition:background var(--tr), border-color var(--tr);
  -webkit-tap-highlight-color:transparent;
}
.mob-user-pill span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mob-user-pill:hover,
.mob-user-pill:active {
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.4);
}
/* Admin pill gets a subtle green tint */
.mob-user-pill.is-admin {
  background:rgba(45,122,82,.45);
  border-color:rgba(82,176,130,.45);
}
.mob-user-pill.is-admin:hover {
  background:rgba(45,122,82,.6);
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP HEADER — user chip (right side of .map-header)
═══════════════════════════════════════════════════════════════ */
.hdr-user-chip {
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 12px 5px 8px;
  border-radius:20px;
  background:var(--g50);
  border:1px solid var(--g200);
  font-size:.72rem;
  font-weight:600;
  color:var(--g700);
  text-decoration:none;
  transition:background var(--tr), border-color var(--tr), color var(--tr);
  cursor:pointer;
  white-space:nowrap;
}
.hdr-user-chip:hover {
  background:var(--g100);
  border-color:var(--g300);
  color:var(--g800);
}
.hdr-user-chip .chip-avatar {
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--g200);
  border:1.5px solid var(--g300);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.hdr-user-chip.is-admin .chip-avatar {
  background:var(--g700);
  border-color:var(--g600);
}
.hdr-user-chip .chip-role {
  font-size:.62rem;
  font-weight:500;
  color:var(--s400);
  display:block;
  line-height:1;
  margin-top:1px;
}
.hdr-user-chip .chip-name {
  display:block;
  line-height:1.2;
}
.hdr-user-chip .chip-text {
  display:flex;
  flex-direction:column;
}
/* Logout icon inside chip */
.hdr-user-chip .chip-logout {
  margin-left:2px;
  opacity:.5;
  transition:opacity var(--tr);
}
.hdr-user-chip:hover .chip-logout { opacity:1; }

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE — all styles scoped to body.landing-page
   Overrides the map page's html/body overflow:hidden so the
   landing card can scroll freely on small screens.
═══════════════════════════════════════════════════════════════ */

/* Override map page's locked scroll */
body.landing-page,
body.landing-page html {
  overflow: auto !important;
  height: auto !important;
  background: var(--g800);
}

/* ── Background layers ── */
.lp-bg-scene {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(52,144,104,.42) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(13,43,30,.68) 0%, transparent 60%),
    linear-gradient(145deg, #0d2b1e 0%, #1a4731 40%, #21623f 100%);
}
.lp-bg-dots {
  position: fixed; inset: 0; z-index: 1;
  background-image: radial-gradient(rgba(255,255,255,.065) 1px, transparent 1px);
  background-size: 28px 28px;
}
.lp-bg-ring {
  position: fixed; z-index: 1; border-radius: 50%;
  border: 1px solid rgba(82,176,130,.14);
  animation: lp-ring-pulse 6s ease-in-out infinite;
  pointer-events: none;
}
.lp-bg-ring:nth-child(1) { width:500px;height:500px;bottom:-180px;left:-120px;animation-delay:0s; }
.lp-bg-ring:nth-child(2) { width:700px;height:700px;bottom:-300px;left:-250px;animation-delay:1.5s;border-color:rgba(82,176,130,.07); }
.lp-bg-ring:nth-child(3) { width:320px;height:320px;top:-80px;right:-80px;animation-delay:3s; }
@keyframes lp-ring-pulse {
  0%,100% { transform:scale(1);opacity:.6 }
  50%      { transform:scale(1.04);opacity:1 }
}

/* ── Page wrapper — scrollable column ── */
.lp-page {
  position: relative; z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  box-sizing: border-box;
}

/* ── Card — flexible height, scrolls internally when needed ── */
.lp-card {
  width: 100%;
  max-width: 440px;
  background: rgba(255,255,255,.97);
  border-radius: 24px;
  box-shadow: var(--sh-float);
  /* Let the card grow but cap it so it never taller than the viewport */
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* clip rounded corners */
}

/* ── Hero / header — fixed, never scrolls ── */
.lp-card-hero {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--g800) 0%, var(--g600) 100%);
  padding: 28px 28px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lp-card-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 110%, rgba(82,176,130,.32) 0%, transparent 60%);
}
.lp-hero-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px; position: relative; z-index: 1;
  backdrop-filter: blur(8px);
}
.lp-card-hero h1 {
  font-family: var(--font-d); font-size: 1.4rem; font-weight: 700;
  color: #fff; margin-bottom: 4px;
  position: relative; z-index: 1; letter-spacing: -.01em;
}
.lp-card-hero p {
  font-size: .76rem; color: rgba(255,255,255,.7);
  position: relative; z-index: 1;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 500;
}

/* ── Scrollable body — this is the part that scrolls ── */
.lp-card-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 28px;
  -webkit-overflow-scrolling: touch;
  /* Custom thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--s300) transparent;
}
.lp-card-body::-webkit-scrollbar        { width: 4px; }
.lp-card-body::-webkit-scrollbar-thumb  { background: var(--s300); border-radius: 4px; }
.lp-card-body::-webkit-scrollbar-track  { background: transparent; }

/* ── Footer — fixed at bottom, never scrolls ── */
.lp-card-footer {
  flex-shrink: 0;
  padding: 12px 28px 16px;
  border-top: 1px solid var(--s100);
  text-align: center;
  font-size: .73rem; color: var(--s400);
}

/* ── Tab switcher ── */
.lp-tabs {
  display: flex; gap: 4px;
  background: var(--s100); border-radius: var(--r-md);
  padding: 4px; margin-bottom: 20px;
  flex-shrink: 0;
}
.lp-tab {
  flex: 1; padding: 8px 12px;
  border: none; border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  color: var(--s500); background: transparent;
  cursor: pointer;
  transition: background var(--tr), color var(--tr), box-shadow var(--tr);
}
.lp-tab:hover  { color: var(--s700); }
.lp-tab.active { background: #fff; color: var(--g700); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* ── Guest / Login choice buttons ── */
.lp-choice-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 16px;
}
.lp-choice-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 10px; border-radius: var(--r-lg);
  border: 2px solid var(--s200); background: var(--s50);
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr), transform var(--tr);
  font-family: var(--font-ui);
}
.lp-choice-btn:hover  { border-color: var(--g400); background: var(--g50); transform: translateY(-1px); }
.lp-choice-btn.active { border-color: var(--g600); background: var(--g50); }
.lp-choice-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr);
}
.lp-choice-btn--guest .lp-choice-icon  { background: var(--s100); }
.lp-choice-btn--login .lp-choice-icon  { background: var(--g100); }
.lp-choice-btn.active .lp-choice-icon  { background: var(--g200); }
.lp-choice-label { font-size: .8rem; font-weight: 700; color: var(--s700); }
.lp-choice-sub   { font-size: .7rem;  color: var(--s400); font-weight: 400; }

/* ── Divider ── */
.lp-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: .74rem; color: var(--s400); font-weight: 500;
  margin-bottom: 16px;
}
.lp-divider::before, .lp-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--s200);
}

/* ── Alert banners ── */
.lp-alert {
  display: none; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: .8rem; font-weight: 500; margin-bottom: 12px;
  line-height: 1.4;
}
.lp-alert.show        { display: flex; }
.lp-alert--error      { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.lp-alert--success    { background: var(--g50); color: var(--g700); border: 1px solid var(--g200); }

/* ── Form fields ── */
.lp-field-group  { margin-bottom: 13px; }
.lp-field-label  {
  display: block; font-size: .77rem; font-weight: 600;
  color: var(--s700); margin-bottom: 5px;
}
.lp-field-input  {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--s200); border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: .88rem;
  color: var(--s900); background: #fff; outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
  box-sizing: border-box;
}
.lp-field-input:focus {
  border-color: var(--g500);
  box-shadow: 0 0 0 3px rgba(58,144,104,.12);
}
.lp-field-input::placeholder { color: var(--s400); }
.lp-field-hint {
  display: block; font-size: .69rem; color: var(--s400); margin-top: 4px;
}

/* ── Password visibility toggle ── */
.lp-pwd-wrap { position: relative; }
.lp-pwd-wrap .lp-field-input { padding-right: 40px; }
.lp-pwd-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--s400); border-radius: var(--r-sm);
  transition: color var(--tr), background var(--tr);
}
.lp-pwd-toggle:hover { color: var(--s700); background: var(--s100); }
.lp-pwd-toggle:focus-visible { outline: 2px solid var(--g500); outline-offset: 1px; }
.lp-pwd-toggle svg { display: block; }

/* ── Primary button ── */
.lp-btn-primary {
  width: 100%; padding: 12px; border-radius: var(--r-md); border: none;
  background: linear-gradient(135deg, var(--g700) 0%, var(--g500) 100%);
  color: #fff; font-family: var(--font-ui); font-size: .88rem; font-weight: 700;
  cursor: pointer;
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.lp-btn-primary:hover   { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,71,49,.35); }
.lp-btn-primary:active  { transform: translateY(0); }
.lp-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.lp-btn-primary.loading .lp-spinner  { display: block; }
.lp-btn-primary.loading .lp-btn-text { display: none; }

/* ── Guest button ── */
.lp-btn-guest {
  width: 100%; padding: 11px; border-radius: var(--r-md);
  border: 1.5px solid var(--s200); background: #fff;
  color: var(--s700); font-family: var(--font-ui); font-size: .88rem; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr), color var(--tr);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.lp-btn-guest:hover { border-color: var(--g400); background: var(--g50); color: var(--g800); }

/* ── Spinner ── */
.lp-spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: lp-spin .7s linear infinite; display: none;
}
@keyframes lp-spin { to { transform: rotate(360deg) } }

/* ── Switch hint (Don't have an account?) ── */
.lp-switch-hint {
  text-align: center; font-size: .77rem; color: var(--s400); margin-top: 14px;
}
.lp-switch-hint a { color: var(--g600); font-weight: 600; text-decoration: none; }
.lp-switch-hint a:hover { color: var(--g700); text-decoration: underline; }

/* ── Tagline below card ── */
.lp-tagline {
  margin-top: 16px; text-align: center;
  color: rgba(255,255,255,.4); font-size: .73rem; letter-spacing: .04em;
}

/* ══════════════════════════════════════════════
   MOBILE  ≤ 600px  — card fills the screen
══════════════════════════════════════════════ */
@media (max-width: 600px) {
  .lp-page {
    padding: 0;
    justify-content: flex-start;  /* card starts at top */
  }

  .lp-card {
    max-width: 100%;
    border-radius: 0;              /* edge-to-edge */
    max-height: 100vh;
    height: 100vh;
    box-shadow: none;
  }

  .lp-card-hero  { padding: 22px 20px 18px; }
  .lp-hero-icon  { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 10px; }
  .lp-card-hero h1 { font-size: 1.2rem; }

  .lp-card-body  { padding: 18px 18px 16px; }
  .lp-card-footer { padding: 10px 18px 14px; }

  .lp-choice-group { gap: 8px; margin-bottom: 14px; }
  .lp-choice-btn   { padding: 13px 8px; gap: 6px; }
  .lp-choice-icon  { width: 36px; height: 36px; border-radius: 9px; }

  .lp-tagline { display: none; }   /* no room below the full-screen card */
}

/* ══════════════════════════════════════════════
   VERY SMALL  ≤ 360px
══════════════════════════════════════════════ */
@media (max-width: 360px) {
  .lp-card-hero h1  { font-size: 1.1rem; }
  .lp-card-hero p   { display: none; }
  .lp-tab           { font-size: .76rem; padding: 7px 8px; }
  .lp-choice-label  { font-size: .74rem; }
  .lp-choice-sub    { display: none; }
  .lp-field-input   { font-size: .84rem; padding: 9px 11px; }
}