:root{
    --forest:#5B21B6;
    --forest-deep:#3B0A91;
    --waterfall:#00C2CB;
    --rust:#FF3B5C;
    --rust-deep:#C81E5C;
    --ochre:#FFB020;
    --paper:#FFF9F4;
    --paper-dim:#FDEFE3;
    --ink:#1A1523;
    --ink-soft:#746E86;
    --brown:#FF8A3D;
    --line:#F5E1EE;
    --white:#FFFFFF;
    --radius:22px;
    --ease:cubic-bezier(.22,1,.36,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
    --shadow-sm:0 2px 10px rgba(32,29,24,0.06);
    --shadow-md:0 10px 28px -8px rgba(59,10,145,0.18);
    --shadow-lg:0 24px 48px -16px rgba(59,10,145,0.32);
    --grad-rust:linear-gradient(135deg,var(--ochre),var(--rust) 55%,var(--rust-deep));
    --grad-forest:linear-gradient(135deg,#8B3DFF,var(--forest) 60%,var(--forest-deep));
    --grad-ring:conic-gradient(from 210deg,var(--ochre),var(--rust) 35%,var(--forest) 70%,var(--ochre));
    --grad-insta:linear-gradient(135deg,#FEDA75,#FA7E1E 25%,#D62976 50%,#962FBF 75%,#4F5BD5);
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans',sans-serif;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0;
    position:relative;
    overflow-x:hidden;
    overflow:hidden;
  }
  .intro{display:none;}
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    opacity:0.5;
    background-image:
      repeating-radial-gradient(circle at 20% 30%, transparent 0, transparent 38px, rgba(91,33,182,0.045) 39px, transparent 40px),
      repeating-radial-gradient(circle at 80% 70%, transparent 0, transparent 52px, rgba(255,59,92,0.04) 53px, transparent 54px);
    pointer-events:none;
  }
  .intro{
    max-width:640px;
    text-align:center;
    margin-bottom:36px;
    position:relative;
    z-index:1;
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--rust);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:16px;
  }
  .eyebrow::before,.eyebrow::after{
    content:"";
    width:26px;height:1px;background:var(--rust);opacity:0.5;
  }
  .intro h1{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:44px;
    letter-spacing:-0.01em;
    margin:0 0 14px;
    color:var(--forest);
  }
  .intro h1 span{color:var(--rust); font-style:italic; font-weight:500;}
  .intro p{
    font-size:16px;
    line-height:1.6;
    color:var(--ink-soft);
    margin:0 auto;
    max-width:480px;
  }
  .contour-divider{
    width:120px;height:14px;margin:22px auto 0;
    background-image:radial-gradient(circle,var(--forest) 1.6px,transparent 1.7px);
    background-size:12px 12px;
    opacity:0.55;
  }

  /* ---- Phone frame ---- */
  .device{
    position:relative;
    z-index:1;
    width:100vw;
    max-width:none;
    height:100vh;
    height:100dvh;
    max-height:none;
    background:var(--ink);
    border-radius:0;
    padding:0;
    box-shadow:none;
    animation:deviceIn .55s var(--ease);
  }
  @keyframes deviceIn{from{opacity:0;transform:scale(.985);}to{opacity:1;transform:scale(1);}}
  .screen{
    position:relative;
    width:100%;
    height:100%;
    background:var(--white);
    border-radius:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .notch{
    display:none;
  }

  /* ---- Top bar ---- */
  .topbar{
    padding:34px 18px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:5;
  }
  .brand{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:16px;
    background:var(--grad-insta);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    letter-spacing:-0.01em;
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }
  .brand .dot{width:7px;height:7px;border-radius:50%;background:var(--grad-insta);box-shadow:0 0 0 4px rgba(255,59,92,0.14);}
  .iconbtn{
    width:34px;height:34px;border-radius:50%;
    background:var(--paper);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    color:var(--forest);
    position:relative;
    transition:transform .18s var(--ease-spring), background .18s var(--ease), box-shadow .18s var(--ease);
  }
  .iconbtn:hover{background:var(--white);box-shadow:var(--shadow-sm);}
  .iconbtn:active{transform:scale(.88);}
  .iconbtn svg{width:16px;height:16px;}

  /* ---- View container ---- */
  .view{display:none; flex:1; min-height:0; flex-direction:column;}
  .view.active{display:flex;}
  .view.view-in{animation:viewIn .32s var(--ease);}
  @keyframes viewIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

  /* ---- Stories (spotlight thikanas) ---- */
  .stories{display:flex;gap:14px;overflow-x:auto;padding:2px 16px 14px;scrollbar-width:none;}
  .stories::-webkit-scrollbar{display:none;}
  .story{flex:none;width:62px;text-align:center;cursor:pointer;}
  .story-ring{
    width:58px;height:58px;border-radius:50%;padding:2.5px;
    background:var(--grad-ring);
    margin:0 auto 6px;
    position:relative;
    transition:transform .2s var(--ease-spring);
  }
  .story:active .story-ring{transform:scale(.92);}
  .story-inner{
    width:100%;height:100%;border-radius:50%;
    background:var(--white);padding:2px;
  }
  .story-thumb{width:100%;height:100%;border-radius:50%;background-size:cover;background-position:center;}
  .story span{
    display:block;font-family:'JetBrains Mono',monospace;font-size:9px;
    color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:62px;
  }

  /* ---- Discover: Bhukkad / Ghumakkad group toggle ---- */
  .groupbar{
    display:flex;gap:9px;
    padding:2px 18px 12px;
  }
  .groupseg{
    flex:1;
    min-width:0;
    display:flex;align-items:center;gap:9px;
    padding:10px 12px;
    border-radius:16px;
    border:1px solid var(--line);
    background:var(--white);
    cursor:pointer;
    transition:transform .18s var(--ease-spring), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .groupseg:active{transform:scale(.96);}
  .groupseg .g-emoji{
    font-size:18px;line-height:1;
    width:32px;height:32px;border-radius:10px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:var(--paper);
    transition:background .2s var(--ease);
  }
  .groupseg .g-text{min-width:0;}
  .groupseg .g-label{
    font-family:'Fraunces',serif;font-weight:600;font-size:13.5px;
    color:var(--forest);line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .groupseg .g-sub{
    font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.02em;
    color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .groupseg.active{box-shadow:var(--shadow-sm);}
  .groupseg.bhukkad.active{background:var(--grad-rust);border-color:var(--rust);}
  .groupseg.bhukkad.active .g-emoji{background:rgba(255,255,255,0.22);}
  .groupseg.bhukkad.active .g-label{color:var(--white);}
  .groupseg.bhukkad.active .g-sub{color:rgba(255,255,255,0.78);}
  .groupseg.ghumakkad.active{background:var(--grad-forest);border-color:var(--forest);}
  .groupseg.ghumakkad.active .g-emoji{background:rgba(255,255,255,0.16);}
  .groupseg.ghumakkad.active .g-label{color:var(--white);}
  .groupseg.ghumakkad.active .g-sub{color:rgba(255,255,255,0.78);}

  /* Narrow phones (most Android devices in portrait): the two group cards
     were overflowing/crushing their text because .groupseg had no floor on
     padding, gap, or font-size. min-width:0 above lets the flex item actually
     shrink; this tightens the internal spacing so both cards + their labels
     fit inside ~360-390px viewports without clipping or wrapping badly. */
  @media (max-width:400px){
    .groupbar{gap:6px;padding:2px 12px 10px;}
    .groupseg{padding:8px 7px;gap:6px;border-radius:13px;}
    .groupseg .g-emoji{width:26px;height:26px;font-size:14px;border-radius:8px;}
    .groupseg .g-label{font-size:12px;}
    .groupseg .g-sub{font-size:7.5px;}
  }
  @media (max-width:340px){
    .groupseg .g-sub{display:none;}
  }

  /* ---- No-photo placeholder (real places/posts before any photo exists) ---- */
  .no-photo{
    display:flex;align-items:center;justify-content:center;text-align:center;
    background:var(--paper-dim);color:var(--ink-soft);
    font-family:'JetBrains Mono',monospace;font-size:9.5px;line-height:1.4;
  }
  .no-photo span{padding:4px;}

  /* ---- Discover: filter chips ---- */
  .chiprow{
    display:flex;gap:8px;overflow-x:auto;
    padding:6px 18px 14px;
    scrollbar-width:none;
  }
  .chiprow::-webkit-scrollbar{display:none;}
  .chip{
    flex:none;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:0.03em;
    padding:8px 13px;
    border-radius:100px;
    border:1px solid var(--line);
    background:var(--white);
    color:var(--ink-soft);
    cursor:pointer;
    white-space:nowrap;
    display:flex;align-items:center;gap:6px;
    transition:transform .18s var(--ease-spring), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .chip:active{transform:scale(.94);}
  .chip .sw{width:7px;height:7px;border-radius:50%;}
  .chip.active{
    background:var(--grad-forest);
    border-color:var(--forest);
    color:var(--white);
    box-shadow:var(--shadow-sm);
  }

  /* ---- Map ---- */
  .mapwrap{flex:1; position:relative; min-height:0;}
  #map{width:100%;height:100%;position:relative;z-index:0;}
  .mappls-ctrl-attrib, .mapboxgl-ctrl-attrib, .maplibregl-ctrl-attrib{font-size:8px !important;}

  .maptoggle{
    position:absolute; top:64px; right:12px; z-index:400;
    background:var(--ink);
    color:var(--white);
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    padding:9px 14px;
    border-radius:100px;
    display:flex;align-items:center;gap:7px;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,0.2);
    transition:transform .18s var(--ease-spring);
  }
  .maptoggle:active{transform:scale(.95);}

  /* ---- Real-world location search (Mappls Place Search + your own thikanas) ---- */
  .map-search{
    position:absolute; top:12px; left:12px; z-index:420;
    background:var(--white);
    border-radius:50%;
    width:44px; height:44px;
    padding:0;
    display:flex; align-items:center; gap:9px;
    box-shadow:0 6px 16px rgba(59,10,145,0.2);
    color:var(--ink-soft);
    overflow:hidden;
    cursor:pointer;
    transition:width .48s cubic-bezier(.34,1.56,.64,1), border-radius .35s ease,
               box-shadow .35s ease;
  }
  .map-search.has-value{box-shadow:0 6px 16px rgba(214,41,118,0.32), 0 0 0 2px rgba(214,41,118,0.28) inset;}
  .map-search.expanded{
    width:calc(100% - 24px);
    border-radius:100px;
    padding:11px 14px 11px 12px;
    cursor:default;
    box-shadow:0 10px 26px rgba(59,10,145,0.26);
  }
  .map-search.expanded:focus-within{
    box-shadow:0 10px 26px rgba(59,10,145,0.26), 0 0 0 3px rgba(214,41,118,0.15);
  }
  .map-search-icon-btn{
    flex:none; width:20px; height:20px; margin-left:12px;
    display:flex; align-items:center; justify-content:center;
    position:relative; transition:margin .35s cubic-bezier(.34,1.56,.64,1);
  }
  .map-search.expanded .map-search-icon-btn{margin-left:0;}
  .map-search-icon-btn svg{
    position:absolute; top:0; left:0;
    transition:opacity .25s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .msib-search{opacity:1; transform:scale(1) rotate(0deg);}
  .msib-back{opacity:0; transform:scale(.4) rotate(-90deg);}
  .map-search.expanded .msib-search{opacity:0; transform:scale(.4) rotate(90deg);}
  .map-search.expanded .msib-back{opacity:1; transform:scale(1) rotate(0deg);}
  .map-search-icon-btn:active svg{transform:scale(.8);}
  .map-search input{
    flex:1; min-width:0; border:none; outline:none; background:transparent;
    font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--ink);
    padding:0; opacity:0; width:0;
    transition:opacity .22s ease, width .4s cubic-bezier(.34,1.56,.64,1);
  }
  .map-search.expanded input{opacity:1; width:auto; flex:1; transition:opacity .3s ease .12s, width .4s cubic-bezier(.34,1.56,.64,1);}
  .map-search input::placeholder{color:var(--ink-soft);}
  .map-search-clear{
    width:20px;height:20px;border-radius:50%;flex:none;
    background:var(--paper-dim); color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    opacity:0; transform:scale(.5); pointer-events:none;
    transition:opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .15s ease;
  }
  .map-search-clear:active{transform:scale(.8);}
  .map-search-clear:hover{background:#f0e6f7;}
  .map-search.expanded .map-search-clear{opacity:1; transform:scale(1); pointer-events:auto;}
  .map-search-backdrop{
    position:absolute; inset:0; z-index:410;
    background:rgba(26,21,35,0.26);
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    opacity:0; pointer-events:none;
    transition:opacity .4s ease;
  }
  .map-search-backdrop.show{opacity:1; pointer-events:auto;}
  .map-search-results{
    position:absolute; top:60px; left:12px; right:12px; z-index:419;
    background:var(--white);
    border-radius:18px;
    box-shadow:0 14px 30px rgba(59,10,145,0.22);
    max-height:52%;
    overflow-y:auto;
    padding:6px;
    opacity:0; transform:translateY(-10px) scale(.97);
    transition:opacity .22s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    pointer-events:none;
  }
  .map-search-results.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .map-search-item{
    display:flex; align-items:flex-start; gap:9px;
    padding:9px 8px; border-radius:12px; cursor:pointer;
    transition:background .15s ease, transform .15s ease;
    animation:msiIn .34s cubic-bezier(.34,1.56,.64,1) backwards;
  }
  .map-search-item:nth-child(1){animation-delay:.02s;}
  .map-search-item:nth-child(2){animation-delay:.05s;}
  .map-search-item:nth-child(3){animation-delay:.08s;}
  .map-search-item:nth-child(4){animation-delay:.11s;}
  .map-search-item:nth-child(5){animation-delay:.14s;}
  .map-search-item:nth-child(6){animation-delay:.17s;}
  .map-search-item:nth-child(7){animation-delay:.2s;}
  .map-search-item:nth-child(8){animation-delay:.23s;}
  @keyframes msiIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}
  .map-search-item:active{transform:scale(.97);}
  .map-search-item:hover{background:var(--paper);}
  .map-search-item .msi-pin{font-size:15px;line-height:1.3;}
  .map-search-item .msi-text{min-width:0;display:flex;flex-direction:column;gap:1px;}
  .map-search-item .msi-text b{font-family:'Fraunces',serif;font-size:13.5px;color:var(--ink);font-weight:600;}
  .map-search-item .msi-text span{
    font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .map-search-loading,.map-search-empty{
    font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);
    padding:14px 10px;text-align:center;
  }
  .map-search-loading::before{
    content:''; display:inline-block; width:9px; height:9px; margin-right:6px;
    border-radius:50%; border:1.6px solid var(--ink-soft); border-top-color:transparent;
    animation:msSpin .6s linear infinite; vertical-align:-1px;
  }
  @keyframes msSpin{to{transform:rotate(360deg);}}
  .map-search-section{
    font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:0.05em;
    text-transform:uppercase;color:var(--ink-soft);
    padding:8px 10px 4px;
  }
  .map-search-popup-actions{display:flex; gap:6px; margin-top:8px;}
  .map-search-suggest{
    flex:1; padding:7px 8px; border:none; border-radius:100px;
    background:var(--grad-insta);color:var(--white);font-weight:700;font-size:10.5px;
    font-family:'JetBrains Mono',monospace;cursor:pointer;
    transition:transform .15s var(--ease-spring);
  }
  .map-search-suggest:active{transform:scale(.94);}
  .map-search-navigate{
    flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
    padding:7px 8px; border:1.5px solid var(--ink); border-radius:100px;
    background:var(--white); color:var(--ink); font-weight:700; font-size:10.5px;
    font-family:'JetBrains Mono',monospace; cursor:pointer;
    transition:transform .15s var(--ease-spring), background .15s ease;
  }
  .map-search-navigate:active{transform:scale(.94); background:var(--paper-dim);}

  /* ---- "My location" button (bottom-right over the map, Google-Maps style) ---- */
  .locate-btn{
    position:absolute; right:14px; bottom:calc(132px + 14px); z-index:415;
    width:44px;height:44px;border-radius:50%;
    background:var(--white); color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,0.22);
    cursor:pointer;
    transition:transform .18s var(--ease-spring), opacity .2s ease, color .2s ease;
  }
  .locate-btn:active{transform:scale(.9);}
  .locate-btn.is-active{color:#3B82F6;}
  .locate-btn.is-locating svg{animation:locateSpin 1s linear infinite;}
  @keyframes locateSpin{to{transform:rotate(360deg);}}
  /* Hidden while the sheet is expanded (grid view) — the map isn't visible
     there anyway, same reasoning as Google Maps hiding its FAB behind a
     fullscreen panel. Relies on the button sitting after .sheet in the DOM. */
  .sheet.expanded ~ .locate-btn{opacity:0; pointer-events:none;}

  /* "You are here" marker — a distinct blue dot on purpose, same convention
     every map app uses, so it reads as a system marker rather than another
     place pin even though the rest of the palette is warm/earthy. */
  .user-loc-dot{
    width:16px;height:16px;border-radius:50%;
    background:#3B82F6;
    border:3px solid var(--white);
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
    position:relative;
  }
  .user-loc-pulse{
    position:absolute; top:50%; left:50%; width:16px;height:16px;
    background:rgba(59,130,246,0.35);
    border-radius:50%;
    transform:translate(-50%,-50%);
    animation:userLocPulse 2s ease-out infinite;
  }
  @keyframes userLocPulse{
    0%{transform:translate(-50%,-50%) scale(1); opacity:0.8;}
    100%{transform:translate(-50%,-50%) scale(3.4); opacity:0;}
  }

  /* ---- Bottom sheet ---- */
  .sheet{
    position:absolute; left:0; right:0; bottom:0; z-index:410;
    background:var(--white);
    border-radius:24px 24px 0 0;
    box-shadow:0 -8px 30px rgba(59,10,145,0.14);
    transition:height .38s var(--ease);
    height:132px;
    display:flex;flex-direction:column;
    overflow:hidden;
  }
  .sheet.expanded{height:78%;}
  .sheet-handle{
    width:36px;height:4px;background:var(--line);border-radius:4px;
    margin:10px auto 8px; cursor:pointer;
    transition:background .2s ease, width .2s ease;
  }
  .sheet-handle:hover{background:var(--rust);width:44px;}
  .sheet-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:0 18px 10px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;color:var(--ink-soft);
  }
  .sheet-list{flex:1;overflow-y:auto;padding:0 14px 14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
  .sheet-list::-webkit-scrollbar{width:5px;}
  .sheet-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;}

  .place-card{
    display:flex;gap:12px;
    background:var(--white);
    border-radius:16px;
    padding:10px;
    margin-bottom:10px;
    cursor:pointer;
    border:1px solid var(--line);
    box-shadow:var(--shadow-sm);
    transition:transform .2s var(--ease-spring), box-shadow .2s var(--ease), border-color .2s ease;
  }
  .place-card:hover{box-shadow:var(--shadow-md); border-color:var(--rust);}
  .place-card:active{transform:scale(.98);}
  .place-thumb{
    width:64px;height:64px;border-radius:12px;flex:none;
    background-size:cover;background-position:center;
    position:relative;
    overflow:hidden;
  }
  .place-info{min-width:0;flex:1;}
  .place-info .name{
    font-family:'Fraunces',serif;font-weight:600;font-size:15px;
    color:var(--forest); margin:0 0 3px; line-height:1.2;
  }
  .place-info .meta{
    font-size:12px;color:var(--ink-soft); margin:0 0 6px;
    display:flex;align-items:center;gap:6px;
  }
  .tag{
    font-family:'JetBrains Mono',monospace;
    font-size:9.5px; letter-spacing:0.04em;
    padding:2px 7px; border-radius:100px;
    color:var(--white);
    display:inline-flex; align-items:center; gap:4px;
    text-transform:uppercase;
  }
  .dist{
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;letter-spacing:0.02em;
    color:var(--ink-soft);
    display:inline-flex;align-items:center;gap:3px;
  }
  .dist::before{content:'·';color:var(--line);}
  .gem-badge{
    font-family:'JetBrains Mono',monospace;
    font-size:9px;color:var(--rust);
    display:flex;align-items:center;gap:3px;
  }
  .gem-badge .spark{display:inline-block;animation:sparkle 1.8s ease-in-out infinite;}
  @keyframes sparkle{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.15);}}

  /* ---- Hype (trending-now places, ranked by real recent traffic) ---- */
  .chip.hype-chip{
    background:var(--white); border-color:var(--ochre); color:var(--rust-deep); font-weight:600;
  }
  .chip.hype-chip.active{background:linear-gradient(135deg,var(--ochre),var(--rust) 65%,var(--rust-deep));border-color:var(--rust-deep);color:var(--white);}
  .place-card.is-hyped{border-color:var(--ochre); box-shadow:0 0 0 1px rgba(255,176,32,0.35), var(--shadow-sm);}
  .hype-badge{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:0.02em;
    display:inline-flex; align-items:center; gap:3px;
    padding:2px 7px; border-radius:100px; margin-bottom:5px;
    color:var(--white); background:linear-gradient(135deg,var(--ochre),var(--rust) 70%,var(--rust-deep));
    box-shadow:0 2px 6px rgba(255,59,92,0.28);
    animation:hypeGlow 2.2s ease-in-out infinite;
  }
  .hype-badge .flame{display:inline-block;animation:hypeFlicker 1.1s ease-in-out infinite;}
  @keyframes hypeFlicker{0%,100%{transform:scale(1) rotate(-2deg);}50%{transform:scale(1.18) rotate(3deg);}}
  @keyframes hypeGlow{0%,100%{box-shadow:0 2px 6px rgba(255,59,92,0.28);}50%{box-shadow:0 2px 12px rgba(255,176,32,0.55);}}
  .story.is-hyped .story-ring{animation:hypeRingPulse 2.2s ease-in-out infinite;}
  @keyframes hypeRingPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,0.5);}50%{box-shadow:0 0 0 5px rgba(255,176,32,0);}}
  .story-hype-tag{
    position:absolute; top:-2px; right:-2px; font-size:12px; line-height:1;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  }
  .hype-pulse{
    transform-box:fill-box; transform-origin:center;
    animation:hypeMapPulse 1.8s ease-out infinite;
  }
  @keyframes hypeMapPulse{
    0%{transform:scale(0.75); opacity:0.7;}
    70%{transform:scale(1.5); opacity:0;}
    100%{transform:scale(1.5); opacity:0;}
  }

  /* ---- Feed ---- */
  .feed{flex:1;overflow-y:auto;padding:10px 0 16px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
  .feed::-webkit-scrollbar{width:5px;}
  .feed::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;}
  .post{
    padding:14px 14px 16px; margin:0 14px 16px; border-radius:20px;
    background:var(--white); box-shadow:var(--shadow-sm); border:1px solid var(--line);
  }
  .post-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
  .avatar-ring{
    width:38px;height:38px;border-radius:50%;flex:none;
    background:var(--grad-ring); padding:2.5px;
  }
  .avatar{
    width:100%;height:100%;border-radius:50%;
    background:linear-gradient(135deg,var(--waterfall),var(--forest));
    border:2px solid var(--white);
  }
  .post-user{font-size:13px;font-weight:600;color:var(--ink);}
  .verified-badge{color:var(--ochre);vertical-align:middle;margin-left:3px;position:relative;top:-1px;}
  .post-loc{
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;color:var(--rust);
    display:flex;align-items:center;gap:4px;
  }
  .post-img{
    width:100%;aspect-ratio:4/5;border-radius:16px;
    background-size:cover;background-position:center;
    margin-bottom:10px;
    position:relative;
    overflow:hidden;
    user-select:none;
  }
  .post-img .big-heart{
    position:absolute; inset:0; margin:auto; width:84px;height:84px;
    color:#fff; filter:drop-shadow(0 6px 18px rgba(0,0,0,0.35));
    opacity:0; pointer-events:none;
  }
  .post-img .big-heart.pop{animation:heartpop .75s var(--ease);}
  @keyframes heartpop{
    0%{opacity:0; transform:scale(.3) rotate(-8deg);}
    22%{opacity:1; transform:scale(1.15) rotate(0deg);}
    35%{transform:scale(1);}
    75%{opacity:1;}
    100%{opacity:0; transform:scale(1.05);}
  }
  .post-actions{display:flex;align-items:center;gap:16px;margin-bottom:6px;color:var(--ink-soft);}
  .post-actions .grow{flex:1;}
  .post-actions svg{width:21px;height:21px;transition:transform .25s var(--ease-spring), color .2s ease;}
  .post-actions .icon-btn{display:flex;cursor:pointer;}
  .post-actions .icon-btn:active svg{transform:scale(.8);}
  .post-actions .like-btn.liked svg{color:var(--rust); fill:var(--rust); animation:likepop .4s var(--ease-spring);}
  @keyframes likepop{0%{transform:scale(1);}35%{transform:scale(1.35);}100%{transform:scale(1);}}
  .post-actions .save-btn.saved svg{color:var(--forest); fill:var(--forest);}
  .post-likes{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:4px;}
  .post-cap{font-size:13px;line-height:1.5;color:var(--ink);}
  .post-cap b{font-weight:600;}
  .post-cap .comment-link{color:var(--ink-soft);cursor:pointer;display:block;margin-top:3px;font-size:12px;}
  .post-cap .comment-link:hover{color:var(--rust);}

  /* ---- Feed: Explore / Following toggle ---- */
  .feedtabs{display:flex;gap:8px;padding:2px 14px 10px;}
  .feedtab{
    flex:1;text-align:center;padding:8px 0;border-radius:100px;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.03em;
    border:1px solid var(--line);background:var(--white);color:var(--ink-soft);cursor:pointer;
    transition:transform .18s var(--ease-spring), background .2s ease, color .2s ease, border-color .2s ease;
  }
  .feedtab:active{transform:scale(.96);}
  .feedtab.active{background:var(--grad-forest);border-color:var(--forest);color:var(--white);box-shadow:var(--shadow-sm);}

  /* ---- Post card: username row now carries a follow pill + a clickable location chip ---- */
  .post-head{align-items:flex-start;}
  .post-head .post-user-block{flex:1;min-width:0;cursor:pointer;}
  .post-headrow{display:flex;align-items:center;gap:8px;}
  .followpill{
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.03em;
    padding:5px 11px;border-radius:100px;cursor:pointer;flex:none;
    border:1px solid var(--forest);color:var(--forest);background:var(--white);
    transition:transform .18s var(--ease-spring), background .2s ease, color .2s ease;
  }
  .followpill:active{transform:scale(.94);}
  .followpill.following{background:var(--paper-dim);color:var(--ink-soft);border-color:var(--line);}
  .post-loc-chip{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--rust);
    display:inline-flex;align-items:center;gap:4px;cursor:pointer;margin-top:2px;
    padding:3px 8px 3px 4px;border-radius:100px;background:rgba(255,59,92,0.08);
    transition:background .2s ease;
  }
  .post-loc-chip:hover{background:rgba(255,59,92,0.15);}
  .post-loc-chip .pdist{color:var(--ink-soft);margin-left:2px;}
  .post-loc-chip .pdist::before{content:'·';margin-right:4px;color:var(--line);}

  /* ---- Comments sheet & user profile overlay (reuse .overlay/.detail shell) ---- */
  .comment-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--paper-dim);}
  .comment-row:last-child{border-bottom:none;}
  .comment-row .c-avatar{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--waterfall),var(--forest));}
  .comment-row .c-body{font-size:12.5px;line-height:1.5;color:var(--ink);}
  .comment-row .c-body b{font-weight:600;color:var(--forest);margin-right:5px;}
  .comment-row .c-time{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--ink-soft);margin-top:2px;}
  .comment-empty{text-align:center;color:var(--ink-soft);font-size:12.5px;padding:26px 10px;}
  .comment-input-row{display:flex;gap:8px;padding:12px 0 4px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--white);}
  .comment-input-row input{
    flex:1;border:1px solid var(--line);border-radius:100px;padding:10px 15px;
    font-family:'Work Sans',sans-serif;font-size:13px;background:var(--paper);
  }
  .comment-input-row button{
    border:none;background:var(--grad-forest);color:var(--white);border-radius:100px;
    padding:0 18px;font-weight:600;font-size:12.5px;cursor:pointer;font-family:'Work Sans',sans-serif;
  }
  .uprof-head{display:flex;gap:16px;align-items:center;margin-bottom:14px;}
  .uprof-stats{display:flex;gap:20px;margin:14px 0 18px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .uprof-stats b{display:block;font-family:'Fraunces',serif;font-size:16px;color:var(--forest);}
  .uprof-stats span{font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.04em;}

  /* ---- Messages: unread badge on any iconbtn ---- */
  .msg-badge{
    position:absolute; top:-2px; right:-2px; min-width:15px; height:15px; padding:0 3px;
    border-radius:100px; background:var(--rust); color:var(--white);
    font-family:'JetBrains Mono',monospace; font-size:9px; line-height:15px; text-align:center;
    box-shadow:0 0 0 2px var(--white); display:none; align-items:center; justify-content:center;
  }
  .notif-badge{
    position:absolute; top:-2px; right:-2px; min-width:15px; height:15px; padding:0 3px;
    border-radius:100px; background:var(--rust); color:var(--white);
    font-family:'JetBrains Mono',monospace; font-size:9px; line-height:15px; text-align:center;
    box-shadow:0 0 0 2px var(--white); display:none; align-items:center; justify-content:center;
  }
  .notif-row{display:flex;gap:12px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--paper-dim);cursor:pointer;}
  .notif-row:last-child{border-bottom:none;}
  .notif-row.unread{background:rgba(0,194,203,0.06);border-radius:10px;}
  .notif-icon{
    width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    font-size:19px;background:var(--paper-dim);
  }
  .notif-icon.like{background:rgba(255,59,92,0.12);}
  .notif-icon.follow{background:rgba(45,138,109,0.12);}
  .notif-icon.trending{background:rgba(255,176,32,0.15);}
  .notif-icon.message{background:rgba(0,194,203,0.12);}
  .notif-icon .m-avatar{width:46px;height:46px;font-size:17px;}

  /* ---- Messages: inbox rows ---- */
  .msg-inbox-row{display:flex;gap:12px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--paper-dim);cursor:pointer;}
  .msg-inbox-row:last-child{border-bottom:none;}
  .msg-inbox-row .m-avatar, .msg-thread-head .m-avatar{
    width:46px;height:46px;border-radius:50%;flex:none;
    background:linear-gradient(135deg,var(--waterfall),var(--forest));background-size:cover;background-position:center;
    display:flex;align-items:center;justify-content:center;color:var(--white);font-family:'Fraunces',serif;font-weight:600;font-size:17px;
  }
  .msg-inbox-info{flex:1;min-width:0;}
  .msg-inbox-name{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:5px;}
  .msg-inbox-preview{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
  .msg-inbox-preview.unread{color:var(--ink);font-weight:600;}
  .msg-inbox-meta{flex:none;text-align:right;}
  .msg-inbox-time{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);}
  .msg-inbox-dot{width:9px;height:9px;border-radius:50%;background:var(--rust);margin:6px 0 0 auto;}
  .msg-newbtn{
    display:flex;align-items:center;gap:8px;padding:10px 12px;margin:2px 0 14px;
    border:1px dashed var(--line);border-radius:14px;color:var(--forest);font-size:12.5px;cursor:pointer;
    font-family:'Work Sans',sans-serif;font-weight:600;
  }
  .msg-newbtn:hover{background:var(--paper-dim);}
  .msg-search-results{margin:-6px 0 0;}
  .share-sheet-list .msg-inbox-row:hover{background:var(--paper-dim);border-radius:10px;}

  /* ---- Messages: thread ---- */
  .msg-thread-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;cursor:pointer;}
  .msg-thread-head .m-avatar{width:38px;height:38px;font-size:14px;}
  .msg-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:4px 0 10px;min-height:120px;}
  .bubble-row{display:flex;}
  .bubble-row.me{justify-content:flex-end;}
  .bubble{max-width:76%;padding:9px 13px;border-radius:18px;font-size:13px;line-height:1.45;word-wrap:break-word;}
  .bubble-row.them .bubble{background:var(--paper-dim);color:var(--ink);border-bottom-left-radius:5px;}
  .bubble-row.me .bubble{background:var(--grad-forest);color:var(--white);border-bottom-right-radius:5px;}
  .bubble img,.bubble video{max-width:100%;border-radius:12px;display:block;margin-top:2px;cursor:pointer;}
  .bubble img:first-child,.bubble video:first-child{margin-top:0;}
  .bubble.media-only{padding:4px;background:none!important;}
  .bubble-time{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink-soft);margin:2px 6px 10px;}
  .bubble-row.me .bubble-time{text-align:right;}
  .share-card{display:flex;gap:10px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:8px;min-width:190px;cursor:pointer;}
  .bubble-row.me .share-card{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.32);}
  .share-card .sc-thumb{width:44px;height:44px;border-radius:9px;background-size:cover;background-position:center;flex:none;background-color:var(--paper-dim);}
  .share-card .sc-info{min-width:0;}
  .share-card .sc-title{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bubble-row.me .share-card .sc-title{color:var(--white);}
  .share-card .sc-sub{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--ink-soft);}
  .bubble-row.me .share-card .sc-sub{color:rgba(255,255,255,0.8);}

  .msg-input-row{display:flex;gap:7px;align-items:center;padding:10px 0 4px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--white);}
  .msg-input-row input[type=text]{flex:1;border:1px solid var(--line);border-radius:100px;padding:10px 15px;font-family:'Work Sans',sans-serif;font-size:13px;background:var(--paper);min-width:0;}
  .msg-iconbtn{
    width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--paper);
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--forest);font-size:16px;
  }
  .msg-iconbtn svg{width:16px;height:16px;}
  .msg-send-btn{border:none;background:var(--grad-forest);color:var(--white);border-radius:50%;width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .msg-send-btn svg{width:15px;height:15px;}
  .msg-attach-preview{display:flex;align-items:center;gap:8px;padding:8px 2px;font-size:11.5px;color:var(--ink-soft);}
  .msg-attach-preview img,.msg-attach-preview video{width:44px;height:44px;border-radius:9px;object-fit:cover;}
  .msg-attach-cancel{color:var(--rust);cursor:pointer;font-weight:600;margin-left:auto;}

  .emoji-picker{display:none;grid-template-columns:repeat(8,1fr);gap:4px;padding:8px 2px;max-height:130px;overflow-y:auto;border-top:1px solid var(--line);}
  .emoji-picker.active{display:grid;}
  .emoji-picker span{text-align:center;font-size:19px;cursor:pointer;border-radius:8px;padding:3px 0;}
  .emoji-picker span:hover{background:var(--paper-dim);}

  .msg-empty{text-align:center;color:var(--ink-soft);font-size:12.5px;padding:26px 10px;}

  /* ---- Edit profile overlay ---- */
  .editprof-avatar-wrap{position:relative;width:84px;height:84px;margin:4px auto 8px;}
  .editprof-avatar-wrap .p-avatar{width:84px;height:84px;font-size:28px;}
  .editprof-cam{
    position:absolute;bottom:-2px;right:-2px;width:28px;height:28px;border-radius:50%;
    background:var(--grad-forest);color:var(--white);display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 0 0 3px var(--white);
  }
  .editprof-cam svg{width:13px;height:13px;}
  .editprof-remove{text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--rust);cursor:pointer;margin:0 0 18px;}

  /* ---- Upload: Post vs Reel segmented control ---- */
  .kindbar{display:flex;gap:8px;margin-bottom:14px;}
  .kindseg{
    flex:1;text-align:center;padding:9px 0;border-radius:12px;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.03em;
    border:1px solid var(--line);background:var(--white);color:var(--ink-soft);
    transition:transform .18s var(--ease-spring), background .2s ease, color .2s ease;
  }
  .kindseg:active{transform:scale(.96);}
  .kindseg.active{background:var(--grad-rust);border-color:var(--rust);color:var(--white);}
  .compress-status{font-size:11px;color:var(--ink-soft);text-align:center;margin-top:6px;}

  /* ---- Upload: media fade-in + multi-photo thumb strip ---- */
  .u-photo.has-media{border-style:solid;}
  .u-media-fade{animation:mediaFadeIn .35s var(--ease);}
  @keyframes mediaFadeIn{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}}
  .u-thumbstrip{display:flex;gap:8px;overflow-x:auto;margin:-6px 0 16px;padding:2px 1px;}
  .u-thumb{
    position:relative;flex:none;width:58px;height:58px;border-radius:12px;
    background-size:cover;background-position:center;background-color:var(--paper);
    border:1px solid var(--line);
  }
  .u-thumb-cover{
    position:absolute;left:3px;bottom:3px;font-family:'JetBrains Mono',monospace;font-size:7.5px;
    background:rgba(0,0,0,0.55);color:#fff;padding:1.5px 5px;border-radius:100px;letter-spacing:0.03em;
  }
  .u-thumb-x{
    position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;
    background:var(--rust);color:#fff;display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.25);
  }
  .u-thumb-add{
    display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--ink-soft);
    border:1.5px dashed var(--line);cursor:pointer;background:var(--paper);
  }
  .u-thumb-add:hover{border-color:var(--rust);color:var(--rust);}

  /* ---- Loading-state spinner for the primary post button ---- */
  .btn-loading{position:relative;color:transparent !important;pointer-events:none;}
  .btn-loading::after{
    content:'';position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
    border-radius:50%;border:2.5px solid rgba(255,255,255,0.4);border-top-color:#fff;
    animation:btnspin .7s linear infinite;
  }
  @keyframes btnspin{to{transform:rotate(360deg);}}

  /* ---- Multi-photo post carousel ---- */
  .post-img{touch-action:pan-y;}
  .post-img-track{position:absolute;inset:0;display:flex;height:100%;transition:transform .3s var(--ease);}
  .post-img-slide{flex:none;width:100%;height:100%;background-size:cover;background-position:center;}
  .post-img-dots{position:absolute;top:10px;left:0;right:0;display:flex;gap:4px;padding:0 10px;z-index:2;}
  .post-img-dots span{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,0.4);}
  .post-img-dots span.on{background:#fff;}
  .post-img-count{
    position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,0.45);color:#fff;
    font-family:'JetBrains Mono',monospace;font-size:10px;padding:3px 8px;border-radius:100px;
  }

  /* ---- Own-post "..." menu (edit / delete) ---- */
  .post-menu-btn{margin-left:auto;flex:none;color:var(--ink-soft);cursor:pointer;padding:4px;}
  .post-menu-sheet{
    position:absolute;z-index:6;min-width:150px;background:var(--white);border:1px solid var(--line);
    border-radius:14px;box-shadow:var(--shadow-md,0 12px 28px -10px rgba(0,0,0,0.25));overflow:hidden;
    animation:sheetPop .16s var(--ease-spring);
  }
  @keyframes sheetPop{from{opacity:0;transform:scale(.92) translateY(-4px);}to{opacity:1;transform:scale(1) translateY(0);}}
  .post-menu-sheet div{padding:11px 15px;font-size:13px;cursor:pointer;color:var(--ink);}
  .post-menu-sheet div:hover{background:var(--paper-dim);}
  .post-menu-sheet div.danger{color:var(--rust-deep,var(--rust));}
  .post-edited-tag{font-size:10.5px;color:var(--ink-soft);font-style:italic;margin-left:4px;}

  /* ---- Reels ---- */
  .reels-feed{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;background:#0b0b0b;scrollbar-width:none;}
  .reels-feed::-webkit-scrollbar{display:none;}
  .reel{
    position:relative;width:100%;height:100%;scroll-snap-align:start;
    display:flex;align-items:flex-end;background:#000;overflow:hidden;
  }
  .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .reel-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.35) 100%);pointer-events:none;}
  .reel-info{position:relative;z-index:2;padding:16px 70px 24px 16px;color:var(--white);width:100%;}
  .reel-user{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
  .reel-user b{font-size:13.5px;}
  .reel-loc{
    font-family:'JetBrains Mono',monospace;font-size:11px;
    display:inline-flex;align-items:center;gap:4px;cursor:pointer;
    background:rgba(255,255,255,0.16);padding:5px 10px;border-radius:100px;margin-bottom:6px;
  }
  .reel-cap{font-size:12.5px;line-height:1.5;max-width:78%;}
  .reel-actions{
    position:absolute;right:10px;bottom:24px;z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:20px;color:var(--white);
  }
  .reel-actions .icon-btn{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;}
  .reel-actions svg{width:26px;height:26px;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));}
  .reel-actions span{font-family:'JetBrains Mono',monospace;font-size:9.5px;}
  .reel-actions .like-btn.liked svg{color:var(--rust);fill:var(--rust);}
  .reel-actions .save-btn.saved svg{color:var(--ochre);fill:var(--ochre);}
  .reel-mute{position:absolute;top:14px;right:14px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.4);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .reels-empty{color:var(--white);text-align:center;padding:60px 30px;font-size:13px;line-height:1.6;}

  /* ---- Upload ---- */
  .upload{flex:1;overflow-y:auto;padding:8px 18px 20px;}
  .u-tabs{display:flex;gap:8px;margin-bottom:6px;}
  .u-tab{
    flex:1;text-align:center;padding:9px 10px;border-radius:100px;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.02em;
    color:var(--ink-soft);border:1px solid var(--line);transition:background .2s ease,color .2s ease;
  }
  .u-tab.active{background:var(--forest);color:var(--white);border-color:var(--forest);}
  .gem-pinmap{width:100%;height:180px;border-radius:14px;border:1px solid var(--line);margin-top:8px;background:var(--paper);}
  .gem-latlng{
    display:flex;gap:14px;margin-top:8px;font-family:'JetBrains Mono',monospace;
    font-size:11px;color:var(--ink-soft);
  }
  .gem-latlng b{color:var(--forest);}
  .u-photo{
    width:100%;aspect-ratio:1/1;border-radius:18px;
    border:1.5px dashed var(--line);
    background:var(--paper);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;color:var(--ink-soft);font-size:12.5px;
    margin-bottom:16px;cursor:pointer;
    background-size:cover;background-position:center;
    transition:border-color .2s ease, transform .2s var(--ease-spring), background .2s ease;
  }
  .u-photo:hover{border-color:var(--rust); color:var(--rust);}
  .u-photo:active{transform:scale(.985);}
  .field-label{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;
    text-transform:uppercase;letter-spacing:0.06em;
    color:var(--ink-soft); margin:14px 0 7px;
  }
  select,textarea,input{
    width:100%;border:1px solid var(--line);border-radius:12px;
    padding:11px 13px;font-family:'Work Sans',sans-serif;font-size:13.5px;
    background:var(--white);color:var(--ink);resize:none;margin-bottom:10px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  select:focus,textarea:focus,input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(91,33,182,0.12);}
  .geo-box{
    margin-top:16px; padding:13px 14px; border-radius:14px;
    background:var(--paper-dim); font-size:12.5px; line-height:1.55;
    display:flex; gap:10px; align-items:flex-start;
    transition:background .25s ease, color .25s ease;
  }
  .geo-box svg{width:17px;height:17px;flex:none;margin-top:1px;}
  .geo-ok{color:var(--forest); background:rgba(0,194,203,0.14);}
  .geo-bad{color:var(--rust-deep);}
  .btn-primary{
    width:100%;margin-top:18px;
    background:var(--grad-rust); color:var(--white);
    border:none;border-radius:100px;
    padding:14px; font-family:'Work Sans',sans-serif;font-weight:600;font-size:14px;
    cursor:pointer;
    box-shadow:0 10px 22px -8px rgba(255,59,92,0.55);
    transition:transform .18s var(--ease-spring), box-shadow .2s ease, filter .2s ease;
  }
  .btn-primary:hover{filter:brightness(1.04);}
  .btn-primary:active{transform:scale(.97);}
  .btn-primary:disabled{background:var(--line);color:var(--ink-soft);cursor:not-allowed;box-shadow:none;transform:none;}
  .btn-ghost{
    width:100%;margin-top:10px;background:transparent;color:var(--ink-soft);
    border:1px solid var(--line);border-radius:100px;padding:12px;
    font-family:'JetBrains Mono',monospace;font-size:11px;cursor:pointer;
    transition:border-color .2s ease, color .2s ease, transform .18s var(--ease-spring);
  }
  .btn-ghost:hover{border-color:var(--forest); color:var(--forest);}
  .btn-ghost:active{transform:scale(.97);}

  /* ---- Profile ---- */
  .profile{flex:1;overflow-y:auto;padding:6px 18px 20px;}
  .p-signin-card{
    max-width:320px;margin:18px auto 0;padding:26px 22px 24px;
    background:var(--white); border:1px solid var(--line); border-radius:20px;
    box-shadow:var(--shadow-sm); text-align:center;
  }
  .divider{
    display:flex; align-items:center; gap:10px; margin:2px 0 14px;
    font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-soft);
  }
  .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line);}
  .p-head{display:flex;gap:16px;align-items:center;margin-bottom:14px;}
  .p-avatar{
    width:64px;height:64px;border-radius:50%;
    background:linear-gradient(135deg,var(--ochre),var(--rust));
    flex:none;box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--white);font-family:'Fraunces',serif;font-weight:600;font-size:24px;
  }
  .p-empty{
    grid-column:1/-1;text-align:center;padding:22px 14px;
    color:var(--ink-soft);font-size:12.5px;line-height:1.6;
    border:1px dashed var(--line);border-radius:14px;
  }
  .p-name{font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:var(--forest);margin:0 0 2px;}
  .p-handle{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
  .p-stats{display:flex;flex-wrap:wrap;gap:16px 20px;margin:16px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .p-stat b{display:block;font-family:'Fraunces',serif;font-size:17px;color:var(--forest);}
  .p-stat span{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.04em;}
  .badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
  .badge{
    font-family:'JetBrains Mono',monospace;font-size:10px;
    padding:6px 10px;border-radius:100px;background:var(--grad-forest);color:var(--white);
    display:flex;align-items:center;gap:5px;
    box-shadow:var(--shadow-sm);
    transition:transform .18s var(--ease-spring);
  }
  .badge:hover{transform:translateY(-2px);}
  .p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
  .p-grid div{aspect-ratio:1/1;border-radius:6px;background-size:cover;background-position:center;overflow:hidden;transition:transform .3s var(--ease), filter .3s ease;cursor:pointer;}
  .p-grid div:hover{transform:scale(1.04);filter:brightness(1.06);z-index:1;}
  .p-grid-item{position:relative;}
  .p-grid-item .p-grid-cover{width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;}
  .p-grid-item video.p-grid-cover{object-fit:cover;}
  .p-grid-item .p-reel-mark, .p-grid-item .p-gallery-mark{
    position:absolute;top:5px;right:5px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  }
  .p-grid-item .p-grid-menu{
    position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
    background:rgba(0,0,0,0.4);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .p-tabs{display:flex;gap:8px;margin:14px 0 10px;}
  .p-tab{
    flex:1;text-align:center;padding:8px 0;border-radius:100px;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.02em;
    color:var(--ink-soft);border:1px solid var(--line);transition:background .2s ease,color .2s ease;
  }
  .p-tab.active{background:var(--forest);color:var(--white);border-color:var(--forest);}
  .p-places-list{display:flex;flex-direction:column;gap:8px;}
  .p-place-row{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
    border-radius:14px;background:var(--white);cursor:pointer;transition:background .2s ease;
  }
  .p-place-row:hover{background:var(--paper-dim);}
  .p-place-thumb{width:42px;height:42px;border-radius:10px;flex:none;background-size:cover;background-position:center;background-color:var(--paper);}
  .p-place-name{font-size:13px;font-weight:600;color:var(--ink);}
  .p-place-meta{font-size:10.5px;color:var(--ink-soft);}
  .p-place-status{
    margin-left:auto;flex:none;font-family:'JetBrains Mono',monospace;font-size:9.5px;
    padding:3px 9px;border-radius:100px;letter-spacing:0.03em;
  }
  .p-place-status.pending{background:rgba(255,176,32,0.16);color:var(--ochre);}
  .p-place-status.approved{background:rgba(0,194,203,0.16);color:var(--forest);}
  .p-place-status.rejected{background:rgba(255,59,92,0.14);color:var(--rust);}

  /* ---- Bottom nav ---- */
  .navbar{
    display:flex;align-items:center;justify-content:space-around;
    padding:10px 14px;
    margin:0 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top:none;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(245,225,238,0.7);
    border-radius:26px;
    box-shadow:var(--shadow-lg);
    z-index:20;
  }
  .navitem{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    color:var(--ink-soft); cursor:pointer; padding:6px 12px;
    border-radius:14px;
    transition:color .2s ease, background .2s ease, transform .15s var(--ease-spring);
  }
  .navitem:active{transform:scale(.9);}
  .navitem svg{width:20px;height:20px;transition:transform .3s var(--ease-spring);}
  .navitem.active{color:var(--rust); background:rgba(255,59,92,0.1);}
  .navitem.active svg{transform:translateY(-1px);}
  .navitem span{font-family:'JetBrains Mono',monospace;font-size:8.5px;text-transform:uppercase;letter-spacing:0.04em;}
  .navitem.plus{
    background:var(--grad-insta); color:var(--white);
    width:46px;height:46px;border-radius:50%;
    justify-content:center; margin-top:-20px;
    box-shadow:0 10px 22px -6px rgba(214,41,118,0.55);
    animation:plusGlow 3.2s ease-in-out infinite;
  }
  .navitem.plus:hover{background:var(--grad-insta);}
  @keyframes plusGlow{
    0%,100%{box-shadow:0 10px 22px -6px rgba(214,41,118,0.55);}
    50%{box-shadow:0 10px 26px -4px rgba(250,126,30,0.6);}
  }
  .navitem.plus svg{width:19px;height:19px;}

  /* ---- Place detail overlay ---- */
  .overlay{
    position:absolute; inset:0; z-index:600;
    background:rgba(59,10,145,0.45);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    display:none; align-items:flex-end;
    transition:background .2s ease;
  }
  .overlay.active{display:flex;}
  .detail{
    width:100%; max-height:90%; background:var(--white);
    border-radius:26px 26px 0 0; overflow-y:auto;
    animation:slideup .32s var(--ease-spring);
    box-shadow:var(--shadow-lg);
  }
  @keyframes slideup{from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}}
  .detail-photo{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;position:relative;}
  .detail-photo.no-photo span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
  .empty-gallery{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);font-style:italic;padding:6px 2px;}
  .detail-close{
    position:absolute; top:14px; right:14px;
    width:30px;height:30px;border-radius:50%;
    background:rgba(59,10,145,0.55); color:var(--white);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:transform .2s var(--ease-spring), background .2s ease;
  }
  .detail-close:hover{background:rgba(59,10,145,0.75); transform:rotate(90deg);}
  .detail-body{padding:18px 20px 26px;}
  .detail-body h2{font-family:'Fraunces',serif;font-size:22px;color:var(--forest);margin:0 0 6px;}
  .detail-desc{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:10px 0 16px;}
  .detail-strip{display:flex;gap:6px;overflow-x:auto;margin:14px 0;}
  .detail-strip div{width:58px;height:58px;border-radius:10px;flex:none;background-size:cover;background-position:center;transition:transform .2s ease;}
  .detail-strip div:hover{transform:scale(1.06);}
  .detail-actions{display:flex;gap:10px;margin-top:16px;}
  .btn-nav{
    flex:1;background:var(--grad-forest);color:var(--white);border:none;border-radius:100px;
    padding:13px;font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;text-decoration:none;
    font-family:'Work Sans',sans-serif;
    box-shadow:0 10px 22px -8px rgba(59,10,145,0.5);
    transition:transform .18s var(--ease-spring), filter .2s ease;
  }
  .btn-nav:hover{filter:brightness(1.06);}
  .btn-nav:active{transform:scale(.97);}
  .btn-save{
    flex:none;width:46px;border:1px solid var(--line);border-radius:100px;
    background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--forest);
    transition:transform .18s var(--ease-spring), background .2s ease, color .2s ease;
  }
  .btn-save:hover{background:var(--paper);}
  .btn-save:active{transform:scale(.9);}
  .btn-save.saved{background:var(--forest); color:var(--white); border-color:var(--forest);}

  /* ---- Business screen ---- */
  .biz{flex:1;overflow-y:auto;padding:8px 18px 20px;}
  .biz-hero{
    background:var(--grad-forest); color:var(--white); border-radius:18px;
    padding:20px; margin-bottom:16px;
    box-shadow:var(--shadow-md);
  }
  .biz-hero h3{font-family:'Fraunces',serif;font-size:19px;margin:0 0 8px;}
  .biz-hero p{font-size:12.5px;line-height:1.55;color:#D9E4DD;margin:0;}
  .biz-tier{
    border:1px solid var(--line); border-radius:14px; padding:14px;
    margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;
    background:var(--white);
    transition:transform .18s var(--ease-spring), box-shadow .2s ease, border-color .2s ease;
  }
  .biz-tier:hover{box-shadow:var(--shadow-sm); border-color:var(--rust);}
  .biz-tier:active{transform:scale(.98);}
  .biz-tier b{font-family:'Fraunces',serif;font-size:14.5px;color:var(--forest);display:block;}
  .biz-tier span{font-size:11px;color:var(--ink-soft);}
  .biz-tier .price{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--rust);}

  .top-link{
    font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--forest);
    text-decoration:underline; cursor:pointer;
  }

  /* ---- Auth modal ---- */
  .authmodal{
    position:absolute; inset:0; z-index:700;
    background:rgba(59,10,145,0.55);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:none; align-items:center; justify-content:center;
    padding:24px;
  }
  .authmodal.active{display:flex;}
  .auth-card{
    width:100%; background:var(--white); border-radius:20px; padding:22px;
    animation:slideup .28s var(--ease-spring);
    box-shadow:var(--shadow-lg);
  }
  .auth-card h3{font-family:'Fraunces',serif;font-size:18px;color:var(--forest);margin:0 0 6px;}
  .auth-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:0 0 14px;}
  .auth-card input{
    width:100%;border:1px solid var(--line);border-radius:12px;
    padding:11px 13px;font-family:'Work Sans',sans-serif;font-size:13.5px;
    background:var(--white);color:var(--ink); margin-bottom:10px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .auth-close{
    text-align:center; margin-top:10px; font-family:'JetBrains Mono',monospace;
    font-size:10.5px; color:var(--ink-soft); cursor:pointer;
    transition:color .2s ease;
  }
  .auth-close:hover{color:var(--rust);}

  /* ---- Install app banner (Android PWA prompt) ---- */
  .installsheet{
    position:absolute; left:0; right:0; bottom:0; z-index:650;
    display:none; justify-content:center;
    padding:0 14px 14px;
    pointer-events:none;
  }
  .installsheet.active{display:flex;}
  .install-card{
    position:relative;
    width:100%; max-width:400px;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:var(--white); border:1px solid var(--line); border-radius:18px;
    padding:14px 16px 14px 14px;
    box-shadow:var(--shadow-lg);
    animation:installup .32s var(--ease-spring);
    pointer-events:auto;
  }
  @keyframes installup{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
  .install-icon{
    width:44px;height:44px;border-radius:12px;flex:none;
    box-shadow:var(--shadow-sm);
  }
  .install-text{flex:1 1 180px; min-width:0;}
  .install-title{font-family:'Fraunces',serif;font-weight:600;font-size:14px;color:var(--forest);line-height:1.2;}
  .install-sub{font-size:11.5px;color:var(--ink-soft);line-height:1.4;margin-top:2px;}
  .install-btn{
    flex:none;
    font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:0.02em;
    background:var(--grad-forest); color:var(--white); border:none;
    padding:10px 16px; border-radius:100px; cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:transform .18s var(--ease-spring);
  }
  .install-btn:active{transform:scale(.94);}
  .install-later{
    flex:none; width:100%; text-align:center; margin-top:2px;
    font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-soft);
    cursor:pointer; transition:color .2s ease;
  }
  .install-later:hover{color:var(--rust);}
  .install-close{
    position:absolute; top:8px; right:10px;
    color:var(--ink-soft); cursor:pointer; padding:4px;
    transition:color .2s ease;
  }
  .install-close:hover{color:var(--rust);}
  .who-bar{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--paper-dim); border-radius:14px; padding:10px 14px; margin-bottom:16px;
    font-size:12px; color:var(--ink-soft);
  }
  .who-bar b{color:var(--forest);}
  .who-bar .logout{
    font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--rust); cursor:pointer;
  }

  /* ---- Route toast ---- */
  #routeToast{
    opacity:0; transform:translate(-50%,10px) scale(.96);
    transition:opacity .25s var(--ease), transform .25s var(--ease-spring);
    pointer-events:none;
  }
  #routeToast.show{opacity:1; transform:translate(-50%,0) scale(1);}

  /* ---- Turn-by-turn navigation ---- */
  .navoverlay{
    position:absolute; inset:0; z-index:750;
    display:none; flex-direction:column;
    background:var(--paper);
  }
  .navoverlay.active{display:flex;}
  #navMap{position:absolute; inset:0; z-index:0;}
  .nav-top{
    position:absolute; top:0; left:0; right:0; z-index:2;
    padding:calc(16px + env(safe-area-inset-top,0px)) 14px 14px;
    display:flex; align-items:center; gap:12px;
    background:linear-gradient(rgba(59,10,145,0.88), rgba(59,10,145,0));
  }
  .nav-turn-icon{
    flex:none; width:48px;height:48px;border-radius:16px;
    background:var(--grad-forest); color:var(--white);
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-md);
  }
  .nav-turn-icon svg{width:24px;height:24px; transition:transform .3s var(--ease-spring);}
  .nav-instruction{flex:1; min-width:0; color:var(--white);}
  .nav-instr-text{font-family:'Fraunces',serif;font-weight:600;font-size:15px;line-height:1.25; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .nav-instr-dist{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ochre);margin-top:2px;}
  .nav-close{
    flex:none; width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,0.16); color:var(--white);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .2s ease, transform .18s var(--ease-spring);
  }
  .nav-close:hover{background:rgba(255,255,255,0.28);}
  .nav-close:active{transform:scale(.88);}
  .nav-bottom{
    position:absolute; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:2;
    display:flex; align-items:center; gap:14px;
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(245,225,238,0.7);
    border-radius:20px; padding:14px 16px;
    box-shadow:var(--shadow-lg);
  }
  .nav-eta,.nav-remaining{display:flex;flex-direction:column;}
  .nav-eta b,.nav-remaining b{font-family:'Fraunces',serif;font-size:16px;color:var(--forest);}
  .nav-eta span,.nav-remaining span{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);}
  .nav-end-btn{
    margin-left:auto; flex:none;
    background:var(--grad-rust); color:var(--white); border:none; border-radius:100px;
    padding:11px 18px; font-family:'Work Sans',sans-serif; font-weight:600; font-size:13px;
    cursor:pointer;
    box-shadow:0 8px 18px -6px rgba(255,59,92,0.55);
    transition:transform .18s var(--ease-spring), filter .2s ease;
  }
  .nav-end-btn:hover{filter:brightness(1.05);}
  .nav-end-btn:active{transform:scale(.95);}

  /* ---- Nav: the extra chrome Google Maps shows besides the bare route ---- */
  .nav-mute{
    flex:none; width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,0.16); color:var(--white);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .2s ease, transform .18s var(--ease-spring);
  }
  .nav-mute:hover{background:rgba(255,255,255,0.28);}
  .nav-mute:active{transform:scale(.88);}
  .nav-mute svg{width:16px;height:16px;}
  .nav-dest-bar{
    position:absolute; left:14px; right:14px; z-index:2;
    top:calc(84px + env(safe-area-inset-top,0px));
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(245,225,238,0.7);
    border-radius:14px; padding:9px 13px;
    box-shadow:var(--shadow-sm);
    cursor:pointer; user-select:none;
  }
  .nav-dest-bar .dd-name{font-family:'Work Sans',sans-serif;font-weight:600;font-size:12.5px;color:var(--forest);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .nav-dest-bar .dd-sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:1px;}
  .nav-dest-bar .dd-chev{flex:none;color:var(--ink-soft);transition:transform .25s var(--ease-spring);}
  .nav-dest-bar .dd-chev.open{transform:rotate(180deg);}
  .nav-recenter{
    position:absolute; right:14px; z-index:2;
    bottom:calc(96px + env(safe-area-inset-bottom,0px));
    width:42px;height:42px;border-radius:50%;
    background:var(--white); color:var(--forest);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    border:1px solid var(--line); box-shadow:var(--shadow-md);
    transition:transform .18s var(--ease-spring);
  }
  .nav-recenter:active{transform:scale(.9);}
  .nav-recenter svg{width:18px;height:18px;}
  .nav-steps-panel{
    position:absolute; left:0; right:0; bottom:0; z-index:3;
    max-height:60%; overflow-y:auto;
    background:var(--white); border-radius:20px 20px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,0.18);
    padding:10px 6px calc(14px + env(safe-area-inset-bottom,0px));
    transform:translateY(100%); transition:transform .3s var(--ease-spring);
  }
  .nav-steps-panel.open{transform:translateY(0);}
  .nav-steps-panel .nsp-handle{width:36px;height:4px;border-radius:100px;background:var(--line);margin:0 auto 8px;}
  .nav-step-row{display:flex; align-items:center; gap:12px; padding:10px 16px;}
  .nav-step-row.done{opacity:0.4;}
  .nav-step-row .nsr-icon{flex:none;width:30px;height:30px;border-radius:10px;background:var(--paper-dim);display:flex;align-items:center;justify-content:center;color:var(--forest);}
  .nav-step-row .nsr-icon svg{width:16px;height:16px;}
  .nav-step-row .nsr-text{flex:1;min-width:0;font-size:13px;color:var(--ink);}
  .nav-step-row .nsr-dist{flex:none;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);}