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

/* ═══════════════════════ DESIGN TOKENS ═══════════════════════ */
:root {
  /* Philippine Tourism Palette */
  --ph-blue:    #0038A8;
  --ph-blue-d:  #002880;
  --ph-blue-l:  #E8EEFF;
  --ph-blue-m:  #C0CCFF;
  --ph-red:     #E63329;
  --ph-orange:  #E8522A;
  --ph-amber:   #F5A623;
  --ph-yellow:  #FFD700;
  --ph-green:   #3DAA5C;
  --ph-purple:  #8B2FC9;
  --ph-navy:    #0057B8;
  --g600:       #3DAA5C;   /* alias for ph-green, used in landing footer */

  /* Ink / Text */
  --ink:        #0A1A4A;
  --ink2:       #2A3A6A;
  --ink3:       #6A7AAA;

  /* Surfaces */
  --white:      #FFF;
  --surface:    #FFF;
  --surface2:   #F0F4FF;
  --surface3:   #E8EEFF;
  --warm:       #FFF8E6;
  --warm-b:     #E0C060;

  /* Borders */
  --border:     #C8D0EE;
  --border2:    #B0BCEE;

  /* App background */
  --bg:         #E8ECFA;

  /* Banig strip colors (ordered) */
  --ban1: #E63329;
  --ban2: #F5A623;
  --ban3: #FFD700;
  --ban4: #3DAA5C;
  --ban5: #0057B8;
  --ban6: #8B2FC9;
  --ban7: #E8522A;

  /* Layout */
  --panel-w:    380px;
  --hdr-h:      56px;
  --mob-hdr:    52px;
  --drawer-peek:64px;

  /* Decoration */
  --r-lg:   20px;
  --r-md:   12px;
  --r-sm:   8px;
  --r-xs:   6px;
  --sh-panel: 8px 0 48px rgb(0 56 168 / .18);
  --sh-float: 0 12px 48px rgb(0 0 0 / .16), 0 2px 8px rgb(0 0 0 / .07);
  --sh-card:  0 4px 20px rgb(0 56 168 / .10);
  --tr: .2s cubic-bezier(.4,0,.2,1);

  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-d: 'Plus Jakarta Sans', georgia, serif;
}

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


/* ═══════════════════════ BANIG STRIP UTILITY ═══════════════════════ */
/* A thin multicolor stripe referencing the Philippine banig weave.
   Add class="banig-strip" to any element to apply it as a top border. */
.banig-strip {
  display: flex;
  height: 5px;
  width: 100%;
  flex-shrink: 0;
}
.banig-strip::before {
  content: '';
  flex: 1;
  background: linear-gradient(
    to right,
    var(--ban1) 0%,   var(--ban1) 10%,
    var(--ban2) 10%,  var(--ban2) 20%,
    var(--ban3) 20%,  var(--ban3) 30%,
    var(--ban4) 30%,  var(--ban4) 40%,
    var(--ban5) 40%,  var(--ban5) 50%,
    var(--ban6) 50%,  var(--ban6) 60%,
    var(--ban7) 60%,  var(--ban7) 70%,
    var(--ban1) 70%,  var(--ban1) 80%,
    var(--ban3) 80%,  var(--ban3) 90%,
    var(--ban4) 90%,  var(--ban4) 100%
  );
}

/* ═══════════════════════ 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: var(--white) !important;
  color: var(--ph-blue) !important;
  border: none !important;
  border-bottom: 1px solid var(--surface2) !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(--ph-blue-l) !important;
  color: var(--ph-blue-d) !important;
}
.leaflet-control-attribution {
  background: rgb(255 255 255 / .85) !important;
  backdrop-filter: blur(6px);
  border-radius: 6px 0 0 !important;
  font-size: .65rem !important;
  color: var(--ink3) !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; }

/* Layer toggle button */
.layer-toggle-btn a {
  background: var(--white) !important;
  color: var(--ph-blue) !important;
  border-radius: var(--r-sm) !important;
}
.layer-toggle-btn a:hover {
  background: var(--ph-blue-l) !important;
}

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

/* ═══════════════════════ LANDMARK MARKERS ═══════════════════════ */
.lm-marker {
  width: 28px; height: 28px;
  background: rgb(0 56 168 / .82);
  border: 1.5px solid rgb(255 255 255 / .4);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgb(0 0 0 / .4);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.lm-marker:hover { background: rgb(0 40 128 / .95); transform: scale(1.12); }
.lm-emoji { font-size: 14px; line-height: 1; user-select: none; }

.lm-label {
  background: rgb(0 56 168 / .85) !important;
  border: none !important;
  border-radius: 6px !important;
  color: rgb(255 255 255 / .95) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  padding: 3px 7px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / .35) !important;
  backdrop-filter: blur(6px) !important;
  pointer-events: none !important;
}
.lm-label::before { display: none !important; }

/* ═══════════════════════ DESKTOP HEADER BAR ═══════════════════════ */
.map-header {
  position: fixed; top: 0; left: var(--panel-w); right: 0;
  height: var(--hdr-h); z-index: 500;
  background: rgb(255 255 255 / .95);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 1px 0 rgb(0 0 0 / .05), 0 4px 20px rgb(0 56 168 / .06);
}
.hdr-left { display: flex; align-items: center; gap: 12px; }
.hdr-dot {
  width: 10px; height: 10px;
  background: var(--ph-green); border-radius: 50%;
  box-shadow: 0 0 0 3px rgb(61 170 92 / .15);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgb(61 170 92 / .15); }
  50%      { box-shadow: 0 0 0 7px rgb(61 170 92 / .08); }
}
.hdr-title {
  font-family: var(--font-ui);
  font-size: 1rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.02em;
}
.hdr-sub {
  font-size: .62rem; color: var(--ink3);
  margin-top: 1px; letter-spacing: .01em;
  font-family: var(--font-body);
}
.hdr-right { display: flex; align-items: center; gap: 8px; }
.hdr-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: .71rem; font-weight: 700; color: var(--ink2);
  font-family: var(--font-body);
}

