:root{
    --bg:#0e1116; --panel:#161b22; --panel2:#1e242d; --line:#2a313b;
    --fg:#e6e9ee; --muted:#98a2b3; --accent:#4d9de0; --accent2:#f0a35e;
    --ok:#5cb87a; --vid:#a78bfa;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
            background:var(--bg);color:var(--fg)}
  #app{display:flex;height:100%;overflow:hidden;position:relative}
  /* ---------- sidebar ---------- */
  /* The sections add up to more than any window is tall -- roughly 1440px --
     so the panel scrolls. Without this the trip stats, the delete button, the
     storage meter and the log sit below the fold with no way to reach them:
     overflow:hidden still scrolls programmatically, so the content was there,
     just unreachable by wheel or scrollbar. */
  #side{width:320px;flex:0 0 320px;background:var(--panel);border-right:1px solid var(--line);
        display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
  #side h1{font-size:16px;margin:0;padding:16px 16px 12px;letter-spacing:.3px;
           border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
  #side h1 span{font-size:11px;color:var(--muted);font-weight:400}
  .sec{padding:14px 16px;border-bottom:1px solid var(--line)}
  .sec h2{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);
          margin:0 0 10px}
  #drop{border:1.5px dashed var(--line);border-radius:10px;padding:18px 12px;text-align:center;
        color:var(--muted);cursor:pointer;transition:.15s;font-size:13px}
  #drop:hover,#drop.hot{border-color:var(--accent);color:var(--fg);background:var(--panel2)}
  #drop b{color:var(--accent)}
  input[type=file]{display:none}
  .row{display:flex;gap:8px;align-items:center}
  button{font:inherit;background:var(--panel2);color:var(--fg);border:1px solid var(--line);
         border-radius:8px;padding:7px 12px;cursor:pointer}
  button:hover:not(:disabled){border-color:var(--accent)}
  button:disabled{opacity:.45;cursor:default}
  button.primary{background:var(--accent);border-color:var(--accent);color:#05121f;font-weight:600}
  .seg{display:flex;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
       overflow:hidden;width:100%}
  .seg button{flex:1;border:0;border-radius:0;background:transparent;padding:8px 0;font-size:13px}
  .seg button.on{background:var(--accent);color:#05121f;font-weight:600}
  label.chk{display:flex;gap:8px;align-items:center;color:var(--muted);margin-top:10px;font-size:13px;
            cursor:pointer}
  /* ---------- server folders ---------- */
  input[type=text]{flex:1;min-width:0;background:var(--panel2);color:var(--fg);
       border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:12.5px}
  input[type=text]:focus{outline:none;border-color:var(--accent)}
  .sec h2 .tag{float:right;text-transform:none;letter-spacing:0;font-size:10px;
       background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
  #folderList{margin-top:10px;display:flex;flex-direction:column;gap:6px}
  .folder{display:flex;align-items:center;gap:6px;background:var(--panel2);
       border:1px solid var(--line);border-radius:8px;padding:6px 7px 6px 9px}
  .folder .f-main{flex:1;min-width:0}
  .folder .f-path{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .folder .f-path b{font-weight:600}
  .folder .f-meta{font-size:10.5px;color:var(--muted);margin-top:1px}
  .folder .f-meta b{color:var(--ok);font-weight:600}
  .folder .f-act{padding:2px 7px;font-size:12px;line-height:1.3;border-radius:6px;
       background:transparent;color:var(--muted)}
  .folder .f-act:hover:not(:disabled){color:var(--fg)}
  .fnote{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.4}
  #scanProg{margin-top:10px;font-size:11.5px;color:var(--muted)}
  #scanProg .bar{height:5px;background:var(--panel2);border:1px solid var(--line);
       border-radius:999px;overflow:hidden;margin-bottom:4px}
  #scanProg .bar i{display:block;height:100%;width:0;background:var(--accent);
       transition:width .3s ease}
  .legend{display:flex;gap:14px;margin-top:12px;font-size:11.5px;color:var(--muted)}
  .legend span{display:flex;align-items:center;gap:6px}
  .legend i{width:10px;height:10px;display:block;border:2px solid #fff;
            box-shadow:0 0 0 1px rgba(0,0,0,.4)}
  .legend .lg-photo{background:var(--accent);border-radius:50%}
  .legend .lg-video{background:var(--vid);border-radius:2px}
  #stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .stat{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
  .stat .v{font-size:17px;font-weight:600}
  .stat .k{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
  /* The log flows with the panel rather than scrolling inside it: a scroll
     region nested in a scroll region traps the wheel. It still grows to fill
     the bottom when the panel is taller than its content. Scan output is
     bounded (eight skipped names, five errors, then a count), so letting it
     flow cannot run away. */
  #log{padding:10px 16px;font-size:12px;color:var(--muted);flex:1 0 auto;min-height:60px;
       white-space:pre-wrap;overflow-wrap:anywhere}
  #log .warn{color:var(--accent2)}
  #log .ok{color:var(--ok)}
  .danger{color:#e07070;font-size:12px;background:none;border:0;padding:4px 0;cursor:pointer;
          text-decoration:underline}
  /* ---------- control panel toggle ---------- */
  /* A drawer handle riding the panel's edge: one element in both states, so
     hiding the panel moves the control rather than replacing it with a
     different one somewhere else. Vertically centred to stay out of Leaflet's
     zoom control at the top; the photo card is shifted right to match, since
     on a short window its top edge reaches the middle of the left edge. */
  #panelToggle{position:absolute;top:50%;left:320px;transform:translateY(-50%);
       z-index:700;width:22px;height:58px;padding:0;font-size:15px;line-height:1;
       color:var(--muted);background:var(--panel);border:1px solid var(--line);
       border-left:0;border-radius:0 8px 8px 0}
  #panelToggle:hover:not(:disabled){color:var(--fg);border-color:var(--accent)}
  /* Give the handle the left edge outright. In the stacked layout the map
     starts below the panel, which puts Leaflet's zoom control level with a
     vertically centred handle -- close enough to swallow the click. */
  .leaflet-top.leaflet-left{margin-left:26px}
  #app.panel-hidden #side{display:none}
  #app.panel-hidden #panelToggle{left:0;border-left:1px solid var(--line)}
  /* ---------- map ---------- */
  #main{flex:1;display:flex;flex-direction:column;min-width:0}
  #map{flex:1}
  #bar{background:var(--panel);border-top:1px solid var(--line);padding:10px 16px;
       display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  #bar .when{font-variant-numeric:tabular-nums;font-size:13px;min-width:172px;color:var(--fg)}
  input[type=range]{flex:1;min-width:140px;accent-color:var(--accent)}
  select{background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:8px;
         padding:6px 8px;font:inherit}
  .pill{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
        padding:3px 10px;font-size:12px;color:var(--muted)}
  .leaflet-popup-content{margin:8px 10px;font:13px system-ui}
  .leaflet-popup-content img{display:block;max-width:230px;border-radius:6px;margin-bottom:6px}
  .leaflet-popup-content .m{color:#555;font-size:11.5px}
  .marker-dot{background:var(--accent);border:2px solid #fff;border-radius:50%;
              box-shadow:0 0 0 1px rgba(0,0,0,.4)}
  .marker-head{background:var(--accent2);border:3px solid #fff;border-radius:50%;
               box-shadow:0 0 12px 3px rgba(240,163,94,.55)}
  /* ---------- video markers: squared off, with a play glyph ---------- */
  .marker-vid{background:var(--vid);border:2px solid #fff;border-radius:3px;
              box-shadow:0 0 0 1px rgba(0,0,0,.45);position:relative}
  .marker-vid i, .marker-head.vid i, .pin-vid i{position:absolute;left:50%;top:50%;
      transform:translate(-50%,-50%);width:0;height:0;
      border-left:4px solid #fff;border-top:3px solid transparent;
      border-bottom:3px solid transparent;margin-left:1px}
  .marker-head.vid{background:var(--vid);border-radius:4px;
                   box-shadow:0 0 12px 3px rgba(167,139,250,.6);position:relative}
  .marker-head.vid i{border-left-width:6px;border-top-width:4px;
                     border-bottom-width:4px}
  .pin-vid{position:relative}
  .pin-vid svg{width:26px;height:34px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
  .pin-vid svg path{fill:var(--vid);stroke:#fff;stroke-width:1.5}
  .pin-vid i{top:13px;border-left-width:6px;border-top-width:4px;border-bottom-width:4px}
  /* play/duration badge, shared by tooltip and card */
  .vbadge{position:absolute;left:7px;bottom:7px;display:inline-flex;align-items:center;
          gap:4px;background:rgba(10,13,18,.82);border:1px solid rgba(255,255,255,.22);
          color:#fff;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;
          font-variant-numeric:tabular-nums;backdrop-filter:blur(2px)}
  .leaflet-popup-content .pop-video{display:block;width:290px;max-width:100%;
      border-radius:6px;margin-bottom:6px;background:#000}
  .leaflet-popup-content .kind{display:inline-block;background:var(--vid);color:#fff;
      font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;
      margin-right:5px;vertical-align:2px}
  /* ---------- hover tooltip (photo + time) ---------- */
  .leaflet-tooltip.photo-tip{background:rgba(16,20,26,.96);border:1px solid #39424f;
      border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,.55);padding:0;color:var(--fg);
      overflow:hidden;width:212px;white-space:normal}
  .leaflet-tooltip.photo-tip:before{border-top-color:#39424f}
  .photo-tip .tip-i{position:relative}
  .photo-tip .tip img{display:block;width:212px;height:142px;object-fit:cover;background:#0b0e13}
  .photo-tip .tip .noimg{width:212px;height:74px;display:flex;align-items:center;
      justify-content:center;color:var(--muted);font-size:12px;background:#0b0e13}
  .photo-tip .tip-b{padding:7px 9px 8px}
  .photo-tip .tip-c{font-size:10.5px;color:var(--vid);margin-top:3px;font-weight:600}
  .photo-tip .tip-t{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
  .photo-tip .tip-t i{font-weight:400;color:var(--accent2)}
  .photo-tip .tip-m{font-size:11px;color:var(--muted);margin-top:2px}

  /* ---------- now-showing photo card ---------- */
  /* left:40px, not 14px: the panel handle is pinned to the middle of the left
     edge, and on a short window the card's top reaches it. */
  #card{position:absolute;left:40px;bottom:14px;z-index:600;margin:0;width:250px;
        background:rgba(16,20,26,.95);border:1px solid #39424f;border-radius:12px;
        box-shadow:0 12px 34px rgba(0,0,0,.55);overflow:hidden;
        opacity:0;transform:translateY(8px);pointer-events:none;cursor:pointer;
        transition:opacity .18s ease, transform .18s ease, border-color .18s}
  #card.on{pointer-events:auto}
  #card:hover{border-color:var(--accent)}
  #card .card-media{position:relative}
  #card.on{opacity:1;transform:none}
  #card.playing{border-color:var(--accent2)}
  #card img{display:block;width:250px;height:168px;object-fit:cover;background:#0b0e13}
  #card figcaption{padding:9px 11px 11px}
  #card .card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  #card .badge{background:var(--accent);color:#05121f;font-size:10.5px;font-weight:700;
               letter-spacing:.4px;padding:2px 8px;border-radius:999px;text-transform:uppercase}
  #card .step{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  #card .card-date{font-size:13px;font-weight:600}
  #card .card-time{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;
                   color:var(--accent2);line-height:1.2}
  #card .card-meta{font-size:11px;color:var(--muted);margin-top:3px;
                   font-variant-numeric:tabular-nums}
  #card .card-name{font-size:11px;color:#6f7b8c;margin-top:1px;overflow:hidden;
                   text-overflow:ellipsis;white-space:nowrap}
  @media (max-width:820px){ #card{width:176px} #card img{width:176px;height:112px}
                            #card .card-time{font-size:16px} }

  /* Handed back to the timeline: only on screen while the user owns the
     camera, centred at the top where neither the zoom control nor the photo
     card reaches. */
  #followBack{position:absolute;top:12px;left:50%;transform:translateX(-50%);
       z-index:650;background:var(--panel);border:1px solid var(--accent);
       color:var(--fg);border-radius:999px;padding:7px 14px;font-size:12.5px;
       box-shadow:0 4px 14px rgba(0,0,0,.45)}
  #followBack:hover:not(:disabled){background:var(--accent);color:#05121f}
  #followBack[hidden]{display:none}

  #empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
         pointer-events:none;color:#8b97a8;font-size:15px;text-align:center;z-index:400}
  @media (max-width:820px){
    #app{flex-direction:column}
    #side{width:100%;flex:0 0 auto;max-height:46%;border-right:0;border-bottom:1px solid var(--line)}
    /* Stacked layout: the panel sits above the map, not beside it, so the
       handle has no vertical edge to ride. Park it on the left in both states. */
    #panelToggle{left:0;border-left:1px solid var(--line)}
  }

  /* ---------- local folders / trips (client-side build) ---------- */
  #tripList{margin-top:10px;display:flex;flex-direction:column;gap:6px}
  .trip{display:flex;align-items:center;gap:6px;background:var(--panel2);
       border:1px solid var(--line);border-radius:8px;padding:6px 7px 6px 9px}
  .trip.on{border-color:var(--accent)}
  .trip .t-main{flex:1;min-width:0;cursor:pointer}
  .trip .t-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;
       white-space:nowrap;font-weight:600}
  .trip .t-meta{font-size:10.5px;color:var(--muted);margin-top:1px}
  .trip .t-meta b{color:var(--ok);font-weight:600}
  .trip .t-meta .stale{color:var(--accent2)}
  .trip .t-act{padding:2px 7px;font-size:12px;line-height:1.3;border-radius:6px;
       background:transparent;color:var(--muted);border:0;cursor:pointer}
  .trip .t-act:hover:not(:disabled){color:var(--fg)}
  .trip input.t-check{margin:0 2px 0 0;accent-color:var(--accent)}
  #quota{margin-top:10px;font-size:11px;color:var(--muted)}
  #quota .bar{height:4px;background:var(--panel2);border:1px solid var(--line);
       border-radius:999px;overflow:hidden;margin-bottom:3px}
  #quota .bar i{display:block;height:100%;width:0;background:var(--ok);
       transition:width .3s ease}
  #quota.warn .bar i{background:var(--accent2)}
  .privacy{font-size:11px;color:#6f7b8c;line-height:1.45;margin-top:9px;
       border-top:1px solid var(--line);padding-top:9px}
  .privacy b{color:var(--ok);font-weight:600}

  /* ---------- gallery view ---------- */
  #gallery{flex:1;overflow:auto;background:var(--bg);display:none;
           flex-direction:column}
  #gallery.on{display:flex}
  #galHead{display:flex;gap:24px;align-items:flex-start;
           padding:22px 26px 18px;border-bottom:1px solid var(--line);
           background:linear-gradient(180deg,#151a22,var(--bg))}
  /* The side column (minimap + button) is taller than the heading block, so
     the hint is pushed to the bottom rather than leaving a dead band. */
  #galHeadMain{flex:1;min-width:0;display:flex;flex-direction:column;
               align-self:stretch}
  #galEditHint{margin-top:auto}
  #galHeadSide{flex:0 0 250px;display:flex;flex-direction:column;gap:10px}
  #galTitle{display:block;width:100%;background:transparent;
            border:1px solid transparent;border-radius:8px;color:var(--fg);
            font:800 30px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
            padding:4px 8px;margin:0 0 6px -8px}
  #galTitle:hover{border-color:var(--line)}
  #galTitle:focus{outline:none;border-color:var(--accent);background:var(--panel2)}
  #galTitle::placeholder{color:#4d5866}
  #galSub{font:600 13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
          color:var(--accent2)}
  #galSub2{font-size:12px;color:var(--muted);margin-top:2px}
  #galEditHint{font-size:11px;color:#5d6875;padding-top:8px}
  #galMini{width:250px;background:var(--panel2);border:1px solid var(--line);
           border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45)}
  #galMini canvas{display:block;width:250px;height:128px}
  #galMiniLabel{padding:6px 9px 7px;border-top:1px solid var(--line);
                background:var(--panel)}
  #galMiniLabel .mm-coord{display:block;color:#c9d3e0;
       font:600 11.5px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace}
  #galMiniLabel .mm-sub{display:block;color:var(--muted);
       font:400 10.5px/1.35 system-ui,-apple-system,sans-serif;margin-top:1px}
  #galMiniLabel b{color:var(--muted);font-weight:400}
  #galGrid{display:grid;gap:16px;padding:20px 26px 8px;
           grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
  .gcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;
         overflow:hidden;position:relative;transition:border-color .15s,transform .15s}
  .gcard:hover{border-color:var(--accent);transform:translateY(-2px)}
  .gcard.cur{border-color:var(--accent2)}
  .gcard .g-media{position:relative;display:block;width:100%;aspect-ratio:3/2;
                  background:#0b0e13;cursor:zoom-in;border:0;padding:0}
  .gcard .g-media img{width:100%;height:100%;object-fit:cover;display:block}
  .gcard .g-noimg{position:absolute;inset:0;display:flex;align-items:center;
                  justify-content:center;color:var(--muted);font-size:11.5px}
  .gcard .g-tag{position:absolute;left:7px;bottom:7px;
       font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;
       background:rgba(10,13,18,.82);border:1px solid rgba(255,255,255,.2);
       border-radius:5px;padding:4px 6px;backdrop-filter:blur(2px)}
  .gcard .g-seq{position:absolute;left:7px;top:7px;font:700 10px/1 system-ui;
       color:#05121f;background:var(--accent);border-radius:999px;padding:3px 7px}
  .gcard .g-acts{position:absolute;right:7px;top:7px;display:flex;gap:5px;
       opacity:0;transition:opacity .15s}
  .gcard:hover .g-acts,.gcard .g-acts:focus-within{opacity:1}
  .gcard .g-dl,.gcard .g-del{cursor:pointer;background:rgba(10,13,18,.86);
       color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:6px;
       padding:3px 7px;font:600 11px/1.3 system-ui}
  .gcard .g-dl:hover{background:var(--accent);color:#05121f;border-color:var(--accent)}
  .gcard .g-del:hover{background:#e07070;color:#180a0a;border-color:#e07070}
  .gcard .g-dl.busy{background:var(--accent2);color:#05121f}
  #galEditHint kbd{font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
       background:var(--panel2);border:1px solid var(--line);border-radius:4px;
       padding:2px 5px;color:#c9d3e0}
  .gcard .g-body{padding:8px 10px 10px}
  .gcard .g-cap{width:100%;background:transparent;border:1px solid transparent;
       border-radius:6px;color:var(--fg);font:600 13px/1.35 inherit;padding:3px 5px;
       margin:0 0 4px -5px}
  .gcard .g-cap:hover{border-color:var(--line)}
  .gcard .g-cap:focus{outline:none;border-color:var(--accent);background:var(--panel2)}
  .gcard .g-cap::placeholder{color:#5d6875;font-weight:400}
  .gcard .g-when{font:600 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
       color:var(--accent2);font-variant-numeric:tabular-nums}
  .gcard .g-meta{font-size:10.5px;color:var(--muted);margin-top:2px;
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gcard .g-vbadge{position:absolute;right:7px;bottom:7px;
       font:700 10px/1 system-ui;color:#0b0e13;background:var(--vid);
       border-radius:999px;padding:3px 7px}
  #galMore{padding:14px 26px 30px;color:var(--muted);font-size:12px}
  #galMore button{width:100%}
  #galEmpty{padding:60px 26px;text-align:center;color:#8b97a8;font-size:14px}
  @media (max-width:900px){
    #galHead{flex-direction:column;gap:14px}
    #galTitle{font-size:24px}
    #galHeadSide{flex:1 1 auto;width:100%}
    #galMini,#galMini canvas{width:100%}
  }

  /* ---------- lightbox: preview expands into the original ---------- */
  /* The flight animates left/top on the frame and width/height on the media
     box. object-fit:cover then uncrops the picture continuously as the box
     morphs from the preview's crop to the photo's own aspect ratio. */
  #lb{position:fixed;inset:0;z-index:2000}
  #lb[hidden]{display:none}
  #lbBack{position:absolute;inset:0;background:rgba(6,9,13,.88);
          backdrop-filter:blur(7px);opacity:0;transition:opacity .3s ease}
  #lb.open #lbBack{opacity:1}

  #lbFrame{position:fixed;margin:0;display:flex;flex-direction:column;gap:12px;
           pointer-events:none}
  #lbFrame.flying{transition:left .42s cubic-bezier(.22,1,.36,1),
                             top .42s cubic-bezier(.22,1,.36,1)}
  #lbMedia{position:relative;overflow:hidden;border-radius:12px;background:#0b0e13;
           box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1);
           pointer-events:auto;cursor:zoom-out;will-change:width,height}
  #lbFrame.flying #lbMedia{transition:width .42s cubic-bezier(.22,1,.36,1),
                                      height .42s cubic-bezier(.22,1,.36,1)}
  #lbThumb,#lbFull{position:absolute;inset:0;width:100%;height:100%;
                   object-fit:cover;display:block}
  #lbFull{opacity:0;transition:opacity .35s ease}
  #lbVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
           background:#000;display:none;pointer-events:auto;cursor:default}

  /* Overlays hold off until the frame lands, so nothing rides along mid-flight */
  #lbSeq,#lbTag,#lbDur{position:absolute;opacity:0;transition:opacity .2s ease .06s;
       font-variant-numeric:tabular-nums;pointer-events:none}
  #lbFrame.landed #lbSeq,#lbFrame.landed #lbTag,#lbFrame.landed #lbDur{opacity:1}
  #lbSeq{left:12px;top:12px;font:700 11.5px/1 system-ui;color:#05121f;
         background:var(--accent);border-radius:999px;padding:5px 10px}
  #lbTag{left:12px;bottom:12px;
         font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;
         background:rgba(10,13,18,.82);border:1px solid rgba(255,255,255,.22);
         border-radius:6px;padding:6px 9px;backdrop-filter:blur(2px)}
  #lbDur{right:12px;bottom:12px;display:inline-flex;font:700 11.5px/1 system-ui;
         color:#0b0e13;background:var(--vid);border-radius:999px;padding:5px 10px}
  #lbSpin{position:absolute;right:12px;top:12px;width:18px;height:18px;
          border-radius:50%;opacity:0;transition:opacity .2s}
  #lbSpin.on{opacity:1;border:2px solid rgba(255,255,255,.28);
             border-top-color:#fff;animation:lbspin .8s linear infinite}
  @keyframes lbspin{to{transform:rotate(360deg)}}

  #lbInfo{opacity:0;transform:translateY(10px);min-height:132px;
          transition:opacity .26s ease .08s,transform .26s ease .08s;
          pointer-events:auto}
  #lbFrame.landed #lbInfo{opacity:1;transform:none}
  #lbCap{font:700 21px/1.25 system-ui,-apple-system,sans-serif;color:var(--fg);
         margin-bottom:5px}
  #lbWhen{font:600 17px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;
          color:var(--accent2);font-variant-numeric:tabular-nums}
  #lbWhen .lb-est{font-size:13px;color:var(--muted);font-weight:400}
  #lbSub{font-size:12.5px;color:#c9d3e0;margin-top:4px}
  #lbCam{font-size:12.5px;color:var(--muted);margin-top:3px}
  #lbName{font-size:11.5px;color:#6f7b8c;margin-top:2px;word-break:break-all}
  #lbName .lb-warn{color:var(--accent2)}

  #lbClose,#lbPrev,#lbNext{position:fixed;z-index:2;border-radius:999px;
       background:rgba(20,26,34,.82);color:var(--fg);
       border:1px solid rgba(255,255,255,.18);cursor:pointer;opacity:0;
       transition:opacity .25s ease .1s,background .15s,border-color .15s;
       backdrop-filter:blur(4px)}
  #lb.open #lbClose,#lb.open #lbPrev,#lb.open #lbNext{opacity:1}
  #lbClose:hover,#lbPrev:hover:not(:disabled),#lbNext:hover:not(:disabled){
       background:var(--accent);color:#05121f;border-color:var(--accent)}
  #lbClose{top:18px;right:20px;width:38px;height:38px;font:400 17px/1 system-ui}
  #lbPrev,#lbNext{top:50%;margin-top:-24px;width:46px;height:48px;
       font:300 26px/1 system-ui}
  #lbPrev{left:14px} #lbNext{right:14px}
  #lbPrev:disabled,#lbNext:disabled{opacity:.22;cursor:default}

  @media (max-width:720px){
    #lbClose{top:10px;right:10px}
    #lbPrev{left:6px} #lbNext{right:6px}
    #lbCap{font-size:17px} #lbWhen{font-size:15px}
  }
  @media (prefers-reduced-motion:reduce){
    #lbFrame.flying,#lbFrame.flying #lbMedia{transition:none}
    #lbBack,#lbInfo,#lbFull,#lbSeq,#lbTag,#lbDur,
    #lbClose,#lbPrev,#lbNext{transition:none}
    #lbSpin.on{animation:none}
  }

  /* An inferred (borrowed) position is visually distinct from a real fix */
  .gcard .g-tag.guess,#lbTag.guess{border-color:rgba(240,163,94,.6);
       color:#ffd9b0;background:rgba(52,34,16,.85)}
  .gcard .g-tag.nogeo{border-color:rgba(255,255,255,.14);color:#8b97a8;
       background:rgba(10,13,18,.7)}
  #galMiniLabel .mm-coord.guess{color:var(--accent2)}

  /* ---------- dark map tiles ---------- */
  /* Same filter chain minimap.js reproduces per-pixel for the canvas, so the
     live map, the minimap and the exported PNG all agree. */
  #map.dark-tiles .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg)
                                            brightness(.9)}
  #map.dark-tiles{background:#0d1117}
  #map.dark-tiles .leaflet-control-attribution{background:rgba(16,20,26,.82);
       color:var(--muted);border:1px solid var(--line);border-radius:4px 0 0 0}
  #map.dark-tiles .leaflet-control-attribution a{color:var(--accent)}
  #map.dark-tiles .leaflet-control-zoom a{background:var(--panel2);
       color:var(--fg);border-color:var(--line)}
  #map.dark-tiles .leaflet-control-zoom a:hover{background:var(--panel)}

  /* ---------- thumbnail markers ---------- */
  .marker-thumb{border:2px solid #fff;border-radius:5px;overflow:visible;
       background:#0b0e13;box-shadow:0 2px 8px rgba(0,0,0,.55),
       0 0 0 1px rgba(0,0,0,.35);position:relative}
  .marker-thumb img{display:block;width:100%;height:100%;object-fit:cover;
       border-radius:3px}
  .marker-thumb .noimg{display:flex;align-items:center;justify-content:center;
       width:100%;height:100%;color:var(--muted);font-size:12px}
  .marker-thumb.vid{border-color:var(--vid)}
  .marker-thumb .n{position:absolute;right:-7px;top:-7px;background:var(--accent);
       color:#05121f;border-radius:999px;font:700 9.5px/1 system-ui;
       padding:3px 5px;border:1.5px solid var(--bg);
       box-shadow:0 1px 4px rgba(0,0,0,.5)}
  .marker-thumb:hover{border-color:var(--accent);z-index:500}
  .photo-tip .tip-n{font-size:10.5px;color:var(--accent);margin-top:3px;
       font-weight:600}