/* ============ Tokens — Apple light, warm off-white, pastel accents ============ */
  :root{
    color-scheme: light;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, "Segoe UI", Roboto, sans-serif;

    --bg:#F8F6F2;
    --surface:#FFFFFF;
    --sheet:#F8F6F2;
    --row:#FFFFFF;
    --label:#1F1B18;
    --label-2:rgba(64,52,44,.62);
    --label-3:rgba(64,52,44,.30);
    --sep:rgba(64,52,44,.13);
    --fill:rgba(120,100,84,.10);
    --seg-on:#FFFFFF;

    --accent:#5B86EE;
    --accent-ink:#2F5BCB;
    --accent-soft:#DCE6FF;
    --accent-tint:rgba(91,134,238,.14);

    --warn-bg:#FFF0D2;
    --warn-ink:#8A5300;

    --material:rgba(251,249,246,.78);
    --scrim:rgba(60,44,32,.30);
    --shadow-pop:0 12px 36px rgba(70,50,30,.18);
    --shadow-soft:0 4px 16px rgba(70,50,30,.12);

    --map-bg:#EFEBE5;
    --map-label:#7a7169;
    --map-halo:#ffffff;

    --ease-out:cubic-bezier(.23,1,.32,1);
    --sheet-ease:cubic-bezier(.32,.72,0,1);
    --hdr-h:132px;
    --tab-h:0px;
    --map-top:0px;
  }

  /* ============ Base ============ */
  *{ box-sizing:border-box; }
  [hidden]{ display:none !important; }
  html{
    height:100%;
    -webkit-tap-highlight-color:transparent;
    -webkit-text-size-adjust:100%;
    overscroll-behavior:none;
  }
  @supports (height:100dvh){ html{ height:100dvh; } }
  body{
    margin:0;
    height:100%;
    background:var(--bg);
    color:var(--label);
    font:15px/1.4 var(--font);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }
  h1,h2,h3{ margin:0; }
  button,input,select,textarea{ font:inherit; color:inherit; }
  button{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; cursor:pointer; }
  button,a,.chip,.place-card{ touch-action:manipulation; }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:none; }

  /* Frosted material — content scrolls underneath */
  .mat{
    background:var(--material);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
  }
  /* controls that sit on the moving map stay un-blurred: live blur over a panning map is costly */
  .leaflet-control-zoom,.map-legend,.map-fab,.map-credit{ background:rgba(251,249,246,.94); }
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .mat,.leaflet-control-zoom,.map-legend,.map-fab,.map-credit{ background:var(--surface); }
  }
  @media (prefers-reduced-transparency: reduce){
    .mat,.leaflet-control-zoom,.map-legend,.map-fab,.map-credit{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
  }

  /* ============ App shell ============ */
  #app{ position:relative; height:100%; overflow:hidden; }
  main{ position:absolute; inset:0; display:flex; z-index:1; }

  header{
    position:absolute; z-index:30; top:0; left:0; right:0;
    padding:10px 16px 10px;
    border-bottom:.5px solid var(--sep);
  }
  .title-row{
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    margin-bottom:8px;
  }
  .title-row h1{
    font-size:26px; line-height:1.1; font-weight:700; letter-spacing:-.022em;
  }
  .title-row h1 span{
    font-size:15px; font-weight:600; letter-spacing:0; color:var(--label-2); margin-left:8px;
  }
  .count-pill{ font-size:13px; color:var(--label-2); white-space:nowrap; font-variant-numeric:tabular-nums; }

  .search-row{ display:flex; align-items:center; gap:10px; }
  .search-field{ position:relative; flex:1 1 auto; min-width:0; }
  .search-field svg{
    position:absolute; left:10px; top:50%; width:16px; height:16px; margin-top:-8px;
    color:var(--label-2); pointer-events:none;
  }
  .search-field input{
    width:100%; height:36px; border:0; border-radius:10px;
    background:var(--fill); color:var(--label);
    padding:0 8px 0 32px; font-size:16px; letter-spacing:-.01em;
    -webkit-appearance:none; appearance:none; outline:none;
    transition:box-shadow .15s var(--ease-out);
  }
  .search-field input::placeholder{ color:var(--label-2); }
  .search-field input:focus{ box-shadow:0 0 0 3px var(--accent-tint); }
  .search-field input{ padding-right:36px; }
  .search-field input::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }   /* our own x instead */
  .search-clear{ position:absolute; right:2px; top:50%; width:34px; height:34px; margin-top:-17px; border:0; background:none; padding:0;
    display:flex; align-items:center; justify-content:center; color:var(--label-3); }
  .search-clear[hidden]{ display:none; }
  .search-clear svg{ position:static; width:17px; height:17px; margin:0; color:inherit; }
  .search-clear:active{ opacity:.6; }
  .icon-btn{
    flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:0;
    background:var(--accent); color:#fff;
    display:grid; place-items:center;
    transition:transform 110ms var(--ease-out), opacity 110ms;
  }
  .icon-btn svg{ width:18px; height:18px; }
  .icon-btn:active{ transform:scale(.92); opacity:.85; }

  .chip-row{
    display:flex; gap:8px; overflow-x:auto; margin:10px -16px 0; padding:0 16px 1px;
    scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  }
  .chip-row::-webkit-scrollbar{ display:none; }
  .chip{
    flex:0 0 auto; position:relative;
    height:32px; padding:0 13px; border-radius:16px; border:0;
    background:var(--fill); color:var(--label);
    font-size:14px; font-weight:500; letter-spacing:-.005em; white-space:nowrap;
    display:flex; align-items:center; gap:7px;
    transition:background-color .18s var(--ease-out), color .18s var(--ease-out), transform 110ms var(--ease-out);
  }
  .chip .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(60,40,20,.14); }
  .chip.active{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; box-shadow:inset 0 0 0 1.5px var(--accent); }
  .chip:active{ transform:scale(.96); }
  .chip:disabled,.chip.dim{ opacity:.38; cursor:default; pointer-events:none; }         /* nothing of this kind in the chosen district */
  .chip.dim .dot{ filter:grayscale(1); }
  .chip[hidden]{ display:none; }
  .chip[data-cat="food"]{ gap:5px; padding-right:10px; }
  .chip[data-cat="food"] svg{ width:10px; height:10px; transition:transform .18s var(--ease-out); }
  .chip[data-cat="food"].open svg{ transform:rotate(-90deg); }
  .chip-sub{ height:30px; padding:0 11px; font-size:13.5px; }                       /* the kinds of food, shown after Food */
  .chip-select{ padding-right:9px; gap:5px; }
  .chip-select svg{ width:10px; height:10px; opacity:.6; flex:0 0 auto; }
  .chip-select select{
    position:absolute; inset:0; width:100%; height:100%; opacity:0; font-size:16px;
    -webkit-appearance:none; appearance:none; cursor:pointer;
  }
  .chip-select:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ============ List (inset grouped) ============ */
  #list-pane{
    position:relative; z-index:1;
    flex:0 0 400px; max-width:400px; height:100%;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:var(--bg);
    padding:0 0 calc(var(--tab-h) + 28px);
    scroll-padding-top:var(--hdr-h); scroll-padding-bottom:calc(var(--tab-h) + 12px);
    border-right:.5px solid var(--sep);
  }
  /* spacer, not padding: sticky headings measure from the scrollport edge, not the padding edge */
  #list-pane::before{ content:""; display:block; height:var(--hdr-h); }
  .district-heading{
    position:sticky; top:calc(var(--hdr-h) - 1px); z-index:2;
    padding:16px 20px 8px;
    font-size:13px; line-height:1; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    color:var(--label-2);
    background:linear-gradient(to bottom, var(--bg) 62%, transparent);
  }
  .district-group{
    margin:0 16px;
    background:var(--row); border-radius:14px; overflow:hidden;
  }
  .place-card{
    position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px;
    padding:12px 14px 12px 12px; cursor:pointer;
    transition:background-color .12s;
  }
  .place-card + .place-card::before{
    content:""; position:absolute; top:0; left:60px; right:0; height:.5px; background:var(--sep);
  }
  .place-card:active{ background:var(--fill); }
  .place-card.selected{ background:var(--accent-tint); }
  @media (hover:hover) and (pointer:fine){
    .place-card:hover{ background:var(--fill); }
    .place-card.selected:hover{ background:var(--accent-tint); }
  }
  .glyph{
    width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
  }
  .glyph svg{ width:20px; height:20px; }
  .pc-body{ min-width:0; }
  .row1{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .place-card h3{ font-size:16px; line-height:1.3; font-weight:600; letter-spacing:-.011em; }
  .cat-tag{ flex:0 0 auto; font-size:11.5px; font-weight:600; line-height:1; padding:4px 8px; border-radius:9px; white-space:nowrap; }
  .place-card .zh{ font-size:14px; color:var(--label-2); margin-top:1px; }
  .place-card .note{ font-size:14px; line-height:1.4; margin-top:4px; }
  .place-card .addr{ font-size:13px; line-height:1.4; color:var(--label-2); margin-top:4px; }
  .place-card .flag{
    display:flex; gap:5px; align-items:flex-start;
    font-size:12.5px; line-height:1.35; color:var(--warn-ink); background:var(--warn-bg);
    margin-top:8px; padding:6px 9px; border-radius:9px;
  }
  .place-card .flag svg{ width:14px; height:14px; flex:0 0 auto; margin-top:1px; }
  .src-link{ display:inline-flex; gap:5px; align-items:center; margin-top:6px; font-size:13px; line-height:1.35; color:var(--accent-ink); text-decoration:none; }
  .src-link svg{ width:14px; height:14px; flex:0 0 auto; }
  .pp-src{ display:flex; margin-top:8px; }
  .dir-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .dir-btn{
    height:30px; padding:0 13px; border:0; border-radius:15px;
    background:var(--fill); color:var(--label);
    font-size:13.5px; font-weight:600;
    transition:transform 110ms var(--ease-out), opacity 110ms;
  }
  .dir-btn.primary{ background:var(--accent-soft); color:var(--accent-ink); }
  .dir-btn:active{ transform:scale(.95); opacity:.85; }
  .empty-msg{ padding:48px 32px; text-align:center; color:var(--label-2); font-size:15px; line-height:1.5; }
  .empty-msg .dir-btn{ margin-top:14px; }

  /* ============ Map ============ */
  #map-pane{ position:relative; flex:1 1 auto; overflow:hidden; isolation:isolate; min-width:0; min-height:0; }
  #map{ position:absolute !important; inset:0; height:auto !important; width:auto !important; background:var(--map-bg) !important; font-family:var(--font); }
  /* opaque tiles: no wash / opacity, so overlapping zoom levels can never blend into pale patches */
  .ofl-tile{ overflow:hidden; }
  .ofl-tile img{ position:absolute; max-width:none; pointer-events:none; -webkit-user-select:none; user-select:none; }
  .leaflet-container a{ -webkit-tap-highlight-color:transparent; }

  .leaflet-top.leaflet-right{ top:var(--map-top); }
  .leaflet-control-zoom{
    border:0 !important; border-radius:12px !important; overflow:hidden;
    box-shadow:0 0 0 .5px var(--sep), 0 4px 16px rgba(70,50,30,.12) !important;
  }
  .leaflet-touch .leaflet-control-zoom a, .leaflet-control-zoom a{
    width:44px !important; height:44px !important; line-height:42px !important;
    font:300 26px/42px var(--font) !important; text-indent:0 !important;
    background:transparent !important; color:var(--accent-ink) !important;
    border-bottom:.5px solid var(--sep) !important; border-radius:0 !important;
    transition:background-color .12s;
  }
  .leaflet-control-zoom a:last-child{ border-bottom:0 !important; }
  .leaflet-control-zoom a:active{ background:var(--fill) !important; }
  .map-fab{
    position:absolute; right:10px; top:calc(var(--map-top) + 109px); z-index:800;
    width:44px; height:44px; border-radius:12px; border:0; color:var(--accent-ink);
    display:grid; place-items:center;
    box-shadow:0 0 0 .5px var(--sep), 0 4px 16px rgba(70,50,30,.12);
    transition:transform 110ms var(--ease-out);
  }
  .map-fab svg{ width:20px; height:20px; }
  .map-fab:active{ transform:scale(.94); }

  .map-legend{
    position:absolute; left:10px; top:calc(var(--map-top) + 10px); z-index:800;
    border-radius:12px; padding:9px 12px; max-width:calc(100% - 84px);
    font-size:12px; line-height:1.8; color:var(--label);
    box-shadow:0 0 0 .5px var(--sep), 0 4px 16px rgba(70,50,30,.12);
  }
  .map-legend summary{ cursor:pointer; font-weight:600; list-style:none; display:flex; align-items:center; gap:6px; min-height:20px; }
  .map-legend summary::-webkit-details-marker{ display:none; }
  .map-legend summary::after{
    content:""; width:8px; height:8px; margin-left:auto; border-right:1.6px solid var(--label-2); border-bottom:1.6px solid var(--label-2);
    transform:rotate(45deg) translateY(-2px); transition:transform .2s var(--ease-out);
  }
  .map-legend[open] summary::after{ transform:rotate(-135deg) translate(-1px,-1px); }
  .map-legend[open] summary{ margin-bottom:4px; }
  .lg{ display:inline-block; width:22px; height:9px; vertical-align:middle; margin-right:8px; border-radius:2px; }
  .map-credit{
    position:absolute; left:10px; bottom:6px; z-index:400; max-width:calc(100% - 20px);
    font-size:10px; line-height:1.35; color:var(--label-2);
    padding:3px 8px; border-radius:8px;
  }
  .map-fail{ padding:24px; font-size:14px; line-height:1.6; color:var(--label-2); }

  /* Pins */
  .gpin{ width:34px; height:42px; transform-origin:50% 100%; transition:transform .22s var(--ease-out); }
  .gpin svg{ width:34px; height:42px; display:block; }
  .gpin.sel{ transform:scale(1.3); }
  .gpin.hit{ transform:scale(1.55); filter:drop-shadow(0 0 4px var(--glow, #5B86EE)) drop-shadow(0 0 7px var(--glow, #5B86EE)); }   /* matches the search: glows in its own category colour */
  .gpin.hit.sel{ transform:scale(1.7); }
  .gpin.dim{ opacity:.55; transform:scale(.85); }                                        /* other spots while searching */
  .metro-hit{ display:grid; place-items:center; }
  .metro-dot.sel{ transform:scale(1.3); }
  .metro-dot{ transition:transform .2s var(--ease-out); width:18px; height:18px; border-radius:50%; background:#F0625F; color:#fff; font:700 11px/18px Arial,sans-serif; text-align:center; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.35); }
  .metro-label{
    background:var(--material) !important; border:0 !important; border-radius:6px !important;
    color:var(--label) !important; font:600 11px var(--font) !important; padding:1px 6px !important;
    box-shadow:0 0 0 .5px var(--sep) !important; display:block;
  }
  .metro-label::before{ display:none !important; }
  .district-label{
    background:none !important; border:0 !important; box-shadow:none !important;
    font:500 12px var(--font) !important; color:var(--map-label) !important;
    text-shadow:0 0 3px var(--map-halo),0 0 3px var(--map-halo),0 0 3px var(--map-halo);
    text-align:center; white-space:nowrap;
  }
  .district-label::before{ display:none !important; }
  #map.hide-districts .district-label{ display:none; }

  /* Map labels: pins + areas horizontal, roads/rivers along their line */
  .lb{
    position:absolute; left:0; top:0; white-space:nowrap; pointer-events:none;
    font:600 11px/1.2 var(--font); letter-spacing:.005em; color:#5b5249;
    text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff,0 0 5px rgba(255,255,255,.9);
    transition:opacity .15s; animation:lbin .18s ease-out;
  }
  @keyframes lbin{ from{ opacity:0; } to{ opacity:1; } }
  .lb.out{ opacity:0; }
  .lb.pin{ font-size:11.5px; color:#3a332d; }
  .lb.pin.sel{ color:#2f5bcb; }
  .lb.area{ text-align:center; }
  .lb.area .zh{ font-size:10px; font-weight:500; opacity:.85; }
  .lb.area.p{ color:#2f7a4a; }
  .lb.area.w,.lb.road.c4{ color:#3f7396; font-style:italic; }
  .lb.area.s{ color:#6b5f55; }
  .lb.area.a{ color:#7a5b3f; }
  .lb.road.c0,.lb.road.c1{ color:#6a4a00; font-weight:700; }
  .lb.road.c5{ color:#6b6259; font-weight:500; }
  .lg-t{ display:inline-block; width:22px; margin-right:8px; text-align:center; font:700 10px/9px var(--font); color:#5b5249; text-shadow:0 0 2px #fff; vertical-align:middle; }

  /* Popups */
  .leaflet-popup-content-wrapper{
    background:var(--surface) !important; color:var(--label) !important;
    border-radius:16px !important; padding:0 !important; overflow:hidden;      /* clips a photo that runs edge to edge */
    box-shadow:var(--shadow-pop), 0 0 0 .5px var(--sep) !important;
  }
  .leaflet-popup-content{ margin:0 !important; padding:16px 18px 16px; font:14px/1.4 var(--font) !important; }
  .leaflet-popup-tip{ background:var(--surface) !important; box-shadow:none !important; }
  .leaflet-popup-close-button{ display:none !important; }
  .pp-cat{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--label-2); margin-bottom:2px; }
  .pp-cat i{ width:9px; height:9px; border-radius:50%; display:inline-block; box-shadow:inset 0 0 0 1px rgba(60,40,20,.14); }
  .pp-title{ font-size:16px; line-height:1.3; font-weight:600; letter-spacing:-.011em; }
  .pp-zh{ color:var(--label-2); }
  .pp-note{ margin-top:6px; }
  .pp-addr{ margin-top:6px; font-size:13px; color:var(--label-2); }
  .pp-flag{ margin-top:8px; font-size:12.5px; line-height:1.35; color:var(--warn-ink); background:var(--warn-bg); padding:6px 9px; border-radius:9px; }
  .leaflet-popup-content .dir-row{ margin-top:12px; }

  /* ============ Tab bar (phones) ============ */
  .tabbar{
    display:none; position:absolute; z-index:30; left:0; right:0; bottom:0;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    border-top:.5px solid var(--sep);
  }
  .tab{
    flex:1; height:49px; border:0; background:none; color:var(--label-2);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    font-size:10px; font-weight:500; letter-spacing:.01em;
    transition:color .15s;
  }
  .tab svg{ width:25px; height:25px; }
  .tab.active{ color:var(--accent-ink); }
  .tab:active{ opacity:.6; }

  /* ============ Sheets ============ */
  .sheet-backdrop{
    position:fixed; inset:0; z-index:2000;
    display:flex; align-items:flex-end; justify-content:center;
    visibility:hidden; transition:visibility 0s linear .42s;
  }
  .sheet-backdrop::before{
    content:""; position:absolute; inset:0; background:var(--scrim);
    opacity:0; transition:opacity .3s var(--ease-out);
  }
  .sheet-backdrop.open{ visibility:visible; transition-delay:0s; }
  .sheet-backdrop.open::before{ opacity:var(--scrim-o, 1); }
  .sheet-backdrop.dragging::before{ transition:none; }
  .sheet{
    position:relative; width:100%; max-width:520px; max-height:92%;
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--sheet); color:var(--label);
    border-radius:20px 20px 0 0;
    box-shadow:0 -1px 0 var(--sep);
    transform:translateY(100%);
    transition:transform .42s var(--sheet-ease);
    will-change:transform; outline:none;
  }
  .sheet-backdrop.open .sheet{ transform:translateY(0); }
  .sheet.dragging{ transition:none; }
  .sheet-head{ flex:0 0 auto; padding:8px 16px 4px; touch-action:none; cursor:grab; }
  .sheet-grabber{ width:36px; height:5px; border-radius:3px; background:var(--label-3); margin:0 auto 8px; }
  .sheet-nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:40px; }
  .sheet-nav h2{ font-size:17px; font-weight:600; letter-spacing:-.011em; text-align:center; }
  .sheet-nav .nav-btn:last-child{ justify-self:end; }
  .nav-btn{
    border:0; background:none; color:var(--accent-ink); font-size:17px; padding:8px 4px; letter-spacing:-.011em;
    transition:opacity .12s;
  }
  .nav-btn.bold{ font-weight:600; }
  .nav-btn:active{ opacity:.45; }
  .sheet-body{
    flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    padding:6px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .sheet .sub{ margin:0 4px 14px; font-size:13px; line-height:1.45; color:var(--label-2); }
  @media (min-width:600px){
    .sheet-backdrop{ align-items:center; }
    .sheet{ border-radius:20px; max-height:88%; transform:translateY(14px) scale(.97); opacity:0; transition:transform .32s var(--sheet-ease), opacity .22s var(--ease-out); box-shadow:var(--shadow-pop), 0 0 0 .5px var(--sep); }
    .sheet-backdrop.open .sheet{ transform:none; opacity:1; }
    .sheet-grabber{ display:none; }
    .sheet-head{ cursor:default; padding-top:12px; }
  }

  /* Grouped form */
  .form-group{ background:var(--row); border-radius:12px; overflow:hidden; margin-bottom:16px; }
  .field{ position:relative; padding:9px 14px 8px; }
  .form-group > * + *{ border-top:.5px solid var(--sep); }
  .field-row{ display:flex; }
  .field-row .field{ flex:1 1 0; min-width:0; }
  .field-row .field + .field{ border-left:.5px solid var(--sep); }
  .field label{ display:block; font-size:12px; font-weight:500; color:var(--label-2); margin-bottom:1px; transition:color .15s; }
  .field:focus-within label{ color:var(--accent-ink); }
  .field input,.field select,.field textarea{
    width:100%; border:0; background:transparent; color:var(--label);
    font-size:16px; line-height:1.35; padding:2px 0; outline:none; letter-spacing:-.011em;
  }
  .field input,.field textarea{ -webkit-appearance:none; appearance:none; }
  .field input::placeholder,.field textarea::placeholder{ color:var(--label-3); }
  .field textarea{ resize:none; min-height:44px; display:block; }
  .hint{ margin:-8px 4px 16px; font-size:13px; line-height:1.4; color:var(--label-2); }
  .group-label{ margin:18px 4px 7px; font-size:13px; font-weight:400; text-transform:uppercase; letter-spacing:.03em; color:var(--label-2); }
  .group-label:first-child{ margin-top:6px; }

  /* Directions sheet */
  .dir-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .dir-titles{ min-width:0; padding-top:4px; }
  #dir-name{ font-size:20px; line-height:1.25; font-weight:700; letter-spacing:-.02em; }
  .zhname{ font-size:15px; color:var(--label-2); margin-top:1px; }
  .dir-note{ font-size:13px; line-height:1.5; color:var(--label-2); margin:0 4px; }
  .dir-note.warn{ color:var(--warn-ink); background:var(--warn-bg); margin:16px 0 0; padding:9px 12px; border-radius:10px; }
  .seg{ display:flex; padding:2px; background:var(--fill); border-radius:9px; }
  .seg button{
    flex:1; height:32px; border:0; border-radius:7px; background:transparent;
    font-size:13px; font-weight:500; color:var(--label);
    transition:background-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  }
  .seg button.on{ background:var(--seg-on); font-weight:600; box-shadow:0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
  .app-links{ background:var(--row); border-radius:12px; overflow:hidden; }
  .app-links a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 16px; color:var(--accent-ink); font-size:16px; letter-spacing:-.011em; text-decoration:none;
    transition:background-color .12s;
  }
  .app-links a + a{ border-top:.5px solid var(--sep); }
  .app-links a::after{
    content:""; flex:0 0 auto; width:8px; height:14px; background:var(--label-3);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .app-links a:active{ background:var(--fill); }
  .app-links a[hidden]{ display:none; }

  /* ============ Responsive ============ */
  @media (max-width:860px){
    :root{ --map-top:var(--hdr-h); }
    #list-pane{ flex:1 1 auto; max-width:none; border-right:0; }
    main.show-list #map-pane{ display:none; }
    main.show-map #list-pane{ display:none; }
    #list-pane,#map-pane{ display:block; }
    #app.map-view .title-row{ display:none; }
    .tabbar{ display:flex; }
    .map-credit{ bottom:calc(var(--tab-h) + 6px); }
    .leaflet-control-zoom{ display:none; }            /* pinch to zoom on touch */
    #app.map-view .mat{ background:rgba(251,249,246,.94); -webkit-backdrop-filter:none; backdrop-filter:none; }
    .map-fab{ top:calc(var(--map-top) + 10px); }
    .title-row h1{ font-size:24px; }
  }
  @media (min-width:861px){
    header{ right:auto; width:400px; border-right:.5px solid var(--sep); }
    #list-pane,#map-pane{ display:block !important; }
  }
  @media (prefers-contrast: more){
    :root{ --sep:rgba(60,60,67,.5); }
    .mat,.leaflet-control-zoom,.map-legend,.map-fab,.map-credit{ background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .sheet{ transform:none !important; opacity:0; transition:opacity .2s !important; }
    .sheet-backdrop.open .sheet{ opacity:1; }
    .gpin,.chip,.icon-btn,.dir-btn,.map-fab,.seg button{ transition:none !important; }
  }

  /* ============ Offline status + toasts ============ */
  .title-right{ display:flex; align-items:center; gap:10px; }
  .offline-btn{
    position:relative; width:30px; height:30px; border-radius:50%; border:0; padding:0;
    background:var(--fill); color:var(--label-2); display:grid; place-items:center;
    transition:background-color .25s var(--ease-out), color .25s var(--ease-out), transform 110ms var(--ease-out);
  }
  .offline-btn::after{ content:""; position:absolute; inset:-8px; }            /* bigger tap target */
  .offline-btn svg{ width:19px; height:19px; }
  .offline-btn .tick{ display:none; }
  .offline-btn[data-state="ready"]{ background:#BFEBCB; color:#2A7444; }
  .offline-btn[data-state="ready"] .tick{ display:inline; }
  .offline-btn[data-state="downloading"] svg{ animation:ocpulse 1.4s ease-in-out infinite; }
  .offline-btn[data-state="unsupported"]{ opacity:.5; }
  .offline-btn:active{ transform:scale(.92); }
  @keyframes ocpulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
  .toast{
    position:fixed; left:50%; bottom:calc(var(--tab-h) + 14px); z-index:1500;
    width:max-content; max-width:min(92vw, 420px); display:flex; align-items:center; gap:10px;
    padding:10px 10px 10px 16px; border-radius:16px; background:var(--surface);
    box-shadow:var(--shadow-pop), 0 0 0 .5px var(--sep);
    font-size:14px; line-height:1.35; color:var(--label);
    transform:translate(-50%, 14px); opacity:0; visibility:hidden;
    transition:transform .38s var(--sheet-ease), opacity .2s var(--ease-out), visibility 0s linear .38s;
  }
  .toast.show{ transform:translate(-50%, 0); opacity:1; visibility:visible; transition-delay:0s; }
  .toast-msg{ flex:1 1 auto; min-width:0; }
  .toast-btn{ flex:0 0 auto; height:30px; padding:0 13px; border:0; border-radius:15px; background:var(--accent-soft); color:var(--accent-ink); font-size:13.5px; font-weight:600; }
  .toast-x{ flex:0 0 auto; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--label-2); font-size:20px; line-height:1; }
  .toast-btn:active,.toast-x:active{ opacity:.6; }
  @media (prefers-reduced-motion: reduce){ .offline-btn[data-state="downloading"] svg{ animation:none; } .toast{ transition:opacity .2s; transform:translate(-50%,0); } }



  /* ============ Add a find: location, local-only marker, pick-on-map ============ */
  .loc-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 2px; }
  .loc-readout{ margin-top:8px; font-size:13.5px; color:var(--label-2); font-variant-numeric:tabular-nums; }
  .loc-readout.ok{ color:#2A7444; }
  .loc-readout.err{ color:var(--warn-ink); }
  .loc-manual summary{ cursor:pointer; font-size:14px; color:var(--accent-ink); list-style:none; padding:2px 0; }
  .loc-manual summary::-webkit-details-marker{ display:none; }
  .loc-manual[open] summary{ margin-bottom:8px; }
  .local-tag{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; padding:7px 10px; border-radius:10px; background:var(--accent-tint); font-size:12.5px; color:var(--accent-ink); }
  .local-tag b{ font-weight:600; }
  .local-tag button{ height:26px; padding:0 11px; border:0; border-radius:13px; background:var(--accent-soft); color:var(--accent-ink); font-size:12.5px; font-weight:600; }
  .local-tag button.plain{ background:transparent; color:var(--label-2); font-weight:500; }
  .local-tag button:active{ opacity:.6; }
  .pickbar{
    position:absolute; left:50%; bottom:calc(var(--tab-h) + 44px); z-index:900; transform:translateX(-50%);
    display:flex; align-items:center; gap:10px; width:max-content; max-width:calc(100% - 20px);
    padding:10px 10px 10px 16px; border-radius:18px; background:var(--surface);
    box-shadow:var(--shadow-pop), 0 0 0 .5px var(--sep);
  }
  .pk-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
  .pk-text b{ font-size:14px; font-weight:600; letter-spacing:-.005em; }
  .pk-text span{ font-size:12.5px; line-height:1.3; color:var(--label-2); font-variant-numeric:tabular-nums; }
  .pickbar button{ flex:0 0 auto; height:32px; padding:0 14px; border:0; border-radius:16px; background:var(--fill); color:var(--label); font-size:13.5px; font-weight:600; }
  .pickbar button.ok{ background:var(--accent); color:#fff; }
  .pickbar button:active{ opacity:.6; }
  #map.picking, #map.picking .leaflet-interactive, #map.picking .leaflet-grab{ cursor:crosshair !important; }


  /* ============ Where am I ============ */
  #locate-btn{ top:calc(var(--map-top) + 163px); }
  #locate-btn[data-state="on"]{ background:var(--accent); color:#fff; }
  #locate-btn[data-state="on"] svg{ fill:currentColor; }
  #locate-btn[data-state="locating"] svg{ animation:ocpulse 1.2s ease-in-out infinite; }
  @media (max-width:860px){ #locate-btn{ top:calc(var(--map-top) + 64px); } }
  .me-icon{ pointer-events:none; }
  .me-dot{ position:relative; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.35); display:grid; place-items:center; }
  .me-dot i{ width:14px; height:14px; border-radius:50%; background:#3B82F6; display:block; }
  .me-dot::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(59,130,246,.5); animation:mepulse 2.2s ease-out infinite; }
  @keyframes mepulse{ from{ transform:scale(.6); opacity:.9; } to{ transform:scale(1.5); opacity:0; } }
  .me-tag{ position:absolute; left:28px; top:2px; padding:1px 7px; border-radius:8px; background:var(--accent); color:#fff; font:600 10.5px/1.5 var(--font); }
  .dist{ margin-top:4px; font-size:12.5px; font-weight:600; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
  .pp-dist{ margin-top:6px; font-size:13px; font-weight:600; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
  .chip-near svg{ width:14px; height:14px; fill:none; }
  .chip-near.active svg{ fill:currentColor; }
  @media (prefers-reduced-motion: reduce){ .me-dot::after{ animation:none; opacity:.5; } #locate-btn[data-state="locating"] svg{ animation:none; } }


  /* ============ Pick on map / hold to add: a hovering, glowing pin ============ */
  .pk-icon{ pointer-events:auto; cursor:grab !important; }
  .pk-icon:active{ cursor:grabbing !important; }
  .pk{ position:relative; width:44px; height:60px; }
  .pk-ground{ position:absolute; left:50%; top:54px; width:22px; height:8px; margin:-4px 0 0 -11px; border-radius:50%; background:rgba(60,40,20,.30); filter:blur(1.5px); transition:transform .25s var(--ease-out), opacity .25s; }
  .pk-glow{ position:absolute; left:50%; top:54px; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:radial-gradient(circle, rgba(91,134,238,.7), rgba(91,134,238,0) 70%); animation:pkglow 2.4s ease-in-out infinite; transition:opacity .2s; }
  @keyframes pkglow{ 0%,100%{ transform:scale(1); opacity:.95; } 50%{ transform:scale(3); opacity:.3; } }
  /* the pin (and the bubble above it) float together, drifting about 3px: "in flight, can be moved" */
  .pk-float{ position:absolute; left:0; top:0; width:44px; height:60px; transform-origin:50% 54px; animation:pkbob 2.4s ease-in-out infinite; will-change:transform; }
  @keyframes pkbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
  .pk-pin{ position:absolute; left:5px; top:6px; width:34px; height:42px; filter:drop-shadow(0 0 7px rgba(91,134,238,.75)); }
  /* held: lifts and the ground shadow shrinks; drop: a springy hop when it is placed or moved */
  .pk.lift .pk-float{ animation:none; transform:translateY(-14px) scale(1.06); transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
  .pk.lift .pk-ground{ transform:scale(.65); opacity:.55; }
  .pk.drop .pk-float{ animation:pkdrop .5s cubic-bezier(.34,1.56,.64,1), pkbob 2.4s ease-in-out .5s infinite; }
  @keyframes pkdrop{ 0%{ transform:translateY(-22px) scale(.92); opacity:.4; } 100%{ transform:translateY(0) scale(1); opacity:1; } }
  /* the "Add spot" bubble grows out of the pin (origin = the pin), and leaves the same way */
  .pk-callout{ position:absolute; left:50%; bottom:58px; transform:translateX(-50%); transform-origin:50% 100%; animation:pkcall .5s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes pkcall{ from{ transform:translateX(-50%) scale(.5); opacity:0; } to{ transform:translateX(-50%) scale(1); opacity:1; } }
  .pk-add{
    position:relative; display:block; min-height:40px; padding:0 20px; border:0; border-radius:20px; white-space:nowrap;
    background:var(--surface); color:var(--accent-ink); font:600 15px var(--font); letter-spacing:-.011em;
    box-shadow:var(--shadow-pop), 0 0 0 .5px var(--sep);
  }
  .pk-add::after{ content:""; position:absolute; left:50%; bottom:-5px; width:12px; height:12px; background:var(--surface); transform:translateX(-50%) rotate(45deg); border-radius:0 0 3px 0; }
  .pk-add:active{ opacity:.6; }
  .pk.out .pk-float{ animation:pkout .18s ease-in forwards; }
  .pk.out .pk-glow, .pk.out .pk-ground{ opacity:0; }
  @keyframes pkout{ to{ opacity:0; transform:translateY(4px) scale(.8); } }
  #map.picking .leaflet-marker-icon:not(.pk-icon), #map.picking .leaflet-tooltip{ pointer-events:none !important; }   /* taps go to the map, not to other pins */
  @media (prefers-reduced-motion: reduce){
    .pk-float, .pk-glow, .pk.drop .pk-float{ animation:none; }
    .pk-callout{ animation:pkfade .2s both; }
    @keyframes pkfade{ from{ opacity:0; } to{ opacity:1; } }
  }

  /* Long-press / drag on the map must never select or highlight anything (iOS paints the whole map blue) */
  #map, #map *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  #map .leaflet-popup-content, #map .leaflet-popup-content *{ -webkit-user-select:text; user-select:text; }

  /* ============ Photos ============ */
  .pc-cover{
    display:block; position:relative; width:100%; aspect-ratio:16/9; margin:0 0 9px; padding:0; border:0; border-radius:12px; overflow:hidden;
    background:var(--fill); box-shadow:0 0 0 .5px var(--sep);
    transition:transform 160ms var(--ease-out), opacity 160ms;
  }
  .pc-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pc-cover:active{ transform:scale(.985); opacity:.9; }
  .pc-cover .pc-n{
    position:absolute; right:8px; bottom:8px; min-width:22px; height:22px; padding:0 7px; border-radius:11px;
    display:grid; place-items:center; font-size:12px; font-weight:600; color:#fff; background:rgba(40,30,22,.55);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .pp-cover{ margin:-16px -18px 10px; width:calc(100% + 36px); aspect-ratio:16/9; border-radius:16px 16px 0 0; box-shadow:none; }
  .leaflet-popup-content .pp-cover{ border-radius:16px 16px 0 0; }
  .dir-btn.ph-btn{ display:inline-flex; align-items:center; gap:5px; }
  .dir-btn.ph-btn svg{ width:17px; height:17px; }
  .dir-btn.ph-btn.icon{ width:34px; padding:0; justify-content:center; }
  .ph-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
  .ph-tile{
    position:relative; aspect-ratio:1; border:0; padding:0; border-radius:10px; overflow:hidden; background:var(--fill);
    transition:transform 160ms var(--ease-out), opacity 160ms;
  }
  .ph-tile:active{ transform:scale(.96); opacity:.85; }
  .ph-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
  .ph-tile .ph-cover-pill{
    position:absolute; left:6px; bottom:6px; padding:3px 7px; border-radius:8px; font-size:11px; font-weight:600; line-height:1;
    color:#fff; background:rgba(40,30,22,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .ph-add{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:var(--accent-soft); color:var(--accent-ink); font-size:13px; font-weight:600;
  }
  .ph-add svg{ width:26px; height:26px; }
  .ph-note{ margin:14px 4px 0 !important; }
  .ph-busy{ opacity:.55; pointer-events:none; }

  .ph-menu-backdrop{
    position:fixed; inset:0; z-index:2300; display:flex; align-items:flex-end; justify-content:center;
    padding:0 8px calc(8px + env(safe-area-inset-bottom, 0px));
    visibility:hidden; transition:visibility 0s linear .32s;
  }
  .ph-menu-backdrop::before{ content:""; position:absolute; inset:0; background:var(--scrim); opacity:0; transition:opacity .25s var(--ease-out); }
  .ph-menu-backdrop.open{ visibility:visible; transition-delay:0s; }
  .ph-menu-backdrop.open::before{ opacity:1; }
  .ph-menu{ position:relative; width:100%; max-width:420px; display:grid; gap:8px; transform:translateY(calc(100% + 24px)); transition:transform .38s var(--sheet-ease); }
  .ph-menu-backdrop.open .ph-menu{ transform:none; }
  .ph-menu-group{ background:var(--sheet); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-pop); }
  .ph-menu button{
    display:block; width:100%; border:0; background:transparent; color:var(--accent-ink); font-size:19px; letter-spacing:-.015em; padding:17px 16px;
    transition:background-color .12s;
  }
  .ph-menu-group button + button{ box-shadow:0 -.5px 0 var(--sep); }
  .ph-menu button:active{ background:var(--fill); }
  .ph-menu button.destructive{ color:#D6453D; }
  .ph-menu-cancel{ background:var(--sheet) !important; border-radius:14px; font-weight:600 !important; box-shadow:var(--shadow-pop); }
  .ph-menu small{ display:block; font-size:13px; color:var(--label-2); margin-bottom:2px; }

  .ph-viewer{
    position:fixed; inset:0; z-index:2200; background:#16100C; color:#fff;
    display:flex; flex-direction:column; visibility:hidden; opacity:0;
    transition:opacity .25s var(--ease-out), visibility 0s linear .25s;
  }
  .ph-viewer.open{ visibility:visible; opacity:1; transition-delay:0s; }
  .ph-v-top,.ph-v-bottom{
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
    padding:calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  }
  .ph-v-bottom{ padding:8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ph-v-count{ font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
  .ph-v-spacer{ min-width:64px; }
  .ph-v-btn{
    min-width:44px; height:44px; padding:0 14px; border:0; border-radius:22px; background:rgba(255,255,255,.14); color:#fff;
    font-size:16px; font-weight:600; display:inline-grid; place-items:center;
    transition:transform 110ms var(--ease-out), opacity 110ms;
  }
  .ph-v-btn:active{ transform:scale(.94); opacity:.75; }
  .ph-v-btn.danger{ color:#FF8A80; padding:0; width:44px; }
  .ph-v-btn svg{ width:22px; height:22px; }
  .ph-v-btn[hidden]{ display:none; }
  .ph-v-track{
    flex:1 1 auto; min-height:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-width:none;
  }
  .ph-v-track::-webkit-scrollbar{ display:none; }
  .ph-v-slide{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; display:grid; place-items:center; padding:0 6px; min-width:0; }
  .ph-v-slide img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
  @media (prefers-reduced-motion: reduce){ .ph-menu{ transition:opacity .2s; transform:none; opacity:0; } .ph-menu-backdrop.open .ph-menu{ opacity:1; } }

  /* ============ Sync ============ */
  .sync-btn{ position:relative; }
  .sync-btn svg{ width:18px; height:18px; }
  .sync-btn[data-state~="ok"]{ background:#BFEBCB; color:#2A7444; }
  .sync-btn[data-state~="busy"] svg{ animation:syncspin 1.1s linear infinite; }
  .sync-btn[data-state~="pending"]{ background:var(--accent-soft); color:var(--accent-ink); }
  .sync-btn[data-state~="error"]{ background:#FFD9D2; color:#B23A2E; }
  .sync-btn[data-state~="off"]{ color:var(--label-2); }
  .sync-btn[data-state~="off"][data-state~="pending"]::before{
    content:""; position:absolute; top:-1px; right:-1px; width:10px; height:10px; border-radius:50%; background:#F0883E; box-shadow:0 0 0 2px var(--bg);
  }
  @keyframes syncspin{ to{ transform:rotate(360deg); } }
  .sync-status{ display:grid; gap:2px; margin:4px 0 8px; padding:12px 14px; border-radius:12px; background:var(--row); }
  .sync-status b{ font-size:17px; font-weight:600; letter-spacing:-.011em; }
  .sync-status span{ font-size:13.5px; line-height:1.45; color:var(--label-2); }
  .sync-status[data-state="ok"] b{ color:#2A7444; }
  .sync-status[data-state="error"] b{ color:#B23A2E; }
  .field input.secret{ -webkit-text-security:disc; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:15px; }
  .sync-msg{ min-height:20px; margin:-6px 4px 10px; font-size:13.5px; line-height:1.4; color:var(--label-2); }
  .sync-actions{ display:flex; gap:10px; }
  .sync-actions .dir-btn{ flex:1; }
  .dir-btn.big{ height:44px; border-radius:22px; font-size:16px; }
  .sync-hint{ margin:16px 4px 0; }
  .sync-remove{ display:block; margin:14px auto 0; padding:10px 14px; border:0; background:none; color:#C0473E; font-size:15px; }
  .sync-remove:active{ opacity:.5; }
  .sync-remove[hidden], .sync-actions [hidden]{ display:none; }
  .local-tag .lt-why{ flex:1 1 100%; font-size:12.5px; color:var(--label-2); }
  .local-tag.warn{ background:var(--warn-bg); color:var(--warn-ink); }
  .local-tag.warn button{ background:rgba(138,83,0,.12); color:var(--warn-ink); }
  .local-tag.warn button.plain{ background:transparent; }
  @media (prefers-reduced-motion: reduce){ .sync-btn[data-state~="busy"] svg{ animation:none; } }

  /* the header holds a title, a count and two round buttons: tighten it on narrow phones */
  .title-row h1 span{ white-space:nowrap; }
  @media (max-width:400px){
    .title-row h1 span{ font-size:13px; margin-left:6px; }
    .title-right{ gap:8px; }
    .count-pill{ font-size:12px; }
  }

  /* ============ Guide switcher ============ */
  .title-row h1.has-switch{ display:flex; align-items:baseline; cursor:pointer; -webkit-user-select:none; user-select:none; border-radius:10px; transition:opacity .15s; }
  .title-row h1.has-switch:active{ opacity:.55; }
  .title-row h1 .gs-chev{ display:inline-grid; place-items:center; align-self:center; width:20px; height:20px; margin-left:4px; border-radius:50%; background:var(--fill); color:var(--label-2); }
  .title-row h1 .gs-chev svg{ width:9px; height:9px; }
  .title-row h1{ white-space:nowrap; flex:0 1 auto; min-width:0; }
  @media (max-width:400px){
    .title-row h1.has-switch{ font-size:22px; }
    .title-row h1.has-switch span{ font-size:12px; margin-left:5px; }
    .title-row h1 .gs-chev{ width:18px; height:18px; margin-left:3px; }
  }
  @media (max-width:400px){
    .title-row{ gap:6px; }
    .title-row h1.has-switch ~ .title-right, .title-right{ gap:6px; }
    .title-right .count-pill{ font-size:11.5px; }
  }
  @media (max-width:389px){                                    /* iPhone SE / mini widths */
    .title-row h1{ font-size:23px; }
    .title-row h1.has-switch{ font-size:21px; }
    .title-right .offline-btn{ width:28px; height:28px; }
  }

  /* Links and suggestions from links (top of the list) */
  .link-row{ display:flex; align-items:center; gap:10px; margin:-6px 4px 14px; }
  .link-msg{ font-size:13px; color:var(--warn-ink); }
  .sugg-sec .district-group + .district-group{ margin-top:12px; }
  .sugg-src{ padding:10px 14px 2px; font-size:12.5px; line-height:1.4; color:var(--label-2); overflow-wrap:anywhere; }
  .sugg-src a{ color:var(--accent-ink); text-decoration:none; font-weight:600; }
  .sugg-card{ position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; padding:12px 14px 12px 12px; }
  .sugg-card + .sugg-card::before{ content:""; position:absolute; top:0; left:60px; right:0; height:.5px; background:var(--sep); }
  .sugg-card h3{ font-size:16px; line-height:1.3; font-weight:600; letter-spacing:-.011em; }
  .sugg-card .zh{ font-size:14px; color:var(--label-2); margin-top:1px; }
  .sugg-card .note{ font-size:14px; line-height:1.4; margin-top:4px; }
  .sugg-card .addr{ font-size:13px; line-height:1.4; color:var(--label-2); margin-top:4px; }
  .sugg-card .flag{ display:flex; gap:5px; align-items:flex-start; font-size:12.5px; line-height:1.35; color:var(--warn-ink); background:var(--warn-bg); margin-top:8px; padding:6px 9px; border-radius:9px; }
  .sugg-card .flag svg{ width:14px; height:14px; flex:0 0 auto; margin-top:1px; }
  .link-item{ padding:10px 14px; }
  .link-item + .link-item{ border-top:.5px solid var(--sep); }
  .lk-host{ font-size:14px; font-weight:600; overflow-wrap:anywhere; }
  .link-item .local-tag{ margin-top:6px; }
  .sugg-more{ margin:10px 20px 0; font-size:13px; color:var(--label-2); }

  /* ============ Plan (itinerary) ============ */
  #plan-pane{
    display:none; position:relative; z-index:1;
    flex:0 0 400px; max-width:400px; height:100%;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:var(--bg); padding:0 16px calc(var(--tab-h) + 28px);
    border-right:.5px solid var(--sep);
  }
  #plan-pane::before{ content:""; display:block; height:var(--hdr-h); }
  main.show-plan #plan-pane{ display:block !important; }
  main.show-plan #list-pane{ display:none !important; }
  #app.plan-view .search-row, #app.plan-view .chip-row{ display:none; }
  .plan-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:16px 4px 12px; }
  .plan-head h2{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
  .plan-head p{ font-size:13px; color:var(--label-2); margin-top:2px; }
  .plan-day{ background:var(--row); border-radius:14px; margin-bottom:16px; overflow:hidden; }
  .plan-day-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; width:100%; padding:13px 14px 12px; cursor:pointer; border:0; background:none; text-align:left; color:inherit; font:inherit; }
  .plan-day.open .plan-day-head{ border-bottom:.5px solid var(--sep); }
  .plan-day-head:active{ background:var(--fill); }
  .plan-day-main{ min-width:0; flex:1 1 auto; }
  .plan-peek{ display:flex; align-items:center; gap:7px; margin-top:5px; font-size:13px; line-height:1.35; color:var(--label-2); }
  .plan-dots{ display:inline-flex; flex:0 0 auto; }
  .plan-peek-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .plan-day:not(.open) .plan-state{ margin:-6px 14px 12px; }
  .plan-dots i{ width:9px; height:9px; border-radius:50%; margin-right:-2px; box-shadow:0 0 0 1.5px var(--row); }
  .plan-span{ display:flex; align-items:center; gap:6px; }
  .plan-chev{ width:11px; height:11px; transition:transform .2s var(--ease-out); }
  .plan-day.open .plan-chev{ transform:rotate(180deg); }
  .plan-day-foot{ display:flex; align-items:center; border-top:.5px solid var(--sep); }
  .plan-day-foot .plan-add{ border-top:0; flex:1 1 auto; width:auto; }
  .plan-foot-btn{ border:0; background:none; padding:12px 12px; font-size:14px; font-weight:500; color:var(--accent-ink); white-space:nowrap; }
  .plan-foot-btn.plan-rm{ color:#c0392b; padding-right:14px; }
  .plan-date{ font-size:13px; font-weight:600; color:var(--accent-ink); text-transform:uppercase; letter-spacing:.03em; }
  .plan-title{ font-size:17px; font-weight:600; letter-spacing:-.011em; margin-top:2px; }
  .plan-span{ font-size:13px; color:var(--label-2); white-space:nowrap; padding-top:1px; font-variant-numeric:tabular-nums; }
  .plan-state{ display:block; margin:8px 14px 0; font-size:12.5px; color:var(--accent-ink); }
  .plan-state.warn{ color:var(--warn-ink); }
  .plan-stops{ list-style:none; margin:0; padding:6px 0 2px; }
  .plan-stops li{ display:flex; gap:10px; padding:0 14px; }
  .plan-stops .pt{ flex:0 0 46px; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; padding-top:9px; }
  .plan-stops .pt small{ display:block; font-size:12px; font-weight:500; color:var(--label-2); }
  .plan-start .pt, .plan-start .pn{ padding:8px 0; }
  .plan-start .pn{ font-size:14px; color:var(--label-2); }
  .plan-move{ font-size:12.5px; color:var(--label-2); padding:2px 14px 2px 70px !important; flex-wrap:wrap; column-gap:8px; }
  .plan-move::before{ content:""; width:2px; height:16px; background:var(--sep); margin:0 6px 0 -16px; align-self:center; }
  .plan-wait{ color:#2a7444; } .plan-late{ color:var(--warn-ink); font-weight:600; }
  .plan-stop{ cursor:pointer; padding-top:2px !important; padding-bottom:8px !important; }
  .plan-stop:active{ background:var(--fill); }
  .plan-grip{ flex:0 0 32px; align-self:stretch; display:flex; align-items:center; justify-content:center; margin-right:-8px; color:var(--label-3); touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  .plan-grip svg{ width:10px; height:17px; }
  .plan-stops.reordering .plan-move{ display:none; }
  .plan-stops.reordering{ -webkit-user-select:none; user-select:none; }
  .plan-stops.reordering .plan-stop:not(.drag){ transition:none; }
  .plan-stop.drag{ position:relative; z-index:5; background:var(--row); border-radius:12px; box-shadow:0 10px 28px rgba(60,40,20,.22); cursor:grabbing; }
  .plan-stop.drag .plan-grip{ color:var(--accent-ink); cursor:grabbing; }
  .plan-dot{ flex:0 0 30px; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-top:6px; }
  .plan-dot svg{ width:18px; height:18px; }
  .plan-stops .pn{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; padding-top:6px; }
  .plan-kind{ font-size:12px; color:var(--label-2); }
  .plan-stops .pn b{ font-size:15.5px; font-weight:600; line-height:1.3; letter-spacing:-.011em; }
  .plan-stops .zh{ font-size:13px; color:var(--label-2); }
  .plan-order{ font-size:13.5px; line-height:1.35; margin-top:4px; padding:5px 8px; border-radius:8px; background:var(--accent-soft); color:var(--accent-ink); align-self:flex-start; }
  .plan-note{ font-size:13px; line-height:1.35; color:var(--label-2); margin-top:4px; }
  .plan-acts{ display:flex; gap:12px; margin-top:4px; }
  .plan-acts button{ border:0; background:none; padding:2px 0; font-size:13px; font-weight:600; color:var(--accent-ink); }
  .plan-acts .plan-rm{ color:#c0392b; font-weight:500; margin-left:auto; }
  .plan-add{ display:block; width:100%; border:0; border-top:.5px solid var(--sep); background:none; padding:12px 14px; text-align:left; font-size:15px; font-weight:600; color:var(--accent-ink); }
  .plan-add:active{ background:var(--fill); }
  .stop-moves{ display:flex; gap:8px; margin:0 0 16px; }
  .danger-btn{ display:block; width:100%; border:0; border-radius:12px; background:var(--row); color:#c0392b; font-size:16px; font-weight:500; padding:12px; margin-bottom:24px; }
  @media (max-width:860px){
    #plan-pane{ flex:1 1 auto; max-width:none; border-right:0; }
    main.show-plan #map-pane{ display:none !important; }
  }
  @media (min-width:861px){
    .tabbar{ display:flex; right:auto; width:400px; border-right:.5px solid var(--sep); }
  }

  /* place picker (Plan: leaving from / stop place) */
  .pick-list{ margin:8px -14px -8px; max-height:260px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border-top:.5px solid var(--sep); background:var(--row); }
  .pick-row{ display:grid; grid-template-columns:12px 1fr; column-gap:10px; align-items:center; width:100%; border:0; background:none; text-align:left; padding:9px 14px; border-bottom:.5px solid var(--sep); color:var(--label); }
  .pick-row:active{ background:var(--fill); }
  .pick-row i{ grid-row:1 / span 2; width:10px; height:10px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(60,40,20,.14); }
  .pick-row.typed{ grid-template-columns:1fr; }
  .pick-row.typed .pick-name{ color:var(--accent-ink); }
  .pick-name{ font-size:15px; font-weight:500; line-height:1.3; }
  .pick-sub{ font-size:12.5px; color:var(--label-2); line-height:1.3; }
  .pick-empty{ padding:12px 14px; font-size:14px; color:var(--label-2); }

  /* moving whole days */
  .plan-day-head .day-grip{ flex:0 0 22px; align-self:center; margin:0 0 0 -6px; padding:6px 0; }
  .reordering-days .plan-stops, .reordering-days .plan-day-foot, .reordering-days .plan-state{ display:none; }
  .reordering-days .plan-day.open .plan-day-head{ border-bottom:0; }
  .reordering-days{ -webkit-user-select:none; user-select:none; }
  .plan-day.drag{ position:relative; z-index:5; box-shadow:0 10px 28px rgba(60,40,20,.22); }
  .plan-day.drag .day-grip{ color:var(--accent-ink); }

  /* suggestions under the search box */
  .search-suggest{ position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px); max-height:min(330px, 55vh); overflow-y:auto; overscroll-behavior:contain;
    background:var(--row); border-radius:12px; box-shadow:0 10px 30px rgba(60,40,20,.18), 0 0 0 .5px var(--sep); }
  .search-suggest .pick-row:last-child{ border-bottom:0; }

  /* directions: starting point picker */
  .dir-from-field input{ width:100%; }
  .dir-from-field input::placeholder{ color:var(--accent-ink); opacity:1; }