/* Help button */
.hdr-help-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ph-yellow);
  border: none;
  color: var(--ph-blue-d);
  cursor: pointer;
  font-weight: 800; font-size: .85rem;
  font-family: var(--font-ui);
  transition: background var(--tr), transform var(--tr);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgb(255 215 0 / .4);
  line-height: 1;
}
.hdr-help-btn:hover { background: #FFCA00; transform: scale(1.08); }
.hdr-help-btn:active { transform: scale(.95); }

/* ═══════════════════════ MOBILE TOP BAR ═══════════════════════ */
.mob-bar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 700;
  background: var(--ph-blue);
  flex-direction: column;
}
.mob-bar-banig {
  display: flex; height: 4px; flex-shrink: 0;
  background: linear-gradient(
    to right,
    var(--ban1) 0%,   var(--ban1) 14.28%,
    var(--ban2) 14.28%,var(--ban2) 28.57%,
    var(--ban3) 28.57%,var(--ban3) 42.86%,
    var(--ban4) 42.86%,var(--ban4) 57.14%,
    var(--ban5) 57.14%,var(--ban5) 71.43%,
    var(--ban6) 71.43%,var(--ban6) 85.71%,
    var(--ban7) 85.71%,var(--ban7) 100%
  );
}
.mob-bar-inner {
  height: var(--mob-hdr);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
}
.mob-brand { display: flex; align-items: center; gap: 9px; }
.mob-brand-icon {
  width: 32px; height: 32px;
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.mob-brand-text h1 {
  font-family: var(--font-ui);
  font-size: .9rem; color: white; font-weight: 800; line-height: 1.2;
}
.mob-brand-text p {
  font-size: .6rem; color: rgb(255 255 255 / .5);
  text-transform: uppercase; letter-spacing: .04em;
  font-family: var(--font-body);
}
.mob-actions { display: flex; align-items: center; gap: 8px; }
.mob-drawer-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2);
  color: white; cursor: pointer; transition: background var(--tr);
  -webkit-tap-highlight-color: transparent;
}
.mob-drawer-btn:active { background: rgb(255 255 255 / .22); }
.mob-loc-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2);
  color: white; cursor: pointer; transition: background var(--tr);
}
.mob-loc-btn.located {
  background: rgb(61 170 92 / .3); border-color: rgb(61 170 92 / .5);
}

/* ═══════════════════════ MOBILE HAMBURGER ═══════════════════════ */
.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: rgb(255 255 255 / .12); border: 1px solid rgb(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: rgb(255 255 255 / .26); }
.mob-menu-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; left: auto;
  min-width: 178px;
  background: var(--white); border-radius: var(--r-md);
  box-shadow: var(--sh-float); border: 1.5px solid var(--border);
  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-body); font-size: .83rem; font-weight: 700;
  color: var(--ink2); cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent; transition: background .12s;
}
.mob-menu-item:active,
.mob-menu-item:hover { background: var(--ph-blue-l); color: var(--ph-blue-d); }
.mob-menu-item-icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
  background: var(--ph-blue-l); color: var(--ph-blue);
}
.mob-menu-item-icon--help { font-weight: 800; font-size: .85rem; line-height: 1; }

/* ═══════════════════════ USER PILL — mobile ═══════════════════════ */
.mob-user-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px; border-radius: 20px;
  background: rgb(255 255 255 / .13); border: 1px solid rgb(255 255 255 / .22);
  color: rgb(255 255 255 / .9);
  font-family: var(--font-body); font-size: .7rem; font-weight: 700;
  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: rgb(255 255 255 / .24); border-color: rgb(255 255 255 / .4); }
.mob-user-pill.is-admin { background: rgb(61 170 92 / .35); border-color: rgb(61 170 92 / .5); }
.mob-user-pill.is-admin:hover { background: rgb(61 170 92 / .5); }

/* ═══════════════════════ DESKTOP USER CHIP ═══════════════════════ */
.hdr-user-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 8px; border-radius: 20px;
  background: var(--warm); border: 1.5px solid var(--warm-b);
  font-size: .72rem; font-weight: 700; color: #6A4400;
  text-decoration: none;
  transition: background var(--tr), border-color var(--tr);
  cursor: pointer; white-space: nowrap;
  font-family: var(--font-body);
}
.hdr-user-chip:hover { background: #FFF0C8; border-color: #C8A040; }
.hdr-user-chip .chip-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: #F5D060; border: 1.5px solid #C8A040;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hdr-user-chip.is-admin .chip-avatar {
  background: var(--ph-blue); border-color: var(--ph-blue-d);
}
.hdr-user-chip .chip-role {
  font-size: .62rem; font-weight: 500; color: var(--ink3);
  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; }
.hdr-user-chip .chip-logout { margin-left: 2px; opacity: .5; transition: opacity var(--tr); }
.hdr-user-chip:hover .chip-logout { opacity: 1; }

/* ═══════════════════════ SIDE PANEL ═══════════════════════ */
.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: var(--ph-blue);
  flex-shrink: 0; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.panel-hdr-banig {
  height: 5px; flex-shrink: 0;
  background: linear-gradient(
    to right,
    var(--ban1) 0%,   var(--ban1) 10%,
    var(--ban2) 10%,  var(--ban2) 20%,
    var(--ban3) 20%,  var(--ban3) 30%,
    var(--ban4) 30%,  var(--ban4) 40%,
    var(--ban5) 40%,  var(--ban5) 50%,
    var(--ban6) 50%,  var(--ban6) 60%,
    var(--ban7) 60%,  var(--ban7) 70%,
    var(--ban1) 70%,  var(--ban1) 80%,
    var(--ban3) 80%,  var(--ban3) 90%,
    var(--ban4) 90%,  var(--ban4) 100%
  );
}
.panel-hdr-inner {
  padding: 20px 28px 18px 28px;
  position: relative;
  z-index: 1;
}
.panel-hdr::after {
  content: '';
  position: absolute; bottom: -40px; right: -40px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgb(255 255 255 / .04); pointer-events: none;
}
.panel-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 10px;
  margin-top: 12px;
  margin-bottom: 15px;
  padding: 0 8px;
}
.panel-logo-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgb(255 255 255 / .12);
  border: 1.5px solid rgb(255 255 255 / .22); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.panel-logo-text h2 {
  font-family: var(--font-ui);
  font-size: 1.05rem; font-weight: 800; color: white;
  line-height: 1.25; letter-spacing: -.01em;
}
.panel-logo-text p {
  font-size: .67rem; color: rgb(255 255 255 / .5);
  margin-top: 2px; letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--font-body);
}

/* Fun pill */
.fun-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ph-yellow); border-radius: 20px;
  padding: 4px 11px 4px 8px;
  font-family: var(--font-ui); font-size: .63rem; font-weight: 800;
  color: var(--ph-blue-d); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
}
.fun-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ph-red); flex-shrink: 0; }

.panel-desc { 
    font-size: 0.80rem; 
    color: rgb(255 255 255 / .78); 
    line-height: 1.6; 
    font-family: var(--font-body); 
    margin-left: 19px;
    margin-top: 3px;
    margin-bottom: 15px;
    
}
    
.panel-desc strong { color: var(--ph-yellow); font-weight: 700; }

/* GPS locate bar */
.loc-bar {
  padding: 10px 14px; background: var(--surface2);
  border-bottom: 1px solid var(--border); 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(--border); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--ink2);
  cursor: pointer; transition: all var(--tr); -webkit-tap-highlight-color: transparent;
}
.loc-btn:hover { border-color: var(--ph-blue); color: var(--ph-blue); background: var(--ph-blue-l); }
.loc-btn.located { background: var(--ph-blue-l); border-color: var(--ph-blue-m); color: var(--ph-blue); }
.loc-btn.locating { opacity: .7; cursor: wait; }
.loc-status { font-size: .7rem; color: var(--ink3); line-height: 1.4; flex: 1; font-family: var(--font-body); }
.loc-status.ok  { color: var(--ph-green); font-weight: 700; }
.loc-status.err { color: var(--ph-red); }

/* Search */
.panel-search {
  padding: 12px 14px 10px; background: var(--surface2);
  border-bottom: 1.5px solid var(--border); flex-shrink: 0;
}
.search-field { position: relative; }
.search-field svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink3); }
.search-field input {
  width: 100%; padding: 9px 12px 9px 36px;
  background: white; border: 1.5px solid var(--border2);
  border-radius: var(--r-md);
  font-family: var(--font-body); font-size: .83rem; color: var(--ink);
  outline: none; transition: border-color var(--tr), box-shadow var(--tr);
}
.search-field input::placeholder { color: var(--ink3); }
.search-field input:focus { border-color: var(--ph-blue); box-shadow: 0 0 0 3px rgb(0 56 168 / .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(--ink3); font-family: var(--font-body); }
.meta-count strong { color: var(--ph-blue); font-weight: 800; }
.btn-sel-all {
  background: none; border: none;
  font-family: var(--font-body); font-size: .73rem; font-weight: 800;
  color: var(--ph-orange); cursor: pointer; padding: 0;
  transition: color var(--tr);
}
.btn-sel-all:hover { color: var(--ph-red); }

/* ── Spots list ── */
.spots-list {
  flex: 1; overflow-y: auto; padding: 12px;
  background: var(--surface2);
  scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
  height: 0; min-height: 0;
}
.spots-list::-webkit-scrollbar { width: 3px; }
.spots-list::-webkit-scrollbar-thumb { background: var(--border2); 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 var(--border);
  background: var(--white);
  cursor: pointer; transition: all var(--tr); margin-bottom: 6px;
  user-select: none; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.spot-card:hover { background: var(--ph-blue-l); border-color: var(--ph-blue-m); }
.spot-card.selected {
  background: var(--ph-blue-l); border-color: var(--ph-blue-m);
  box-shadow: 0 0 0 1px var(--ph-blue-m) inset, var(--sh-card);
}
.spot-check {
  width: 20px; height: 20px; min-width: 20px;
  border-radius: var(--r-xs); border: 2px solid var(--border2);
  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(--ph-green); border-color: var(--ph-green); }
.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(--ph-blue); color: white;
  border-radius: 50%; font-size: .6rem; font-weight: 800;
  display: none; align-items: center; justify-content: center;
  font-family: var(--font-ui);
}
.spot-card.selected .spot-idx { display: flex; }
.spot-body { flex: 1; min-width: 0; }
.spot-name { font-size: .86rem; font-weight: 800; color: var(--ink); line-height: 1.3; font-family: var(--font-ui); }
.spot-desc { font-size: .72rem; color: var(--ink3); margin-top: 3px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); }
.spot-coord {
  font-size: .65rem; color: var(--ph-blue); 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(--ink3); }
.empty-state svg { margin-bottom: 12px; opacity: .4; }
.empty-state p { font-size: .85rem; line-height: 1.6; font-family: var(--font-body); }

/* ── Category badges on spot cards ── */
.spot-badge {
  margin-left: auto; flex-shrink: 0;
  font-size: .6rem; font-weight: 700; padding: 3px 8px; border-radius: 7px;
  font-family: var(--font-body); display: flex; align-items: center; gap: 3px;
  border: 1px solid; white-space: nowrap;
}
.badge-nature  { background: #E6F4EC; border-color: #90CCA8; color: #1A5C2A; }
.badge-market  { background: #FFF0E6; border-color: #F5B090; color: #7A2C00; }
.badge-culture { background: #EEE8FF; border-color: #C0A8F0; color: #4A1A8A; }
.badge-beach   { background: #E6F4FF; border-color: #90C0F0; color: #0A3A6A; }
.badge-city    { background: #FFF8E6; border-color: #E0C060; color: #6A4400; }

/* ── Panel body wrap ── */
.panel-body-wrap { flex: 1; overflow: hidden; display: flex; flex-direction: column; position: relative; }

/* ═══════════════════════ PANEL FOOTER ═══════════════════════ */
.panel-foot {
  padding: 14px 16px; background: var(--white);
  border-top: 1.5px solid var(--border); flex-shrink: 0;
}
.sel-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sel-label { font-size: .75rem; color: var(--ink3); font-family: var(--font-body); }
.sel-label strong { color: var(--ink); font-weight: 800; }
.sel-clear {
  background: none; border: none; font-family: var(--font-body);
  font-size: .72rem; font-weight: 700; color: var(--ph-red);
  cursor: pointer; padding: 0; transition: color var(--tr);
}
.sel-clear:hover { color: #AA2020; }

/* Route mode selector */
.route-mode-selector { display: flex; gap: 6px; margin-bottom: 10px; }
.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(--border); background: var(--surface2);
  transition: all var(--tr);
}
.mode-radio:has(input:checked) {
  background: var(--ph-blue); border-color: var(--ph-blue);
  box-shadow: 0 2px 8px rgb(0 56 168 / .25);
}
.mode-radio:hover:not(:has(input:checked)) { border-color: var(--ph-blue-m); background: var(--ph-blue-l); }
.mode-radio input[type="radio"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--ph-blue); flex-shrink: 0; }
.mode-radio .radio-label { font-family: var(--font-body); font-size: .75rem; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.mode-radio:has(input:checked) .radio-label { color: white; font-weight: 800; }

/* Generate / Manual buttons */
.btn-optimize {
  width: 100%; padding: 13px 16px;
  background: var(--ph-red); color: white; border: none;
  border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: .86rem; font-weight: 800;
  cursor: pointer; transition: all var(--tr);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 20px rgb(230 51 41 / .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, rgb(255 255 255 / .1), transparent);
}
.btn-optimize:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgb(230 51 41 / .45); background: #CC2A22; }
.btn-optimize:active:not(:disabled) { transform: translateY(0); }
.btn-optimize:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-manual-route {
  width: 100%; padding: 13px 16px;
  background: var(--ph-blue); color: white; border: none;
  border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: .86rem; font-weight: 800;
  cursor: pointer; transition: all var(--tr);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 20px rgb(0 56 168 / .3); 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, rgb(255 255 255 / .1), transparent);
}
.btn-manual-route:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgb(0 56 168 / .4); background: var(--ph-blue-d); }
.btn-manual-route:active:not(:disabled) { transform: translateY(0); }
.btn-manual-route:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }

/* GA progress box */
.ga-box {
  display: none; margin-top: 12px;
  background: var(--ph-blue-l); border: 1.5px solid var(--ph-blue-m);
  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: 700; color: var(--ph-blue); font-family: var(--font-body); }
.ga-gen { font-size: .68rem; color: var(--ink3); font-family: monospace; }
.ga-track { height: 5px; background: var(--ph-blue-m); border-radius: 3px; overflow: hidden; }
.ga-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ph-blue), var(--ph-blue-m));
  border-radius: 3px; transition: width .08s linear;
}
.ga-status { font-size: .69rem; color: var(--ph-blue); margin-top: 6px; font-weight: 600; font-family: var(--font-body); }
.ga-step {
  font-size: .67rem; color: var(--ink3); margin-top: 3px;
  font-family: 'Courier New', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════════════ MANUAL ROUTE SIDEBAR ═══════════════════════ */
.manual-sidebar-body { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.manual-sidebar-body.active { display: flex; }

.manual-sidebar-hdr {
  padding: 12px 14px 10px;
  background: var(--surface2); border-bottom: 1.5px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.manual-sidebar-title {
  font-size: .78rem; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-ui);
}
.manual-sidebar-title svg { flex-shrink: 0; color: var(--ph-blue); }
.manual-sidebar-count {
  font-size: .68rem; font-weight: 700; color: var(--ink3);
  background: var(--border); border-radius: 10px; padding: 2px 8px;
  white-space: nowrap; font-family: var(--font-body);
}
.btn-add-spot {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; background: white;
  border: 1.5px solid var(--ph-blue); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: .77rem; font-weight: 800;
  color: var(--ph-blue); cursor: pointer; transition: all var(--tr);
  -webkit-tap-highlight-color: transparent; white-space: nowrap; flex-shrink: 0;
}
.btn-add-spot:hover { background: var(--ph-blue-l); color: var(--ph-blue-d); }
.btn-add-spot:active { transform: scale(.97); }

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

.manual-list-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 20px; color: var(--ink3);
}
.manual-list-empty svg { opacity: .35; margin-bottom: 12px; }
.manual-list-empty p { font-size: .82rem; line-height: 1.6; font-family: var(--font-body); }
.manual-list-empty strong { color: var(--ph-blue); }

.route-item {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px; background: var(--white);
  border: 1.5px solid var(--border); 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(--ph-blue-l); border-color: var(--ph-blue-m); }
.route-item.dragging { opacity: .4; background: var(--ph-blue-l); border-color: var(--ph-blue); box-shadow: var(--sh-card); }
.route-item.drag-over { background: var(--ph-blue-l); border-color: var(--ph-blue); box-shadow: 0 0 0 2px var(--ph-blue-m) inset; }

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

.route-item-num {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--ph-blue); color: white; border-radius: 50%;
  font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui);
}
.route-item-name {
  flex: 1; min-width: 0;
  font-size: .84rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-ui);
}
.route-item-remove {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink3);
  cursor: pointer; border-radius: var(--r-xs);
  transition: all var(--tr); -webkit-tap-highlight-color: transparent; padding: 0;
}
.route-item-remove:hover { background: rgb(230 51 41 / .1); color: var(--ph-red); }

/* Add spot sheet */
.add-spot-sheet {
  position: absolute; inset: 0;
  background: var(--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(--surface2);
  border-bottom: 1.5px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.add-spot-sheet-title {
  font-size: .8rem; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-ui);
}
.btn-sheet-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--border); border: none; border-radius: var(--r-xs);
  color: var(--ink2); cursor: pointer; transition: background var(--tr);
  -webkit-tap-highlight-color: transparent;
}
.btn-sheet-close:hover { background: var(--border2); color: var(--ink); }
.add-spot-sheet-search {
  padding: 10px 12px 8px; background: var(--surface2);
  border-bottom: 1.5px solid var(--border); flex-shrink: 0;
}
.add-spot-list {
  flex: 1; overflow-y: auto; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface2);
  scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
}
.add-spot-list::-webkit-scrollbar { width: 3px; }
.add-spot-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.sheet-spot-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1.5px solid var(--border); background: var(--white);
  cursor: pointer; transition: all var(--tr);
  -webkit-tap-highlight-color: transparent;
}
.sheet-spot-row:hover { background: var(--ph-blue-l); border-color: var(--ph-blue-m); }
.sheet-spot-row.in-route { background: var(--surface2); border-color: var(--border); cursor: default; opacity: .55; }
.sheet-spot-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--ph-blue-l); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; color: var(--ph-blue);
}
.sheet-spot-row.in-route .sheet-spot-icon { background: var(--surface2); color: var(--ink3); }
.sheet-spot-name {
  flex: 1; min-width: 0;
  font-size: .84rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-ui);
}
.sheet-spot-tag {
  font-size: .62rem; font-weight: 800; color: var(--ph-blue);
  background: var(--ph-blue-l); border-radius: 8px; padding: 2px 7px;
  white-space: nowrap; flex-shrink: 0; font-family: var(--font-body);
}
.sheet-spot-row.in-route .sheet-spot-tag { color: var(--ink3); background: var(--border); }

/* ═══════════════════════ COMPARISON OVERLAY ═══════════════════════ */
.comparison-overlay {
  position: fixed; left: var(--panel-w); bottom: 96px; width: 260px;
  z-index: 481;
  background: rgb(255 255 255 / .98);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: -4px -4px 24px rgb(0 56 168 / .1);
  overflow: hidden;
}
.comparison-banig {
  height: 4px;
  background: linear-gradient(
    to right,
    var(--ban1) 0%,  var(--ban1) 16.66%,
    var(--ban2) 16.66%,var(--ban2) 33.33%,
    var(--ban3) 33.33%,var(--ban3) 50%,
    var(--ban4) 50%,  var(--ban4) 66.66%,
    var(--ban5) 66.66%,var(--ban5) 83.33%,
    var(--ban6) 83.33%,var(--ban6) 100%
  );
}
.comparison-body { padding: 12px 14px 10px; }
.ribbon-dismiss { display: none; }
.comparison-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.comparison-title { font-size: .71rem; font-weight: 700; color: var(--ink); font-family: var(--font-ui); }
.comparison-badge {
  font-size: .62rem; font-weight: 800; color: var(--ph-blue);
  font-family: monospace; background: var(--ph-blue-l);
  border-radius: 10px; padding: 2px 7px;
}
.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: 700; color: var(--ink3); text-align: center; text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-body); }
.comparison-value { font-family: var(--font-ui); font-size: 1.25rem; font-weight: 800; color: var(--ink); line-height: 1; }
.comparison-unit { font-size: .6rem; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; }
.comparison-divider { width: 1px; height: 48px; background: var(--border); }
.comparison-hint {
  font-size: .69rem; color: var(--ink2); line-height: 1.5;
  display: flex; align-items: flex-start; gap: 6px;
  padding: 8px 10px; background: var(--ph-blue-l);
  border-radius: var(--r-sm); border-left: 2px solid var(--ph-blue-m);
  font-family: var(--font-body);
}
.comparison-hint svg { flex-shrink: 0; margin-top: 1px; color: var(--ph-blue); }
.comparison-hint strong { color: var(--ph-blue); font-weight: 800; }
.comparison-result {
  font-size: .69rem; color: var(--ink2); line-height: 1.55;
  padding: 7px 10px; background: var(--ph-blue-l);
  border-radius: var(--r-sm); font-weight: 600;
  border-left: 2px solid var(--ph-blue); text-align: center;
  font-family: var(--font-body);
}
.comparison-result strong { font-weight: 800; }
.comparison-result.efficient-optimized { border-left-color: var(--ph-green); background: #E6F4EC; color: #1A5C2A; }
.comparison-result.efficient-manual    { border-left-color: var(--ph-blue);  background: var(--ph-blue-l); color: var(--ph-blue-d); }
.comparison-result.equal               { border-left-color: var(--ph-amber); background: var(--warm); color: #6A4400; }

/* ═══════════════════════ 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);
  overflow: hidden;
}
.result-ribbon.show { transform: translateY(0); }

.result-ribbon::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 2;
  background: linear-gradient(
    to right,
    var(--ban1) 0%,   var(--ban1) 10%,
    var(--ban2) 10%,  var(--ban2) 20%,
    var(--ban3) 20%,  var(--ban3) 30%,
    var(--ban4) 30%,  var(--ban4) 40%,
    var(--ban5) 40%,  var(--ban5) 50%,
    var(--ban6) 50%,  var(--ban6) 60%,
    var(--ban7) 60%,  var(--ban7) 70%,
    var(--ban1) 70%,  var(--ban1) 80%,
    var(--ban3) 80%,  var(--ban3) 90%,
    var(--ban4) 90%,  var(--ban4) 100%
  );
}
.ribbon-inner {
  position: absolute; inset: 0;
  background: rgb(255 255 255 / .98);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 28px rgb(0 56 168 / .1);
  display: flex; align-items: center; padding: 0 20px; gap: 14px;
  overflow: visible hidden;
  padding-top: 5px;
}
.ribbon-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--ph-blue); border-radius: var(--r-md);
  padding: 10px 16px; color: white; min-width: 108px; gap: 2px;
}
.ribbon-stat-val { font-family: var(--font-ui); font-size: 1.3rem; font-weight: 800; line-height: 1; color: white; }
.ribbon-stat-lbl { font-size: .6rem; opacity: .65; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-body); }
.ribbon-div { width: 1px; height: 52px; background: var(--border); flex-shrink: 0; }
.ribbon-label {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
}
.ribbon-stops-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ribbon-stops {
  flex: 1; min-width: 0;
  display: flex; align-items: center; overflow: auto hidden;
  list-style: none; padding: 6px 0; gap: 0;
  scrollbar-width: thin; scrollbar-color: var(--ph-blue-m) var(--ph-blue-l);
}
.ribbon-stops::-webkit-scrollbar { height: 4px; }
.ribbon-stops::-webkit-scrollbar-thumb { background: var(--ph-blue-m); border-radius: 4px; }
.ribbon-stops::-webkit-scrollbar-track { background: var(--ph-blue-l); border-radius: 4px; }
.ribbon-stop { display: flex; align-items: center; flex-shrink: 0; }
.stop-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--warm); border: 1.5px solid var(--warm-b);
  border-radius: 20px; padding: 5px 10px; white-space: nowrap;
}
.stop-n {
  width: 18px; height: 18px; background: var(--ph-green); color: white;
  border-radius: 50%; font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--font-ui);
}
.stop-lbl { font-size: .75rem; font-weight: 700; color: var(--ink2); font-family: var(--font-body); }
.stop-arrow { width: 20px; text-align: center; color: var(--ink3); font-size: 10px; flex-shrink: 0; }
.ribbon-road-note {
  font-size: .68rem; color: var(--ink3); padding: 0 4px; white-space: nowrap;
  flex-shrink: 0; display: flex; align-items: center; gap: 4px;
  font-family: var(--font-body);
}
.stop-pill.first-stop { background: var(--ph-blue-l); border-color: var(--ph-blue-m); }
.stop-pill.first-stop .stop-n { background: var(--ph-blue); }
.stop-first-tag { font-size: .52rem; font-weight: 800; color: var(--ph-blue); text-transform: uppercase; letter-spacing: .06em; }

/* ═══════════════════════ FIRST ATTRACTION HIGHLIGHT ═══════════════════════ */
.spot-card.start-first {
  border-color: var(--ph-yellow);
  background: var(--warm);
  box-shadow: 0 0 0 2px rgb(255 215 0 / .25), var(--sh-card);
}
.spot-card.start-first .spot-check { background: var(--ph-amber); border-color: var(--ph-amber); }
.first-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, var(--ph-amber), var(--ph-orange));
  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 rgb(232 82 42 / .35);
  font-family: var(--font-ui);
}
.first-badge svg { flex-shrink: 0; }
.marker-start-label {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--ph-amber), var(--ph-orange));
  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 rgb(232 82 42 / .5); pointer-events: none;
  font-family: var(--font-ui);
}
.marker-start-label::after {
  content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ph-orange); border-bottom: none;
}

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

.user-loc-pulse {
  width: 20px; height: 20px;
  background: var(--ph-blue); border-radius: 50%; border: 3px solid white;
  box-shadow: 0 0 0 4px rgb(0 56 168 / .25), 0 4px 12px rgb(0 0 0 / .2);
  animation: locPulse 2s ease-in-out infinite;
}
@keyframes locPulse {
  0%,100% { box-shadow: 0 0 0 4px rgb(0 56 168 / .25), 0 4px 12px rgb(0 0 0 / .2); }
  50%      { box-shadow: 0 0 0 10px rgb(0 56 168 / .08), 0 4px 12px rgb(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(--ph-green);
  font-size: .8rem; font-weight: 600; color: var(--ink2); max-width: 280px;
  display: flex; align-items: center; gap: 8px;
  animation: toastIn .25s ease; pointer-events: none;
  font-family: var(--font-body);
}
.map-toast.warn { border-color: var(--ph-amber); }
.map-toast.err  { border-color: var(--ph-red); }
@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(--border);
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  user-select: none;
}
.drawer-handle:active { cursor: grabbing; }
.drawer-pill { width: 36px; height: 4px; background: var(--border2); border-radius: 2px; transition: background var(--tr); }
.drawer-handle:active .drawer-pill { background: var(--ph-blue-m); }
.drawer-label { font-size: .65rem; color: var(--ink3); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-body); }

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

/* ═══════════════════════ MOBILE GA INDICATOR ═══════════════════════ */
.mobile-ga-indicator {
  display: none;
  position: fixed; left: 12px; right: 12px;
  top: calc(var(--mob-hdr) + 14px); z-index: 700;
  background: rgb(0 56 168 / .95);
  backdrop-filter: blur(10px) saturate(160%);
  border-radius: 14px; padding: 12px 14px;
  align-items: center; gap: 12px;
  box-shadow: 0 8px 28px rgb(0 0 0 / .28);
  color: white; font-family: var(--font-body);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.mobile-ga-indicator.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media(max-width:767px) { .mobile-ga-indicator { display: flex; } }
.mga-spinner {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  border: 2.5px solid rgb(255 255 255 / .25);
  border-top-color: var(--ph-yellow);
  animation: spin .8s linear infinite;
}
.mga-text { flex: 1; min-width: 0; }
.mga-phase { font-size: .78rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-ui); }
.mga-status { font-size: .68rem; color: rgb(255 255 255 / .7); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mga-pct { font-size: .85rem; font-weight: 800; color: var(--ph-yellow); flex-shrink: 0; font-family: var(--font-ui); min-width: 34px; text-align: right; }

/* ═══════════════════════ HELP MODAL ═══════════════════════ */
.help-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgb(0 40 128 / .4); 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: var(--sh-float); 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%); }
.help-modal-hdr {
  background: var(--ph-blue); 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: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
}
.help-modal-title { font-family: var(--font-ui); font-size: 1.05rem; font-weight: 800; color: white; line-height: 1.25; }
.help-modal-subtitle { font-size: .65rem; color: rgb(255 255 255 / .5); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; font-family: var(--font-body); }
.help-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .15);
  border-radius: 8px; color: rgb(255 255 255 / .8); cursor: pointer;
  transition: background var(--tr); -webkit-tap-highlight-color: transparent;
}
.help-close-btn:hover { background: rgb(255 255 255 / .2); }
.help-modal-body {
  overflow-y: auto; padding: 20px 20px 24px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
}
.help-modal-body::-webkit-scrollbar { width: 4px; }
.help-modal-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
.help-section {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; background: var(--surface2);
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--tr);
}
.help-section:hover { border-color: var(--ph-blue-m); }
.help-section-badge {
  flex-shrink: 0; width: 28px; height: 28px;
  background: var(--ph-blue); 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 rgb(0 56 168 / .3);
}
.help-section-content { flex: 1; min-width: 0; }
.help-section-title { font-size: .82rem; font-weight: 800; color: var(--ink); margin-bottom: 5px; font-family: var(--font-ui); }
.help-section-desc { font-size: .76rem; color: var(--ink2); line-height: 1.65; font-family: var(--font-body); }
.help-section-desc strong { color: var(--ph-blue); font-weight: 800; }
.help-list { margin: 7px 0 0 14px; display: flex; flex-direction: column; gap: 5px; }
.help-list li { font-size: .75rem; color: var(--ink2); line-height: 1.55; font-family: var(--font-body); }
.help-list li strong { color: var(--ph-blue); font-weight: 800; }
.help-tip {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px;
  background: var(--warm); border: 1px solid var(--warm-b);
  border-left: 3px solid var(--ph-amber); border-radius: var(--r-sm);
  font-size: .74rem; color: #6A4400; line-height: 1.6; font-family: var(--font-body);
}
.help-tip svg { flex-shrink: 0; margin-top: 2px; color: var(--ph-amber); }
.help-tip strong { font-weight: 800; }

/* ═══════════════════════ RESPONSIVE — TABLET ═══════════════════════ */
@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; }
}

/* ═══════════════════════ RESPONSIVE — MOBILE ═══════════════════════ */
@media(max-width:767px) {
  :root { --mob-hdr: 56px; --mob-ribbon-h: 130px; --mob-ribbon-gap: 8px; }

  .map-header { display: none; }
  .mob-bar { display: flex; }

  .leaflet-control-zoom {
    margin-left: 12px !important;
    margin-top: calc(var(--mob-hdr) + 12px) !important;
  }

  .mob-scrim { display: block; }

  .side-panel {
    position: fixed; inset: var(--mob-hdr) 0 0;
    width: 100%; height: auto;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -8px 40px rgb(0 56 168 / .2);
    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 { display: flex; }

  .panel-hdr { padding: 0; }
  .panel-hdr-inner { padding: 12px 16px 10px; }
  .panel-logo-row { margin-bottom: 6px; }
  .panel-desc { display: none; }
  .panel-logo-icon { width: 36px; height: 36px; }
  .panel-logo-text h2 { font-size: .92rem; }

  .loc-bar { display: none; }
  #locStatusWrap { display: none !important; }

  .panel-search { padding: 10px 12px 8px; }

  .spots-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .spot-card { padding: 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-foot { padding: 10px 12px 12px; gap: 7px; display: flex; flex-direction: column; flex-shrink: 0; }
  .sel-info { margin-bottom: 0; }
  .route-mode-selector { margin-bottom: 0; gap: 5px; }
  .mode-radio { padding: 8px 6px; }
  .radio-label { font-size: .71rem; }
  .btn-optimize { padding: 13px 14px; font-size: .82rem; }
  .btn-manual-route { padding: 13px 14px; font-size: .82rem; }
  .ga-box { margin-top: 6px; }

  .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 {
    position: relative; inset: unset; width: 100%;
    flex-direction: column; align-items: stretch;
    padding: 14px 14px 18px; gap: 6px;
    overflow: hidden auto; max-height: 80vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-top: 1.5px solid var(--border);
    padding-top: 14px;
  }
  .ribbon-inner::before {
    content: ''; display: block;
    width: 32px; height: 4px;
    background: var(--border2); border-radius: 2px;
    margin: 0 auto 6px; 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; }
  .ribbon-stops-wrap { overflow: hidden; }
  .ribbon-stops { overflow: auto 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; }

  .ribbon-dismiss {
    position: absolute; top: 10px; right: 12px;
    width: 26px; height: 26px;
    background: var(--border); border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ink3); font-size: 14px; line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .ribbon-dismiss:active { background: var(--border2); }

  .comparison-overlay {
    position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
    z-index: 635; border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -4px 24px rgb(0 56 168 / .14);
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.4,0,.2,1), bottom .35s cubic-bezier(.4,0,.2,1);
  }
  .comparison-overlay[style*="display: block"],
  .comparison-overlay[style*="display:block"] { transform: translateY(0); }

  .map-toast { inset: auto 12px calc(var(--mob-hdr) + 8px); max-width: none; }
  .result-ribbon.show ~ #toastBox .map-toast { bottom: calc(var(--mob-ribbon-h) + 8px); }

  .help-modal {
    inset: auto 0 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); }
}

@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; }
}

/* ═══════════════════════ LANDING PAGE ═══════════════════════ */
body.landing-page { overflow: auto !important; height: auto !important; background: var(--ph-blue); }
html:has(body.landing-page) { overflow: auto !important; height: auto !important; }

.lp-bg-scene {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgb(0 87 184 / .5) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgb(0 40 128 / .7) 0%, transparent 60%),
    linear-gradient(145deg, #002880 0%, #0038A8 40%, #0050CC 100%);
}
.lp-bg-dots {
  position: fixed; inset: 0; z-index: 1;
  background-image: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.lp-bg-ring {
  position: fixed; z-index: 1; border-radius: 50%;
  border: 1px solid rgb(255 215 0 / .12);
  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:rgb(255 215 0 / .06); }
.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 }
}

.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;
}
.lp-card {
  width: 100%; max-width: 440px;
  background: rgb(255 255 255 / .97); border-radius: 24px;
  box-shadow: var(--sh-float);
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; overflow: hidden;
}
.lp-card-hero {
  flex-shrink: 0; background: var(--ph-blue);
  padding: 28px 28px 22px; text-align: center;
  position: relative; overflow: hidden;
}
.lp-card-hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(
    to right,
    var(--ban1) 0%, var(--ban1) 14.28%,
    var(--ban2) 14.28%, var(--ban2) 28.57%,
    var(--ban3) 28.57%, var(--ban3) 42.86%,
    var(--ban4) 42.86%, var(--ban4) 57.14%,
    var(--ban5) 57.14%, var(--ban5) 71.43%,
    var(--ban6) 71.43%, var(--ban6) 85.71%,
    var(--ban7) 85.71%, var(--ban7) 100%
  );
}
.lp-card-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 110%, rgb(255 215 0 / .15) 0%, transparent 60%);
}
.lp-hero-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgb(255 255 255 / .12); border: 1px solid rgb(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-ui); font-size: 1.4rem; font-weight: 800;
  color: #fff; margin-bottom: 4px; position: relative; z-index: 1; letter-spacing: -.01em;
}
.lp-card-hero p {
  font-size: .76rem; color: rgb(255 255 255 / .65); position: relative; z-index: 1;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  font-family: var(--font-body);
}
.lp-card-body { flex: 1; overflow: hidden auto; padding: 24px 28px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
.lp-card-body::-webkit-scrollbar { width: 4px; }
.lp-card-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
.lp-card-footer { flex-shrink: 0; padding: 12px 28px 16px; border-top: 1px solid var(--border); text-align: center; font-size: .73rem; color: var(--ink3); font-family: var(--font-body); }

.lp-tabs { display: flex; gap: 4px; background: var(--surface2); 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-body); font-size: .82rem; font-weight: 700;
  color: var(--ink3); background: transparent; cursor: pointer;
  transition: background var(--tr), color var(--tr), box-shadow var(--tr);
}
.lp-tab:hover { color: var(--ink2); }
.lp-tab.active { background: #fff; color: var(--ph-blue); box-shadow: 0 1px 4px rgb(0 0 0 / .1); font-weight: 800; }

.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(--border); background: var(--surface2);
  cursor: pointer; transition: border-color var(--tr), background var(--tr), transform var(--tr);
  font-family: var(--font-body);
}
.lp-choice-btn:hover { border-color: var(--ph-blue-m); background: var(--ph-blue-l); transform: translateY(-1px); }
.lp-choice-btn.active { border-color: var(--ph-blue); background: var(--ph-blue-l); }
.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(--border); }
.lp-choice-btn--login .lp-choice-icon { background: var(--ph-blue-l); }
.lp-choice-btn.active .lp-choice-icon  { background: var(--ph-blue-m); }
.lp-choice-label { font-size: .8rem; font-weight: 800; color: var(--ink); font-family: var(--font-ui); }
.lp-choice-sub   { font-size: .7rem;  color: var(--ink3); font-weight: 400; }

.lp-divider { display: flex; align-items: center; gap: 10px; font-size: .74rem; color: var(--ink3); font-weight: 600; margin-bottom: 16px; font-family: var(--font-body); }
.lp-divider::before, .lp-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.lp-alert { display: none; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm); font-size: .8rem; font-weight: 600; margin-bottom: 12px; line-height: 1.4; font-family: var(--font-body); }
.lp-alert.show     { display: flex; }
.lp-alert--error   { background: #FDEAED; color: var(--ph-red);   border: 1px solid #F5B0B0; }
.lp-alert--success { background: var(--ph-blue-l); color: var(--ph-blue); border: 1px solid var(--ph-blue-m); }

.lp-field-group { margin-bottom: 13px; }
.lp-field-label { display: block; font-size: .77rem; font-weight: 700; color: var(--ink2); margin-bottom: 5px; font-family: var(--font-body); }
.lp-field-input {
  width: 100%; padding: 10px 13px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: .88rem;
  color: var(--ink); background: #fff; outline: none;
  transition: border-color var(--tr), box-shadow var(--tr); box-sizing: border-box;
}
.lp-field-input:focus { border-color: var(--ph-blue); box-shadow: 0 0 0 3px rgb(0 56 168 / .1); }
.lp-field-input::placeholder { color: var(--ink3); }
.lp-field-hint { display: block; font-size: .69rem; color: var(--ink3); margin-top: 4px; font-family: var(--font-body); }

.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(--ink3); border-radius: var(--r-sm);
  transition: color var(--tr), background var(--tr);
}
.lp-pwd-toggle:hover { color: var(--ph-blue); background: var(--ph-blue-l); }

.lp-btn-primary {
  width: 100%; padding: 12px; border-radius: var(--r-md); border: none;
  background: var(--ph-blue); color: #fff;
  font-family: var(--font-ui); font-size: .88rem; font-weight: 800;
  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 rgb(0 56 168 / .35); background: var(--ph-blue-d); }
.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; }

.lp-btn-guest {
  width: 100%; padding: 11px; border-radius: var(--r-md);
  border: 1.5px solid var(--border); background: #fff;
  color: var(--ink2); font-family: var(--font-body); font-size: .88rem; font-weight: 700;
  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(--ph-blue-m); background: var(--ph-blue-l); color: var(--ph-blue); }

.lp-spinner { width: 15px; height: 15px; border: 2px solid rgb(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) } }

.lp-switch-hint { text-align: center; font-size: .77rem; color: var(--ink3); margin-top: 14px; font-family: var(--font-body); }
.lp-switch-hint a { color: var(--ph-blue); font-weight: 800; text-decoration: none; }
.lp-switch-hint a:hover { color: var(--ph-blue-d); text-decoration: underline; }

.lp-tagline { margin-top: 16px; text-align: center; color: rgb(255 255 255 / .4); font-size: .73rem; letter-spacing: .04em; font-family: var(--font-body); }

@media(max-width:600px) {
  .lp-page { padding: 0; justify-content: flex-start; }
  .lp-card { max-width: 100%; border-radius: 0; 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; }
}
@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; }
}